週刊Webテク通信

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

Webテク, Webデザイン, Web広告, アニメーション, CSS, ワイヤーフレーム, Facebook

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

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

今週の気になるWebネタ

Facebook，「Poke」と「Facebook Camera」アプリを削除 - CNET Japanhttp://japan.cnet.com/news/service/35047695/

Facebookが提供していたiOSアプリの「Poke」と「Facebook Camera」が，App Storeから削除されたようです。Pokeは，アメリカの若者に大人気のメッセージアプリ「Snapchat」に対抗したもので，開封後数秒間で消える写真やメッセージを遅れるものです。

悪ふざけ写真などを送っても，すぐに消えてしまうので「炎上」のリスクが少ないでしょう。もちろん，サーバーからも一定期間で消去されるようになっています。日本でも若者中心にニーズはありそうですが，PokeはもちろんSnapchatもあまり流行っていないようですね。

わたしは，試しにPokeをインストールして知り合いと対面でテストをして以来，二度と使うことはありませんでした。FacebookのMessengerアプリは使っている人が多いはずなので，これにPoke機能が搭載されれば，使う人は増えるんじゃないでしょうか。そのときはPokeじゃなく，わかりやすい日本語名を付けて欲しいですね。

Webテク, Webデザイン, Web広告, アニメーション, CSS, ワイヤーフレーム, Facebook

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote