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

トンマナを意識して制作したナノナノファクトリーの名刺デザイン

名刺などのカードを撮影するとき、左下の角度から撮りがちなブロキです。 最近の制作実績ではおなじみ?になりつつある福岡の木工集団「ナノナノファ…

2020.09.18.

graphic

デザイナーを本格的に志す前に制作していた作品たちを一挙公開

10年以上前からいろんなデータやファイルを外部に逃すために使用している外付けHDDがありまして・・。 その中に入っているデータを久しぶりに整理し…

2020.09.14.

graphic

よりオリジナリティを引き立てる。ステンシルのアイコンデザイン

またまた先月公開したwebサイト「ナノナノファクトリー」の制作関連の実績になるのですが・・。 ナノさんのwebサイト制作実績にも書いた通り、木工や…

2020.09.08.

graphic

インフォグラフィックで月に一度のスタッフ会議をデザインで盛り上げる

プレゼン資料のデザインはページ一覧にしていろいろと紹介していますが・・。 プレゼン資料デザイン一覧ページへ 一時期だけですが、スタッフの発表…

2020.09.02.

graphic

各アーティストになりきる?[ re: ] project「もう一度」のパロディデ...

突然ですが、[re:] projectをご存知でしょうか? [re:] projectとはロックバンド「ONE OK ROCK」のボーカルTAKAさんと清水翔太さんが、新型コロナで…

2020.08.17.

logo

シンプルに思いを伝える。ナノナノファクトリーのロゴデザイン

7月末にwebサイトを公開し、制作実績にも紹介したばかりの「ナノナノファクトリー」さんのwebサイト。

2020.08.07.

designをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル