週刊Webテク通信

2013年7月第5週号1位は、インフォグラフィックスをつくるべき理由と作成ツール、気になるネタは、Google、テレビのHDMI端子に挿すChromecastを発表

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

1. Four Major Reasons to Create Your Own Infographic | iBrandStudiohttp://ibrandstudio.com/articles/infographic-data-visualization-benefits

インフォグラフィックスをつくるべき理由と、作成ツールを紹介した記事です。

インフォグラフィックスの良さは、以下の4つに分けて解説されています。

  1. リンクによる流入を得るためのコンテンツとなる
  2. 図表的で面白いフォーマットで紹介できる
  3. ユーザーに認知される
  4. 新しいクライアントを集める材料となる

1.で説明されている、TwitterやFacebookで拡散されていき、自分のサイトへのトラフィックを生むということが、やはりインフォグラフィックスに期待されることでしょう。

図1 インフォグラフィックスをつくるべき理由と作成ツール
図1 インフォグラフィックスをつくるべき理由と作成ツール

2. Avoiding Design Failures: Skeuomorphism and Flat Designhttp://www.kylejlarson.com/blog/2013/avoiding-design-failures-skeuomorphism-and-flat-design/

スキュアモーフィズムとフラットデザインについて、デザインのミスを回避するという視点からまとめた記事です。

  • スキュアモーフィズムは諸刃の剣である
  • フラットデザインの人気の上昇
  • 失敗しないためにはデザインの原則を用いること

といった項目に分けて解説されています。

例として、iOSのGame Centerアプリの凝ったスキュアモーフィズムデザインは問題ないけれど、メモアプリの過剰な装飾や手書き風フォントは、素早くメモを取りたいという目的には出しゃばりすぎているということが挙げられていました。

図2 スキュアモーフィズムとフラットデザインについて
図2 スキュアモーフィズムとフラットデザインについて

3. 日本ではこれから?!流行のフラットデザイン国内事例17個+α / SQUEEZE - Web Design Studio -#1. A source of backlinkshttp://squeeze.jp/blog/web-design/flat-design-in-japan/

フラットデザインが用いられた国内サイトをあつめたギャラリーです。

最後に別枠でマイクロソフトのページも紹介されていますが、海外サイトのローカライズ以外でもフラットデザインのサイトが増えてきているようですね。

図3 フラットデザインのサイトの国内事例
図3 フラットデザインのサイトの国内事例

4. Web Design Trend Showcase: Big Video Headershttp://line25.com/articles/web-design-trend-showcase-big-video-headers

大きなサイズのビデオが使われたサイトのギャラリーとテクニック紹介です。

背景に動画を使うためのチュートリアルやjQueryプラグインも多数掲載されています。

図4 大きなサイズのビデオが使われたサイトのギャラリー&テクニック
図4 大きなサイズのビデオが使われたサイトのギャラリー&テクニック

5. 25 Awesome Examples of Art-Inspired Websiteshttp://www.webdesignfact.com/2013/07/examples-of-art-inspired-websites.html

アートから刺激を受けたWebデザインのギャラリーです。

絵画風のイラストなど、アート風の要素を取り入れたサイトが多数紹介されていました。

図5 アートから刺激を受けたWebデザインのギャラリー
図5 アートから刺激を受けたWebデザインのギャラリー

そのほか、最近の記事の中から、日本の有名サイトに関するニュースを2つ紹介します。

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

JavascriptOO.comhttp://www.javascriptoo.com/

JavaScriptのライブラリを探せるサービスです。

Animation、CSS、Mobileといったカテゴリを選んで探すことができ、複数のカテゴリで絞り込んでいくことができます。

絞り込んだライブラリは、新着順、ツイート数の多い順、Githubのウォッチ数の多い順などでソートができ、各ライブラリには詳細ページがあります。

詳細ページではサンプルコードとデモを確認でき、Githubから引っ張ってきていると思われるReadMeを読むこともできます。サンプルは実行結果を見ることができ、コードをいじって確認することも可能です。

図6 JavaScriptライブラリを探せるサービス
図6 JavaScriptライブラリを探せるサービス

おすすめ記事

記事・ニュース一覧