週刊Webテク通信

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

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

ネットで見かけた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サービス

今週の気になるWebネタ

朝日新聞社,電子書籍を紹介する特設ページ『ASAHI eBOOK AVENUE』開設 | ブック | マイコミジャーナルhttp://journal.mycom.co.jp/news/2010/11/04/071/index.html

朝日新聞社が,電子書籍を紹介する特設ページを開設しています。

電子書籍書店ばかりが乱立している今,様々なショップ/配信スタンドの書籍が一同に見られるサイトは便利ですよね。早とちりしてそう思ったのですが,この「ASAHI eBOOK AVENUE」はそういう目的ではありませんでした。朝日新聞の過去の書評記事を使い,電子書籍の良書を紹介するというスタンスで,提携している「電子書店パピレス」⁠⁠PDAbook」のものしか紹介していないようです。

書籍の紹介ページには,⁠この電子書籍を購入!」のほかに「やっぱり紙の本を購入!」もあることが興味深いです。

アマゾンや楽天ブックスのアフィリエイトが収入源なんでしょうか。⁠やっぱり」という言葉を使ったのには,紙の本はやっぱり消えないぞという思いが込められてるんでしょうか。いろいろと想像が膨らみます。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入