美容室eru frange様Webサイトリニューアル
制作概要
卒業制作として、上板橋の美容室eru frangi様のサイトをリニューアルしました。ユーザーに魅力の伝わるわかりやすいデザインを心がけました。
担当領域
Direction/Design/Coding/WordPress/Photo
制作期間
企画 2週間/デザイン 3週間/実装 4週間
使用ツール
Photoshop/Illustrator/Lightroom/Figma/VScode
Webサイトへ
erufrangi.com制作目的
知人紹介やGoogle検索からの新規獲得
ターゲット
上板橋近辺に住んでいる10~60代男女。知人からeru frangiを紹介された人。
課題
既存サイトがスマホ版に対応していないため使いづらいので、使用感の解消。
写真が古く少ないため、多めに写真を使用してお店の雰囲気が伝わるサイトにする。
コンセプト
「お客様に寄り添う、安らげる空間」という美容室の価値観を視覚的に表現することを最も重視しました。日本語テキストと写真の配置バランスを丁寧に調整し、温かみのある空間演出を心がけています。全体を落ち着いたベージュでアクセントに濃い茶色をいれることでメリハリをつけつつナチュラルなサイトに仕上げました。フォントは視認性がありながらも丸みのある字体を選定し、柔らかい雰囲気が出るようにしています。
制作過程
写真を意図的に不規則に配置することで、堅すぎない親しみやすさを演出しました。スクロール連動のふわっとしたフェードインアニメーションを実装し、コンテンツが段階的に表示される設計により、情報を無理なく受け取れる構成にしました。 過度な装飾を避け、コンテンツに集中できるシンプルな動きを採用することで、美容室の落ち着いた雰囲気と調和させています。
冒頭でシンプルにコンセプトを提示し、その後に詳細な説明を配置することで、読み手が自然に内容を理解できる流れを作り出しています。 美容師の道具であるハサミや櫛のイラストを装飾要素として配置し、スクロールに連動してページの横からひょっこりと現れるアニメーションを実装しました。このさりげない動きが、美容室らしさを演出するとともに、ページに楽しさとオリジナリティを加えています。
