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

2023年は卯年。ミッフィーをパロディした年賀状デザイン

少し遅めではあるのですが、2023年も年賀状デザインを制作させていただきました。 BUROKI design的に新年の制作といえば、福岡の木工集団「ナノナノ…

2023.01.27.

graphic

新事業の魅力を伝える。MERU&PLUSのプレゼンテーション資料デザイン

昨年の夏ごろにコーポレートロゴとwebサイトを制作させていただいた株式会社 阿波和さまの新事業「MERU&PLUS(メルアンドプラス)」のプレゼン…

2023.01.19.

graphic

ブランディングに。関西のwebメディアannaのSNS投稿用画像デザイン

少し前の制作実績紹介です。 いつもお世話になっている関西女性向けwebメディア「anna(アンナ)」のinstagram投稿用の画像を制作させていただきまし…

2022.12.20.

graphic

クリエイターコミュニティの交流パーティために制作した告知用バナーデザイン

いまはもう自然消滅的な状態になってしまっているのですが、実は2018年ごろにinstagramを使ってデザイナーとリアルでつながりたいと思い、投稿で呼び…

2022.09.29.

web

和の文化を未来に。株式会社阿波和のコーポレートサイトデザイン

少し前に株式会社 阿波和さまのロゴデザインを紹介させていただきましたが・・ 掲げているスローガンを形に落とし込む。株式会社阿波和のロゴデザイ…

2022.09.18.

logo

掲げているスローガンを形に落とし込む。株式会社阿波和のロゴデザイン

つい先日、制作して納品させてもらったロゴデザインの実績紹介です。 以前働いていた職場の元同僚から紹介いただいたロゴデザイン案件で、徳島県で和…

2022.09.11.

designをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル