ネイル＆アイラッシュサロンのコーポレートサイト【URL付】【クライアントワーク】

■ターゲット

美容やファッションに興味のある

トレンドと自分らしさが欲しい20~30代女性

■課題

新規顧客の獲得に力を入れたい

サロンの長所が詳しく伝わりづらい

■目的

webサイトを通した新規顧客の獲得

SNSだけでは伝わらない魅力や詳細情報を伝える

■制作物

コーポレートサイト（PC,SP）

■コンセプト

「余白が生む、洗練と心地よさ」

過度な装飾を排し、余白を積極的に取り入れることで、 視線が自然に流れ、コンテンツそのものが引き立つサイトを目指しました。 モノトーンを基調とした配色により、 シンプルでありながらも都会的で洗練された印象を演出しています。

写真やテキストの配置のバランスを丁寧に設計し、 情報とビジュアルの間に心地よい「間」をつくることで、 抜け感のある現代的なデザインに仕上げました。

■情報設計

ファーストビューでは、 ネイルアートとアイラッシュどちらの魅力も直感的に伝えられるよう、 提供された写真を二枚並べ、数秒おきにぼんやりと切り替わるモーションをつけています。 これにより閲覧者は「どんなサービスか」を数秒で理解でき、 視覚的な没入感を高めています。

ハンバーガーメニューはスクロール後に出現する設計とし、 初回訪問時は写真と世界観に集中できるようにしました。 ファーストビュー右下には各ページへのショートカットを配置し、 すぐに目的ページへ飛べる導線も確保しています。

次にサロンの概要を配置しています。 最初にクライアント様の想いを書いた英文を置き、 サロンの世界観とブランドアイデンティティを明示しています。 その下にはお客様の口コミや強み、所在地情報を並べ、 訪問者が安心してサービス内容を理解できるようにしています。

続く「OUR WORKS」セクションでは、 タイトルのテキストサイズを大きめに設定しインパクトを与えています。横に流れるモーションを入れることでシンプルながらも飽きがこない構成にしています。また、下部では施術内容の強みを説明しつつ、左側の写真は数秒ごとに切り替わるモーションを設定しました。 サイトトップだけでも施術がどのようなものか想像できるようにし、 VIEW MOREボタンやメニューページ、予約ページへスムーズに誘導しています。

その下では、複数の施術例写真を縦スクロールで配置し、 スクロールするにつれてふわっと出てくるモーションで多くの作品が目に入る構造としました。 これにより自然と下へ読み進められ、 改めてVIEW MOREボタンを配置することで予約意欲を高めています。

最後にサロン内観を紹介し、サロンの世界観や居心地のよさを伝えつつ、 ページ末尾には予約ボタンとスタッフのInstagramへの導線を配置しています。 これにより、訪問者が訪問後の未来を想像しやすくし、 予約・SNSフォローといった行動につながる導線設計としました。

■デザインプロセス

□色調設計

クライアントからの要望であった「上品でシックなイメージ」を軸に、 サイト全体の色調を設計しました。

メインカラーにはグレージュを採用し、 テキストには抜け感のあるブラックを使用しています。 また、部分的に目立たせたい要素にはライトグレーを用いることで、 コントラストをつけすぎず、全体のトーンを崩さない配色としました。

全体はモノトーンをベースとしながらも、 やや温度感のあるニュアンスを持たせることで、 ネイルやアイラッシュの写真が持つ色味・質感・ツヤ感を邪魔せず、 自然と引き立てる色設計としています。

提供いただいた写真は、淡いピンク寄りの色調や、 明度が高く彩度を抑えたものが多かったため、 儚さやアンニュイな雰囲気を損なわないよう、 写真の世界観に寄り添う配色を意識しました。

シンプルでありながらも抜け感があり、 都会的で洗練された印象を与える色調とすることで、 冷たすぎず、入りづらさを感じさせない柔らかなニュアンスを表現しています。 これにより、ターゲットである20〜30代女性に向けた 落ち着きのあるおしゃれなサロンとしての説得力を高めました。

□フォント設計

欧文フォントには、Cormorant Infant、Outfit、Roboto の3種を用途に応じて採用しました。

Cormorant Infant は、デザイン性を重視した書体として、 ブランドアイデンティティを表す英文や、視線を集めたいコピーに使用しています。 優雅でクラシックな佇まいを持ち、クライアントの要望である 「上品さ」と「シックさ」の両方を満たすフォントとして適していると判断しました。

Outfit は、主にサブタイトルやボタンなどのUI要素に使用しています。 モダンで癖のない造形が特長のサンセリフ体で、 余白を活かしたシンプルなレイアウトと相性がよく、 全体に洗練された現代的な印象を与えています。

Roboto は、ファーストビューに配置した各ページへのショートカットテキストに使用しました。 高い視認性と可読性を兼ね備えており、 デザインの邪魔をすることなく、必要な情報を確実に伝えられるフォントです。

和文フォントには、しっぽり明朝を採用しています。 柔らかな線と余白のある造形が特長の明朝体で、 上品さと情緒的な印象を併せ持つ書体です。

硬くなりがちな明朝体の印象を和らげつつ、 女性向けデザインや感性訴求を重視したコピーに適している点を評価し、 全体の世界観を補強する目的で使用しました。

制作期間

デザイン,コーディング

2か月

使用ツール

Figma,Illustrator