Webサイト（ホームページ）の企画を考えて、ワイヤーフレームを作る方法

Webサイトの設計図を書いていこう

前回は要件定義についてお話していきました。
Webサイト（ホームページ）制作の要件定義書の作り方
要件定義書を作成し、プロジェクトで達成したい内容を固めていきました。

次のステップは、どんなサイトにするのか、Webサイトの企画を考えていきます。
Webサイトの設計をしていくために、Webサイトのターゲットと目的、施策を考えていきます。
そして、設計の最後にはWebサイトの設計図であるワイヤーフレームというものを完成させていきます。

ここで重要なのは下記の３つのポイントです。

Webサイトのポイント

もう少し具体的なお話をしていきましょう。

ターゲットとは顧客や、見込み客と呼ばれる顧客になりうるユーザーのことです。

ターゲットとなるユーザーに対してどのくらい有益な情報を提供できるかが、Webサイトの集客効果につながっていきます。

例えば、同じフランス料理を扱った飲食店であっても、ターゲットのユーザーは会社やお店ごとに異なってきます。

若いカップルを想定しているのか、それとも50代の熟年層をターゲットとしているのかで、Webサイトの設計や後行程で考えるデザイン制作も大きく変わっていきます。

効果を上げるWebサイトとするためにも、主眼に置くターゲットのユーザーをしっかりと話し合うことが肝心です。

ターゲットが決まったら、そのユーザーに対して何をしていくのか、つまりWebサイトの目的を考えていきます。

その目的を考えていくうえで、先ほどのターゲットが重要になります。

例えば先ほどのフランス料理のお店であれば、若いカップルに対してであればデートの場所として使ってもらうことを目的としてもいいですし、50代をターゲットとするのであれば、Webサイトに慣れていない可能性がありますので、できるだけわかりやすくお店の案内をするということを目的としてもよいでしょう。

ターゲットと目的を考えたら、最後に施策を考えます。

フランス料理店の話をつづけると、若い人にデートの場所として使ってもらうのであれば、「このお店はデートの場所として最適です」ということを伝えるために、内装のきれいさや煌びやかなお料理の写真をふんだんに使ってお店への興味を引く必要があります。

一方、50代の熟年層をターゲットとするのであれば、少し文字を大きめにしたり、できるだけ使いやすいWebサイトを目指していきます。

さて、ターゲット・目的・施策が重要と言われても、いざ考えようとなるとなかなか思いつかないものです。
そうしたときは競合他社のWebサイトを見ることをおすすめいたします。

ここで重要なのは有名どころのWebサイトを見てみることです。
例えばフランス料理であれば、「東京　フランス料理」などで検索して、有名なフランス料理店がどのようになっているのか調べてみるとよいでしょう。

私も調べてみましたところ、このようなWebサイトがでてきました。

東京のフランス料理店

エクアトールさんはTOPページに表示されている空席状況の案内がいいですね。エスキスさんとレフェルヴェソンスさんは画面全体に写真を大きく使ったおしゃれなWebサイトですね。

「自分はこんな東京でバリバリやってるお店じゃないからなぁ…」なんて思わずに、いいところは取り入れて、素敵なWebサイトにしていきましょう。

また、完全な同業でなくても、飲食店がどのようなWebサイトになっているのかを知っておくことは重要です。

そんな時にやくに立つのが、Webデザインのまとめサイトです。

まとめサイト

かなりとがったWebサイトも多いですが、こうしたWebサイトの中から「このWebサイトは使いやすそうだな」という見当をつけるとよいでしょう。

さて、ターゲット・目的・施策を考えたら、これらのアイデアをワイヤーフレームというWebサイトの設計図の作成に入っていきます。

企画で行う最後にステップのワイヤーフレーム作成はあくまでレイアウト案です。どう配置するかを決めます。

実際のワイヤーフレーム作成については、話がながくなってしまいますので、下記のページで詳しく見ていきましょう。

それでは今回のレクチャーはこれで終了です。次回はデザインについて発注者が気を付けなければならないことを学んでいきましょう。