週刊Webテク通信

2012年12月第3週号1位は、優れたユーザーインターフェースを作成するためのデザインパターン、気になるネタは、iOS向けGoogleマップアプリ、世界のApp Storeでトップ

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

1. Design Patterns for Creating Exceptional User Interfaces on the Webhttp://speckyboy.com/2012/12/06/design-patterns-for-the-web/

Web上で優れたユーザーインターフェースを作成するためのデザインパターンについて解説しています。

以下の要素に分けて考察されていました。

  • 一度にコンテンツを読み込んでしまう
  • 無限スクロール
  • 活発な感じのするページの要素
  • ギャラリーのサムネイルにはインタラクティブな要素を
  • 商品情報の紹介ビデオなど
  • コンテンツを整理し、アイコンやバッジを付ける
図1 優れたユーザーインターフェースを作成するためのデザインパターン
図1 優れたユーザーインターフェースを作成するためのデザインパターン

2. 30 Responsive jQuery Slider Plugins for 2013 | Web Design Inspirationhttp://www.flashuser.net/30-responsive-jquery-slider-plugins-for-2013

レスポンシブなスライダーを実現するjQueryプラグインを30個紹介しています。

スライダー/カルーセルはレスポンシブなものが当たり前になってきているようですね。

図2 レスポンシブなスライダーを実現するjQueryプラグイン
図2 レスポンシブなスライダーを実現するjQueryプラグイン

3. Bold Drop-Down Navigation Design for Website Layouts / Design Ticklehttp://www.designtickle.com/2012/12/dropdown-navigation-web-ui/

大きなドロップダウンメニューを使ったWebデザインを各種紹介しています。

機能的にしっかりと作られたものが増え、ユーザーが慣れてきたこともあるのか、ドロップダウンナビゲーションも一般的になってきたように感じます。

図3 大きなドロップダウンナビゲーションいろいろ
図3 大きなドロップダウンナビゲーションいろいろ

4. Website Mascots Showcase & Analysishttp://desizntech.info/2012/12/website-mascots-showcase-analysis/

Webサイトに使われているマスコットのショーケースです。

イラストのキャラクターが使われている実例と、その効果が解説されています。

図4 Webサイトに使われているマスコットのショーケース
図4 Webサイトに使われているマスコットのショーケース

5. 15+ Great Mobile Web Designs | TutorialFreakz_All kind of Tutorials and Freebies!http://tutorialfreakz.com/15-great-mobile-web-designs/

モバイル向けにデザインされたWebデザインを紹介しています。

テンプレートやテーマとして販売されているものや、インスピレーションになりそうな実例のショーケースです。

図5 モバイル向けWebデザインいろいろ
図5 モバイル向けWebデザインいろいろ

そのほか、最近の記事の中から、気になる記事を紹介します。

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

Booklap - 本の中の心に残った名言共有サービスhttp://booklap.com/

Booklapは「本の中の心に残ったフレーズを共有するサービス」で、⁠本の引用」版Pinterestのようなサービスです。

本から引用したフレーズをコンテンツとしてソーシャルメディア的な要素が加わっていて、フォローした人がシェアしたフレーズをまとめて見られたり、コメントやお気に入り機能があります。リツイート的なものはないようです。

本の中のフレーズを自分で入力しなくてはいけないのがちょっと面倒そうですが、本好きや名言好きには楽しいサービスだと思います。

電子書籍と連動して、引用部分が自動でシェアできるといいですね。今でもKindleでFacebookかTwitterでシェアしたあと、そのフレーズをコピー/ペーストするという手はありますが。

図6 本の中の心に残ったフレーズを共有するサービス
図6 本の中の心に残ったフレーズを共有するサービス

おすすめ記事

記事・ニュース一覧