週刊Webテク通信

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

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

ネットで見かけた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を軽量化するサービス

今週の気になるWebネタ

初の「Android Wear」搭載スマートウォッチ3機種が発売 国内Google Playで22,000円から | アプリオhttp://appllio.com/20140626-5404-android-wear-smartwatch

Google I/Oでウェアラブル端末のプラットフォーム「Android Wear」の詳細が披露され,Android Wearを搭載するスマートウォッチが,Samsung,LG,Motorolaから発売されることが発表されました。

SamsungとLGのスマートウォッチは日本のGoogle Playでも販売ページが公開されており,近日出荷されるようです。しかし,この中では唯一丸型のMotorolaのMoto 360が気になっている人も多いでしょう。四角い方が情報を見るには適していると思いますが,やはり丸型のほうが新鮮味がありますよね。

ところで,ウォッチといえば現在大流行中の「妖怪ウォッチ」です。アニメやゲームが人気で,グッズの多くは入手困難となっています。⁠妖怪ウォッチ」という腕時計型のおもちゃがあるんですが,スマートウォッチ化した「妖怪ウォッチ」なんてできると楽しそうです。将来的には子供のおもちゃにAndroid Wearが搭載ということも実現しそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入