デジタルハリウッド講師が、業界の動向や最新事情について解説していく本コラム。 今回はデジタルハリウッド専任講師の栗谷幸助氏がWebデザインの流れについて紹介していきます。


マイコミジャーナルをご覧のみなさん、こんにちは。デジタルハリウッド専任講師の栗谷と申します。今回から4回に渡り、Webに関するコラムを担当させていただくことになりました。どうぞ宜しくお願いいたします。

さて、初回となる今回は「Webデザインの流れ」についてお話したいと思います。私はWebデザイナーとしてデザインを行う際に常々「Webページをデザインする作業って、料理を作ることと似てるな」と感じています。という訳で、ここからは料理番組風にWebデザインの流れを紹介して行きます。

■料理番組と言えばコレ「まずは材料のご紹介です」

Webページ(1ページ分の目安)を作成するための材料として、

・掲載する文字情報・・・400文字程度
・写真・・・2～3枚
・ロゴマークやアイコン、イラストなど・・・数点

を用意しましょう。モニターで閲覧をするWebページの文章は多くなり過ぎることのないようにし、写真やイラストなどの画像については素材の良さにこだわりたいところですね。

■「次に、下ごしらえを行ないます」

作成をするWebページのおおまかなレイアウトやラフデザインを決める作業を行います。「この部分にロゴマークを配置して、、、ここにはメインビジュアル! ナビゲーションは縦並びに、、、」というような枠組みを決めるんです。これを「ワイヤーフレーム」と言います。やみくもにデザインを始めるのではなく、下準備が必要となります。

■「下ごしらえが済んだら、調理に入ります」

厳選した材料であっても、料理の際には 皮をむいたり、適度な大きさに切ったりという作業を行います。Webデザインも同じで、用意をした写真に対して、色調補正を行ったり、トリミングという必要な部分を切り取る・不要な部分を取り除く作業を行います。ここで用いる道具が「Photoshop」というソフトです。

また、文字情報ばかりのWebページでは味気ないものです。ページのテーマや情報の種類を視覚的に表すロゴマークやアイコン、イラストなどを作成しましょう。ここでは、その名もズバリ「Illustrator」というソフトを使用します。

■「調味料で味を調えます」

「Webデザインに調味料?」と思われるかもしれませんが、そのような作業があるんです。PhotoshopやIllustratorで加工・作成をした画像は、Webページに掲載することが出来る画像形式に変換する必要があります。その際には、データサイズを極力軽く、なおかつ見た目もキレイに変換するのです。これを「画像の最適化」と言います。Webデザイナーの絶妙なサジ加減が求められるこの作業って、調味料で味を調えることと似ていませんか?

■「それでは、火にかけましょう」

火にかけることで、料理をお口に運んでもらえる、つまりWebページをWebブラウザで見てもらえるようにします。そのためには、HTMLという言語を用います。「ページタイトルはコレで、、、見出しはこう! ここで画像を表示して、、、」というように、意味づけ(マークアップ)を行っていく作業です。それでは、試食をしてみましょう。Webブラウザにページが表示されました!、、、んっ、確かに表示はされるのですが、文字や画像が縦方向に並んだちょっと味気ないページのようです。

■「最後はコレ! 盛り付けましょう」

料理の味が盛り付けによる見た目に左右されるように、Webページもレイアウトや配色などの見た目が大事です。Webページの盛り付けには、CSSという雛形文書を書きます。 「ロゴマークを左上において、メインの文章はページ中央に、、、背景色はシックにモノトーンで、、、」というように指示出しをします。これをHTMLに設定をすれば、Webページの完成です!

どうでしたでしょうか? Webデザインの流れって、料理を作ることと似ていますよね! でも、似ているのは作業工程だけではなく、実は愛情を込めて作る(創る)気持ちも同じなのではないでしょうか。お食事をされる皆さんに、より美味しく、楽しく食べてもらいたい! これって、Webページを見てくれる方々に、情報を正確に、より分かりやすく伝えたい! という気持ちと同じなのかなと。

Webデザイナーを目指すなら、ぜひ一流のシェフになってくださいね! そして、その場としてデジタルハリウッドを選んでいただけるのであれば、みなさん授業でお会いしましょう。

次回はWeb制作現場での役割分担についてお話をします。