こんにちは！
AYDesignです。
Adobeストックの素材を利用して、架空のパン屋さんのHPを作っています。
店舗名は「Wonderful Bakery」。
オーナーは、パンダさんと言います。
「小麦や酵母などの素材を生かした、遊び心のあるおいしいパンづくり」にこだわっています。
奥さんと、スタッフを1人の3人体制でお店を回す、こじんまりしたパン屋さんです。
住宅街の中の目立ちにくい場所にあり、お客さんは近所の人が多く、認知度は「知る人ぞ知る」なのですが、美味しいと定評があり、愛されています。
パンダさんは、もうちょっと認知度アップして、隣町からもお客さんが来るようになりたいとのことで、ご依頼いただきました。（という設定）。
前回は、ご依頼を受けてヒアリングし、ワイヤーフレームを作るところまでいきました。
前回の記事はこちら
ワイヤーフレームをもとに、デザインする
前回、出来上がったワイヤーフレームをパンダさんに見せました。
ワイヤーフレームで、
- 載せたい内容や配置
- 写真や、文章の分量
- 導線
を確認していただきます。
すると、「OKです！」とお返事いただいたので、これをもとにデザインをしていきます。
今回は、縦に長い1ページなので、PC用とスマホ用を作ります。
共通カラーを決める
デザインの要となる、キーカラーを決めます。
パンダさんのご希望は、落ち着いた赤系でしたので、暗すぎず、明るすぎないこの色にしました。
この色をベースに、見出しなど他の色も決めていきます。
今回は、写真ありきの架空サイト制作なので、あまり考えずにさくっと作ってみました。
さくっと作る練習も兼ねています。
デザイン出来上がりました
「ナチュラルで、洗練された、でも少し遊び心のある、敷居が高くない雰囲気。」
に、可愛らしく仕上がったと思います。
手書き風のロゴやイラストで、温かみをプラス。
必要な情報だけが、スクロールだけで全部見られるシンプルな1ページだけのサイトです。
ユーザーが欲しい情報を探しにいかなくても良いので、離脱率もストレスも少ないかと思います。
でもヘッダーナビがあり、必要な情報にジャンプすることができるので、複数ページあるように見えます。
PC用デザイン
スマホ用デザイン
こちらも、パンダさんに一発OKいただきましたので、次回はコーディングをしていきます。
ワイヤーフレーム、デザインは、AdobeXDを使っています。
パンダさんのおかげでやっと少し、使い慣れてきました。
ここまでの作業なら、イラレ・フォトショップよりも簡単に作れると思いました。
では、続きは次回！
