DESIGN IT YOURSELF.

BUROKI


top

design

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

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

web

  • top
  • design
  • web
  • 常に新しさを追求し続ける。美容室「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

削ろう会 大阪 交野大会のイベントロゴ、パンフレットデザインをお任せいただきまし...

先月の話になりますが、4月の12日と13日の二日間、大阪交野市で「削ろう会 全国大会 第41回 大阪 交野大会」というイベントがいきいきランド交野にて…

2025.05.03.

web

明朝体フォントをアクセントに。IVARA LEARNのランディングページデザイン

当サイトにwebの制作実績として紹介させていただいている実績は、基本的にデザインとコーディングの両方を担当させていただいた制作案件がメインなの…

2025.04.09.

graphic

黒の用紙に活版印刷でグレードアップ。株式会社FORGEの名刺デザイン

昨年の9月に制作実績にて紹介している株式会社FORGEさまの名刺デザイン。 ブランドの世界観をより引き立てる。株式会社FORGEの名刺デザイン 名刺のデ…

2025.04.01.

goods

創業54周年。のぼり刃物店さんのロゴデザインと缶バッジ&ステッカー

毎年恒例としてお任せいただいている制作物が、今年も完成。 きたる2025年4月1日(火)、いつもお世話になっている大阪府茨木市にあるのぼり刃物店さ…

2025.03.27.

graphic

数字で各特徴を視覚的に伝える。ハイブアイキューのフライヤーデザイン

会社員時代の元同僚が働いている株式会社ハイブアイキューさまから、会社の強みや特徴を伝えられるチラシをデザインしてほしいというご依頼をいただ…

2025.03.17.

graphic

LPの世界観をさらに広げる。キシヒロエステートのフライヤーデザイン

いつもお世話になっているパートナーの辻本さん(株式会社FORGE)からのご紹介で、昨年末に久しぶりの紙媒体のデザインを制作させていただきました。…

2025.02.25.

designをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル