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

デザイン作品一覧

graphic

より統一感のある仕上がりに。webメディア「anna」の広告媒体資料デザインvo...

5月の頭に制作実績に紹介した関西の女性のためのwebメディア「anna(アンナ)」の広告媒体資料デザイン。 この媒体資料は3ヶ月に一度アップデートす…

2020.07.10.

graphic

女性のためのwebメディア「anna(アンナ)」の雑誌広告デザイン

最近はweb関係の制作が多かったのですが、久しぶりに雑誌の1ページ用に広告をデザインしました。 5月の活動報告ブログでも少し書きましたが、ytvメデ…

2020.07.02.

web

企業で働く「人」を見せる。株式会社大都のコーポレートサイトデザイン

ブログを書くときによく「前職」という言い方をしているのですが、ボクが前に勤めていた会社は「株式会社 大都」という会社で、DIYを文化にするため…

2020.06.30.

logo

高年齢層の人たちにもわかりやすくシンプルに。竹本工務店のロゴデザイン

2020年5月に依頼あって、今月に制作、納品したできたてほやほやのロゴデザインの制作実績です。今年から開業された大分県の「竹本工務店」さまのロゴ…

2020.06.20.

graphic

開業1周年を記念して制作した名刺型のメッセージカードデザイン

BUROKI design開業1周年記念のオリジナル木製コースターは実績としてすでに紹介していましたが、実はあわせて送ったメッセージカードもデザインして…

2020.06.12.

graphic

2日間ぶっ通しでつくった36枚のECサイト用バナーデザイン

数をこなした過去の制作実績が続きますが・・(笑)。今回の実績はECサイトのリニューアルで必要になった36枚の商品バナーデザインたちです。 前職の…

2020.05.31.

designをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル