週刊Webテク通信

2014年2月第3週号1位は、ページネーションと無限スクロールとの使い分け、気になるネタは、冬期オリンピックの歴史を見ることができる「Olympic History」

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

1. Pagination: Why there's life in the web's old dog yet - The Usabilla Bloghttp://blog.usabilla.com/pagination-theres-life-webs-old-dog-yet/

Webの古い技術であるページネーションが、なぜ今でも生き残っているのかという話題です。ページ分割・ページ送りをするページネーションと、無限スクロール(Infinite Scrolling)との比較をしています。

ページネーションを使うケース
  • ECショップで商品をカテゴリごとに分割するなど目的志向のタスク
  • 段階に分けてユーザーをナビゲートするような直線的なプロセス
  • 検索結果のように今いる位置が分かり好きなページにジャンプできるようにする
無限スクロールを使うケース
  • 読み手に一息つかせないように長いリストを見せる
  • 単純な操作でダラダラと見られるソーシャルメディアにおいて
  • 今いる位置のフィードバックは不要なFacebookのようなタイムライン表示
図1 ページネーションと無限スクロールとの使い分けについて
図1 ページネーションと無限スクロールとの使い分けについて

2. The secret of successful redesigns: what Ted got right and what Twitter got wrong | Webdesigner Depothttp://www.webdesignerdepot.com/2014/02/the-secret-of-successful-redesigns-what-ted-got-right-and-what-twitter-got-wrong/

Webサイトのリデザインについて解説した記事です。

いい例としてTEDのサイトのリデザインについて紹介されています。なお、新TEDサイトは「http://new.ted.com/」というサブドメインで公開されていました。リニューアル後はメインのビジュアル部分が横幅いっぱいに広がり、レスポンシブ対応にもなっています。

一方、悪い例としてTwitterのサイトが上げられており、問題解決のためではなく「どう変更するか」がリデザインの目的となっているところが良くないところだと指摘しています。

図2 Webサイトの正しいリデザインについて
図2 Webサイトの正しいリデザインについて

3. 30 Free Bootstrap Code Examples for Web Developers | SpyreStudioshttp://spyrestudios.com/30-free-bootstrap-code-samples/

BootstrapをベースとしたWebデザインのパーツを多数紹介しています。

フォームやボタンをはじめ、メニューなどのUI要素など、Bootstrapのデザインカスタマイズ例がいろいろと掲載されています。

図3 BootstrapベースのWebデザインのパーツいろいろ
図3 BootstrapベースのWebデザインのパーツいろいろ

4. Examples Of Websites With Modern Designshttp://www.designyourway.net/blog/inspiration/examples-of-websites-with-modern-designs/

今流行のスタイルのWebサイトをまとめて紹介した記事です。

レスポンシブ、シングルページ、フラット、文字少なめ、といったイマドキなスタイルで、デザイン的にもクオリティの高いサイトが並んでいます。

図4 今流行のスタイルのWebサイトのギャラリー
図4 今流行のスタイルのWebサイトのギャラリー

5. 15 Awesome jQuery Layout and UI Pluginshttp://dizyne.net/15-awesome-jquery-layout-ui-plugins/

レイアウトやUI関連のjQueryプラグインをまとめた記事です。

Pinterestのようなレンガ組みを実現させるもの、フル画面でコンテンツを展開するものなど、最近流行のWebデザインに役立ちそうなプラグインが多数紹介されています。

図5 レイアウトやUI関連のjQueryプラグインいろいろ
図5 レイアウトやUI関連のjQueryプラグインいろいろ

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

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

OGP画像シミュレータ | og:image Simulatorhttp://ogimage.tsmallfield.com/

WebページがFacebookでシェアされるときにサムネイルとして表示される画像が、OGP画像です。このOGP画像は、メタタグで「property="og:image"」として指定できます。

OGP画像はFacebook上では正方形で表示されたり横長に表示されたりするのですが、この見え方をシミュレートするサービスが「OGP画像シミュレータ」です。

画像をドラッグ&ドロップするだけで、Facebook上での複数の表示パターンを確認することができます。画像がトリミングされたときにも、大事な部分が見えるように調整するのに役立つサービスです。

図6 Facebook上でのOGP画像の表示をシミュレートするサービス
図6 Facebook上でのOGP画像の表示をシミュレートするサービス

おすすめ記事

記事・ニュース一覧