週刊Webテク通信

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

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

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

1. 7 Responsive Navigation Patterns | Van SEO Designhttp://www.vanseodesign.com/web-design/responsive-navigation-patterns/

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

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

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

  1. Top nav or ⁠do nothing⁠⁠ approach
    何も仕掛けをしない。水平ナビゲーションは,小さくなり,横幅に合わせて折り返される
  2. Footer only
    ナビゲーションがフッタに移動して縦に並ぶ
  3. Footer anchor
    ナビゲーションがフッタに移動し,ヘッダからアンカーで移動できるリンクやボタンが付く
  4. Select menu
    ナビゲーションがセレクトメニューに変わる
  5. The toggle
    ナビゲーションがアコーディオンかドロップダウンに変わる
  6. Left (or right) nav flyout
    ナビゲーションが画面外に隠れて,アイコンかリンクを押すと左(右)からスライドして現れる
  7. The ⁠hide and cry⁠
    ナビゲーションを隠してしまう。必要なリンクはコンテンツ内に入れる。モバイルに必要なリンクだけを提供する

図1 レスポンシブWebデザインの7つのナビゲーションパターン

図1 レスポンシブWebデザインの7つのナビゲーションパターン

2. 16 New jQuery Tutorials | Splashnologyhttp://www.splashnology.com/article/16-new-jquery-tutorials/5561/

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

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

図2 jQueryの新作チュートリアルいろいろ

図2 jQueryの新作チュートリアルいろいろ

3. HTML5--押さえておくべき10のタグ | CNET Japanhttp://japan.cnet.com/sp/businesslife/35017728/

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

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

図3 HTML5の新たなタグの紹介

図3 HTML5の新たなタグの紹介

4. 30 Brilliant Examples of Image/Content Sliders In Web Design | Design Inspirationhttp://designbeep.com/2012/05/03/30-brilliant-examples-of-imagecontent-sliders-in-web-design/

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

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

図4 スライダーを使ったWebデザインのショーケース

図4 スライダーを使ったWebデザインのショーケース

5. 50 Excellent CSS3 Website Designs for Inspiration | CSS | instantShifthttp://www.instantshift.com/2012/06/04/50-excellent-css3-website-designs-for-inspiration/

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

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

図5 CSS3を使ったWebデザインのショーケース

図5 CSS3を使ったWebデザインのショーケース

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

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

Hojoki: Make All Your Cloud Apps Work As Onehttp://hojoki.com/

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

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

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

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

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

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

図6 クラウドアプリをベースにしたコラボレーションツール

図6 クラウドアプリをベースにしたコラボレーションツール

今週の気になるWebネタ

Twitter,ロゴを変更--テキストをなくし,鳥のイラストも一新 - CNET Japanhttp://japan.cnet.com/news/business/35017888/

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

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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