ウェブサイト制作のデザイン前段階のポイント
デザイナー兼フロントエンドをしています「こがけん」です。
ウェブサイトのリニューアルや改修を繰り返しているが、どうしたらWebサイトのデザインが良くなるのか悩まれた経験はないでしょうか？
僕も自分が作ったデザインは結局良いデザインだったのか、どうしたら良いデザインになるのかよく悩みます。
その悩みを解決するために、国内海外問わず有名なデザイナーさんの動画や本でインプットをし、良いとされているデザインを勉強してきました。
ウェブサイトを制作するにあたり、見た目や設計、実装など様々なことを考慮しながら制作しています。もちろんテクニカルな部分もあるのですが、ウェブサイト制作はデザインする前段階が大切だったりします。この記事では、デザイナー兼フロントエンドが自らの経験をもとに、特にUI/UXにおいてデザインする前に気をつけていることを紹介していきます。
ウェブサイトの構成について
ここで言うウェブサイトの構成とは、どんなページがあって、階層構造がどうなっているかを指します。
例えば、よくあるコーポレートサイトでしたら以下のようなウェブサイトの構成になります。
トップページ
会社概要
サービス
各サービス詳細
採用情報
お知らせ
お知らせ記事詳細
お問い合わせ
上記をウェブサイトの構成とこの記事では呼ばせていただきます。
ウェブサイトの構成は、サービスやプロダクトなどの方向性に基づき、さらにリサーチを行った上で考えていきます。
ウェブサイトの構成が整理されていないと、回遊がしにくく・情報にたどり着きにくいサイトになってしまうので、方向性の共有とリサーチはとても大切になってきます。
（ちゃんと考えてNotionやGoogleのスプレッドシートでまとめます！)
方向性の確認
まずどんなウェブサイトを誰に向けて作るのか明確にします。
お客様のサービスやプロダクトへの理解を深め、どのようなマーケティング活動をしたいのかを把握し、必要なコンテンツを洗い出します
新規制作ではなくリニューアルの場合は、既存のサイトも参考にしつつ、必要なコンテンツ・不要なコンテンツ、足りないコンテンツなど考えます。
なんでもかんでもコンテンツを入れればいいというわけではなく、ユーザーが必要としている情報を過不足なく設置していくのが大事です。それから、ユーザーが欲しているコンテンツを表示できるようにコンテンツ同士を持たせることも考えます。関連記事や関連商品を表示させるなど、ユーザーがストレスなく情報を探せるユーザビリティを考えます。
リサーチ
同じ業界やジャンルで、どんなコンテンツが重要視されている・決まり手になっているのかを調査します。「何も知らないor知っているつもり」で作るよりも、既に作られている周りのサイトを何個も見て、どんなコンテンツがどんな構成でまとめられているのかを見ておきます。競合他社と差別化したサイトを作るという視点においても必要な作業です。
このリサーチでは、競合他社のウェブサイトに関して以下のこと確認します。どんなコンテンツがあるのか
サイトの設計はどうなっているか
写真・トンマナはどうなっているか
（こちらも同様NotionやGoogleスプレッドシートにまとめていきます！）
ページ設計
リサーチとクライアント企業の方向性に基づいて、ページの設計をしていきます。
話し合っていることは基本的に以下になります。
ビジネスゴール
利用者やターゲット
課題感、改善ポイント
ワイヤー構成
機能
デザイナーは上記を受けてデザインに落とし込める粒度で再整理をしています。
機能面(絞り込み・ソート・ページネーション・カルーセル・API連携など)はユーザーの体験にも関わる部分です。どのページにどの機能が来るかはあらかじめ考えておきます。
情報設計
プロジェクトでは情報設計は大切です。基本的に以下の流れで行います。
ペルソナの洗い出し
情報の優先順位を確定
割合を決める
ペルソナ毎にストーリーを洗い出す
コンテンツを抽出する
回遊導線の確保
優先度の高いペルソナに対するコンテンツをトップページに配置
優先度が2番目以降の導線を設置
どんな流れで優先度1番のペルソナが回遊するのか思考し最適化
自分の場合、気をつける点としましては、ペルソナはそこまで深く決めつけない・ストーリーも数個あれば良しとしています。
例えば、賛否あるかと思いますが、「25歳男性、趣味サッカー、仕事は営業、ーーー細かい性格の説明ーーー」のような細かい性格までのペルソナは設定せず、サイトを訪問する可能性のある人をザッと洗い出すだけにしています。
理由は、細かく設定しても結局正解なのかわからない。そもそも個人的に細かく思い浮かばない。。。からです。
細かく設定するのも悪くないですが、自分は大枠「年齢・性別・収入・お金の余裕さや使い方・今のステータス(転職中・学生・会社員など)」がわかれば、デザインの方向性やコンテンツの見せ方は決められるので、架空の人物の”細かい性格”までは設定していないです。
ターゲットは、「何歳から何歳の男女、リテラシーはこんな層、お金に余裕があるか否か、転職中」などざっくりと抽出し、あとはその人が探している・求めているコンテンツを洗い出して優先度を考えています。
ペルソナについて深く考えることもあります
ペルソナがどんな層になるのかも考慮します。細かな具体のペルソナというより、ターゲット層のイメージ＝つまり好きそうなモノはなんだろうか？と考えます。
例えば、イノベーター理論は新プロダクトの普及でよく使われるマーケティング理論で、５つのタイプに分類することができます。
イノベーター：最新のものに敏感で真っ先に新型iPhoneを買うような人
アーリーアダプター：イケてる人がそれを使い出したら使い出す人
アーリーマジョリティ：みんなが使っているから使う人→一番多い
レイトマジョリティ：ほとんどの人が使っているから使う人→人口多い
ラガード：みんな使い始めてやっと動き出す人
極端に言うとイノベーターやアーリーアダプターは「最新の・・・」「日本初の・・・」などのワードが響き、レイトマジョリティやラガードは「〇〇万人が満足・・・」「〇〇(有名人や公的機関)が認めた・・・」などのワードが響きやすい。みたいな感じです。
あとはシチュエーションによってもイメージは変わりますよね。例えば、高価な物と安価な物ではイメージも違います。
また、即決感覚と熟考感覚についても考慮します。
即決感覚：未来の機会損失＜現在の機会損失
熟考感覚：未来の機会損失＞現在の機会損失
これらは情報設計だけでなく、デザイン・ライティングするに当たって、どんなアピールをしていくのか考える時にも使えるので、考えておくと良いです。
例）即決感覚が強い：「〇日まで無料でお試しできます」や「今だけ〇〇％割引」がより目立つデザインにする
即決感覚に作用するようなキャンペーンは、基本的には4CのPriceでの差別化になることが多いので、心理的なブレーキを取り除きながらアクセルを心理的に押せるようなデザインをします。
例）熟考感覚が強い：商品やサービスの説明をしっかりする。長期的にあなたにとって得ですよということを説明でアピール。
比較的に長く使うモノやコト、高価なモノやコトに関しては検討期間は長くなりやすいです。検討フェーズに合わせて適切なタッチポイントでコミュニケーションが取れるように、まずはファーストインプレッションで信頼度が上がるように気をつけています。
簡単にはなりますが、競合他社の調査を行い、方向性を定まっても、デザインする前に粒度を細かくして考えたりします。
このようにデザインに入るまでに時間が結構かかる場合も全然有ります。
いろいろ紹介してきましてが、デザインする前に、「構成・方向性・リサーチ・ページ設計・情報設計・ペルソナについて」などデザインする前に決めることや考えることがあります。
デザインはすぐできるんでしょ？と思われている方も多いかもしれませんが、そんなことはないんです！
また、クライアント企業の協力があってこそ、デザインに必要な情報や方向性を把握することできます。熱い想いだけはプロジェクトは前進させるのは難しいでしょう、デザイン前のプロセスでは設計にするにあたって必要な情報を整理できるかはポイントになってくるのではないでしょうか。
