講師だって、最初は初心者だもの［番外］2012年 Webデザイントレンドの話、Fireworks本プレゼントの話
── 森　和恵 ──

〈メッセージ性から実用性へ〉

まず最初に、Webデザインの変化傾向について話がありました。
メッセージ性から実用性のあるデザインへ変化しているそうです。

メッセージ性とは、「なんかようわからんけど、素敵！　カッコイイ！」と思わせるようなサイトのこと。直接的に何かの情報を訴えるではなく、空気感や匂いを伝えるような表現を使っているサイトは、たくさんありました。大手企業のブランドサイトなどを見た時に、「欲しい情報が載ってない...（涙）」なんてこと、よくありましたよね。もったいない...。

ここ最近は、それに実用性を兼ね備えるように作るそうです。例えば、トップページの大きなイメージにしても、何か具体的なメッセージをつけるなど、「なんのための表現なのか？」を閲覧者にわかってもらい、次のアクションにつなげてもらう、実用性のあるデザインが増えているそうです。

デザイン表現も、これまで流行っていた質感表現（グラデーションやテクスチャなど）を排除し、ベタ塗りなどのシンプルなデザインに変わってきているそうです。セミナーでは、かって「メトロ」と呼ばれていたWindows8風デザインを例に挙げて説明されていました。たしかに、マイクロソフトのサイトを見てみると、スッキリシンプルになっていますね。

　　Microsoft（日本）
　　< http://www.microsoft.com/ja-jp/default.aspx
>

〈デザイン表現あれこれ〉

セミナー中に、いろんな流行デザインの話が出てきました。その中で、特に心に残った（これから使えそうな）ものをピックアップします。

「横一直線」

ヘッダ・本文・フッタ......と、各パーツを横一本線でスパーンと区切っているデザインのことです。たしかにこのデザインのサイトが最近多いですよね。正味のページの横幅は960ピクセル（Yahooの横幅ぐらい）で展開する普通のデザインなのですが、区切り線を端から端まで伸ばし、空間を広く見せています。

ワイドモニターのユーザーが増えている中、左右のスペースをうまく使って広がりを見せているのだと思います。先ほどのマイクロソフトのサイトも、これですね。

「イアイ」

日本刀で居合切りをする刃筋のように、斜めにすぱっと線を入れるデザインのことです。↑で説明した、横一直線のデザインに変化を与えるために使われるそうです。例えば、下記のWindows8サイトでは、トップのイメージに使われています。

　　Windows8（日本）
　　< http://windows.microsoft.com/ja-JP/windows-8/meet
>
　　< http://windows.microsoft.com/ja-jp/windows/home
>

「ナビゲーションの傾向」

ナビゲーションが簡略化しているそうです。例えば、↑のMicrosoftのサイトでは、上のグローバルナビゲーションはテキストだけですね。テキストの間を少し広めにとっているだけ。リンクを表すアンダーラインさえありません（いいか悪いかは別として、流行なんだそう。個人的にはわかりにくいと思うけど）。

また、スマートフォンで使われる表現の影響で、左にアイコンをつけるタイプも増えてきているようです。例えば、↑のMicrosoftのサイトでフッターにみられる、OfficeやXboxなどのリンクはアイコンがついてます。

「フッターの傾向」

フッターにサイトマップやサイト紹介など、コンテンツを盛り込んだサイトが増えているようです。例えば、↑のMicrosoftのサイトでも、フッターにサイトマップらしきものがあります。使う・使われる、使える・使いにくいは別として、置いておくことで、目に見える機会を増やして、サイトの回遊性をあげる目的があるそうです。

〈デザイナースキルを本気で磨かないとまずい！〉

さて、まとめを。

たっぷり2時間のこのセミナーを聞いて、普段何気なく見ているサイトを思い出すと、確かに言われるとおりだなと思いました。そして思い出したことが一つあります。昔、無印良品のサイトを紹介して、「これ、デザイン的にすごいサイトなんですよ！」と言った時に「え？　なんで？　簡単に作れそうじゃん♪」と言われたことを。

質の高いデザインは、「引算のデザイン」とも言われます。無駄にあれもこれもゴテゴテと飾ればいいわけではなく、必要なものを必要な所に必要なだけ、ということです。

言うのは簡単だけど、やってみるとこれが難しい...。無印のサイトだって、完成形を見た後なら、真似して作ることは簡単ですが、それを生み出すのは難しいのです（いや、本当は作るのも簡単じゃないんですよ。線を引く場所が少しずれただけで素人がやると「カッコ悪く」なるんです）。

シンプルなWebデザインが流行ってきているということは、楽になるのではなく、より高度なデザインセンスが求められるということです。そして、出したデザインは......クライアントに努力を認めてもらいにくい（涙）のです。

私たちは、より一層のデザイン感性を磨くとともに、「なぜこのデザインを選んだのか？」をクライアントの利益を出す目的を踏まえて説明する技術が必要になります。

今年も、がんばりましょう！
（あ、私たちとか言っちゃったけど、私デザイナーじゃないわ......偉そうでごめんなさい）

●著書「Fireworksの教科書」紹介＆デジクリ読者プレゼント

「よくわかるFireworksの教科書」
< http://www.facebook.com/FireworksBook/app_472050169511061
>

Web制作にかかわる方におすすめしたいソフト...
Adobe Fireworks の知っておいてほしいことを熱く語った（？）書籍です。

「使うツールは多いし、技術は難しいし、覚えることが多くて、めげそう...」とお嘆きの勉強中の貴方、Fireworksは覚えやすくて頭にやさしいソフトです。

PhotoshopやIllustratorが有名すぎて、「なんかようわからんわ（大阪弁）」と思っているアナタ、Fireworks「も」使えると、めっちゃ便利やし、作業の時短ができますよ。

そして、Fireworksを覚えるなら、「よくわかるFireworksの教科書」。

実際に制作しながら使い方を覚える「チュートリアル編」、辞書のように引きながら使い方を調べる「リファレンス編」の両方で、350ページ！

3月9日、今週土曜日に発売予定です。

今月・来月と大阪・東京でイベントや、プレゼント告知を予定しています。最新情報は、下記まで。
※Facebookページだから、「いいね！」しておけば、ウオールに情報をお届けします。

　　Fireworksの教科書
　　< http://www.facebook.com/FireworksBook
>

＜まずは、デジクリ読者さまへ一冊プレゼント！＞

この本をデジクリ読者のかたに抽選で一名さまにプレゼントさせていただこうと思います。今月中（〜3/31迄）の応募をお待ちしています。（本は郵送になるので、当選後に住所を教えて頂く形になります。ご了承ください）

［応募の条件］
・読後に、Amazonのレビューを書いていただける方
（無理に誉めなくてもOK！正直なご感想を）

［応募方法］
ご意見・ご要望受付フォーム< http://bit.ly/gIHFfu
>の項目のいずれかに、【Fireworksの教科書プレゼント応募】とし、「お名前・メールアドレス」をお書き添えください。当選の方にメールでご連絡いたします。
※得た個人情報は、当件のご連絡以外の用途には使用しません。

ということで、今回は、終わりです。プレゼント、どんどんご応募くださいませ。次回は3月中頃。出版がらみでFireworksか、LESSネタの続きを予定しています。ではまた！（＾θ＾）

※記事へのご意見・ご要望は下記より受付ます。
< http://bit.ly/gIHFfu
>

【森和恵 r360studio　〜 Web系インストラクター 〜 】
< site: http://r360studio.com
>　< twitter: http://twitter.com/r360studio
>
< mail: r360studio@gmail.com >
< サイト制作の教科書 r360study: http://www.facebook.com/r360study
>