デモサイトを作ってみよう①

こんにちは!

AYDesignです。

Adobeストックをお試しで使ってみたら、解約するのを忘れてうっかり3ヶ月も料金を払ってしまっていました!

1ヶ月10点まで、写真素材やイラストがダウンロードできるAdobeストック。

クオリティが高い写真や、ベクター画像が揃っていて便利です。

しかも10点使いきれなかったら、次の月に繰り越されます。

私は3ヶ月も放置していたので、使える素材が30点も溜まってしまっていました!

解約すると、せっかくの30点も使えなくなってしまいます。

もったいないので、この素材を使って、デモのWEBサイトを作ってみようと思います。

パン屋さんのデモサイトを作ってみよう

Adobeストックに、パンの素敵な素材があったので、パン屋さんのHPを作ることにします。

私も、自分が作りたい、こんなクライアントさんが来たらいいなあ〜という想定で作ります。

1.架空のパン屋さんにヒアリング


今回は、以下のようにふわーんと「HPがほしいな」と思っているパン屋さんを想定します。

店舗名は「Wonderful Bakery」。

オーナーは、パンダさんと言います。

「小麦や酵母などの素材を生かした、遊び心のあるおいしいパンづくり」にこだわっています。

奥さんと、スタッフを1人の3人体制でお店を回す、こじんまりしたパン屋さんです。

住宅街の中の目立ちにくい場所にあり、お客さんは近所の人が多く、認知度は「知る人ぞ知る」なのですが、美味しいと定評があり、愛されています。

パンダさんは、もうちょっと認知度アップして、隣町からもお客さんが来るようになればいいなあと思っています。

パンダさんは

  • インスタグラムはやっているけど、HPは持っていない。
  • どんなこだわりを持ってパンを作っているか、伝えたい。
  • 定番メニューを一覧で紹介できるページがあったらいいなあ。と思っている。
  • 最新情報や、新商品などはインスタで対応するから、HPの更新はあまり必要ない。
  • 名刺代わりの簡単な、でも素敵なHPが欲しい。
  • ゆくゆくは通信販売も考えている。


とおっしゃいます。


目指す完成イメージは

ナチュラルで、洗練された、でも少し遊び心のある、敷居が高くない雰囲気。

とのことです。

2..載せたい情報を洗い出しする

まず、HPに載せたい情報をヒアリングします。

  • 住所、電話番号、営業時間など、店舗情報
  • アクセスマップ
  • お店のこだわり
  • 定番商品の一覧
  • SNSへのリンク(インスタ)

載せたい情報は、「どんなお店かがわかる」基本的な情報だけなので、縦に長い1ページのサイトで十分だと思います。

ここで、キャッチコピーや、載せたい文章、があればそれも送っていただきます。

リライトしたり、一緒に考えることもできます。

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

載せたい情報と、ページ数が決まったので、ワイヤーフレームを作っていきます。

ここで、写真やイメージ画像をどのくらいの分量で使うのか、ボタンはどこに配置してどこに飛ぶのか、などざっくり共有理解します。

ワイヤーフレームが完成しました。

デザインではなく、ページの構成やリンクがどうなるかを確認するためのものです。

これをパンダさんにみてもらいます。

続きは、次回。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です