Webデザイナーの平尾誠です。私は美容室の販促物に特化した制作会社：ケイアートファクトリーに勤めていた時、美容室サイトはサイト設計がシンプルなわりに工数がかかるというのを体感していました。理由は後述しますが今回はアニメーションのサンプルHTMLとWordpressのテーマを組み合わせて美容室のブランディングサイトを素早くローンチまで行いました。
美容室のサイトにアニメーションを組み合わせる
2016年にすごくたくさんテキストや見出しを印象強く見せる方法としてBlock Reveal Effectsが流行ってましたね。今もまだこの方法は流行っています。
Block Reveal Effectsはcoderopsで公開されています。今回はBlock Reveal Effectsを使って美容室のサイトを制作しました。
coderops
https://tympanus.net/codrops/2016/12/21/block-reveal-effects/
サイトからサンプルをダウンロードしてもらえれば下記のように5枚のHTMLが入っていますので、使いたいものを合わせて使ってください。
サンプル
- form.html
- index.html
- menu.html
- modal.html
- split.html
私が今回サイト制作で使用したのはindex.htmlとmenu.htmlでした。
使用したサイトはこちら
美容室のメニューボタンはシンプル
ナヴィゲーション部分とコンテンツ部分に使用しています。
このソースコードはjqueryに依存していないです。生のjsで書かれています。
美容室サイトは設計もシンプル
美容室サイトに必要な情報は限られています。サイト設計としてはとってもスッキリしたものが作れると思います。ブランディングにオリジナルのページを作ってもらえば、SNSと連携しながら他のサロンと違ったブランディングができます。今回作らせてもらったサイトはブログとインスタグラムでスタイル写真やヘアケア情報を発信しています。
美容室オーナーはとりあえずWordpressを始めてほしい
多くの場合の美容室さまはホットペッパービューティにお金をかけすぎていて、ホームページを作る広告費を捻出できない状態です。なので、根性があるオーナーさんはWordpressを勉強したり、はてなブログや、アメーバオウンドなどのブログサービスを使用されているように思います。それでも勉強している方はまだまだ珍しい方です。
サロン側として理想的なのは、やはりホットペッパービューティーからの脱却です。ホットペッパービューティーは新規のお客様が増えるという反面、常連になりにくいというデメリットもあります。何より広告費が毎月高い。。自転車操業状態に陥り、ホットペッパーを止めれないというのはよく聞きました。そこをオリジナルのサイトで補うのが自前のオリジナルサイトだなと今回狙ってました。
んーもったいない。ホットペッパー使わなくても今の時代あるのに〜って思ってます。スタイリストさんやアシスタントの方は大抵レッスンやモデルハントで忙しかったりしますが、オーナー様はそれに加えて経理周りもするので大変だと思います。ですがネットのリテラシーがないのは痛いです。広告費を削れるのに。
私はこれまでたくさん美容室のホームページを作ってきましたが、オーナー様のデザインへのこだわりが強い上にパソコン使えない人がとても多いです。だからオリジナルのホームページを作るとなると工数も費用もかさむ場合が多いです。
ブログやWordpressをある程度理解した上で制作会社にお願いすれば、内容が充実した自前のサイトを作れると思います。