gihyo.jpサイトのロゴ

週刊Webテク通信

2013年6月第3週号1位は、フラットデザインに関する調査結果をまとめた記事、気になるネタは、アップル、プロ向けデスクトップの未来形、新デザインの「Mac Pro」発表

2013-06-20

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

1. Flat Web Design Is Here To Stay - The Usabilla Bloghttp://blog.usabilla.com/flat-web-design-is-here-to-stay/

100人のWebのプロフェッショナルたちを対象に行った、フラットデザインに関する調査結果をまとめた記事です。結論としては、フラットデザインは定着しているとのこと。全てのレポートをまとめたPDFファイルもダウンロードできます。

  • フラットデザインをどう思うか
  • フラットデザインで連想する5つの言葉
  • フラットデザインの5つの利点
  • フラットデザインの5つの欠点

などのアンケート結果が掲載されています。

また、フラットデザインのサイト4つをピックアップし、それぞれのサイトに関するコメントがまとめられていて、とても興味深いです。

図1　フラットデザインに関する調査結果をまとめた記事
図1　フラットデザインに関する調査結果をまとめた記事

2. 30 Free Flat UI Kits for Web Designers | Splashnology.comhttp://www.splashnology.com/article/30-free-flat-ui-kits-for-web-designers/9347/

フラットデザインのUIキットが30個も紹介されています。

基本的には立体感を持たせないフラットデザインで、ボタンやスライダーなどをどうデザインしているのか参考になりそうです。

図2　フラットデザインのUIキットを多数紹介
図2　フラットデザインのUIキットを多数紹介

3. Popular Design Trends for Responsive Navigation | Vandelay Design Bloghttp://vandelaydesign.com/blog/design/responsive-navigation/

レスポンシブなナビゲーションのトレンドを解説した記事です。

以下のパターンに分けて説明しています。

  • ブロック状に並ぶリンク
  • 縮小されるナビゲーション
  • セレクトメニューに変わるリンク
  • ドロップダウンでメニューが現れるツールバー
  • スライドして現れるナビゲーションボックス
図3　レスポンシブなナビゲーションをパターン別に紹介
図3　レスポンシブなナビゲーションをパターン別に紹介

4. Creative Button Styles | Codropshttp://tympanus.net/codrops/2013/06/13/creative-button-styles/

CSSによるボタンスタイルが多数紹介されたチュートリアル記事です。

フラットデザインで、CSSによるシンプルなアニメーション効果が付いています。

図4　CSSによるボタンスタイルいろいろ
図4　CSSによるボタンスタイルいろいろ

5. 15 Must Follow Design Pinners on Pinterest | Enfuzedhttp://enfuzed.com/15-must-follow-design-pinners-on-pinterest/

Pinterestでデザイン関連のボードを作っている、おすすめユーザーのリストです。Pinterestでこれらのユーザーやボードをフォローしておけば、インスピレーションを刺激する画像をどんどん見つけられると思います。

画像の元をたどればDribbbleやBehanceというパターンが多いのですが、まとめて見られるPinterestに集約してチェックするのがおすすめです。

図5　デザイン関係のPinterestおすすめユーザーのリスト
図5　デザイン関係のPinterestおすすめユーザーのリスト

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

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

Google Product Iconshttp://www.carlosjeurissen.com/google-icons/index.html

Googleのプロダクトのアイコンをまとめて見られるサービスです。Googleがホストしているアイコン画像を、一覧や検索して探せるようにしたものです。

それぞれのアイコンは、複数サイズ用意されています。自分のサイトなどでアイコンを使う場合、画像のURLをそのまま使っていいとのことです。画像の入っている「https://ssl.gstatic.com/images/icons/product/」はGoogleが管理しているサーバーでした。

このサービスの作者による説明は、以下のGoogle+の投稿にあります。

図6　Googleのプロダクトのアイコンを探せるサービス
図6　Googleのプロダクトのアイコンを探せるサービス

おすすめ記事

記事・ニュース一覧