【ゼロから始める】WordPressの自作テーマで店舗サイトを作成する方法【ワイヤーフレーム編】

今回は【ゼロから始める】WordPressの自作テーマで店舗サイトを作成する方法のワイヤーフレーム編です。
ワイヤーフレームはコンテンツをどこに配置するかざっくり配置したのもです。
ざっくりした設計図みたいなものです。

今回はTOP画面のワイヤーフレームのサンプルを作成しました。
本当はもっと細かく作成するんですが、今回は自分にだけわかればいいのでこんな感じでも大丈夫です。
クライアントさんと打ち合わせなどする場合はもう少し具体的にするといいですね。

今回のトップ画面に入れる情報は
●ファーストビュー
●最新ブログ一覧
●最新NEWS一覧
●店内イメージ画像
●おすすめメニュー
●アクセス・住所
●お問い合わせボタン
●予約ボタン
●SNSリンクボタン

上記のコンテンツをトップに入れ込むことにしました。
他ににも入れたいコンテンツがあれば入れましょう。

今回はAdobe XDで作成しましたが、初心者の方は紙などに書いても大丈夫です。



コンテンツの配置の順番ですが、
まずはファーストビューですね。
これはこのお店がどんなお店がパッと見でわかるような看板のようなものですね。
ファーストビューのデザインはその下のコンテンツなど見てもらえるか重要なコンテンツなのでデザインするときはしっかりイメージを崩さないうように気をつけましょう。

次に持ってきたコンテンツはABOUT USですね、これはここのお店がどんなお店なのかを紹介するためのコンテンツをしましょう。ファーストビューで次になんのどんなお店かを知ってもらうためです。

次によく更新されるだろう、NEWS(お知らせ)とBLOG(ブログ)を持ってきます。
サイトが更新されてるように見せるため、更新されるコンテンツはなるべく上に持ってきた方が、ユーザーの興味を惹きやすいです。

次に店内イメージです。どんな店内で実際いきたくなるような店内写真があったらいいですね。

その下におすすめメニューを持ってきてます。
実際のお店のメニューの美味しそうな写真などがあったらユーザーの気を引くことができると思うます。

次に場所のアクセスです。

最後に予約ボタンとお問い合わせボタンを設置してます。

上記で配置したコンテンツの流れはユーザーの意識になるべく連動したコンテンツ配置を心がけた方がいいと思います。

【ユーザー目線から考えみます。】
ファーストビューでパッとみどんなお店かを感じる

具体的にどんなお店だろう、、、飲食店などはジャンル(和食、イタリアンなど)、売りにしている特徴など

最近どんなことをしてるんだろう
お得なコースや特典、季節のメニューなどが更新されてる

ユーザー『ちょっと行ってみようかな、、誰と行こうかな、一人でも行けるかな、、』
店内はどんな感じなのか写真でアプローチ

ユーザー『実際の料理はどんなのがおすすめなんだろう』
おすすめのメニューで興味をひく

ユーザー『食べてみたいから行こう』
アクセス・住所

ユーザー『予約でもしておこうかな』
予約ボタン

こんな風にうまくはいきませんが、このようにユーザー目線のコンテンツの流れに配置した方がユーザーは万遍なくサイトをみてもらうことで、実際の来店などに繋がると思います。

もちろんこの流れは正解ではありません。もしかしたら、メニューを一番上に持ってきた方がユーザーの興味を得ることで来客に繋がるかもしれません。
これは人ぞれぞれの考え方なので、反響などがなかったらコンテンツの配置を変更することもおすすめです。よく言わせるABテストというものです。

とりあえず、今回はこの流れで作成してみようと思います。