週刊Webテク通信

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

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

ネットで見かけた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のオンラインジェネレーターを大量に紹介

今週の気になるWebネタ

Google+の「写真」が単体サービスになるかもしれない - TechCrunchhttp://jp.techcrunch.com/2014/08/04/20140801google-photos-could-soon-become-a-standalone-service-outside-of-google/

Google+の「写真」が単体サービスになるかもしれないという噂がニュースになっていました。Hangoutのような感じで,独立したアプリ&サービスになるのは確かにユーザーにとってはウェルカムだと思います。

しかし,元々あった写真サービスのPicasaを無理やりGoogle+の写真と統合した結果,また別サービスとして切り離すのはまぎらわしい気もしますね。

Google ドライブとGoogle+の写真とは連携しているのですが,そのへんもさらにややこしさに拍車をかける気がします。Google ドライブ上の写真に,Google+の写真機能が全部搭載されればいいだけの話かもしれません。

また,Google+の中にあるGoogle+ローカルは,Google マップと連動していますし,Google マイ ビジネスで管理できるようになったのですが,いまひとつ認知されていません。これもGoogle+の枠の中から外してあげたほうがいいんじゃないでしょうか。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入