週刊Webテク通信

2014年8月第1週号1位は、ハンバーガーアイコンとそれに対する論争について、気になるネタは、Google+の「写真」単体サービスになるかもしれない

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

1. The Hamburger Icon And The Controversy Around Ithttp://www.designyourway.net/blog/inspiration/the-hamburger-icon-and-the-controversy-around-it/

ハンバーガーアイコンとそれに対する論争についてまとめています。

以前も取り上げましたが、ハンバーガーアイコンとは三本線のアイコンで、非表示になっていたメニューを表示するためのメニューボタンとして使われることが多いものです。

スマートフォンアプリなど、スペースが限られた場合にメニューを開閉する手法が便利ということで使われるようになったのですが、この記事での指摘のように、このアイコンがネットユーザー全てには認知されていないのと、違った用途で使われることもあることなど問題も少なくありません。そのへんからデザイナーの間で論争になっているというわけですね。

また、Googleなどが使っている、四角形がグリッド状に並んだアイコンなど、ハンバーガー型以外のアイコンが使われることもあります。

さらに、ハンバーガーアイコンでメニューを開閉するというUI自体が使われないケースも増えてきて、Facebookのモバイルアプリでも左上のハンバーガーメニューが廃止され下部にボタンバーが並ぶオーソドックスなスタイルに変わりました。

はっきり「MENU」などと文字が書かれたボタンを使用したほうがユーザーに理解されやすいということから、文字を入れた方がいいという結論になっていました。実際、ハンバーガーアイコン+文字というケースを最近見かけることが多いように感じます。

図1 ハンバーガーアイコンとそれに対する論争について
図1 ハンバーガーアイコンとそれに対する論争について

2. The secrets of the Guardian's responsive redesign | Web design | Creative Bloqhttp://www.creativebloq.com/netmag/guardian-redesign-71412518

「Guardian」というニュースサイトを、レスポンシブなデザインにリニューアルしたことについてまとめた記事です。

まだリニューアルは完了していないようですが、ベータ版へのリンクが記事中にあります。

情報量の多いニュースサイトが、どのように情報を整理してレスポンシブ化を進めていったのかの記述や実際のリニューアル後のサイトデザインが、とても参考になりそうです。

図2 ニュースサイトをレスポンシブにリニューアルしたレポート
図2 ニュースサイトをレスポンシブにリニューアルしたレポート

3. Our favourite design tools at UNITiD interaction designershttp://unitid.nl/english/our-favourite-tools-at-unitid-interaction-designers-2014/

デザイナーのための、デザインツールや業務に役立つツールをまとめています。

グラフィックツールはもちろん、モバイルアプリのプロトタイプを作るものや、Macで作ったデザインをiOSで表示チェックするツールなども紹介されていました。

どういったツールかに加え、いい点と悪い点が簡潔に解説してあり参考になります。

図3 デザイナーのためのツールを多数紹介
図3 デザイナーのためのツールを多数紹介

4. Top Resources That Should Be In A Designer’s Toolboxhttp://www.onextrapixel.com/2014/07/31/top-resources-that-should-be-in-a-designers-toolbox/

Webデザインに利用できるツールの数々を紹介した記事です。これらのツールがあればデザイナーになれるよ、といった切り口のまとめですね。

Webサイトのビルダーツール、WordPressのテーマ、ホスティングサービス、デザイン素材やフォント、アイコンの配布サイトなどが紹介されていました。

図4 Webデザインのための便利なツールを多数紹介
図4 Webデザインのための便利なツールを多数紹介

5. 20+ Free Social Media Icons Sets For Designers | social media icon set | Graphic Design Inspirationhttp://www.graphicdesignsinspiration.com/2014/08/20-free-social-media-icons-sets-for-designers/

各種ソーシャルメディアのロゴやマークの入ったアイコンセットを多数紹介しています。

フラットデザインのもの、特にロングシャドーを使ったものが目につきます。

図5 ソーシャルメディアアイコンいろいろ
図5 ソーシャルメディアアイコンいろいろ

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

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

55+ Useful CSS3 Tools & Online Generatorshttp://www.designrazzi.net/css3-website-tools.html

今回は、CSS3のオンラインジェネレーターを大量にまとめた記事を紹介します。

角丸やシャドウ、グラデーションはもちろん、段組レイアウトのためのグリッドやCSSスプライトを作るためのジェネレーターなど、様々なツールが掲載されています。

カテゴリ分けなどされていないまとめですが、誰しも興味を引くものに出会えるんじゃないかと思います。

わたしは、画像を使わずCSSで背景パターンを生成するツール(複数ありました)が印象に残りました。

図6 CSS3のオンラインジェネレーターを大量に紹介
図6 CSS3のオンラインジェネレーターを大量に紹介

おすすめ記事

記事・ニュース一覧