週刊Webテク通信

2014年6月第5週号1位は、ハンバーガーアイコンの問題と解決策、気になるネタは、初の「Android Wear」搭載スマートウォッチ3機種が発売

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

1. How to solve the hamburger icon problem | Webdesigner Depothttp://www.webdesignerdepot.com/2014/06/how-to-solve-the-hamburger-icon-problem/

ハンバーガーアイコンの問題を解決する方法について解説した記事です。ハンバーガーアイコンとは三本線のアイコンのことで、モバイルサイトでメニューを開くボタンとしてよく使われているアレです。日本ではこの呼び名はあまり使われていませんね。

ハンバーガーアイコンの問題としては以下のことが指摘されています。

  • それが何をする要素なのかが分かりにくい
  • クリックしてメニューを出すことで操作のステップが増える
  • サイト上での現在の位置が分かりにくい

では、どうすればいいのかという解決策ですが、ハンバーガーメニュー(ハンバーガーアイコンによるメニュー)に大きく依存しないようなシンプルなサイト/アプリにするのが良いという結論でした。モバイルユーザーが増えていることで、段組みレイアウトや重たい画像ファイルが使いにくくなっていることからも、ハンバーガーメニューを受け入れなくてはいけないという面もあるとのことです。

図1 ハンバーガーアイコンの問題と解決策
図1 ハンバーガーアイコンの問題と解決策

2. Ten Golden Rules for Choosing the Right Website Images - noupehttp://www.noupe.com/design/ten-golden-rules-for-choosing-the-right-website-images-82520.html

Webサイトにおける正しい画像の選び方をまとめた記事です。

以下の10項目に分けて、そのルールについて解説しています。

  1. 見る人の感情を強く惹きつける画像
  2. ショックと畏怖
  3. 魅力
  4. 意欲を駆り立てる
  5. ずっと使える
  6. ブランドに合っている
  7. 気をそらさない
  8. ターゲットとなるユーザーを代表する人物
  9. 一貫性のあるイメージ
  10. クオリティ
図2 Webサイトにおける正しい画像の選び方
図2 Webサイトにおける正しい画像の選び方

3. Google の新しいデザインガイドライン「Material Design」 | Developers.IOhttp://dev.classmethod.jp/smartphone/android/google-material-design/

GoogleがGoogle I/Oで発表した、新しいデザイン言語「Material Design」についての解説記事です。

次期AndroidやAndroid Wear、Android TVなどはMaterial Designを採用しており、アプリ開発者にもガイドラインを守るよう求めているとのことです。

この記事は、Google Designサイトで紹介されている内容からピックアップして紹介してあり分かりやすいです。テンプレートやフォント、カラーパレットのダウンロード先も載っています。

Material Designは、Androidやモバイル用途だけでなく、Webデザイン全般にも影響を与えそうですね。

図3 Googleが発表したMaterial Designの解説
図3 Googleが発表したMaterial Designの解説

4. 作業効率がアップする!シンプルで見映えの良いテーブルCSS11種類 | Magicaloghttp://www.magical-remix.co.jp/magicalog/archives/3214

テーブルを見映えよく装飾するCSSを配布しています。テーブルをデザインするCSSコーディングは意外と面倒なので、便利に使えそうです。

余談ですが、日本人は罫線好きと言われているだけあって日本では縦横全部の罫線が付いたテーブルが主流ですが、アメリカでは横罫線のみのテーブルが多いという印象があります。

図4 テーブルを見映えよく装飾するCSSのスタイル11種
図4 テーブルを見映えよく装飾するCSSのスタイル11種

5. 30 New Web and Mobile GUI kits and Wireframe Templateshttp://speckyboy.com/2014/06/26/web-mobile-gui-kits-wireframe-templates/

ユーザーインターフェイスのデザインキットとワイヤーフレームのテンプレートを多数紹介しています。

ワイヤーフレーム作成に役立ちそうなグラフィック素材がいろいろと入手できます。

図5 ワイヤーフレーム作成に役立ちそうなUI素材とテンプレートいろいろ
図5 ワイヤーフレーム作成に役立ちそうなUI素材とテンプレートいろいろ

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

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

CSS Shrinkhttp://cssshrink.com/

CSS Shrinkは、CSSを軽量化するサービスです。左の「IN」のところにCSSを貼り付けると、⁠OUT」のところに無駄なスペースやコメントなどを省いて軽量化されたCSSが自動で表示されます。

下の黒地にコードが表示されているところでは、スペースや改行はそのままで、軽量化された状態を見ることができます。

対応ブラウザを選んで、そのブラウザ向けに最適化したCSSを作る機能もあります。無駄なベンダープレフィックスのある部分を削除してくれるので、モバイル向けだけにCSSを用意する場合などに便利だと思います。

図6 CSSを軽量化するサービス
図6 CSSを軽量化するサービス

おすすめ記事

記事・ニュース一覧