gihyo.jpサイトのロゴ

週刊Webテク通信

2014年5月第3週号1位は、伝統的な5つのナビゲーションと代わりとなる4つのナビゲーション、気になるネタは、Facebook、「Poke」と「Facebook Camera」アプリを削除

2014-05-15

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

1. Efficiently Simplifying Navigation, Part 2: Navigation Systems | Smashing Magazinehttp://www.smashingmagazine.com/2014/05/09/efficiently-simplifying-navigation-systems/

効果的でシンプルなナビゲーションについてまとめた記事です。

まず、従来型のナビゲーションメニューとして以下の5つを挙げて、良い点や問題点について解説しています。

  1. メニューバー
  2. 普通のドロップダウンメニュー
  3. メガメニュー（大きなエリアがドロップダウンするメニュー）
  4. ページ内をエリア分け
  5. フィルタリング

そして、それらの代わりとなるものとして、以下のナビゲーションが紹介されています。

  • 検索
  • サイトマップ
  • アルファベット順の目次
  • タグ

タグでナビゲーションするというのは一般的になってきたようですが、日本ではまだ「タグ」という言葉でピンと来る人が少ないように思えます。とはいえ、サイト毎で違った日本語に置き換えると浸透しないですし、悩ましいところです。

図1　伝統的な5つのナビゲーションと代わりとなる4つのナビゲーション
図1　伝統的な5つのナビゲーションと代わりとなる4つのナビゲーション

2. 50 Shades of Wireframeshttp://www.onextrapixel.com/2014/05/09/50-shades-of-wireframes/

ワイヤーフレーム作成のためのツールや方法を紹介しています。

手順が解説してあり参考になります。

  1. まず、ツールと手段を選ぶ
  2. 次に、細部をどこまで作り込むかのレベルを決める
  3. 最後に、全てを一緒に結びつける

ツールと手段としては、手書きスケッチ、紙の切り貼り、テンプレート定規を使って手書き、ワイヤーフレーム用ソフト、グラフィックソフト、プレゼンソフト、といろいろな方法がありますね。

図2　ワイヤーフレーム作成のためのツールや方法
図2　ワイヤーフレーム作成のためのツールや方法

3. AniJS, Declarative handling library for CSS animationshttp://anijs.github.io/

簡単な記述で設定できるアニメーション用のライブラリです。このページ自体がデモになっていて、派手な動きがあって面白いです。

「data-anijs="if: click, do: flipInY, to: .container-box"」のように、If / On / Do / Toを埋めていくような書き方で設定できるので、取っつきやすそうです。

図3　簡単な記述で設定できるアニメーションライブラリ
図3　簡単な記述で設定できるアニメーションライブラリ

4. 7 Things You Didn't Know You Could Do with CSShttp://davidwalsh.name/css-facts

あまり知られていない、CSSでできることを7つ紹介しています。

CSSで円を描けることや、CSS Filterは有名ですが、結構知らなかったこともありました。

図4　あまり知られていないCSSでできること7つ
図4　あまり知られていないCSSでできること7つ

5. 18 Free UI and Wireframe Kits | Freebieshttp://webdesignledger.com/freebies/18-free-ui-and-wireframe-kits

ワイヤーフレーム作成に役立つ、ユーザーインターフェイス素材やワイヤーフレーム素材を数多く紹介しています。

Photoshop形式のファイルが多いのですが、IllustratorやSketch形式のファイルもありました。

図5　UIやワイヤーフレームの素材
図5　UIやワイヤーフレームの素材

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

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

StyleStats - Useful tool to collect CSS statisticshttp://www.stylestats.org/

URLやファイルからCSSを解析するサービスです。コード品質をチェックすることが目的として作られているようです。

StyleStatsは、Node.jsを使ったCSSを解析するツールとして公開してあり、このサービスはWeb上で動くデモ版的なものなのでしょう。

解析結果の各項目については、以下に解説してあります。

他と比較しないとなかなか指標が分かりにくいので、自分の作ったサイトと同じくらいのボリューム感のサイトと解析結果を比較してみるといいのかもしれません。

図6　CSSを解析するサービス
図6　CSSを解析するサービス

おすすめ記事

記事・ニュース一覧