WORKS - field and bloom | KAE PORTFOLIO

field and bloom

架空のオーダーブーケショップ Webサイト

field and bloom

Website｜自主制作

Launch：2025.01

https://fieldandbloom.jp/

Instagramで活動する、アーティフィシャルフラワーを使った架空のオーダーブーケショップのWebサイトを制作しました。
Instagramだけでは伝えきれないコンセプト・埋もれてしまう作品を漏れなく届けるための構成や、優しくあたたかい花畑を感じ、世界観に入り込むデザインを意識しました。

制作範囲: 構成 / デザイン / イラスト / コーディング
制作期間: 構成：2週間
デザイン・イラスト：1週間
コーディング：2週間
使用ツール: Illustrator / Photoshop / Procreate / Figma / Visual Studio Code
CLIENTクライアント: アーティフィシャルフラワーブーケを
制作・販売しているフラワーデザイナー

自主制作のため架空のクライアントとして、『結婚式やフォトウエディングなどを控えた花嫁様からオーダーを受け、アーティフィシャルフラワー(造花)を使ったブーケを制作・販売しているフラワーデザイナー』を設定しました。; 活動拠点

Instagramで発信・集客しており、店舗や既存サイトはなし。; 価格

¥20,000～（花の種類によって変動あり）; コンセプト

花畑から摘んできてそのまま束ねたような優しい暖かさで、一生に一度の晴れの日に優しく寄り添うような作品づくり
TARGET / PERSONAターゲット / ペルソナ: 結婚式やフォトウエディングを控えた20〜30代女性; Yさん 28歳女性

職業：保育士
趣味：カフェ巡り、インテリアデザイン
家族構成：父・母
性格：優しく、思いやりがある。少しシャイだが温かい雰囲気を大切にする。
ライフスタイル：自然体で心地よい時間を過ごすことが好き。休日は友人とリラックスできるカフェでのんびり過ごすことが多い。

Mさん 33歳女性

職業：グラフィックデザイナー
趣味：写真撮影、旅行
家族構成：⽗・⺟・姉
性格：クリエイティブでこだわりがあるが、ナチュラルなスタイルも好き。自分の感性を大切にしている。
ライフスタイル：仕事が忙しく、特別な時にはその瞬間を大切にしたいと考える。結婚式は自然光の映えるナチュラルな式場で行いたいと考えている。
GOALサイト制作の目的: Instagramだけでは伝えきれないコンセプト・埋もれてしまう作品を紹介する。
Instagramをやっていない人もコンタクトが取れるよう誘導する。
公式のサイトを作ることで信頼感を得る。
INFORMATION情報設計: なぜ
Instagramだけではコンセプトが伝わりにくく
作品が埋もれてしまうのか

Instagramは写真特化のSNSであるため、写真重視のユーザーが多く作品が先行してしまい、コンセプトや想いを長々と書いても見てもらえない可能性があることや、遡らなければ過去作品が見られないため、定期的に同じ写真を上げないとアカウントページの上の方に表示されないこと、絞り込んで好きな作品を見られないことが理由であると考えました。; ターゲットにコンセプトや
クライアントの想い、過去作品を
漏れなく届けるために

TOPページをいろんな情報（オーダー方法やブーケ作品例など）を1ページに少しずつ載せた構成ではなく、情報量をあえてコンセプトだけに絞ることで、ユーザーがお店の世界観に入り込めるような、よりコンセプトが伝わるような構成にしました。
また、コンセプト・想いをまとめたaboutページを作ることで、作品だけではなくコンセプトや、造花を使う理由、ブーケに対する想いなどのクライアントの考えがしっかり伝わり、信頼感や安心感が得られるようにしました。
galleryページについては、載せる作品をブーケの色ごとに分けて絞り込めるようにすることで、探しやすく見やすい構成にしました。
DESIGNデザイン: コンセプトが滲み出ていて、
お店の世界観に入り込めるようなデザイン

目的の1つが『コンセプトをしっかり伝えること』であるため、コンセプトが滲み出ていて、お店の世界観に入り込めるような、より伝わるデザインを意識しました。
サイト全体は、フェードインでふわっと出てくるような動きをつけることや、見出しなどで圧迫感を出さないようにするなど、コンセプトに合う優しい雰囲気を感じるデザインにしました。
また、ブーケ写真だけを使ったデザインではコンセプトや世界観に入り込めず、ブーケの印象ばかりが伝わってしまうため、galleryページの作品例以外の写真を一切使わず、全て花畑をイメージしたイラストを作成して仕上げました。; イラストやカラーで
花畑のいろんな花を摘み取ったような
ブーケを表現

メインカラーは黄みのあるホワイトと淡いグレー、アクセントカラーはgalleryページで分けた5色を選び、全て淡いトーンに合わせることで統一感を持たせつつ、ブーケ写真を邪魔せず映えるようシンプルにまとめました。
また、花畑を連想させるために、画面下部やナビゲーションメニュー背景などサイトの至る所にたくさんの花のイラストを使用しました。花・ブーケのイラストをグラデーションにしたアクセントカラーにすることにより、『花畑から摘み取った様々な種類の花を色々なブーケにしていく』ことをイメージし、全てのイラストを繊細な線画にすることで主張を抑えながら、丁寧さとそっと寄り添うようなあたたかみを表現しました。