週刊Webテク通信

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

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

ネットで見かけた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スニペットの共有サイト

今週の気になるWebネタ

ついに解禁:たった1700円で最高のクラウド世代Mac OSが手に入る――「OS X Mountain Lion」 (1/4) - ITmedia +D PC USERhttp://plusd.itmedia.co.jp/pcuser/articles/1207/25/news113.html

Mac OSの新バージョン「OS X Mountain Lion」がリリースされました。いきなり提供がスタートされて,ちょっと話題になっただけで,すぐにまた静かになった感じがします。

Mountain Lionのウリの機能の一つのはずだったFacebookとのOSレベルでの連携は「この秋」実装されるとのことで,個人的にはちょっと拍子抜けしました。秋にはiOS 6のリリースがあり,iOS 6にもFacebookとの連携機能が付くということで,提供時期を揃える必要があるのかもしれませんね。

パッケージ販売されずにMac App Storeでのダウンロード販売のみなので,そもそも新しいOSが出たことに気付いていないMacユーザーも多そうです。もっとも,気付かないようなユーザーは,OSをアップデートしたりしない層だとも思えるので,それでいいのかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入