ネットで見かけた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/

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

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

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

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

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. クオリティ

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デザイン全般にも影響を与えそうですね。

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

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

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

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

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

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

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

• MacDown: The open source Markdown editor for OS X.
  MOUの開発が停止されたのを受けて、MOUファンの人が新たに開発したというマークダウンエディタです
• Here's what's new in Flickr for Apple TV | iMore
  Apple TVのFlickrがアップデートして、Private（非公開）の自分の写真も見られるようになるなど機能強化されています
• Google、ドメイン名登録サービス「Google Domains」ベータ版を開始 | アプリオ
  Googleがドメイン登録サービスも始めるようです

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

CSS Shrinkhttp://cssshrink.com/

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

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

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