Webサイトの構成づくり

こんにちは。フリーランスデザイナーのsayakaです。

私は2023年10月頃からデザインの学習を開始し、現在はフリーランスとして活動しています。

本や動画、実践でインプットはできているのですが、アウトプットが足りておらず、せっかく学んだことが活かせないのはもったいないなと思い、アウトプットの場としてnoteを始めることにしました。
自分の知識の定着＋誰か一人でもお役に立てるようなことがあれば嬉しいです！！

記念すべき第1回目✨は、
【Webサイトの構成づくり】についてです！

Webデザインの方法はインターネット上に載っていても、そもそもの制作の流れや構成の作り方はなかなか調べても出てこない…🤦‍♂️
といった経験がありました。

最近、実践の場で先輩デザイナーの方にその方法を教えていただきました。
Webサイトの構成作成はデザイン制作に入る前の大切な土台となります。
ここで間違いや漏れがあると、ユーザーにとって使いづらいサイトや本来の目的が達成されないサイトになってしまうので要注意です。

まず、Webサイト制作の大まかな流れを理解します。
以下の5STEPとなります。

【Webサイト制作の流れ】

1. サイトに入れるコンテンツを決める

2. 全体の構成を組む

3. ワイヤーフレームを作成する

4. デザインやライティングを行う

5. 実装する

今回はコンテンツ決めと構成作成の具体的な方法をご紹介していきます。

1.サイトに入れるコンテンツを決める

①サイトに入れたい要素を洗い出す

サイトに入れるべき項目を付箋に書き出していきます。
記載する内容としては、クライアントからヒアリングしたことや、デザイナー視点で入れた方が良いと思うことをもとに考えていきます。
付箋はホワイトボードや大きな紙にペタペタと貼っていきましょう。
内容は後で精査するので、この段階ではとりあえず思いつくままに箇条書きで書いていって大丈夫です。
この作業はできれば複数名で行うことがおすすめです。
理由は、複数名で行うと自分にはなかった視点も出てきて漏れがなくなるからです。

【この時のポイント💡】

• 書き出す項目はできるだけ細かい方が良いです🙆‍♀️
  →小項目から中項目、大項目へとまとめていけるので、最初は小項目で書き出すとあとで分類しやすくなります。
  

• 同じサイトの種類のWebサイトではどのような項目が掲載されているかリサーチする。
  →一般的に必要な情報の漏れがなくなります。
  

• 上記＋αで当該サイトを制作する目的に沿った内容を洗い出す

②①で洗い出した要素を分類分けしていく

次に、1で洗い出した項目を分類していきます。
情報の種類として似ているものをまとめていきます。
まとめた情報がそれぞれどの分類になるかタイトルをつけていきます。
例）営業時間、住所、電話番号⇒店舗情報

このタイトルがメニューの項目になります。

2.全体の構成を組む

①各項目の優先順位をつける

分類ができ、メニューの項目が決まったら、次は各項目の優先順位をつけて全体の構成を考えていきます。
優先順位をつけるポイントは「サイト制作の目的」を重視すると良いです。
サイトを訪問したユーザーがどの順番でコンテンツを見ると、希望通りのアクションを起こしてくれるかを考えていきます。
ここもできれば複数名で行います。

②最後に5W1Hを満たしているか確認する

優先順位をつけて、全体の構成ができたら最後にwebサイトの構成が5W1Hを満たしているか確認していきます。

【5W1H】
What→何を伝えたいか？（目的）
Who→誰に伝えたいか？（ターゲット）
When→時間情報（営業時間、受付時間など）
Where→場所の情報（お店や会社の所在地など）
Why→なぜ伝えたいのか？（コンセプトや理念）
How→どうやって？（手段）

ここまでの手順を実際に行うと、下記のようなボードが出来上がります！

実際にコンテンツ決め→構成決めを行った場面

いかがでしたでしょうか。
この方法ですと、スラスラとコンテンツの洗出しができ、かつ、漏れのない構成ができます。
特に、載せるべき項目が多いコーポレートサイトでは思考整理に役立つと思いますので、ぜひ皆さんも試してみてください〜！

今後は週一ぐらいでnoteを更新していきたいなと思っているので、ここで宣言して頑張ります！⭐️