デザインにおける設計
グラフィックデザイン、プロダクトデザイン、インテリアデザイン等々。デザインとは一口に言ってもいろんな種類があります。
その中でも今回取り上げたいのはWEBのデザインに関すること。他のデザインにも共通することなんですが、デザインが一つの形を授かるにはそれに行きつくための綿密な設計が必要不可欠なんです。
そんなデザインに関する設計の話を、今回はWEBデザインにフォーカスして読み解いていきます。
webにおける設計は何を意図するのか
WEBを作る上でデザインは欠かせません。しかしもっと大事なのは設計です。WEBにおける設計は
- ペルソナ
- CJM
- 要件定義
- ワイヤーフレーム
などの項目が挙げられます。
今回はひとつ一つの項目を深掘りするのではなく、全体感を見ていきたいので触れる程度にとどめたいと思います。
※もちろん、これは僕個人の意見です。他の制作会社の方々は違う進め方をこなっていることもございます。
【1.ペルソナ】
Webの設計において非常に重要なポイントがこのペルソナというものです。
製品を使用する架空のユーザー像のことを指します。ここで大切なポイントは「ペルソナは顧客理解を促すもの」
ということを終始意識して作ることです。
自分たちの理想の顧客というだけでなく、ユーザーインタビューや大規模アンケートなどで像を導くこともあります。
【2.CJM】
ペルソナをベースにこのペルソナはどう言った過程で我々の製品を手に取ってくれるだろうと工程を整理するものを
CJM（カスタマージャーニーマップ）と呼びます。いつどういったタイミングで我々の商品を認知してくれるのだろう。
どうしたら製品購入の検討をしてくれるだろう。といったように、購入までのフローとそれに結びつくユーザーの心情理解を
深めることができるのがCJMの良い使い方です。
【3.要件定義】
CJMに沿ってユーザーがWEBをどういう使い方をするかをイメージした後はその欲求を満たす為に必要な機能の整理を行います。
BtoBならすぐに商談につながるような機能が必要だったり、BtoCなら商品やサービスの魅力を存分に説明するページが必要です。
【4.ワイヤーフレーム】
デザインに入る直前の設計です。ワイヤーフレームはコンテンツの整理や導線の整理を行います。（本来的にはこの一つ前にサイトマップという段階が入ることもあります）
どういった順番だと購入やお問い合わせにつながるだろう。どうやったら目的のページに遷移してもらえるだろう。ペルソナ～要件定義までの段階でまとめた情報を
ページに落とし込んでいく段階です。
このようにWEBにはいろんな部分での設計が求められているのです。
ちなみに、デザイン制作はデザイン設計の次に入ってきます。
なぜwebでは設計が重要視されているのか
実は色々あるWEBの設計。ところでなんでこんなに設計が必要なのでしょう。そう感じますよね。これには
- クライアントとデザイナーの目線をずらさないため
- 制作の意図や、届ける人のことを理解するため
- 公開した後の改善に活かすため
などの理由が挙げられます。一つずつ順を追って説明していきましょう。
【1.クライアントとデザイナーの目線をずらさないため】
お互いに専門分野が違うからこそ、ひとつひとつの工程をしっかりと形にして見えるようにすることで理解しあえた状態で制作を進行できます。
また、都度都度の確認を行える為、双方の意見を反映しつつ一歩一歩進めることが可能です。先述したようにWEBの制作フローは多岐に渡ります。
だからこそ、お互いの理解を深めたまま進行する為に設計は欠かせないステップだと感じています。
【2.制作の意図や、届ける人のことを理解するため】
ペルソナ～ワーヤーフレームの工程でお伝えしたように、WEBはインタラクティブな媒体です。
ユーザーがどういう目的でどうやって使うと使いやすいのかを検討しつくのに役立ちます。
こういう機能を取り入れたい、こういう情報を入れたいとなった時に本当にそれはユーザーの為に必要なものなのかということを都度振り返ることができます。
【3.公開した後の改善に活かすため】
実際にユーザーの声を聴きながら作ったペルソナやCJMも、本質と外れていたりすることがあります。WEBは更新性をもった媒体なので運用していく中で
課題を見つけ、改善していくのです。その時に最初に作った設計図と見比べて、どの辺りが想定と違っているのだろう。どうしたら改善できそうだろうということを検討します。
設計はこれから成功していくための道しるべの様な役割も持ってくれます。
設計が完了したら、いざデザイン制作へ
そうこうしてやっと設計が終わり、いざデザインへ。
ロジックでしっかりと固めた設計を次は表現に落とし込んでいきます。
この辺りからは一般的な制作フローです。ここでは見た目の美しさだけでなく、使いやすさなどのインタラクティブな媒体故の重点ポイントを意識して制作します。
例えばメニューは使いやすくまとめられているのか？このボタンって押しやすいデザインになっているのか？
お問い合わせに繋がりやすい導線か？等々
全てのデザインに共通することですが、誰がどう使うのかと想定して作るのがとても大事です。
そして、誰がどのように使うのかを整理するために、ペルソナとCJMが必要になってくるのです。
使いやすさを考え抜き、立ち返る場所が「設計」なのです。
そしてコーディングへ、コーディングではコード設計がとっても大事
さてさて、デザインまで完成したら残るはコーディングです。（本当はドメイン取得や、サーバー接続などの専門知識を要する作業が残っていますが、またの機会にご説明いたします）
コーディングはデザインと同様に使いやすさを考慮しながらコードを書いていきます。
しかし、ここで使いやすさはユーザーに向けてだけではなく、コードを編集する側も含まれます。
一般的にいうと「保守」の分野です。
WEBは完成した時が完成ではありません。公開してから改善を繰り返し、求める結果を得るまで改善改善改善改善、、、、と続けるのです。
そういった意味ではWEBに完成という状態はないのかもしれません。
そして、そういった改善を繰り返していく中で何度も何度もコードを書き直します。
だからこそコーディングを書いていく前にコード設計をする必要があります。
どこまでコードを統一しよう。ここは他のページでもよく使うからテンプレート化しよう等。
公開してから成長していく為に、コードの設計はしっかりと手を抜かずに取り組む必要あります。
まとめ
今回はWEBの制作フローの中でも特に設計の概要・意図にフォーカスしてご説明しました。
もちろん、WEBデザイナーがこれらの工程を全て踏むかと言われるとそうでない場合もございます。
ただ設計をすることでWEBサイトとしての目的を達成しやすいことは間違い無いので、NY-Dでは予算の許す限りこう言った取り組みも行っております。
Webを制作する側、制作を発注する側の相互理解が少しでも深まればいいなと思いながら記事の執筆を行いました。