Webふぉれすと
Web制作、Webデザインのスキルアップに役立つ情報をお届けします!
みんなが癒され、元気になるWebを目指します。
サイトマップはこちら
PI-chicc,PA-chicc
うぇぶ実験室
ふぉれすとCafe
NANAKORO*BEANS
くりっくりんく
イベント・セミナーを探せ!
ふぉれすとかわらばん
がしがし通信
今日のスタッフ
スタッフプロフィール
ご意見ご感想フォーム
トップページにもどる
Webふぉれすとトップ > くりっくりんく

くりっくりんくトップへ今月のくりっくお役立ちりんく

くりっくりんくの「今月のくりっく」コーナーでは、くりっくメンバーが毎月交代でお当番を担当し、魅力的で心に響いたサイトをご紹介しております!

※掲載しているサイトのデザインは、2004年11月現在のものです。リニューアルや更新により、デザインや内容等が変更になることもありますので、ご了承ください。

11月

洗練されたアイコンデザインからワザを学ぼう!


●お当番:Nao (閲覧環境: Firefox 1.0 for Win)


イメージ

パソコンを触るたびに毎日目にするソフトウェアのアイコンって、いったい誰が、どんなふうにデザインしているんだろう?って思ったことはありませんか?今月は様々なアイコンの見本を眺めながら、その手法からWeb上のイラストにも通じるワザを学んでみたいと思います。

例えばMicrosoft社のWindows XP。立体的なアイコンが、新しいOSにWindows2000とはまったく違った印象を与えていますよね。このアイコンを作成した会社、design@iconfactory.comのサイトで、彼らの作品をのぞいてみましょう。画面右側のMac OS XまたはWindowsXPと書いてある画像をクリックすると、それぞれのOS向けに作られたアイコンの数々を見ることができます。

ずらりと並んだアイコンを見て、それぞれの意味の伝わりやすさに感心してしまいます。見本の画像にはそれぜぞれには「何のためのアイコンか」という説明は書かれていないのですが、たとえ触ったことのないソフトウェアのアイコンでも、 だいたいその用途は想像がつくと思います。イラストはどれも、元の素材を簡略化しつつ、すっきりとした線とグラデーションを使って立体感を表現しているので、一目で何の形をあらわしているのかが分かるはずです。

続いて、iconbase.comのデザインを見てみましょう。 Yellow Icon Studioのアイコン素材販売部門としての役割を果たすこのサイトでは、完成済みのアイコンをパッケージ販売しています(Previewのボタンをクリックすると、さらにたくさんの見本が見られます)。こちらで気づくのは、MAC OSXとWindowsXP用のアイコンにそれぞれ特徴があるということです。OSX用のものは、つるつるした質感やグレーを多用したデザイン。WindowsXP用には、実際にOSの基本テーマに使われている色と彩度・明度をあわせた色選び。どちらも、それぞれのOSにマッチするようによく考えられています。Webサイト内のイラストも、同じくサイトの質感や色調を意識することによって、全体の雰囲気を壊さず、洗練された印象を残すことができるのではないでしょうか。

Web上で情報を伝えるためのイラストは、ただ「本物らしければいい」わけではなく、隅々に気を配りなるべくシンプルにまとめることで、短時間で必要な情報だけを伝えることができるのではないでしょうか。もちろんサイトの目的や雰囲気に合わせて様々なイラストのスタイルがあるべきですが、このようなワザを頭に置いておくと、よりよい情報伝達に役に立つと思います。

 
Yellow Icon

本文中で紹介したiconbase.comのデザインを手がけている、Yellow Icon Studioのメインサイト。トップページからは最新のデスクトップアイコンを無料ダウンロードできます。

icon buffet

ロイヤリティーフリーのストックアイコン販売サイト。シンプルなスタイルながら、セットによってしっかりとバリエーションがつけられている点など、参考になります。

Wackypixcel Co.

写実的で緻密なデザインが特徴。「Shop」には1万以上の品揃えがあり、Mac OSXやWindowsXPのデスクトップアイコンは数ドル、ソフトウェアなどに適したストックアイコンも比較的安価です。

今月のくりっく バックナンバー


くりっくりんくトップ

Copyright(c)2002-2004 Step-First All rights reserved. [About WebForest]
E-Mail:webforest@step-first.com