週刊Webテク通信

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

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

ネットで見かけた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 クリッカブルなプロトタイプが簡単に作れるサービス

今週の気になるWebネタ

ヤフーがカカオジャパンに資本参加--「カカオトーク」を共同展開 - CNET Japanhttp://japan.cnet.com/news/business/35023313/

ヤフーがカカオトークをカカオジャパンと共同展開していくそうです。LINEのライバルだけど差を付けられた感のあるサービスといった印象のカカオトークですが,ヤフーユーザーに積極的にPRすれば利用者も増えそうです。あるいは,新たなサービスが生まれるのかもしれません。

最近のヤフーは新体制での「爆速」経営がうまくいってるのか,他社との提携や連携が目立ちます。Yahoo! JAPANトップページで,Facebookの新着情報が見られたり,nanapiの記事が掲載されるようになったそうです。

また,イラストネタで触れているもう一つの話題は,キングジムがマウス兼用のハンディスキャナを発売したというニュースです。

たしかに,新聞などサイズの大きい原稿から必要なところだけをスキャンするのに便利そうです。大きな範囲もスキャンできそうですが,うまくマウスでなぞっていくのが結構大変かもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入