私が大切にしているデザインの手順

      2019/01/24

”デザイン”というと「ひらめき」や「センス」「感覚」だけを頼りにして作っている。
と、未だに思っている方がいらっしゃるようですが、
そうじゃないんです!
 
デザインは、なんらかの目的を達成するための工程なのです。(だと思う!)
ロゴや画面などグラフィックのデザインは、目的達成に必要な工程の一部分に過ぎません。(だと思う!)
 
「ひらめき」や「センス」は、アイデアやグラフィックを
斜め上の方向に飛躍させるためのであって、
それだけで目的を達成する「良い」デザインができるわけではないんです。
 
 
というわけで、今回は私がホームページを作るときの手順を紹介します。
大まかに下記のイメージのようにステップを踏んでいきます。
 
それでは、ステップごとに詳しく説明しますね。
 
 

1.ヒアリング

 
現在の状況やどんなウェブサイトにしたいのか、お客さんにお伺いします。
 
メールなどで要望を伝える方法もありますが、
初めてお取引する場合などは、文章では意図が伝わらないことがありますので、
直接会ってお話する方が良いと思います。(Skypeとかfacetimeでも可)
 
ヒアリングする内容はこんな感じでしょうか
 
・通常のビジネスについて
 - どんなお客さんが多いのか
 - どんな強みがあるのか
 
・既存のホームページについて
 - 運用方法
 - 不満がある箇所、改善したい箇所
 
・希望するホームページについて
 - 掲載する内容
 - 必要な機能
 - (あれば)デザインの参考サイト
 
・予算
・スケジュール
 
 
ヒアリングの段階では、「目的」や「ターゲット」を明確にすることが大事。
 
 
 
 

2.調査

 
ヒアリングした結果を踏まえて、競合他社のウェブサイトを調査します。
この調査という作業は、デザインする上で非常に重要と考えています。
 
わたしの調査方法は、
競合他社のウェブサイトを100コ見て、「良い」と思ったポイントを記していくというものです。
この作業は「CHECK 100」と名付け、必ず行う作業にしています。
 
・色味がいいな
・写真の雰囲気がいいな
・背景素材に紙を使うのいいな
 
などなど、「良い」と感じたポイントを書いていくのですが、
なにが「良い」と思ったのか、具体的に書くことが大事です。
そして「良い」の基準は、クライアントのウェブサイトに相応しいかどうかです。
 
競合他社のウェブサイトを100コ続けて調査すると、
目指すべき方向やポジショニングが見えてきます。
 
 
以降の作業は、目指すべき方向やポジショニングを踏まえて作業します。
 
 

3.サイト構成案作成

 
目指すべき方向やポジショニングが見えてきたところで、
「サイトマップ」「ワイヤーフレーム」を作成します。
 
どちらもウェブサイト制作の専門的な作業です。
 
「サイトマップ」は、ウェブサイト全体の画面数を確認するためのものです。
ツリー図やサイト構成図などと言われることもあります。
 
「ワイヤーフレーム」は、
それぞれの画面に、何を配置するか確認するためのものです。
他ページへリンクするボタンや写真など。
写真を配置する場合には、どんな写真かも記載しておきます。
 
ワイヤーフレームは、Adobe XDで作成しています
 
 
 

4.画面デザイン作成

 
いよいよ画面デザインという作業です。
ワイヤーフレームで決めた内容に沿って、
Photoshopなどで、画像やテキストを配置し、装飾なども加えて
実際の画面に近づけていく作業になります。
 
ウェブサイトでは作成する画面が数十ページになることも多いので、
わたしの場合は、段階的に画面デザインしています。
 
(1)初期デザイン案
 - 画面の印象や雰囲気を確認してもらうためのもの
 - トップと下層ページの2ページほど
 - 2案〜3案ほど作成する
 - PC、スマホのいずれかのみ
 
(2)主要ページのデザイン
 - 初期デザイン案をブラッシュアップして、最終的なデザインに仕上げる
 - トップと主要画面 数ページ
 - スマホページも作成する
 
(3)下層ページのデザイン
 - 主要ページでFIXしたデザインをベースに、他のページも作成する
 - 似たような画面は作成しない場合もあります。
 
 
それぞれの段階で、クライアントに確認しています。
 
 

5.HTML/CSSコーディング

 
最後はHTMLコーディングですね。
ここは力技です!気合を入れてやります。
 
完成したらサーバーにアップして、クライアントに確認してもらいます。
 
 
 

まとめ

 
いかがでしたでしょうか。
 
ヒアリングで「目的」や「ターゲット」を把握して、
調査でポジショニングを見極め、「目指すべき方向」を決めていきます。
 
デザイン物が「目的」や「ターゲット」に刺さるようにコントロールするのが
デザイナーの仕事っていうことが、少しでも理解していただけたら嬉しいです。
 
 

 - デザイン全般