【架空】パン屋さんのロゴ・TOPページデザイン・イラスト

架空のパン屋さん「PANDA•パン工房」のロゴデザイン、TOPページのデザイン・実装、イラストを制作しました。
下記のリンクから公開中のサイトを閲覧できます。

サイトの概要

店舗：新規オープンした小さなパン屋さん
コンセプト：手作りの美味しいパンを多くの方に届けたい
ターゲット：20～40代の女性や子連れのパパママ
目的：認知度向上

「パン」と「パンダ」をかけたちょっとユーモアのあるロゴデザインを制作しました。今回は用途に応じて使い分けられるように2種類用意しています。

タブレットやスマートフォンでは、ハンバーガーメニューが表示されるように設計しました。
メニュー内には、すぐにお問い合わせできるようお店の連絡先を配置しています。

また、商品が一覧できる「商品ラインナップ」セクションは、縦のスクロールが長くなりすぎないよう横スクロールで商品を見れるようにしています。（スマートフォンで表示時のみ）

今回のサイト制作では、figmaでワイヤーフレーム・デザインカンプを作成後、ノーコードツールのSTUDIOで実装を行いました。
クライアント自身がテキストや写真をあとから変更することを想定して、リスト機能を設定しています。

普段私は実装を行っていないのですが、今回のサイトを通じてノーコードツールを使用した実装込みのお仕事も受けられるようにしたいという思いがありました。

Udemyの講座でSTUDIOの基本的な使い方や、応用方法を学び、実際の依頼を想定して今回はオリジナルでサイトを制作しました。

素朴で少しレトロな印象になるように、Photoshopで色味の調整とノイズ加工を行っています。

加工方法は、デザナビさんの記事を参考にしました：
https://wkwkdesign.com/photoshop-vintage-tips/

メインビジュアルの右下にいるパンダは、オリジナルで作成しています。キャッチコピーの「幸せを運ぶのは美味しいパンだ」にかけて、パンダがパンを運んでいるアニメーションにしています。

もともとアナログ感のあるタッチでイラストを描いていましたが、サイトのトンマナに合わせてフラットなタッチに変更しました。左側のイラストはAdobe frescoで、右側はillustratorで描いています。

アニメーションはLottieを採用しています。
Lottieとは：https://lottiefiles.com/jp/what-is-lottie

解説は以上です。
ご覧いただきありがとうございました🐼🍞

プロジェクト	架空のパン屋さん「PANDA・パン工房」のWebサイト制作
作業内容	TOPページデザイン実装ロゴデザインイラスト作成
使用ツール	illustrator Photoshop figma STUDIO
製作期間	1ヶ月
URL	PANDA•パン工房