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

こんにちは!

AYDesignです。

Adobeストックの素材を利用して、架空のパン屋さんのHPを作っています。

店舗名は「Wonderful Bakery」。

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

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

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

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

パンダさんは、もうちょっと認知度アップして、隣町からもお客さんが来るようになりたいとのことで、ご依頼いただきました。(という設定)。


前回は、ご依頼を受けてヒアリングし、ワイヤーフレームを作るところまでいきました。

前回の記事はこちら

ワイヤーフレームをもとに、デザインする

前回、出来上がったワイヤーフレームをパンダさんに見せました。

ワイヤーフレームで、

  • 載せたい内容や配置
  • 写真や、文章の分量
  • 導線

を確認していただきます。

すると、「OKです!」とお返事いただいたので、これをもとにデザインをしていきます。

今回は、縦に長い1ページなので、PC用とスマホ用を作ります。

共通カラーを決める

デザインの要となる、キーカラーを決めます。

パンダさんのご希望は、落ち着いた赤系でしたので、暗すぎず、明るすぎないこの色にしました。

この色をベースに、見出しなど他の色も決めていきます。

今回は、写真ありきの架空サイト制作なので、あまり考えずにさくっと作ってみました。

さくっと作る練習も兼ねています。

デザイン出来上がりました

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

に、可愛らしく仕上がったと思います。

手書き風のロゴやイラストで、温かみをプラス。

必要な情報だけが、スクロールだけで全部見られるシンプルな1ページだけのサイトです。

ユーザーが欲しい情報を探しにいかなくても良いので、離脱率もストレスも少ないかと思います。

でもヘッダーナビがあり、必要な情報にジャンプすることができるので、複数ページあるように見えます。



PC用デザイン

スマホ用デザイン

こちらも、パンダさんに一発OKいただきましたので、次回はコーディングをしていきます。

ワイヤーフレーム、デザインは、AdobeXDを使っています。

パンダさんのおかげでやっと少し、使い慣れてきました。

ここまでの作業なら、イラレ・フォトショップよりも簡単に作れると思いました。

では、続きは次回!

Follow me!

コメントを残す

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