DESIGN IT YOURSELF.

BUROKI


top

design

  • top
  • design
  • 常に新しさを追求し続ける。美容室「SOURCE -hair atelier-」のwebデザイン

常に新しさを追求し続ける。美容室「SOURCE -hair atelier-」のwebデザイン

web

  • top
  • design
  • 常に新しさを追求し続ける。美容室「SOURCE -hair atelier-」のwebデザイン

常に新しさを追求し続ける。美容室「SOURCE -hair atelier-」のwebデザイン

2019.12.30.

スポンサーリンク

スポンサーリンク

2019年最後の制作実績は、今月頭に公開した美容室「SOURCE -hair atelier-(ソース ヘアアトリエ)」さんのwebサイトデザインです。

前職の後輩からの制作依頼だったのですが、SOURCEさんはJR天王寺駅の北口にも店舗があって、行ったことはなかったのですがなんとなく印象には残っていたので「あぁ、あのお店のwebサイトをつくるのか」と少し驚きました。

production list

制作リスト

1. いただいた店内写真からデザインを考案

実際に制作する前にまずは素材を集めるところからはじまります。特に店舗のサイトの場合、店舗の外観や内観の写真をまずいただくことは必須で、その写真の雰囲気をいかに伝えるかが重要だと思っています。

お店をwebサイトを検索して訪問するということは「そのお店の何かしらの情報を知りたいから」であって、webサイトだけで完結するものでは決してありません。なので店内の雰囲気も働いているスタッフもどんなヘアスタイルが可能なのかもできるだけ伝えられるような・・まずそこを意識して制作することにしました。

SOURCEのスマホ用メインビジュアル

2. ホットペッパーの店舗ページとの連携を意識

美容室のwebサイトですから、最終的なゴールはもちろん「サイトを見てくれた人が店舗に予約してくれること」ですよね。

特に美容室の場合はホットペッパービューティに店舗ページを開設している場合が多く、さらにホットペッパー内で予約ができることがすでに知れ渡っているのでそちらに飛ばさない手はないだろうと、サロンやスタイルの詳細は基本的にホットペッパーのページへリンクさせるようにしました。

SOURCEのスマホ用店舗紹介画面

ただ、ひとつホットペッパー内で難点だったのは、多店舗展開している美容室をまとめたページがないんですよね(あるのかな?見つけられませんでした・・)。そういう意味では今回のwebサイトは各店舗の土台となる立ち位置になるので、制作する意味がありました。

3. 筆記体フォントを使用してスタイリッシュかつアクセントとして見せる

ボクの中では美容室のwebサイトはお店の写真と、ヘアスタイルの写真だけがいい雰囲気の中で載せられていたら基本的に良いものになるという妙な自信があるのですが(笑)、もう少しアクセントがあってもいいかなと筆記体のフォントを要所要所に使用することにしました。

使用した筆記体フォント

なぜこの手描き風の筆記体フォントを選んだのかというと、美容師さんがやることは基本的には人間の手がなせる技であるということと、少し女性らしさを感じる柔らかい印象のフォントだと思ったからです。アクセントとして使用するとしても、こういう風にちゃんとした理由を持って使用することは重要ですね。

4. スクロールで動きのあるページに

最近のボクのサイト制作ではよく使用していますが、今回のサイトでもスクロールでのアニメーションを採用しました。webページを下にスクロールしていく時に写真や文字がフワッと出てきたりすると、やっぱりそれだけで質が向上するんですよね。見ている人にとってもアクションがあると目に入って飽きさせないし、アニメーションは特にアパレルや美容室のようなブランドイメージ訴求の強いwebサイトには最適だと思います。

これからも新しいアニメーションを取り入れつつ、煩わしさが出ない範囲で実装していきたいですね。

5. デザイン、コーディング、wordpress構築すべて対応

もはや当たり前ですが、今回のwebサイト制作にあたっての工程はすべてボク自身で手掛けました。

もちろんレスポンシブデザインでのサイト制作。ここにきてPCとスマホだけでなく、タブレットにも対応したwebサイトを制作することが自分の中では当たり前になりました。

SOURCE -hair atelier-のwebサイトはこちらから

SOURCEのPC版フッター

実際のサイトは下記のリンクよりご覧ください。
※webサイトによっては変更・クローズしてることもありますので、その際はご容赦ください。

美容室のwebサイトははじめてつくりましたが、とにかく写真に対する意識が高く、モデルさんを起用した雰囲気の良いスタイル写真は当たり前なので制作側からするとかなりつくりやすかったです。クライアントさまも出来栄えにかなり喜んでくださったみたいで制作した甲斐がありました。ありがとうございました。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

design list

デザイン作品一覧

logo

思いを形に。インディバサロン「mouiller(ムイエ)」のロゴデザイン

大阪北区に新規オープンするインディバサロン「mouiller(ムイエ)」のロゴデザインを担当させていただきました。 ご依頼いただいたのが9月で、オー…

2021.11.14.

graphic

最近制作したバナーデザインをまとめて公開いたします

基本的にwebサイトを中心に制作していますが、依頼があればロゴデザインや名刺デザインやバナーデザインなども制作させていただいております。 ここ…

2021.08.09.

web

画像に頼らず文字でシンプルに魅せる。EDUWARD Pressのwebサイトデザ...

先日公開したばかりのweb制作実績です。 動物医療の出版社「EDUWARD Press(エデュワードプレス)」さんのwebサイトをリニューアルさせていただきま…

2021.08.03.

graphic

DIYをはじめる人に向けて。DO IT YOURSELF!!のロゴマークデザイン

2013年に制作したロゴマークデザインです。 この頃はインハウスデザイナーとして会社勤めをする傍ら、副業でBUROKI designをはじめたばかりの頃で、…

2021.07.24.

graphic

他のブランドと差別化を図る。ヴィンテージ風の下げ札デザイン

先月納品したばかりの制作実績です。 フリーランスになってはじめて下げ札のデザインをさせていただきました。 下げ札とは、ブランドの服などについ…

2021.07.06.

graphic

道具を交えながらつくる「Do It Yourself」のカリグラフィデザイン

制作したのは2013年ごろなのですが、当時はカリグラフィをデザインするのにハマっていて、勤めていた会社がDIYを文化にするための事業をしていたこと…

2021.06.28.

designをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル