週刊Webテク通信

2010年11月第1週号1位は、Webサイトのワイヤーフレーム制作完全ガイド、気になるネタは、朝日新聞社、電子書籍を紹介する特設ページ「ASAHI eBOOK AVENUE」開設

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

1. Ultimate Guide to Website Wireframinghttp://sixrevisions.com/user-interface/website-wireframing/

Webサイトの制作時にワイヤーフレームを作るべき理由や、その方法などを解説した「ワイヤーフレームのススメ」的な内容です。

ワイヤーフレームとモックアップ、プロトタイプは混同されることが多いですが、この記事ではその違いを以下のように述べています。

  • ワイヤーフレームはWebページの構造や構成要素を表す簡単なイラストで、通常デザインの最初の段階のもの
  • モックアップは通常、サイトのデザイン要素に焦点を当てたもの。タイポグラフィやデザイン要素は本番のものと同じ場合も多い。通常画像ファイルとして用意される
  • プロトタイプはサイトの完成形にほぼ忠実な、ある程度動作するWebページ。HTMLとCSS、JavaScriptで作られていることが多い

ワイヤーフレームを作るのに役立つWebサービス、テンプレートや素材を配布しているサイトも紹介されています。

図1 Webサイトのワイヤーフレーム完全ガイド
図1 Webサイトのワイヤーフレーム完全ガイド

2. 61 Unusual Navigation Menus in CSS, Flash and JavaScripthttp://www.1stwebdesigner.com/inspiration/unusual-navigation-menu/

見た目が良く、ありふれたものとは違うナビゲーションメニューのデザインギャラリーです。CSS、Flash、JavaScriptの3つの、ベースとなっている技術別に分けて紹介されています。

図2 ちょっと変わったナビゲーションメニュー61選
図2 ちょっと変わったナビゲーションメニュー61選

3. Make Beautiful Banners: 12 Banner Ad Tutorials | deltadesignz.comhttp://deltadesignz.com/2010/11/12-banner-ad-tutorials/

バナー広告画像を作るためのチュートリアル集です。Adobe Photoshopでバナーを作る過程を詳しく紹介したものばかりです。

わたしはアニメーションGIFはいつもFireworksで作っているのですが、Photoshopでのアニメーションの作り方が解説してあるチュートリアルを見て参考になりました。タイムライン上にキーフレームを作って動きの設定ができるので、FlashやAfterEffectsに慣れている人には使いやすそうです。

図3 バナー広告のチュートリアル12個
図3 バナー広告のチュートリアル12個

4. The Ultimate Illustrator Toolbox - Noupe Design Bloghttp://www.noupe.com/illustrator/the-ultimate-illustrator-toolbox.html

Adobe Illustratorに関する様々な情報源をまとめた記事です。

Illustratorに関する情報サイトのほか、チュートリアル、ブラシファイル、ベクター素材など、役に立ちそうなものや情報が多数紹介されています。

図4 Illustratorの情報源まとめ
図4 Illustratorの情報源まとめ

5. 20 Useful CSS3 Button Resources and Tutorials | CreativeFanhttp://creativefan.com/20-useful-css3-button-resources-and-tutorials/

CSS3を利用したボタンのフレームワークや作成ツール、チュートリアルなどを紹介しています。

CSS3によって簡単にボタンの表現力をアップでき、jQueryを組み合わせればその可能性はさらにアップするとのことです。

図5 CSS3ボタンの情報源とチュートリアル
図5 CSS3ボタンの情報源とチュートリアル

そのほか先週の記事から、気になるニュース記事を紹介します。

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

favolog - Twitterのお気に入りをらくらく管理http://favolog.org/

「favolog」は、Twitterの「お気に入り」を管理するWebサービスです。

お気に入りに登録された数の多いツイートのランキングや、自分のツイートがどのくらいお気に入り登録されたのかを確認できるサービスを連想した人もいるかもしれませんが、そういうサービスとは目的が違います。

favologは、自分がお気に入り登録したツイートを探しやすくするためのもので、日付やユーザーごとに表示したり、タグを付けてまとめることができるようになっています。

Twitterのツイートをブログ形式で保存する「Twilog」と同じ開発者の手によるものです。

図6 Twitterのお気に入りを管理するWebサービス
図6 Twitterのお気に入りを管理するWebサービス

おすすめ記事

記事・ニュース一覧