2012年6月第2週号 1位は、レスポンシブWebデザインの7つのナビゲーションパターン、気になるネタは、Twitter、ロゴを変更--テキストをなくし、鳥のイラストも一新

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

レスポンシブWebデザインのナビゲーションパターンについて考察した記事です。

横幅の小さいモバイル端末では、水平のグローバルメニューがそのまま縮小されると、小さすぎて使いにくくなります。そこで、レスポンシブWebデザインのサイトでは、モバイルサイズのときには、水平ナビゲーションを変化させているケースが多いようです。

この記事で紹介されている、レスポンシブWebデザインのナビゲーションパターンは以下の7種類です。説明文は、モバイルサイズになった場合の挙動です。

jQueryのチュートリアル記事を、新しめのものから16個紹介しています。

動きがあり、見た目の派手さがあるサンプルが多くて楽しめます。

HTML5でサイトを制作する際に役立つ、10個の新たなタグの紹介です。

図には<figure>タグを使い、そのキャプションには<figcaption>タグなど、普及するとセマンティックなコーディングができそうですね。

イメージ／コンテンツスライダーを使ったWebサイトのショーケースです。

トップページにスライダーを使ったサイトはすっかり一般的になりましたが、中でもデザイン的に優れたサイトがセレクトされています。

CSS3を使った優れたデザインのサイトを大量に紹介しています。

一見シンプルながら、細部まで気を配られているステキなサイトが多いですね。

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

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

「Hojoki」は、Google DocsやEvernote、Dropboxなどのクラウドアプリの更新情報を、Twitterのタイムラインのように一覧で見ることができるサービスです。

チームでの作業のときの情報共有ツールとして使えるようになっており、クラウドアプリの更新情報をチームで共有したり、コメントを付け合うことができます。

たとえば、Googleカレンダーに入れた予定をチームメンバーに知らせたり、Evernoteに入れたデザイン案をチームメンバーに見てもらうといったことを、簡単に告知できるようになります。

iPhone／iPadとAndroid用のアプリも用意されています。

クラウドアプリ自体に共有の仕組みがあるものも多いですが、それらを一元化できることのメリットは大きいと思います。仕事だけでなく、家族や友達とのデータ共有にも使えそうです。

なお、このHojokiという名前ですが、方丈記ではなく補助機のようですね。独特のイラストが多用されたサイトデザインも一見の価値があります。

Twitterがロゴを変更し、鳥のイラストが変更されました。あの、「⁠ヒウィッヒヒー」の元になった「ヒ」に見えなくもない「t」のロゴも使わなくなるようです。

鳥のシルエットはデザインがよりシンプルに洗練され、ちょっと上を向いているようになりました。以前のものは小さいサイズにすると頭の毛がノイズっぽく見えなくもなかったので、今回の方がすっきりしていていいですね。

初期の頃にTwitterのホームページで使われていた鳥のイラストは、ロイヤリティフリーの素材サイトの画像を10～15ドルでライセンスしたものでしたが、それからずいぶん経ったものです。

ちなみにiPhoneアプリのアイコンなどは、まだ変更されてないようです。このロゴ変更がネット全体に行き渡るには、まだまだ時間がかかりそうですね。