週刊Webテク通信

2012年10月第4週号1位は、レスポンシブなナビゲーションメニューをうまく実現するためのテクニック、気になるネタは、ヤフーがカカオジャパンに資本参加--「カカオトーク」共同展開

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

1. 10 Tips How To Handle Responsive Navigation Menus Successfully - The Usabilla Bloghttp://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/

レスポンシブなナビゲーションメニューを、うまく実現するためのテクニックを紹介した記事です。

以下の10個のテクニックについて、実際のサイトの例を挙げて解説しています。

  1. 優先順位の高いコンテンツだけを含める
  2. 優先順位の高いコンテンツを上の方に表示する
  3. 利用可能なスペースに合わせたデザインをする
  4. 全てのスクリーンサイズでうまく動作するデザインもある
  5. 普段使っている構造を守る
  6. はっきりしていて指でのタッチ操作にやさしいリンクを提供する
  7. 段階を追ってサイトを操作する
  8. まずは訪問者を歓迎する
  9. 訪問者を案内する
  10. 視覚化する
図1 レスポンシブなナビゲーションメニューをうまく実現するためのテクニック
図1 レスポンシブなナビゲーションメニューをうまく実現するためのテクニック

2. Twitter Bootstrap はじめに見るべき10サイトまとめ | エンジニア転職・求人情報等も配信 SAK STAFF BLOGhttp://www.sakc.jp/blog/archives/8439

Bootstrapのリファレンスやお役立ちサイトなどをまとめています。

日本語のテンプレート配布サイトや初心者向けレクチャー記事もあるので、英語が苦手な人でも参考にできそうです。

図2 Bootstrap関連サイトのまとめ
図2 Bootstrap関連サイトのまとめ

3. Responsive Sketchsheets - ZURB Playground - ZURB.comhttp://zurb.com/playground/responsive-sketchsheets

レスポンシブWebデザインの、手書きのスケッチをするための用紙を配布しています。

パソコン向けとモバイル向けのスケッチが一枚でできるように工夫されたものなど、複数の用紙が用意されています。。

メニューなどが画面の外に隠れていて、必要なときに表示される「off-canvas」のレイアウトのための用紙もあります。

図3 レスポンシブWebデザインの手書きスケッチ用紙
図3 レスポンシブWebデザインの手書きスケッチ用紙

4. Facebookページ制作に必要な各種クリエイティブ一覧のチートシート | バズ部http://bazubu.com/fb-cheatsheet-10141.html

Facebookページ用の画像制作に必要な、各種要素のサイズをまとめています。

カバー画像、アイコン画像や、タイムラインに表示される画像、Facebook広告など、様々な画像サイズが掲載されています。

図4 Facebookページ制作に必要な各要素のサイズ一覧
図4 Facebookページ制作に必要な各要素のサイズ一覧

5. 30 Fresh Web Design Effects That Can Spice up your Websitehttp://smashinghub.com/fresh-web-design-effects-that-can-spice-up-your-website.htm

動きのあるWebデザインをまとめたギャラリーです。

アニメーション効果のあるスライドショーや、視差スクロールなどを効果的に使ったサイトが紹介されています。

図5 動きのあるWebデザインのギャラリー
図5 動きのあるWebデザインのギャラリー

そのほか、最近の記事の中から、気になる記事を紹介します。

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

Solidify | Quick way to build prototypes for user testinghttp://www.solidifyapp.com/

Solidifyは、画像を元にクリッカブルなプロトタイプを作り、ユーザーテストをするためのサービスです。スマートフォンやタブレット向けのプロトタイプも作れます。

サイトのスケッチやワイヤーフレーム、モックアップなどを画像として取り込み、クリックする場所の決めて、ページ遷移の設定をします。ユーザーテストのときに、どういう操作をしてほしいかをテキストで表示させることもできます。

ユーザーテストの結果を解析できるのがポイントで、ユーザーごとのページ滞在時間やページ遷移を見られるようになっています。ユーザーのマウスの動きを再現させることも可能です。

Basicアカウントで月19ドル、Plusアカウントは月49ドルで、30日間はフリートライアルができます。ユーザーテストに力を入れるプロジェクトには、かなり有用なツールではないでしょうか。

図6 クリッカブルなプロトタイプが簡単に作れるサービス
図6 クリッカブルなプロトタイプが簡単に作れるサービス

おすすめ記事

記事・ニュース一覧