
こんにちは!
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです!
Webデザイナーってどんな仕事内容?これからWebデザイナーに挑戦したい!という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています!
今回は、Webサイト制作に1番重要なサイト設計について分かりやすく解説します。
サイト設計をして目的を達成できるWebサイトを作ろう!
サイト設計とは?
サイト設計とは、Webサイトが何のためのサイトか、どんな人が見るサイトか、目的は何か、など、Webサイトには必ず目的があると思います。
その目的を達成するためにサイト設計が必要になります。
サイト設計は多くの場合、Webディレクターが行います。
Webディレクターが設計したものを、デザイナーやエンジニアに共有し、意見を出し合って完成させます。
完成した設計をクライアントに提案し、認識を合わせます。
ここで認識を合わせることで、関わる人全員の目的が同じになるので、修正が大幅に減り、制作がスムーズに進行できます。
サイト設計しないと?
サイト設計をしないと、クライアント、制作メンバーなど、サイトの目的が分からず、何となくで進行してしまいます。
例えば、
- デザイナーは青が好きで青っぽいデザインを作ったけど、クライアントは緑がすきなので一からやり直しになってしまった
- 1番目立たせたいものがクライアントと制作メンバーで違い、実装後に大幅な修正が発生してしまった
など、制作中や運用してから大幅な修正が発生してしまう可能性が高いです。
修正だけなら良いですが、サイトの目的も設定していないので、目的を達成できない可能性もあります。
このようなことが起きないように、制作前に必ずサイト設計を行いましょう。
サイト設計の流れ
サイト設計は色々なやり方があり、サーバやインフラ設計など、たくさんありますが、ここでは基本的なタスクを解説します。
目的設定
まずはサイトの目的が最も重要になるので、最初に設定します。
商品を売るECサイト、サービスを売るサイト、何かを宣伝するサイト、企業のコーポレートサイト、など色々あると思います。
商品を売るECサイトであれば、商品を売ることが1番の目的になり、何かを宣伝するサイトであれば、その宣伝するものを魅力的に見せ、購入ボタンをクリックなどの次のアクションにつなげることが目的になると思います。
目的はクライアントの要望を聞き、しっかり設定しましょう
ターゲット設定
次はターゲットの設定をします。
ターゲットとは、サイトを見るユーザーのことで、男性なのか女性なのか、年齢はどのくらいなのかを設定することです。
「老若男女全ての人に見てもらえたらアクセスも多く目的も達成できるんじゃ?」と思う方もいるかもしれませんが、これは中々難しいことです。
例えば商品を売るサイトで、全ての人に向けてサイト制作をすると、確かにアクセスは多くなるかもしれませんが、1番狙っているターゲット層の購入率も下がる傾向があります。
1番狙っているターゲット層ためだけの勢いでサイトを作った方が、結果購入率が上がり、目的を達成できる場合が多いです。
サイトは多くの人に見てもらうために制作するのではなく、商品を売るなどの目的を達成するために制作します。
ここを忘れないようにターゲットは出来るだけ細かく設定しましょう。
サイトマップ作成
サイトマップとは、その名の通り、Webサイト全体の地図のようなものです。
Webサイトは階層で考えるので、1番上にトップページがあり、その下にサービス紹介ページ、会社概要ページがあり、さらにその下に細かい内容があればページを作る、のようなイメージで、サイトマップを作成します。

サイトマップを作成すると、頭の中で構成がイメージしやすく、ボリューム感も分かるので、クライアントと認識を合わせやすいです。
ワイヤーフレーム作成
サイトマップを作成したら、次はページ毎のワイヤーフレームを作成します。
サイトの目的を意識しながら作成しましょう。

この例は簡単なものですが、このような形でどこに何の要素がわかるものを作成します。
ワイヤーフレームが完成したら、デザインに入る前にクライアントに見せて認識を合わせておくと、修正も発生しにくいです。
最後に
以上、Webサイト制作に1番重要なサイト設計について解説しました。
ここでは基本的な設計の内容になり、他にもWebサイトは色々と決めることが必要です。
Webサイトは直感で制作するのではなく、しっかり設計して制作するようにしましょう。

最後までお読みいただきありがとうございました!
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです!
何か気になること等あればお気軽にコメントください。
コメント