WEBサイトのデザイン構築手順と
私のWEBデザイン重視ポイント
「デザインって感覚でつくるんでしょ？」
そんなふうに言われることが時々あります。たしかに感覚を頼りにデザインする工程もあります。しかし大抵のデザイン案件は論理的思考と感覚的思考を行ったり来たりしています。
デザインを考える手順はデザイナーや案件内容、案件への関わり方で変わってきます。
マルキンアドの場合、WEB制作はディレクター、デザイナー、コーダーでそれぞれ業務を担当しています。ディレクターが主にお客様との打ち合わせを行い、お客様企業とその競合、業界の市場動向を調査し、それを元にWEBサイトの構成や、各ページに掲載する内容を考えます。デザイナーはそれらの情報からお客様企業にとって最適なデザインコンセプトやテイストを考えた上で、デザインのディテールまで制作していきます。そしてコーダーがデザインを元にコンピュータ言語を駆使してWEBで閲覧できる形に実装していきます。
大まかには上記のように分業されていますが、実際には案件によって流動的になります。デザイナーもお客様との打ち合わせに参加して、ページ構成を考えることもあれば、デザインコンセプトについてはディレクターとデザイナーの共同で構築していくことも多々あります。コーダーからデザイナーに対して見せ方の提案があることもあります。社内に各分野のスペシャリストがいて、協力して一つのものを作り上げているという感じです。
今回のマルログでは、マルキンアドのWEB制作における「デザイン」部分の工程をさらに分解してご紹介しつつ、デザイナーである私がWEBデザインを行う上で大切にしていることもお伝えします。現在WEBサイトの制作を検討されている企業様への一助となれば幸いです。
デザインの手順は大雑把にいうと、
・聴きとる、調べる
・雰囲気をつかむ
・デザインコンセプトを決める
・デザインの方向性やディテールを考える
・実制作
こんな感じになります。
単に表面的な装飾を作るだけであれば上記の後半2つの工程のみで完成します。しかしマルキンアドが考えるデザインはそうではありません。その企業の持つ個性（本質）を捉え、どういった人達をターゲットにして、どんなビジュアルで発信していくのか？ビジュアルを作り込んでいく前段階の工程を大切にすることでデザインに説得力や深みが生まれ、効果を生むものになると考えています。これらの工程を項目ごとに紐解いていきます。
WEBサイトのデザイン構築手順
聴きとる、調べる
大雑把にいうとお客様のことを「知る」ということです。基本的なことですが、お客様企業の業種や規模、強み、文化、歴史、将来的にどんな企業を目指しているのか？、社屋のデザイン、社内の雰囲気などなど。要するに企業の個性ですね。そして企業がターゲットにしている層、プラスターゲットにした方が良いと思われる層を把握します。
そしてお客様企業の業種についてしらべます。同業で近い規模の企業Webサイトを研究して、一般的にその業種に抱くイメージを把握します。
雰囲気をつかむ
前工程で得られた情報から、お客様企業が世の中に示すべき自社のビジュアルの方向性が見えてきます。例えば「人間味のある温かさ」とか「先進的で躍動的」とか「伝統と和み」とか。このボンヤリとした抽象的な状態をビジュアル面において、より具体化するために、言語化した言葉と同じ方向性のデザインをできるだけ多くチェックします。それらを確認しながらお客様企業の個性により合った方向性を探り具体化していきます。
デザインコンセプトを決める
この工程は、上記の「雰囲気をつかむ」と並行して進行することもあります。デザインコンセプトを設定することは、お客様企業の個性をビジュアルで表現したり、抱えている課題をデザインで解決していく上でとても大切な部分となります。方向性を具体化して、さらにデザインに落とし込むために、自分の中でイメージが湧く言葉をデザインコンセプトとして設定すると共にキービジュアルもデザインすることがあります。こうすることでプロジェクトメンバー間でのイメージ共有も行い易くなるので、Webサイト・会社案内・ムービーなど複数のメディアをデザインする際に、イメージの統一が行いやすくなり、クオリティの向上にもつながります。
デザインの方向性やディテールを考える
デザインコンセプトが決まると、デザインの方向性は頭の中で大分固まってきます。ここからは考えたことを具体的にビジュアル化していく工程になります。デザインコンセプトによって設定されたイメージをWEBサイトのデザインに落とし込むためにどうすれば良いかを考えていきます。ページ全体の見せ方やレイアウト、写真、フォント、色味など、ページ全てのパーツのデザインを考える上で、デザインコンセプトのイメージを継承していきます。これらのイメージを紙にペンで描きながら、ページ全体のイメージを明確にしていきます。
実制作
紙に描いたラフスケッチを元にパソコンでデザインを作り上げていきます。この工程はビジュアルの完成度を高めていく工程でもあります。文字のサイズ、行間、書体の太さ、余白の取り方、写真の色味など、完成度を左右する要因は、ページを構成する全てのパーツに存在します。これら全ての部分に神経を巡らせることでページ全体で完成度を上げていきます。制作過程でデザインに違和感じた場合は、ラフスケッチに戻り見せ方を練り直す等、実制作の工程においても試行錯誤が繰り返されて完成に至ります。
WEBデザインを行う上で大切にしていること
私がWEBデザインを行う上で大切にしているのが、『お客様企業のターゲットに響くビジュアルで、企業の「個性」を表現すること』です。「個性」にはお客様企業の業種や強み、企業文化、将来像などが含まれてきます。「個性」をターゲットに正しく魅力的に伝えることがWEBにおけるデザインの役割の一つだと思っています。そして「個性」をデザインに落とし込むために以下のことを大切にしています。
「個性」をターゲットに響くビジュアルに落とし込む上で大切になるのがデザインコンセプトです。デザインコンセプトを設定する時点では、目指すべきデザインの方向性がなんとなく見えてきている状況です。このおぼろげに見えている状態をより明確化するためにデザインの方向性を言語化してデザインコンセプトとします。自分の中でイメージの湧きやすい言葉をキーワードやキャッチコピーとして設定する感じです。案件によっては100～200文字程度のイメージコピーを制作することもあります。これによりストーリーが生まれ、よりデザインを明確化しやすくなります。
更にデザインコンセプトを設定することで、デザインのディテールをどうすれば良いかが明確になります。これはデザインの精度が上がるとともに、細部のデザインを決定していく上で迷いがなくなるのでデザイン業務が効率的に進行します。
せっかく良いデザインコンセプトを設定して、効果的な見せ方を考えついても、アウトプットの完成度が低くては全てが台無しになってしまいます。アウトプットの完成度を上げる工程は主にパソコンでの実制作の段階となります。ページ内のパーツやブロックの意味合いや関係性を意識して精度を上げた機能性を有するデザインは、完成度を上げるうえで最低限クリアすべき部分です。更に完成度を上げるにはデザインコンセプトが反映されたデザインが必要で、この部分がオリジナリティとなります。この完成度を高める工程は、機能性の部分については論理的に考えることができますが、オリジナリティの部分については、デザイナーとしての経験から得られる「感覚」も大切になってきます。
また、実制作ではラフスケッチを元に作り上げていくわけですが、ある程度イメージを固めた上で制作しているものの、それでも「なんか違う…」という状況になることがあります。この「なんか違う…」に気付くことができるのもデザイナーとして大切な能力になります。デザインのバランスを崩している「違和感」に気付けるかどうか、と言うことです。
まとめ
一言にデザインと言っても、ビジュアルとして形になるまで様々な工程を含んでいます。感覚だけでサクッと作っているわけではないのです。（笑）何だかデザインの大変さをアピールするような内容になってしまいましたが…（汗）
マルキンアドのデザイナーは各々が様々な業種のデザインを手掛けています。その都度その業界についてリサーチしたり、デザインを見たり、ターゲットを確認したりして、そこからデザインを導き出す。論理的に考えながらも「この方向でいく！」と決める時はデザイナーとしての感覚を頼りにしていることが多いと思います。デザイナーとしての経験値と、その案件のためにインプットした情報から感覚的に決定しているという感じでしょうか。
私自身、最近は今回ご紹介した工程を踏むことが多いですが、案件によって微妙に変えていて、これから先、お客様により良いデザインを提供するために少しずつやり方は変化していくと思います。
お客様のために、その個性を尊重したビジュアルを考え作り込んでいくという行為は、毎回刺激的で、とても楽しく、そしてお客様にも喜んでいただけて…デザインは楽しいですね！
WEBデザイナー ／ I.H
