— WORKS

nail atelier fuu

— ネイルサロンのホームページ（制作見本）

つくった理由

「美容サロンのサイトを作れます」と言葉で伝えても、サロンのオーナー様は自分の店に置きかえて想像しづらいものです。そこで、実際に開いて触れる見本を作りました。

架空のネイルサロンですが、料金・メニュー・ご来店の流れ・よくある質問まで、実際の営業を想定して中身を書いています。

思いつきで作らないよう、先に実在するネイルサロンのサイトを20件集めて、共通点を調べました。最初の画面の作り方、配色、使っている書体、予約までの導線を1件ずつ確認しています。

わかったのは、印象に残るサイトほど「写真が主役で、色を足していない」ということでした。色の塗りつぶしはほとんど使わず、色は写真が作っている。文字は細く小さく、余白が広い。この3点を軸に設計しました。

背景の色を何度も塗り分けるのではなく、区切りは写真の帯で作りました。スクロールに合わせて写真がゆっくり動くようにしてあります（動きに敏感な方の端末では自動で止まります）。

サロンを探す人のほとんどはスマートフォンです。最初の画面に、店の雰囲気・何の店か・駅からの距離・予約への入口をすべて収めました。

画面の下には予約ボタンを常に表示しています。どこまで読んでも、予約までは指1本です。

料金表は、パソコンでは表、スマホでは自動でカード型に切り替わります。横にスクロールしないと読めない表は作りません。

「初めての方へ」は、迷っている方が最初に知りたいことなので、料金の前に置きました。

写真の上に白い文字を置くと、見た目はきれいでも読みにくくなることがあります。このサイトでは文字と背景の明暗差をすべて測り、基準を満たすまで調整しました。

また、美容の分野では表現に注意が必要です。このサイトでは効果をうたう言葉を使わず、できること・料金・所要時間を具体的に書く形にしています。

架空の店舗です。店名・住所・料金・お客様の声はすべて制作見本のために用意したもので、実在しません。掲載している写真は画像生成AIで作成しています。実際の案件では、お店の写真に差し替えて制作します。