週刊Webテク通信

2012年7月第5週号1位は、ワイヤーフレームとプロトタイプとモックアップの違い、気になるネタは、OS X Mountain Lionがリリース

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

1. Wireframing, Prototyping, Mockuping - What’s the Difference? - DesignModohttp://designmodo.com/wireframing-prototyping-mockuping/

ワイヤーフレームとプロトタイプとモックアップの違いをまとめた記事です。この記事通りに使い分けなくてもいいと思いますが、こういった区別があるというのは覚えておくと役に立ちそうです。

この記事では、それぞれの用語の違いは以下のように解説されています。

ワイヤーフレーム
  • 白黒やグレーのスケッチのような大ざっぱな描写でインターフェイスを表現したもの
  • (最終成果物との)忠実度が低い
  • 資料/コミュニケーションを迅速に図るためのものとして使われる
プロトタイプ
  • インタラクティブなもの
  • 忠実度が中?高(中寄り)
  • ユーザーテスト/インターフェイスの基盤として使われる
モックアップ
  • 静的に視覚化したもの
  • 忠実度が中?高(高寄り)
  • フィードバックを集めたり、関係者の了承を得るのに使われる
図1 ワイヤーフレーム、プロトタイプ、モックアップの違い
図1 ワイヤーフレーム、プロトタイプ、モックアップの違い

2. 10 Cool Infinite Scrolling Effects That Can Enhance Your Website's Navigation | Design Superstarshttp://designsuperstars.net/10-cool-infinite-scrolling-effects-that-can-enhance-your-websites-navigation/

ページの下部までスクロールすると新たなコンテンツが読み込まれ、延々スクロールしていく「無限スクロール」を実現するためのjQueryプラグインが紹介されています。

TwitterやPinterestのような、延々スクロールしていく効果を簡単に実現できます。

図2 無限スクロールを実現するスクリプトいろいろ
図2 無限スクロールを実現するスクリプトいろいろ

3. UICloud | User Interface Design Search Engine, UI Elements, GUI Design, Free Downloadshttp://ui-cloud.com/

ユーザーインターフェイス素材の検索サイトです。フリーでダウンロードできる素材が揃っていて、各素材にはライセンスも明記されています。

フリーワードで検索するほか、カテゴリー別に探していくこともできます。画像素材だけでなく、CSSやjQueryのコードも登録されていました。

図3 ユーザーインターフェイス素材の検索サイト
図3 ユーザーインターフェイス素材の検索サイト

4. 25 Animated Home Page Web design Examples for your inspirationhttp://webneel.com/webneel/blog/25-animated-home-page-web-design-examples-your-inspiration

動きのあるWebデザインのショーケースです。インタラクティブ性があり、アニメーションの要素もある凝ったサイトが各種紹介されています。

取り上げられているのは、ゲーム的なコンテンツから視差スクロールを用いた1ページ完結サイトまで、多種多様です。

図4 動きのあるWebデザインのショーケース
図4 動きのあるWebデザインのショーケース

5. 35 Facebook Timeline Covers of Successful Brands For Your Inspirationhttp://www.hongkiat.com/blog/fb-covers-of-brands/

企業やブランドのFacebookページのタイムラインカバーを集めたショーケースです。

アイコン画像とカバー画像とが連動しているもの、複数の画像をうまく組み合わせてカバー画像にしているものなど、参考になります。

図5 Facebookページのタイムラインカバーいろいろ
図5 Facebookページのタイムラインカバーいろいろ

そのほか、最近の記事の中から、タイトルだけだと誤解を受けそうな記事にフォローを入れつつ紹介します。

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

CSSPop - A Community Collection of CSS Snippets [beta]http://www.csspop.com/

CSSPopは、CSSのスニペット(短いプログラムコード)を共有するサービスで、CSSでデザインしたボタンやリボンなどのコードを共有し合う場を提供しています。

各スニペットは、HTML&CSSのコードとプレビューを見ることができます。作者名と作者のホームページ/Facebook/Twitterへのリンクが結構目立つように表示されるので、Webデザイナーが自分をアピールする場としても使えそうです。

まだまだ登録数が少ないようですし、玉石混淆な状態だと感じました。⁠いいね!」のような「Upvote」ボタンでの投票数順に並べ替えると、人気のものから見ていくことも可能です。

図6 CSSスニペットの共有サイト
図6 CSSスニペットの共有サイト

おすすめ記事

記事・ニュース一覧