整体院や整骨院、マッサージなど同じ地域内でもライバルが多いサービス業のサイトはとにかく他店舗との差別化がとても重要です。ポータルサイトでの認知度アップはもちろん、自社サイトで他店舗にはない魅力を表現できているかがWeb集客のカギとなります。今回はブランディングに成功している整骨院のサイトを例に成功の秘訣をWebデザイナーが解説します。
整骨院の温かみや安心感を上手に演出
BiNDupで作成したサイトを紹介しているナイスサイトより、まずはサイトをご覧ください。
今回のサイトの作者、Yazugraph.さんは、白ベースに整骨院のカラーである黄色を効果的に配色し、年齢層問わず見やすいサイトを制作。色やフォントそれぞれの掛け合わせで整骨院の持つ温かみや安心感を引き出し、オーナーの人柄なども感じられる好感度の高いサイトです。
▼整骨院「いきいき鳥栖北整骨院」さん。
アクセントカラーやフォントに色を載せる
黄色と白のイメージで、コンセプトとしている元気の良さや若々しさがありつつも、温かみが演出できているのは、随所にアクセントとして落ち着きのある茶系を取り入れているから。
本文の色に茶色を取り入れているのも特徴です。
文字に使う色は黒が一般的ですが、茶色や濃いグレーなどを取り入れると、こちらのように一味違う雰囲気に仕上げることができます。（とはいえ、あくまで読みやすい色であることは大事なのでご注意を。）
フォントの組み合わせが安心感を演出
こちらのサイトでは、基本フォントに日本語フリーフォントの「源真ゴシック」をセレクト。これがサイトの雰囲気を作り上げています。
見出しが画像なのでフォント名がわからないのですが、見出しとのバランスも良い。
ゴシックなので、カッチリとした印象がありながらも、女性の写真を使ったTOPのイメージに合う、やわらかさと安心感を演出しています。サイトのフォント選びは、組み合わせでも印象が変わる、ブランディングに欠かせない要素です。
フォントの組み合わせで迷ったら「サーバー関係なく使える、フリーのWebフォント活用事例」の記事もぜひ参考にしてください。
BiNDで設定するときのポイント
ベースのフォントとして使っている「源真ゴシック」を、本文／タイトル／大見出し／小見出し等に統一して設定すると、マークアップされたテキストにWebフォントが当たり、どんな環境で閲覧されても、制作側の意図したフォントでサイトを美しく表示できます
画像を見出しに使う場合もスタイルの定義を忘れずに
せっかくブランディングに成功した一目を惹くサイトが作れても、検索エンジンに認識されなければ、宝の持ち腐れとなってしまいます。
基本的に見出しはすべて、Webフォント+CSS（Dress）で設定するのがベストですが、画像でないとできない表現を使いたい場合もあるでしょう。
その場合に、ぜひ実施してほしいのが、画像のマークアップとALTによる画像説明です。
現状は黄色い見出ししか、BiNDの段落スタイルで定義されていないので、検索エンジンに認識される可能性が低くなってしまいます。
文字を画像化する・しないに関わらずマークアップすることを強くお勧めしますが、今回は画像文字における設定の方法をご紹介します。
以下を参考に、ぜひ行ってみてください。
BiNDで設定するときのポイント
画像文字を使用したい場合は、段落のスタイルをきちんと当てて、画像のALTにテキスト入れておくことを忘れずに。
いかがでしょうか？自社の魅力をしっかりと伝えられるかどうかは、フォントやカラーリングなど徹底した細部へのこだわりが大切です。
整体院や鍼灸院のサイトなら、BiNDupの追加テンプレート「Kameyama Clinic」などの利用もオススメです。
今回紹介したサイトを参考に、サービス業でも多くの職種の方に使われているBiNDupを使ってぜひ、自社の良さを伝えるサイト作りにチャレンジしてみてください。
BiNDupを試してみる
POINT
- 店舗のコンセプトを表すのに「色」と「フォント」は大事な役割を果たす
- 本文に色を取り入れると一味違う雰囲気にできる。読みやすい色がポイント
- 画像見出しを使いたいときには、スタイルの設定とALTの説明文を忘れずに