週刊Webテク通信

2013年7月第3週号1位は、レスポンシブWebデザインに関するインフォグラフィックス、気になるネタは、Googleグループに残る「非公開のつもり」メーリングリスト 公開範囲設定に注意を

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2013年7月8日~7月14日の間に見つけた記事のベスト5です。

1. 5 Infographics to Know More About Responsive Web Design | Best PSD to HTMLhttp://www.bestpsdtohtml.com/5-infographics-to-know-more-about-responsive-web-design/

レスポンシブWebデザインについての、インフォグラフィックスを5つ紹介しています。

1つ目の、⁠レスポンシブWebデザインの10の基礎的なテクニック」には、以下の項目が紹介されていました。

  1. レイアウトをシンプルに保つ
  2. メディアクエリを使う
  3. ブレイクポイントを決める
  4. レイアウトをフレキシブルに
  5. 画像を制御する
  6. 最大・最小サイズを忘れない
  7. ほとんどのものを相対サイズで扱う
  8. モバイルの時は直線的に配置する
  9. 必須ではないコンテンツは外す
  10. Viewportをチェックする
図1 レスポンシブWebデザインに関するインフォグラフィックス
図1 レスポンシブWebデザインに関するインフォグラフィックス

2. What Should You Know About Flat Design | OmahPSDhttp://omahpsd.com/2013/07/flat-web-design/

フラットデザインとは何かを解説した記事です。

以下の項目に分けて説明しています。

  1. グラデーション、ハイライト、シャドウを使わない、輝きを加えない
  2. 鮮やかな色を使う
  3. タイポグラフィを中心にデザインする
  4. ボックスを多用する
  5. シンプルな形を使う

また、利点として、シンプルで好かれやすいこと、モバイルサイトやレスポンシブサイトとの相性がいいこと、コンテンツに集中されやすいことが挙げられていました。

図2 フラットデザインについての解説
図2 フラットデザインについての解説

3. 10 Online Tools to Create Better Site | Dzinepresshttp://www.dzinepress.com/2013/07/10-online-tools-to-create-better-site/

サイト制作に役立つ、オンラインツールを10個紹介しています。

インスピレーションを得るのに役立ったり、色やフォントを決めるのに便利なツールなど、制作の前段階に利用できるツールが多い印象です。

図3 サイト制作に役立つオンラインツールいろいろ
図3 サイト制作に役立つオンラインツールいろいろ

4. 20 Free Web Browser Templates in PSD Formathttp://designrshub.com/2013/07/free-web-browser-templates-psd.html

ダウンロードできる、Webブラウザの枠のPSD素材のリンク集です。

ブラウザの中にWebページが表示されているイメージ画像を合成して作るのために、役立つ素材が大量に紹介されています。

ブラウザのフォームで使われるUIエレメントが用意されているものや、グリッドが引かれているものもありました。

図4 Webブラウザの画像素材のリンク集
図4 Webブラウザの画像素材のリンク集

5. Web Design Showcase: Heavy Background Textureshttp://line25.com/articles/web-designs-showcase-heavy-background-textures

凝ったテクスチャの背景画像を使ったWebデザインのギャラリーです。

木材、皮革、コンクリート風などのテクスチャが使われています。

図5 テクスチャ画像を背景に使ったWebデザインのギャラリー
図5 テクスチャ画像を背景に使ったWebデザインのギャラリー

そのほか、最近の記事の中から、気になる記事を紹介します。

先週の気になるWebサービス

SNS ICON MAKER | STICK ICE WORLD:世界初!?氷でできたWEBサイト:AGF スティックhttp://stick-ice-world.com/maker/

SNS ICON MAKERは、AGFの商品PRのための企画サイトの中にあるサービスで、あなたのアイコン画像を「ヒンヤリICE化」するというものです。

TwitterかFacebookで認証すると、アイコン画像やプロフィール画像を凍ったように加工することができます。また、3Mバイト以下の任意の画像をアップロードしてICE化することも可能です。

なお、このサイトは「氷でできたWEBサイト」というコンセプトで作られており、メイキングムービーでは実際に氷でサイトを作っている様子が紹介されていました。

図6 アイコン画像を凍ったように加工するサービス
図6 アイコン画像を凍ったように加工するサービス

おすすめ記事

記事・ニュース一覧