みなさん、こんにちは。
BiNDで作ったサイトが集まるナイスサイトには、Webデザイナーさんでなくても、プロ顔負けな素敵なサイトがたくさん。
そこで、その理由を紐解いて、皆さんでも真似できるようなヒントをご紹介していく連載をスタートしたいと思います。
素人でもプロが作ったみたいなサイトにしたい
トレンドに敏感な層がターゲットとなる美容室やヘアメイクなどの業種では、Webサイトはその店のポリシーやセンスを映し出すので手を抜けません。
デザインにはこだわりたいけれど、外注する予算がない…
低予算でも信頼できるWebデザイナーが回りにいない…
そんな理由で自分でサイトを制作することになった場合、不安となるのが、
いかにも素人が作った感が否めないサイトになってしまわないか、という課題。
忙しい個人事業主の方なら特に、店舗を運営しながら自分でWebサイトを制作・更新なんて、無理かも？
と諦めてしまいがちです。
でも、諦めるのはまだ早い！
まずはナイスサイトに応募されたこちらの美容院をご覧ください。
▼香川県高松市の中心部にあるヘアサロン「DOUBLE」さん。
こちら、経営者自らがサイトを制作・運営しているそう。とても素敵ですね。
その理由を紐解くと・・
まず目を惹くのがサイトTOPで大きく使われている、モデルの写真。
美容院はカットの技術もアピールポイントですから、
お店のコンセプトや世界観と一緒に、スタイルを提案することに成功しています。
このサイトが素人ぽさを感じない理由は、写真や画像の扱いにあるといえるでしょう。
こちらのサイトをヒントに、さらに詳しくみていきましょう。
サイトをプロぽく見せる秘訣
１．シンプルな構成にする
サイトの構成をシンプルにすると閲覧者が戸惑わないので、まずは必要な情報をシンプルに配置することから始めましょう。
情報量が少ないなら1ページで完結するシングルページでもOK。
このサイトは、シングルページではありませんが、
TOPに新着情報、更新が頻繁なInstagramを配して、店舗情報や予約へとつながる構成でシンプルに導線を確保。
もちろんスマホに対応したレスポンシブWebサイトなので、スマホからの導線もバッチリです。
２．自信のあるカットを印象的に見せる
冒頭でも説明しましたが、このサイトの雰囲気は、同じ世界観で統一された写真をルールに則って使用していることで作りだされています。
TOPの画像は「STYLE」で使われている写真の1枚ですが、常に人物の大きさ、背景色、目線など被写体を捉える際のルールを作ってそれに則った写真が使われているため、余計な情報がなく、純粋に髪型やカットを見ることができます。
３．写真を流用する場合もトーンを揃える
Webショップで取り扱っている商品を紹介するときも、背景白の商品写真を選ぶ、日本語のキャッチががっつり乗った写真を避けるなど、サイト世界観を壊さない画像を使うことで、統一感を生み出しています。
４．Instagramを使った相乗効果を狙う
フォトジェニックな演出に欠かせないSNSである、Instagram。
ショップで扱う商品や店舗の写真を雰囲気よく伝えるInstagramも効果的にサイトに掲載しています。
スマホから投稿するだけでサイトTOPの情報を新しくできるSNSの連携は、サイトの更新を手軽にする工夫にオススメです。
また、気が付きましたか？
見出しやアイコンはすべて黒やグレーに揃えることで、サイトがごちゃごちゃして見えないように工夫されています。
このようなデザイン上のルールは、素人さんでは決まってないことが多いのではないでしょうか。
制限なく例外を作ってしまい、結局まとまりのない素人ぽいサイトになってしまう大きな理由になるので気を付けましょう。
美容室の最新テンプレートもオススメ
POPな雰囲気の美容室なら、最新テンプレートがそのまま使えて便利
最後に、BiNDの最新テンプレートからおしゃれな美容室サイトを作るのにふさわしいデザインをご紹介します。
原色を使った配色は、明るく元気な雰囲気の店舗にピッタリ！
メニューやスタイル紹介、スタッフ紹介、地図など一通り揃っているシングルページのサイトなので作る時間もそこまで掛からないはずです。
もちろんレスポンシブWebでスマホ対応。ぜひ使ってみてくださいね。
POINT
- 写真の扱いが、サイトのクオリティを制す！
- デザインルールを自分に課して、素人ぽいゴチャ付いたサイトから脱却
- フォトジェニックな演出にはInstagram連携がオススメ。更新のしやすさも備える