週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

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

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

コメント

コメントの記入