週刊Webテク通信

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

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

ネットで見かけた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画像の表示をシミュレートするサービス

今週の気になるWebネタ

Olympic History. Winter Games of 2014 in Sochihttp://www.olympicstory.com/olympic/2014-sochi/

優れたWebサイトを紹介するギャラリーサイトの「Awwwards」に,ソチオリンピックに合わせて作られた冬期オリンピックの歴史を見ることができる「Olympic History」というサイトが紹介されていました。

非常にイマドキのWebデザインなのですが,ロシアで作られているとのこと。Webデザインのトレンドに国境はないようです。

このサイト,それほど中身は充実していないんですが,冬期オリンピックの歴代マスコットやメダルを見ることができて楽しいです。

長野オリンピックのマスコットは微妙だけど,メダルは歴代の中でもクオリティ高いんじゃないかと再発見しました。そして,調べてみて分かったんですが,長野オリンピックのメダルには木曽の漆が使われているそうです。当時話題になったはずですが,今さらながら知りました。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入