週刊Webテク通信

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

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

ネットで見かけた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 本の中の心に残ったフレーズを共有するサービス

今週の気になるWebネタ

iOS向けGoogleマップアプリ,世界のApp Storeでトップ - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1212/14/news035.html

年内は無理だと言われていたような気もしますが,iOS版のGoogleマップアプリが無事にリリースされました。機能もアップされて,各所で喜びの声があがっているようです。

テレビや新聞でも話題に取り上げられていて,驚きました。しかもそれらのニュースでは,⁠アップルが自社のマップをあきらめてGoogleマップを採用した」というように取れる報道がされていました。まあそれでも,ユーザーの不安がなくなるほうがアップルにもメリットはあると思いますが。

iPhoneを買って一度もパソコンに繋いでいないという親戚がいるんですが,正月に行ったときにはOSをアップデートしてあげられそうです。OSが古くて使えないアプリなどあったのですが,Googleのマップアプリがなくなるデメリットの方が大きいと考え,これまでアップデートを先送りにしていました。そういう人,けっこういるはずですよね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入