[ウェブデザインの基礎] ウェブデザイン?ウェブ”ページ”デザイン?するべきこと・流れ

ウェブデザイン?ウェブ”ページ”デザイン?

今回習得していくのは、デザインの中でもウェブのデザインです。
(情ビっぽいね〜)

そう聞くと多くの場合「ウェブサイトの見た目を整えるデザインをするんだろうな」と考えると思いますが、
実はそれは「ウェブ”ページ”デザイン」であって「ウェブデザイン」ではありません。

しかし我々が行わなければいけないのは「ウェブ”ページ”デザイン」ではなく「ウェブデザイン」です。
正確に言うと「ウェブ”ページ”デザイン」だけしていればいいわけではない、ということです。

・・・どういうことか??一言で言えば・・・

ウェブデザインが作るのは「プロジェクト自体」。
ウェブ”ページ”デザインが作るのは「ページの見た目」。

ということになります。
次の「ウェブデザインでするべきこと・流れ」を見ればその違いがわかるはず。

ウェブデザインでするべきこと・流れ

ではウェブデザイナーはウェブデザインを通して、何をするべきなのでしょうか?
この講義にならい、ウェブサイト制作を前提に考えてみましょう。

ざっくり工程を挙げると以下の様なものになります。

1. ヒアリング
2. プランニング
3. 制作金額の見積もり
4. ページデザイン・修正作業

こうして挙げると「たかだか4工程か」と思うかもしれないですが、
ウェブデザインではこの4工程こそが最も重要です。

そして今日の講義の最重要ポイントもここです。
しっかりと記憶に浸透するようにじっくり時間をかけて理解を深めましょう。

以下の各セクションで、タイトルに心得、文末に成果物を記しています。
心得は、各工程に望む心構え、念頭に置いておくことです。
成果物は、各工程をこなしたことで得られる作業結果、具体的に言えばファイルデータです。

心得は作業工程中は忘れず、成果物はそのまま販売できるレベルのものを仕上げたいですね。

ヒアリング・・・心得:クライアントの依頼の目的は何か?をさらに深堀り!

クライアントの依頼の目的は何か?

ウェブサイト制作を始める時、まずクライアントの依頼の目的、
つまりクライアントが何を求めているかを知る必要があります。

なぜお問い合わせをしてくれたのか?
なぜウェブサイトを作りたいのか?
誰に届いて欲しいのか?
その結果クライアントは何を得たいのか?

そして・・・なぜ自分たちへ相談をしてくれたのか?

それらを知るために何をすればいいのか・・・それはヒアリングです。
依頼内容を把握するためにはしっかりと話を聞かなければいけません。

ヒアリングシート

例えばこれは龍弥デザインのヒアリングシートです。

(ちなみにこのヒアリングシートは頂き物で、龍弥デザイン用に調整したものです。)

どういった内容を確認しなければいけないのか?
どういった要望があるのか?を全てまとめて書いてあるので、
ちょっと面倒なアンケートくらいのボリュームがあります。

ただ、これだけの項目数があっても最低限です。
まずは依頼内容をヒアリングし、共有することからデザインは始まります。

考えの差異のすれ違いを未然に防ぐ

またヒアリングの際もクライアントに対して、
こちらの理解が間違っていないかの確認をこまめにしておくことがポイントです。

「自分はこういった受け取り方をしていますが、間違ってないですよね?」という確認をすることで、
クライアントもこちらがどれだけ理解しているかを把握できて、考えの差異を最小限にとどめることができます。

このヒアリングを怠ると、プロジェクトに対してお互いの理解のズレが生じてしまって進行が滞り、
最悪の場合、想定外の仕様や修正に対応の必要が発生し、希望納期までに納品できなくなってしまうこともあります。

ヒアリングは最初に行いますが、最大の難関で最も重要な工程です。
聞き出した情報の整理は後からすればいいことですが、
できる限りたくさんの制作に必要な情報を聞きださなければいけません。

腕の見せどころ!クライアント自身が気がついていない要望を聞き逃すな!

そしてできれば、クライアントご自身も気がついていない、
または気づいて欲しい要望などにも気がついてあげなければいけません。

話をしているとたまに「〇〇とかあったほうがいいのかな〜」などと、ぽろっと口に出すことがあります。
さぁ最大のチャンスの到来ですよ!プロとしての腕の見せどころ!絶対に聞き逃さないで!

その内容を聞き逃さず、クライアントの「こうだったらいいのに」の結果が200%になる仕掛けを作ってあげましょう。
体感的に、それができるかどうかがプロとアマチュアの違いの一つかもしれません。

ヒアリングによる成果物

なお、この工程で出来上がる成果物は「ヒアリングシート」です。
上にある様なシートに内容をまとめ、クライアントにメールなどで共有をしましょう。
ちなみに自分だけで管理して他人には見せないのであれば手書きのままでもいいですが、
クライアントやプロジェクトメンバーと共有するのならWord文書などデータにしておきましょう。

プランニング・・・心得:期待以上のプランを提示することが最低限=プロ

仕様書

事細かにヒアリングを行ったことによって、クライアントが何を求めて依頼してきたかがわかったはず。
ではそのヒアリングした内容から、制作内容のプランニングを行います。

「お問い合わせフォームを設置したい」

「営業日をカレンダーで表示したい」

「お知らせなどを自分で更新できるようにして欲しい」

などなど、クライアントからの要望が出てきているはずですので、
これをわかりやすくまとめましょう。

複数人でのプロジェクトでしたら、自分だけではなく、
プロジェクトメンバーが見てもわかりやすくまとめる必要があります。

誰にでも見やすくまとめられていたら、そのまま仕様書として使えます。(これデカイ)

そしてヒアリングで気づいたクライアントの要望に応えるべき時が来ました!
クライアントの潜在的に持っていた要望を聞き逃さなかった自分を褒めてあげてください!

クライアントのことをできるだけ理解しようと努力した上で、
最適な状態に作り直してプランに盛り込んでみましょう。
絶対に喜ばれます!なんならそれが仕事受託の決定打になることもあります!

サイトマップ

仕様書の一部として、またはそれ単体として作らなければいけないのがサイトマップです。
サイトマップとは、このウェブサイトにどういったページが存在するのかをまとめたもの。

ウェブサイトにはよくサイトマップというページがありますが、
これを紙媒体で見やすくまとめたものと考えればいいかなと思います。

参考までに、龍弥デザインのサイトマップページとサイトマップを見比べてみてください。

参考ページ:サイトマップ – 龍弥デザイン 岡山 ホームページ制作

参考ページ:龍弥デザイン Webサイト サイトマップ

プランニングによる成果物

ということで、この工程で出来上がる成果物は「仕様書・サイトマップ」です。
ヒアリングシートの内容をまとめ、クライアントにメールなどで共有をしましょう。

制作金額の見積もり・・・心得:変動は当然あるものとして受け止める

作業費用の見積もり金額を算出

プランニングが終わると、その内容をもとに暫定の制作費用額を算出することができるようになります。
制作費用が決まったら、見積書にまとめてあげましょう。
何にいくらかかるのかを事細かに列挙してあげると理解されやすく承認を得やすいです。

そして制作費用額の内容によっては、
「予算オーバーだからここを削ります!」だとか、逆に、
「この金額なら予算に余裕があるからこんな機能を追加したい」というようなこともあります。
当然真っ先にページ数と機能の点数や内容が変動しますので、先程のサイトマップは組み直しになります。

そしてさらに当然の話ですが、ほとんどのクライアントは予算が限られていて、
「この予算内で・・・」とか「どれくらいかかるものなんでしょうか・・・」などと、
お金の話になるとすごく慎重になります。

予算のあるクライアントさんは本当に一握りで、
年に一度巡り会えばラッキーくらいに思っていればいいと思います。

せっかく考えたプランがNG・・・でも自分の引き出しにしまえ!

そして実は、結構な確率で練りに練ったプランに予算的なNGがでる場合があります。
もちろん、「あれだけ時間をかけたのに・・・」と悲しくなってしまうこともあります。
しかし予算だけはどう頑張っても動かないことがほとんど。

しかしこの経験こそが後の宝物になります。
必死に考えて絞り出したアイディアは今後の活動でも強い武器になるからです。
自分のアイディアの引き出しにそっとしまっておきましょう・・・。

制作金額の見積もりによる成果物

この工程での成果物は「お見積書」と場合によって「サイトマップ(改訂版)」です。
1項目として書いていますが、実際にはこれが何度か繰り返されることもあります。

ページデザイン・修正作業・・・心得:トップページデザイン確定までが最も時間がかかる

いよいよページデザイン作業開始!やることが引くほど多い!

全体のプランニングが固まったら、今度はそれをページデザインに落とし込んでいきます。
ここで初めて見た目という意味での「デザイン」を制作し始めるわけです。
つまり、上述した「ウェブ”ページ”デザイン」はこの工程のことを指しています。

多くの場合「デザイン」は、このページデザインのことだと思われていますが、
今までの流れを見ればわかるように、実は多くの工程の中の一つにすぎません。
その工程の中にも手間がかかる作業がたくさんあり、1ページのデザインを作るまでにかなりの時間を要します。

トップページデザイン確定までのワークフロー

ウェブデザインではトップページのデザインによってページデザインの方向性が決まるため、
多くの場合、まずトップページのデザインからの着手になります。

そしてウェブデザインの工程全体で計算しても、
ここが作業時間の最も多くの割合を占めるところ・・・。
多くの場合、一番時間がかかります!

詳細なワークフローは以下。

1. クライアントの要望に近いデザインの見本サイトを3〜5点ほど探す。
2. それをクライアントに確認し、ページデザインの方向性を決める。
3. デザインラフ(手書き)を制作。あまり時間をかけすぎない。
4. デザインラフを元にワイヤーフレーム(構成案)を制作。実際のサイズで作る。
5. ワイヤーフレームをクライアントに確認。チェックバックをもらい修正を行う。
6. ワイヤーフレームを元にクライアントにページ原稿を作ってもらう。
7. ワイヤーフレームとをページ原稿を元にページデザインに着手。
8. ページデザインをクライアントに確認。チェックバックをもらい修正を行う。

ところどころ「確認」と「修正」を繰り返していますが、
ページデザインはデザイナー1人の判断で作れるものではありません。
出来上がったページデザインをクライアントにチェックしてもらい、
7と8をひたすら繰り返し、修正や微調整を行ってようやく完成の状態になります。

そして以後の講義ではこのページデザインの工程を主としてレクチャーを行います。

下層ページでもページごとにワークフローを繰り返す

トップページ以外のページ(以下:下層ページ)ももちろんこれを繰り返します。
ただトップページの制作でデザインの方向性をしっかり決めておけば、
下層ページ制作の際には、3もしくは4から8までの作業ですみますね。

ページデザイン・修正作業の成果物

この工程の成果物は、
「デザインラフ・ワイヤーフレーム・トップページデザイン」です。
みなさんが「ウェブデザイナー」という職業をイメージしやすいのはこの工程ですね。