週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

ネットで見かけた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のプロダクトのアイコンを探せるサービス

今週の気になるWebネタ

アップル,プロ向けデスクトップの未来形,新デザインの「Mac Pro」発表http://bcnranking.jp/news/1306/130611_25629.html

Appleの開発者イベント「WWDC 2013」の目玉はiOS 7だったわけですが,新デザインのMac Proの登場もインパクトがありました。Mac Proは久しぶりのアップデートですが,Appleの新デザインのパソコン自体久しぶりの登場でした。

黒い円筒形のボディが登場するとともに,ideacoのゴミ箱に似ているという声が上がり,Amazonのその商品へのリンクがネットで拡散されていました。その後,あの筒の上部に何か入りそうということで,ご飯やお鍋などを入れてみたコラージュ画像を作る人が続出して,盛り上がっていたようです。

違った方向で盛り上がってしまったようですが,なんにせよそれだけ話題になるということは,さすがAppleということなのでしょう。ちなみにMac Pro登場の翌日には,ソニー・コンピューターエンタテインメントから「プレイステーション4」がお披露目されました。こちらも黒いボディなのですが,上から見ると平行四辺形になっているようです。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入