サービス
ホームページ制作
リクルートサイト制作
ランディングページ制作
SEO記事作成
広告運用代行
制作実績
ブログ
会社情報
資料請求
WEBで見積り
お問い合わせ
MENU
CLOSE
見積り依頼
お電話でのお問い合わせ
tel.076-464-6906
BLOG
更新日：2023.12.01
公開日：2023.11.27
ほとんどの人が仕事でメールを使っていると思いますが、メールソフトの設定で困ったことはありませんか。 一度設定すると、改めて設定するまで時間が空くことが多いため、以前設定した人も忘れていることがほとんどだと思います。 今回は、メール設定に戸惑わないよう設定方法を解説したいと思います。 メール設定に必要なもの ホームページのドメインでメールアカウントを作っている場合、制作会社が管理しているはずです。 書類で設定内容を渡されていると思いますが、確認できない場合は制作会社に問い合わせてください。 メール設定に必要なものはメールアカウント・サーバーホスト・メールアカウントのパスワードです。 今回は、弊社ドメインで作ったメールアカウントをOutlookに実際に設定しながら解説します。 ※利用するサーバーはＸserverです メールアカウント demo@luvicon.net サーバーホスト sv（サーバー番号）.xserver.jp パスワード ********* メールアカウントの設定方法 新規アカウントの設定 1.メールソフトを立ち上げ、上部メニュー「ファイル」をクリック 2.左メニューの情報から「アカウント設定」をクリック 3.上部タブの「新規」をクリック 4.「自分で電子メールやその他のサービス…（手動設定）」を選択し「次へ」をクリック 5.「インターネット電子メール」を選択し「次へ」をクリック 6.各種情報を入力し「詳細設定」をクリック ＜ユーザー情報＞ 名前 メールソフト上で表示される名前 電子メールアドレス 登録するメールアカウント ＜サーバー情報＞ アカウントの種類は、1つの端末で使う場合はPOP3、複数端末（ＰＣとスマホなど）で使う場合はIMAPを選択。 アカウントの種類 POP3 / IMAP 受信メールサーバー sv（サーバー番号）.xserver.jp 受信メールサーバー sv（サーバー番号）.xserver.jp ＜サーバーへのログイン情報＞ アカウント名 登録するメールアカウント パスワード ********* 7.「送信サーバー」タブを選択し「送信サーバー（SMTP）…」「受信メールサーバーと…」にチェック 8.詳細設定タブで各種設定をし「OK」をクリック ＜ポート番号＞ 受信サーバーは手順4で選択した「アカウントの種類」に応じて設定。SSL、非SSLは任意（セキュリティ上SSL推奨）。 SSL通信にする場合は「このサーバーは暗号化された接続（SSL）が必要」にチェックを入れ、「使用する暗号化接続の種類」をSSLに設定。 初回は受信サーバーはポート110、送信サーバーはポート25に設定されている。 受信サーバーは非SSLなら変更の必要はないが、送信サーバーの25はセキュリティに脆弱性があるため、必ず465または587に変更する。 受信サーバー（POP3） 995 （非SSLの場合は110） 受信サーバー（IMAP） 993 （非SSLの場合は143） 送信サーバー（SMTP） 465 （非SSLの場合は587） ＜サーバーのタイムアウト＞ 任意の時間を設定 ＜配信＞ 任意で設定（サーバーから削除推奨） 9.メール設定画面の「次へ」をクリック 10.セットアップの完了を確認し「次へ」をクリック 11.送受信テストでテストメッセージが確認できたら設定完了 設定済みアカウントの更新 ホームページのサーバー変更、PCの買い替えなどがあった場合、アカウントの設定を更新する必要があります。 1.メールソフトを立ち上げ、上部メニュー「ファイル」をクリック 2.左メニューの作業から「アカウント設定」をクリック 3.更新するメールアカウントを選択し「修復」をクリック 4.各種情報を更新し「次へ」をクリック SSL関連の更新は「詳細設定」をクリックし、必要な設定を更新。更新内容は「新規アカウントの設定の手順7.8」を参照ください。 ＜ユーザー情報＞ 名前 メールソフト上で表示される名前 電子メールアドレス 登録するメールアカウント ＜サーバー情報＞ サーバー情報は、1つの端末で使う場合はPOP3、複数端末（ＰＣとスマホなど）で使う場合はIMAP アカウントの種類 POP3 / IMAP 受信メールサーバー sv（変更後のサーバー番号）.xserver.jp 受信メールサーバー sv（変更後のサーバー番号）.xserver.jp ＜サーバーへのログイン情報＞ アカウント名 登録するメールアカウント パスワード *********（変更後のパスワード） 5.セットアップの完了を確認し「次へ」をクリック 6.送受信テストでテストメッセージが確認できたら設定完了 意外と簡単なメール設定 メール設定は何度もするものではないため手間取ることも少なくありませんが、手順が分かれば数分で済みます。 この記事がメール設定の際に役立てば嬉しく思います。
更新日：2023.12.26
公開日：2023.11.22
Google翻訳を使っている方は多いと思いますが、テキスト以外も翻訳できることはご存知ですか？ 幅広い対応力。さすがGoogleさんですね！せっかく無料で使えるので、どんどん使い倒していきましょう。 翻訳してみた 無料なのに優秀過ぎるツール「Google翻訳」。 実際にいろいろなものを翻訳してみました。使い方も解説しますので、ぜひ最後までご覧ください。 ドキュメント まずはドキュメントから翻訳していきます。私がもっとも気に入っている機能です。 SEO関連の調べ物をしていると英語レポートに辿りつくことが多いのですが、Google翻訳を使えばあっという間に翻訳してくれます。 翻訳したのはGoogle検索品質ガイドラインです。Googleさんの資料は日本語版がないことが結構あるんですよね。 翻訳前 翻訳後 翻訳の手順 ①翻訳枠の上にある「ドキュメント」をクリック ②翻訳するファイルをドロップ、または保存したファイルを選択 ③「翻訳」ボタンをクリックして翻訳スタート ④翻訳が完了したら「翻訳をダウンロード」ボタンをクリックしてファイルを保存 画像 つづいて画像内テキストを翻訳していきます。ちなみに翻訳後の画像は保存できます。 翻訳前 翻訳後 翻訳の手順 ①翻訳枠の上にある「画像」をクリック ②翻訳するファイルをドロップ、または保存したファイルを選択 ③翻訳後、必要に応じて「テキストをコピー「画像をダウンロード」ボタンをクリック Webサイト 最後に中国のWebサイトを翻訳してみました。テキストが途切れている部分がありましたが、翻訳の精度は十分だと思います。 翻訳したサイトはブラウザ表示で操作でき、メニューから移動した先のぺージも翻訳されます。 翻訳前 翻訳後 翻訳の手順 ①翻訳枠の上にある「ウェブサイト」をクリック ②入力枠に翻訳したいサイトのURLを入力 ③Webサイトが表示される ファーストビュー中央の漢字は画像だったため翻訳されませんでしたが、背景を流れる文字はしっかり翻訳されていました。 精度はどうなの？ 翻訳できるのは分かったけど、精度はどうなの？という方も多いと思うので実験してみました。方法は以下の通りです。 今回は英語、フランス語、中国語で実験しました。結果は上々、表現は多少変わっていますが、内容の把握には問題ない範囲です。 テキスト内の内部リンクもしっかり機能しています。 弊社サイト（翻訳前） 日本語 → 英語 日本語 → フランス語 日本語 → 中国語 Google翻訳を使いこなそう！ 高性能すぎる無料ツール「Google翻訳」を紹介しました。これだけ幅広い対応力なら、翻訳ツールはこれだけで十分ではないでしょうか。 日々アップデートを続けるGoogleさんです。将来的には動画内テキストなども翻訳してくれる日がくるかもしれません。 Googleはほかにも多く便利ツールを提供しています。当ブログでも定期的に紹介していくので、よければチェックしてくださいね。
更新日：2024.1.23
公開日：2023.11.16
「富山 ホームページ制作」で検索順位１位になりましたで当サイトのアクセス数を公開してから7ヶ月経ったので、そろそろもう一度公開しておこうかなと思います。 最初に結果ですが、前回公開（2023年3月）からの7ヶ月でアクセス数が3.3倍に伸びました。リニューアルした1年3ヶ月前（2022年7月）と比べて9.7倍です。 内部SEO最適化はリニューアル時に済ませたので、後はコンテンツSEOだけでアクセス数を伸ばしました。手動での外部対策はしていません。 関連記事：コンテンツSEOで集客！メリット・デメリット・手順は？ アクセス数を公開します ユーザー数、新規ユーザー数、平均滞在時間の順で公開します。 最初の数字がちょっと情けないですが、現在はそれなりにアクセス数になっています。 GA4（Google アナリティクス）のスクショも貼っておきます。 2022年7月（リニューアルした月） 2023年3月（前回公開時） 2023年10月（現在） どうやってアクセスを増やしたか 「これだけ？」と思った方もおられるでしょうが、本当にこれだけです。SNSも稼働していますが、サイト内でやったことは上の2つだけです。 ここからは、前回の公開以降に実施したことを紹介します。 記事の執筆 メインの施策です。執筆の手順は【実例付き】誰でもできる！5ステップで始めるコンテンツSEO集客で解説しているので詳しく書きません。 1年3ヶ月かけて55記事と制作会社にしてはかなりスローペースですが、その分記事のクオリティはとことんこだわっています。 記事本文内から関連記事へのリンクを貼り、動線づくり・内部リンク最適化にも気を配っています。 リライト 検索順位というよりユーザビリティ面での施策ですが、過去に書いた記事のリライト・加筆を定期的にしています。 「書き切った！」と思った記事でも、後から読み返すと足りない要素や読みにくさなどが見えてくるんですよね。 大きく変わった情報はできるだけ早く更新し、リンク切れも定期的にチェックしています。 情報の鮮度が高いほど順位が上がる傾向があることもリライト・加筆する理由のひとつです。 タイトルタグの設定変更 記事タイトルの付け方を変えたのではなく、titleタグの設定を変更したという意味です。 変更内容は下記のとおり。 具体的にいうと、この記事だと以前はこんなタイトルになっていました。 それを、ぺージタイトルだけになるよう変更しました。 タイトルが長くなりすぎること、キーワードが増えすぎることが変更した理由です。 変更直後から多くのキーワードで検索順位が上昇したので、当サイトにとっては正解だったと思います。 ただ、titleタグの設定はいまだ正解が定まっておらず、当サイトと同じ設定にしても順位が上がらない、むしろ落ちるという可能性もあります。 検索順位に大きく影響するタグなので、設定を変えるときは慎重におこないましょう。 関連記事：タイトルやブログ内のキーワードは検索順位にどれだけ影響する？ ブログ下に関連記事を設置 本文内からもリンクを貼っているのですが、文脈によっては貼りづらいことがあるので、ブログの下に関連記事を表示させました。 表示させる記事は自動にもできますが、当サイトでは手動で選択しています。少し手間ですが、ユーザビリティにこだわるなら手動にすべきだと思います。 アクセス増は誰でも狙える！ 久しぶりにアクセス数を公開してみました。リニューアル時点と比べてかなり増えていますが、正直まだまだ少ないなと感じています。 今後も不定期で公開しますが、たいした変化もないのに公開しても意味がないので、次はアクセス数が10,000を越えたらかなと思っています。今月のアクセス数が6,000を超えてきそうなので、案外早く公開するかもしれません。 業種にもよりますが、これくらいのアクセスであれば誰でも狙えると思っています。必要なのは「ユーザーファーストな視点」「コンテンツを作り続ける根気」「ちょっとの知識」だけです。 この3つを忘れなければ結果はついてくると信じて、コンテンツを積み重ねていきましょう！ どうしても結果が出ない！という場合は、SEO記事作成サービスも提供していますので、ぜひ弊社にご相談ください。
更新日：2023.12.27
公開日：2023.11.15
美容室を探すとき、パッと思いつくのホットペッパービューティーなどのポータルサイトです。 集客のために登録しているお店も多いと思いますが、それだけで十分だと考えていませんか？ 結論をいうと、ポータルサイトへの登録だけでは不十分。集客を強化したいなら自店のホームぺージも必要です。 66％のユーザーがホームページをチェック 出典：HAIRLOG（ヘアログ）-美容室選びで「公式ホームページをチェックしますか？」のアンケート調査 HAIRLOGが実施したアンケートでは、ポータルサイトで美容室を探すユーザーは77％という結果となり、検索エンジンを利用するユーザーも27％いることが分かりました。 また、美容室を選ぶ際にホームページをチェックするユーザーが66％になりました。ポータルサイトで見つけた美容室の詳しい情報を、ホームページで確認するユーザーが多いことが伺えます。 ホームページをチェックする理由として、以下のものが挙げられます。 こうして見ると、来店前に詳細な情報を得たいユーザーが多いことが分かります。 ホームページでポータルサイトに載せられない情報を補完すれば、間違いなく集客力の強化につながるでしょう。 ホームページをつくるメリット 新規客を集められる ホームページがあれば自由に情報を載せられます。写真の枚数、ぺージの内容・構成まで思い通りです。 ポータルサイトは簡単に登録でき、ホームページ制作に比べて費用も安く済みますが、テンプレート形式のため載せられる情報に制限があります。 ポータルサイトに載ってない情報を確認するためにホームページへアクセスするユーザーが多いのはこのためです。 デザイン面でオリジナリティも出せないため、他店との差別化も図りにくいというデメリットもあります。 ホームページに詳細な情報を載せておけば、ユーザーの不安を軽減して来店してもらえる可能性が高まります。 お店の魅力を伝えられる 来店を考えているユーザーにお店の雰囲気を伝えやすいこともホームページのメリットです。自店の強みをしっかり表現できるのもポイントです。 「こんなスタイルが得意」 「こんなお客様におすすめ」 強みやおすすめポイントをしっかり訴求できれば、「一度行ってみようかな」と思ってもらえます。 たとえば、どのお店でカラーしてもしっくりこないと悩むユーザーに「思い通りのオリジナルカラーを配合します」と訴求できれば、期待値が高まり来店してくれるでしょう。 ホームページの最大のメリットは、このように「ここにしかない価値」を表現できることです。 キャンペーンなど情報発信しやすい TOPページに告知スペースを設ければ、キャンペーン情報や新サービスを掲載できます。 周年イベントやお得なキャンペーン、新しいサービス情報を掲載することで、定期的に来店するキッカケになります。 ブログで集客を強化できる ブログで情報を更新すれば、お店の変化を感じ取ってもらえます。積極的に情報を発信しているホームページに対して、ユーザーは好感・信頼を感じる傾向があります。結果として、集客アップが見込めます。 また、ブログを継続して更新すればSEO面でも効果が見込めます。検索上位を獲れれば、ホームページの維持費だけで安定した集客が可能になります。 スタッフの魅力を伝える スタッフ紹介や得意なスタイルを自由に掲載できることも大きなメリットです。 お客様は自分にぴったりのスタイルを見つけられ、スタッフの経歴や技術についても事前に知ることができます。 24時間365日受付け ホームページがあれば、いつでも予約を受け付けられます。お客様が予約したいときに予約できる環境は、他店にお客様をとられないための重要なポイントです。 予約フォームを導入し、お客様がいつでも予約できる環境を必ず準備しておきましょう。 スタッフを採用できる 人手不足の美容業界では、スタッフを増やしたいが応募がこない…という声も聞こえます。顧客が多くても対応するスタッフが足りないと悩むオーナー様も多いのではないでしょうか。 そこで有効なのが、ホームページに採用情報を載せるという方法です。採用活動をしている美容師にとってもホームページは貴重な情報源です。 福利厚生など必要な情報を網羅すれば、応募に対して前向きになる可能性が高くなります。 カットモデルを集めやすい スタッフだけでなく、カットモデルを集めやすくなることもメリットです。ホームページがあると信頼を得やすくなり、カットモデルも依頼しやすくなります。 得意なスタイル、ヘアカタログを掲載すれば、「このお店になら任せていいかな」と思ってもらえる確率も高まるでしょう。 オフライン集客との相効果を狙える 少し前までネットとリアルの集客は切り離して考えられていました。しかし、今ではネットとリアルを融合させて考えることが当たり前になりました。 フリーペーパーに載っていたお店のホームページを見る。ホームページで見ていたお店を店舗の前を通りがかって思い出す。こういったことはよく起こります。 美容業界では、オフライン → オンラインという流れが非常に多いという特徴があります。フリーペーパーを見てネットで調べたとき、ホームページがなければ不信感につながります。 せっかくオフライン媒体に情報を載せても、受け皿となるホームページがなければ効果半減です。オフライン・オフライン両方を活用してうまく相乗効果を狙いましょう。 ホームページをつくる際のポイント 美容室は同じ地域にいくつも店舗がある傾向があります。 競合が多いため、自店ならではの魅力や強みをどれだけアピールできるかが重要です。 ホームページを活用して集客・売上増を達成するためにも、次のポイントをしっかり押さえましょう。 自店のコンセプト・ターゲット（ペルソナ）を明確に ホームページをつくる上で重要なのは、コンセプトやターゲット（ペルソナ）を明確にすることです。コンセプトやターゲットを明確にすれば、より確度の高いユーザーへアピールできます。 ターゲットがずれていると効果的なアピールができません。まずは自社のコンセプトやターゲットを明確にしましょう。 関連記事：「ペルソナ設計」でホームページの訴求力を高めよう デザインにこだわる 前出のHAIRLOGのアンケート調査では、ホームページのデザインやセンスがお店選びに影響すると答えたユーザーが65％となりました。 影響すると答えたユーザーからは、以下の理由が挙げられています。 ホームページがオシャレだと「いきたいと思う」「期待値が増す」「値段が少し高くてもいってみたくなる」とポジティブな印象になり、お店選びにプラス効果を与えるため、デザインはとことんこだわりましょう。 写真・動画でお店の魅力を伝える 「キレイになりたい」という欲求を持つユーザーに対して、ヘアカタログ、施術後のスタイル、お店や施術中の雰囲気を伝える動画など視覚に訴えるコンテンツは非常に効果的です。 訴求力の高い動画は、とくに取り入れたいコンテンツです。ホームページ制作会社には動画も手掛ける会社も少なくありません。ホームページ制作の依頼先を探す際は、動画もつくれるか確認してみましょう。 関連記事：【伝えるチカラ5000倍！】ホームページに動画を載せて訴求力アップ↑↑ 美容室・美容院のWeb集客 SEO対策 ホームページで集客するなら、必ず取り組みたいのがSEO対策です。 とくに主流となっているコンテンツSEOには力を入れたいところですが、やみくもにコンテンツを増やしても効果は期待できません。 有効なコンテンツはブログ・施術実績です。この2つのコンテンツはできる限り充実させましょう。 インターネット広告 即効性を求めるならインターネット広告が一番です。 新サービスの告知、周年祭のイベントなど、短時間でたくさんのユーザーを集めたいときに効果を発揮します。 最近ではリスティング広告のほか、SNS広告にも力を入れている企業も多く、有効な集客方法として認知されています。 SNS 近年はSNS集客に力を入れる企業が増えており、美容室・美容院も例外ではありません。 とくにインスタグラムは有効な媒体で、施術実績や得意なスタイルをキレイな写真で紹介すると、大きな集客につながる可能性があります。 写真だけでなくショート動画を投稿できるリール機能をうまく活用すれば、施術後のイメージを伝えやすくなります。 テキストだけでは伝えられないイメージも写真や動画を伝わりやすいので、自店の強みをしっかりアピールしましょう。 必要なページは？ 美容室のホームページはお客様に予約・来店してもらうことが目的になります。そのため、基本情報のほか予約ぺージなども準備する必要があります。 店舗情報 店舗名やアクセス情報は必ず明記しましょう。店舗情報がないと、いざ来店しようと思ったとき大きな不安を感じてしまいます。 住所だけでなく、マップも載せておくことでお客様は迷うことなく来店できます。予約時に必要な電話番号も忘れず記載しておきましょう。 営業時間・定休日 店舗情報以外にも、営業時間や定休日の明記も必須です。予約しようにも営業時間や定休日が分からないと予定が立てられず、候補から外されてしまいます。 予約なしでも施術が可能な場合は、それも明記しておくとよいでしょう。 お店の強み・ウリ お店を探すとき、どんなお店なのか分からなければ来店にはつながりません。 しっかり固まったコンセプトを持っているなら、お店の雰囲気が分かるホームページ上でしっかり伝えましょう。 コンテストの受賞歴があるスタッフが在籍、どんなカラーでも配合できるなど、持っている強み・ウリはすべて出し切りましょう。 メニューと料金 お店選びで重要なのが、どんなメニューがあるかと料金です。これらの情報がしっかり記載されていないと、お客様は安心して予約できません。 セットメニューを用意しているのであれば、それも含めて記載しましょう。単体メニューよりお得であればアピールすることも大切です。 スタッフ紹介 メニュー・料金と同じくらい気になるのが、「どんなスタッフがいるのか」です。1時間近く一緒に過ごす人なので、なるべく自分に合いそうな人を選びたいと思うのは当たり前です。 「女性のスタッフがいるなら気楽に話したりできそうと思っていたのに、実際は男性スタッフばかりで落ち着かなかった…」といったミスマッチを起こさないためにも、スタッフのプロフィールはしっかり記載しておきましょう。 顔と名前だけでなく得意なスタイル・趣味などを載せることで、お客様に親近感を抱いてもらえるでしょう。お客様とスタッフのマッチングがうまくいくと、リピート率を高める効果もあります。 得意なスタイル 自店が得意とするスタイルをしっかり伝えることで、お客様が施術後の自分をイメージしやすくなります。スタイルを載せるときは、自店のターゲットとなる客層を意識することが重要です。 お客様にとって、「どんなスタイルを提案してくれるのだろう」「どんなオシャレになれるんだろう」はもっとも重要なポイントです。写真の品質はしっかりこだわり、未来の自分をイメージできるものにしましょう。 お店全体だけでなく、スタッフそれぞれの得意スタイルを掲載すると、「この人にカットしてもらいたい」という欲求を高める効果も期待できます。 ヘアカタログ ヘアカタログを充実させると、技術力をアピールできます。 「こんなスタイルにしたいけど、応えてもらえるかな」「こんなカラーにしたいけど今までのお店ではできなかった」といった不安を解消するためにも、なるべく多くのカタログを載せましょう。 カタログを作成するときはショート・ミディアム・ロングのようにカテゴリーを設け、担当スタッフが分かるようにしておけば指名予約の増加も見込めます。 ブログ・スタッフブログ 必須ではありませんが、スタッフブログを載せておくとお客様からの親近感を得やすくなります。 ヘアケアなどのお客立ち情報、お店のイベントやキャンペーンなど定期的に情報発信すると、新規来店やリピートだけでなく、検索順位が上昇することで検索エンジンからの集客も期待できます。 問い合わせ・予約 どれだけホームページをつくり込んでも、疑問は必ず出てくるものです。こだわりや悩みはお客様ごとに異なります。 そうした質問への丁寧な対応が来店につながることも少なくありません。チャンスを逃さないためにも、問い合わせフォームは必ず作成しておきましょう。 予約フォームの導入も忘れてはいけません。お客様にしたら電話予約より手軽というメリットがありますし、お店側も電話対応する人員を削減できます。 なにより、ホームページで強みをしっかりアピールして興味を持ってもらえたのに、「WEB予約ができないのは面倒」と来店してもらえないのはもったいなさ過ぎます。 最近は、低価格でホームページと連動させられる予約システムも増えています。ホームページ制作会社であれば導入は難しくないため、制作を依頼するなら導入可能かも確認しておきましょう。 弊社の制作事例 ヘアーサロンシエル 様 サイトを見る シエル フラッフィー 様 サイトを見る 有限会社BAZ 様 サイトを見る ホームページを活用して集客を 多くのユーザーは、ホームページを見てその美容室にいくかどうかを決めています。 そこそこでいいと思わず、しっかりと力を入れ、お店の強みや雰囲気を伝えられるホームページを制作しましょう。 弊社では、デザイン・コンテンツだけでなく、ユーザーの興味を惹きつけ集客・売上増につながるホームページをご提案しています。 これからホームページを立ち上げる、リニューアルを検討している、もっと集客したいといった場合は、ぜひ一度ご相談ください。
公開日：2023.11.07
SNSやインターネット広告での集客に注目が集まっている昨今、「SEO対策はオワコン」という言葉を聞くようになりました。 自社サイトのSEO対策に携わっている方の中にも「続けても意味がないのでは」と不安や疑問に思っている方がおられると思います。 結論をいうとSEO対策は今でも重要な施策です。適切な対策をすれば、今からでも検索上位は十分に狙えます。 それならなぜ意味がないといわれるか。その理由と原因を紹介したいと思います。自社サイトのSEO対策でお悩みの方は、ぜひこの記事を最後までご覧ください。 なぜSEO対策は意味がないといわれる？ どうしてSEO対策は意味がないといわれるか、理由は下の3つでしょう。 アクセスを伸ばせない人が多い SEO対策で挫折するもっとも多い理由が「アクセスが伸ばせない」です。 コンテンツを作っても上位表示されないことは珍しくありません。素晴らしいコンテンツを作れても評価されるまで数ヶ月かかることもあります。アクセスを集められないキーワードで対策している可能性も考えられます。 まずは、下の3つを再確認してみましょう。 検索順位を決める指標は多いですが、上記の3つが競合より優れていれば上位表示は十分狙えます。 とくに、コンテンツの質・独自性を高めることは最優先事項です。 成約につながらないことが多い たとえ上位表示できても「成果につながる見込み客」を集めなければ成約につながりません。 ユーザーは、求める情報がなければすぐにサイトを離脱します。求める情報を見つけてもニーズを満たしていなければ同じく離脱していきます。 アクセスを集めても成果につながらないときは、以下の項目を満たしているか確認してください。 このうち1つでも満たしていない場合、成果を得るのは難しいでしょう。 Googleアルゴリズムの影響で順位が安定しない 上位表示しているコンテンツであっても、Googleアルゴリズムのアップデートによって圏外（100位以下）に飛ばされることがあります。いつか飛ばされるなら、上位表示してもムダと思う方もいるでしょう。 しかし、アップデートは「ユーザーに素晴らしい検索体験を提供する」ことが目的です。Google が掲げる10の事実に沿って、ユーザーファーストなコンテンツ作成を続ければ、アップデートによる順位降下の可能性はほぼありません。 こんなSEO対策はやめましょう どんなサイトであれ、正しくSEO対策できていれば一定の効果を得られます。結果が出ていない場合、単に意味のない対策に力を入れていることがほとんどです。 キーワードの詰め込み 複数のキーワードをやたらと詰め込んだコンテンツを見ることがありますが、まったく意味がありません。それどころか、ペナルティを受ける危険性があります。とくに、タイトルタグへのキーワード詰め込みは絶対やめましょう。 キーワードを多く設定すれば、上位表示するキーワードが増えると思われがちですが、評価が分散してどのキーワードでも上位表示できない恐れがあります。 キーワードが少なくても検索ニーズを満たしていれば問題ありません。あまり意識しすぎず、自然な流れでキーワードを入れるようにしましょう。 低品質記事の量産 検索でヒットするキーワードを増やすため、とにかくコンテンツを量産しているサイトもよく見かけます。高品質なコンテンツであれば効果絶大ですが、量産されたコンテンツは得てして品質が低いものです。 SEO対策で必要なのは、ユーザーの検索意図を正確に捉え、求められる情報を網羅したコンテンツであることを忘れないでください。 自作自演リンク 自演リンクが通用したのはもう昔のことです。今は検索エンジンが進化し、意味がないどころかスパム判定の原因となります。 付加価値がないサテライトサイトからのリンクなどはもってのほか。SEO効果が期待できないどころか、スパム判定の危険性を高めるだけです。 もちろん、ユーザーにとって価値があり、関連性の高いサイトからのリンクは貼って構いません。コーポレートサイトとブランドサイト・LPをリンクでつなげるといったことは今でも有効です。 意味のない長文 SEO対策について調べたことがあれば、「長文が評価されやすい」「最低でも2,000字書こう」といった情報を目にしたことがあると思いますが、まったくの間違いです。 確かに、上位表示されているコンテンツを見ると長文であることが多いですが、単純に「ユーザーが求める情報を網羅したら結果的に長文になっていた」だけです。 麻婆豆腐のレシピを書くのに5,000字はいりませんよね。500字もあれば十分です。むしろ余計なことを書くほどユーザーから敬遠されます。 長いだけで中身のないコンテンツは百害あって一利なし。長文コンテンツは、あくまでニーズに対して網羅的に応えた結果であることを抑えておきましょう。 キーワードの出現率・含有率の調整 キーワードの出現率・含有率の調整については忘れて構いません。今でもしているならすぐにやめましょう。キーワードの使用回数を指標にコンテンツを評価することはありません。 キーワードに固執せず、「ニーズを満たせるコンテンツ」になっているかを意識しましょう。 評価されない項目の調整 かつてはmetaキーワードやmetaディスクリプション、strongタグをページ内容と関連性の高いキーワードに設定するのがセオリーでしたが、今では意味がありません。 とくにmetaタグはGoogleがサポートを停止したためSEO効果はなく、記述しなくてもまったく問題ありません。 metaディスクリプションはSEO効果がなくても検索結果でのクリック率に影響するので、可能ならページごとの設定が推奨されています。ただ、設定していなくてもGoogleが適切なテキストを抽出してくれるため、リソース的に難しいなら後回しにして大丈夫です。 不要な動画・画像の埋め込み 滞在時間を伸ばすために動画や画像を挿入してもSEO効果はありません。それどころがサイトの表示速度が遅くなり、離脱を促す原因になります。 動画や画像は、ユーザーの理解を促進したり、ページの利便性を改善させたりと、必要があるときにだけ使いましょう。 記事を公開しっぱなし 古いコンテンツを放置するとマイナス評価につながります。 法律関連など、定期的に内容が変わるコンテンツは情報の鮮度がとくに重要です。定期的にコンテンツを見直し、リライトが必要なら適時おこない、情報の鮮度を保ちましょう。 SEO対策の効果が出ない原因 SEO対策は、ユーザーファーストを貫けば基本的に効果が出ます。 しかし、ポイントを押さえた上で対策を続けても効果が出ないようなら、以下のような原因が考えられます。 キーワード選定ができていない キーワードの選定ミスはもっとも多い間違いです。 SEOで上位表示を目指すには、関連性の高いキーワードでコンテンツを作る必要があります。それもサイト全体でキーワードに関係する情報を網羅していく必要があります。 ビッグワードを狙ったコンテンツだけを持つサイトと、関連性の高いキーワードで複数のコンテンツを作ったサイトでは、後者の方が検索順位が上昇する傾向があります。 たとえ競合サイトより質の高いコンテンツを作っても、網羅性が欠ければ効果が薄くなることを覚えておいてください。 複数のロングテール、スモールキーワードで上位表示されるコンテンツを積み上げることで、ビッグワードでも上位に食い込めるようになります。 競合より情報が薄い コンテンツをどれだけ作っても、競合サイトに質・網羅性・オリジナリティが負けていては上位表示は難しいです。 やみくもに量産しても意味がありません。あくまで、ユーザーの知りたい内容をより網羅しているコンテンツが評価されるという前提は忘れないでください。 サイトを立ち上げて間もない 公開したばかりのWebサイトは、検索エンジン側がまだ適正な評価をしきれていない可能性があります。 公開から半年ほどで評価が安定する傾向があるため、その間はなるべく順位に一喜一憂せず、必ず効果は表れると信じて粛々とコンテンツを積み上げましょう。 内部リンク構造が整っていない ユーザービリティに問題があるサイトはSEO評価を得られません。 たとえば、リンク切れが多い、リンク先が間違っているという場合です。ユーザーはもちろんですが、検索エンジンのクローラーもサイト内のリンクを辿ってコンテンツを読み取っていきます。 リンクが適切に設置されていないと、クローラーに正しい内容を伝えられず、ユーザーにとって使いにくいサイトと判断されます。 その結果、SEO評価も得られない可能性があるため、ユーザビリティ向上も含め適切な内部リンクを設置しましょう。 正しく対策すれば結果はちゃんとついてきます 一部でSEO対策は意味がないという意見はあります。正直、結果が独り歩きしているだけなのですが、人はネガティブな情報に影響を受けやすいものです。 実際にはSEO対策は今でも重要な施策です。SEO対策なしで自社サイトを上位表示させることはほぼ不可能です。 ただ、検索エンジンが進化したため小手先のテクニックでの上位表示はできなくなりました。 自社サイトを上位表示させたいなら、高品質なコンテンツづくりやユーザビリティ改善など、常にユーザーファーストでの施策が必要になります。 正しく対策すれば、必ず一定の結果を得られるのがSEO対策です。慌てずコツコツとコンテンツを積み重ねていきましょう。
更新日：2024.6.14
公開日：2023.11.06
ホームページを作るとき、制作会社にどんなデザインがいいか伝える必要がありますが、イメージを伝えるのは難しいものです。 「オシャレに」「柔らかい雰囲気」など言葉だけで伝えると、間違いなくギャップが生じます。 例えばこんな風に… イメージが致命的にズレていますが、どちらかが間違っているわけではありません。 「オシャレ」という言葉に対するイメージがそれぞれ違うのです。このズレが生じたまま制作を進めると、イメージとまったく違うデザインができてしまいます。 デザインイメージの正しい伝え方 思い描いたデザインを作ってもらうには、制作会社とイメージを細かく共有する必要があります。 ここでデザインイメージをうまく共有する方法を紹介するので、参考にしてみてください。 目的とターゲットを伝える ホームページには認知度アップや販売などの目的、ターゲットとなるユーザーが必ず存在します。 同じサービスであっても「情報を分かりやすく伝える」のか「購入してもらいたい」では、記載する情報、画像の配置、サイト全体の構成が変わります。ターゲットが女性であっても、年代によって好まれるデザインも違います。 デザインイメージを正しく伝えるためにも、下の3つは必ず共有してください。 ここが依頼側と制作側の間でズレていると、デザイン以前に構成から間違ったものになりかねないので注意してください。 企画を詳しく伝える 制作依頼に至るまでの自社や他社分析、ターゲット分析、ホームページを作る意図・目的など、まとまった企画があれば制作会社と共有してください。 とくにカスタマージャーニーは、ターゲットに向けた企画をデザインに落とし込む大きなヒントになります。 オンリーワンのサービスでないかぎり、同じような訴求をするホームページが存在します。その中に埋もれず、興味を引くデザインを作るためには、できるだけ詳しいペルソナも伝えておくといいでしょう。 関連記事：「ペルソナ設計」でホームページの訴求力を高めよう 言葉はできるだけ具体的に 「オシャレな感じ」といっても、人によって受け取り方は必ず変わります。抽象的な言葉で伝えるのではなく、できるだけ具体的なイメージを伝えましょう。 たとえば「清潔感を感じるブルーをベースにしたデザイン」「モノトーンでシンプルにまとめ、写真で魅力を伝えるデザイン」「明朝体を基調に美しくスッキリしたデザイン」などです。 さらに参考デザインをいくつか用意しておくと、イメージの共有がよりスムーズになります。 参考デザインを共有する 競合他社サイトやギャラリーサイトには、デザインの参考になるサイトはたくさんあります。 その中からイメージに近いものを探して共有し、選んだ理由を伝えましょう。 参考にしてほしい部分も伝える 参考デザインを共有するとき、「参考にしてほしい部分」を伝えるとイメージするデザインに近づきます。 配色なのか、フォントなのか、雰囲気なのか、動きなのか、どんなことでも細かく言語化することがポイントです。 参考にしてほしくない部分も伝える 参考にしてほしくない部分がある場合も具体的に伝えることも必要です。 「配色や全体的な雰囲気は好きだけど、ここのレイアウトが好きじゃない」と思っていても、言葉にしなければ伝わりません。 好きな部分を伝えることに夢中になり、参考にしてほしくない部分を伝え忘れないよう注意しましょう。 参考デザインの探し方 参考デザインを探すオススメの方法は下の2つです。 デザインだけでなく、どんな機能やコンテンツがあるかも参考にしたいところです。 競合他社をリサーチ 1つ目は競合他社のサイトを参考にする方法です。 Webサイトはターゲットとなるユーザーがいて、自社を知ってもらったり、なにかしら行動してもらうために作るものです。そのために参考になるのが、ターゲットが重なることが多い競合他社のサイトです。 競合がどんなWebサイトを持ち、どんなデザインで表現しているか、どんなコンテンツで訴求しているかをしっかりリサーチしていきましょう。 ギャラリーサイトで探す 2つ目はたくさんのWebデザインを集めたギャラリーサイトから探す方法です。 「サイト集」「サイトデザイン」と検索してみてください。デザイン性が高いサイトを集めたギャラリーサイトがいくつもヒットします。 業種、テイスト、カラーなどで検索できるギャラリーサイトもあるので、自分が使いやすいものを探してください。 イメージが固まっていないなら一覧画面の流し見がオススメです。見ていくうちに、必ず「あ、これいい感じ」というサイトが見つかります。 ギャラリーサイトによって掲載しているサイトも違うため、いくつか見て回ってよりイメージと合致したサイトを探しましょう。 おすすめギャラリーサイト 81-web.com | 日本製の優れたデザインを集めたギャラリー 81-web.com 国内サイトをピックアップしたギャラリーサイトです。 こちらもソート機能が充実しているのが嬉しいです。日本人の感性に響くサイトをたくさん見つけられます。 I/O 3000 | 国内外のオシャレなサイトが集う I/O 3000 デザインを探すなら鉄板ともいえるギャラリーサイトです。 国内外のサイトが集められており、ほかのギャラリーサイトでは見ないサイトも目にします。 とりあえず、ここを見ればなにか見つかるだろうという謎の安心感があります。 bookma! | PCサイトとスマホサイトが同時に見れる https://bookma.org/ PCサイトとスマホサイトが同時に見れるギャラリーです。 ギャラリー自体はシンプルなデザインで、流し見しているだけで楽しい気分になってきます。 サイト上部のアイコンをクリックすると、PCサイトのみとスマホサイトのみでソートすることができます。 Web Design Clip | コーポレートサイトのデザインならここ Web Design Clip コーポレートサイト・事務系のサイトが豊富なギャラリーです。 ソートはカテゴリーのほか、メインカラー・サブカラーでもかけられます。 サイドメニューのメニューをクリックすると、日本・海外・LP・スマホサイトに切り替えられます。 SANKOU! | 国内のステキなサイト集 SANKOU! 81-web.comと同様、国内サイトがピックアップされています。 「コンテンツページ」カテゴリでは、各企業のイチ押しコンテンツページが表示されます。 キャンペーンやプロモーションページもたくさん掲載されているので、どんなキャンペーンが流行っているか、どんなプロモーションをしているかなど、世の中の動きも掴むことができます。 参考サイトを探すときの注意点 参考サイトを探すとき、注意点を抑えておかないと難航するだけでなく、ユーザーに適していないデザインになる可能性があります。 紹介する注意点を参考に、適した参考サイトを見つけてください。 自分の好みだけで見ない 参考サイトはあくまで「ユーザーにとって」見やすい・使いやすいデザインを作るためのものです。作りたいデザインイメージがあることは大切ですが、それだけを基準に探すのはオススメしません。 自社のイメージ・想定したユーザー像を考慮したデザインが前提にあることを忘れないでください。 同じ系統だけ集めない 同じようなデザインだけ集めて制作会社に丸投げするのは止めておきましょう。 できるだけ多くのパターンを検討し、さらに部分的に使いたい要素を指定することで提案されるデザインの質も高くなります。 参考にした内容+独自性のあるデザインやコンテンツで構成することで、競合他社との差別化が図れるオリジナルなWebサイトを作ることができるのです。 参考にする部分は最初に固める 制作過程で「レイアウトを変更したい」「参考サイトにはなかったイメージを加えたい」など、変更を積み重ねると参考サイトとかけ離れたデザインになってしまうこともあります。 例えば、カラーを赤から青に変えるとサイト全体のイメージがガラッと変わり、レイアウトや画像も合わなくなったということが起こりえます。 こうなると、デザインを練り直す必要も出てきます。時間がかかることはもちろんですが、追加費用が発生することもあります。 最初に決めたことは、なるべく変えずに制作することをオススメします。 全体の雰囲気を崩さない程度の変更であれば対応できることも多いため、どうしても変えたい部分があるなら制作会社に相談してみましょう。 イメージを正しく伝えて思い描いたWebサイトを ホームページは、制作過程でクライアント・ディレクター・デザイナーなど、さまざまな人が関わります。それだけフィルターが多くなるため、伝えたい・伝えるべき情報は具体的にすることが大切です。 デザインは企業イメージやブランディングにおいて重要な要素となります。フワッとしたイメージだけでなく、できるだけ細かく練り上げ、思い描いたWebサイトを作り上げましょう。
公開日：2023.11.02
ホームページを持っていないのであれば、大きな損失を生んでいる可能性があります。 なぜなら、93%の購入者は検索エンジンを使って商品を探し、82%のユーザーは検索エンジンを使って地元のビジネスを探すからです。 ホームページを持っていないと、多くのユーザーにあなたの会社やビジネスを見つけてもらえません。 そのため、どんな業種でもホームぺージの必要性は高いといえます。 ホームページを持つことで、あなたの会社やビジネスをより多くの人に知ってもらい、成功に導くことができます。 ホームぺージが必要な理由 企業や個人事業主にとってホームぺージが必要な理由として、下の2つが挙げられます。 購入者の93％が検索エンジンを利用 Adobe社のhttp://Adobe Experience Cloud Blog によると、BtoB購入者の93％が当該商品を検索エンジンから探していると述べています。 つまり、ホームぺージを持たない企業は93％のユーザーに売り込めないということです。 売上はもちろん、認知向上にもホームぺージは必須といえるでしょう。 ユーザーの82％がローカルビジネスを検索エンジンで探す ホームぺージが必要な理由の2つ目は、スマホユーザーの82％がローカルビジネスを探すとき検索エンジンを使っているということです。 参考：Mobile Marketing Micro-Moments – Think with Google googleの調査で、特定エリアでランチを探すとき「〇〇駅 ランチ」のように検索して予約や訪問をする人が多いことが分かっています。 生活圏にあるお店であってもユーザーから認識されているとは限りません。そのため、ローカルビジネスでもホームページによる認知向上は欠かせません。 ホームぺージを持つメリット ホームページを持つメリットはさまざまですが、大きく下の8つが挙げられます。 信頼性が上がる 検索しても情報がまったく出てこない企業と進んで取引をしたい人は少ないでしょう。名前を検索しても情報が見つからないお店にいこうと思う人もいないはずです。 逆に、最低限のページしかないホームページでも持っているだけで一定の信頼や安心感を得られます。 集客力アップ 企業の集客方法としてインターネット広告やテレビ、紙媒体での広告がありますが、一般的には非常に高額な費用が発生します。即効性や効果は高いものの継続性が低いというデメリットもあります。 その点、ホームページは継続的な集客が期待できます。情報更新やSEOなどでホームページを周知できれば、ほかの媒体に比べて圧倒的に高い費用対効果をたたき出すことも珍しくありません。 売上アップ ホームページを持つことで売上アップも期待できます。 たとえば、オフラインでの販売がメインの企業や店舗がECサイトを開設すれば、オンライン上でも商品を販売できます。最近では、個人経営の飲食店もEC販売用の商品を開発し、売上を大きく伸ばすケースもあります。 販売チャネルを増やせば、売上にもよい影響を与えるでしょう。 顧客分析ができる ホームページのアクセス解析から、顧客の分析やマーティング戦略の立案ができるようになります。 GA4（Google アナリティクス）を導入すれば、どんなキーワードでアクセスしたか、サイト内でどんな行動をしたか分析できます。 分析結果からユーザーニーズを読み取ったり、改善点を発見したりして商品・サービスに反映させることも可能になります。 問い合わせ窓口の確保 ホームページがないと問い合わせ先が分かりません。せっかく自社の商品やサービスに興味を持たれても、連絡が取れなければ購入してもらえるチャンスを逃すことになります。 企業情報を載せるポータルなどで探せる場合もありますが、ユーザーはよほど「ほしい」と思わなければそこまでして連絡しようと思いません。 ホームページを開設して問い合わせフォーム設置や電話番号の記載をしておけば、機会損失を防ぐことができます。 採用活動ができる ホームページがあれば、求人媒体を利用しなくても求人募集ができます。求人媒体を利用する場合も、ホームページがあれば求職者が信頼・安心感を持ちやすくなります。結果として、より多くの募集を得られるでしょう。 求める人材、企業理念、先輩インタビューなど、求人向けのコンテンツを充実させれば求職者とのミスマッチも防げます。 デジタル名刺になる ホームページには企業の連絡先、提供する商品やサービスなどが記載されているため、デジタル名刺としても活用できます。 問い合わせ前に詳細な情報を得ることで、ビジネスを円滑に進められる効果も期待できます。 コスト削減になる ホームページは周知できれば24時間365日働いてくれる営業マンになります。 よくある質問や商品説明動画などを載せることで、商品説明などにかかる人件費を減らすことができます。電話対応をする場合も、ホームページを見ながら説明することで伝わりやすくなるメリットもあります。 労力がかかりがちな問い合わせ対応も減らせ、大幅なコスト削減が期待できます。 ホームぺージを持たないデメリット ホームページを持たない企業にとって最大のデメリットは機会損失です。 ホームページを持たなければインターネット上でのビジネスチャンスはほとんどありません。ホームページがないことで信頼性やブランドイメージの低下につながる可能性もあります。 イメージが悪くなる 現在は多くのユーザーがインターネットで商品やサービスを探しています。詳細情報や信頼性をリサーチするために利用されるのがホームページです。とくに、BtoBビジネスではその傾向が強くなります。 ホームページがなければ安心材料を見つけられず、購入や申し込みを見送るユーザーも増えるでしょう。このような機会損失を防ぐためにも、ホームページは重要なツールとなっています。 気軽に問い合わせができない ユーザーが問い合わせしたいと思ったとき、ホームページがなければどこに問い合わせればいいか分かりません。ポータルなどで連絡先が分かっても、電話での問い合わせはハードルが高いため、機会損失が生まれます。 インターネットが主流になっている現在は、ネット上から気軽に問い合わせできることが求められます。チャットボットの導入が増えたことからも分かるとおり、気軽に問い合わせできる環境づくりはユーザー獲得における重要な施策となっています。 競合他社に負ける サービスや商品の詳細が知りたいとき、電話で問い合わせるのは心理的ハードルが高いです。 自社がホームページを持たない一方、競合が商品やサービスの魅力・特徴を分かりやすく紹介していたり、気軽に問い合わせできる機能を提供していたら、ユーザーは間違いなく競合に流れるでしょう。 このような流れができてしまうと、ユーザーをどんどん競合に奪われ、大きなダメージを負うことになってしまいます。 サービス・商品を継続的にPRできない サービスや商品のPRなら、インターネット広告や紙媒体、マンパワーによる営業でも可能です。しかし、持続性がなく時間が経過することで効果が薄まるデメリットがあります。 ホームページは周知できれば継続して集客効果を発揮します。言い換えれば、ホームページを持っていないということは、継続的なPR方法を持っていないという状態にあるということです。 企業、事業者にとってホームぺージは必須ツール！ 企業や事業主にとって、ホームページを持たないことで生まれるデメリットは今後ますます深刻化していくでしょう。 ホームページはユーザーとのファーストコンタクトの機会となり、情報提供や信頼獲得の場にもなります。インターネット上にいる潜在ユーザーとの機会損失を防ぐためにも、自社に最適なホームページを持つ必要があります。 ホームページ制作、リニューアルでお悩みであればご相談ください。弊社が持つ知識・経験で、御社のビジネスを加速させるホームページをご提案します。
公開日：2023.10.31
モバイル端末でホームページを閲覧するユーザーが増えており、モバイル対応はもはや必須となっています。 レスポンシブデザインを採用すれば、、ユーザーはどのデバイスからでも快適にWebサイトを閲覧することができます。 また、ユーザーの利便性が向上し、アクセスやコンバージョン率の増加も期待できます。 この記事では、デザイン・利便性に優れたデザイン事例をご紹介します。 事例を参考にすれば、自社のホームページをレスポンシブデザインにする際のヒントが得られるでしょう。 シンプルでUIに優れたデザイン事例 株式会社マルベルデン https://www.mulberden.com/ 「株式会社マルベルデン」は東京都港区南青山に本社を構え、ホームぺージを総合的にプランニングするWeb制作プロダクションです。 「css design awards」や「The FWA」、「Awwwards」といった世界の優れたWebサイトが選出されるアワードを受賞し、海外のWebサイトも制作しています。 デザインはシンプルかつ洗練されており、高いデザイン力はさすが多くの受賞歴を持つ制作会社だなと思わされます。 UIも優れており、情報が整然とまとめられたナビゲーションから、どんな情報を持つサイトなのか直感的に理解できます。 Bot Express https://www.bot-express.com/ 「世界からめんどくさいをなくせ。」を掲げ、デジタルで町がもっと良くなるサービスを創造する「Bot Express」のホームぺージです。 モダンで洗練されたデザインからはテクノロジーと高い専門性が感じられます。クリーンなレイアウトと直感的なナビゲーションは、ユーザーに使いやすさとプロフェッショナルな印象を与えます。 アプリやシステム開発など、技術力や専門性を強調したいとき参考になるデザインです。 VUILD株式会社 https://vuild.co.jp/ 「VUILD株式会社」はデジタル技術を駆使した次世代の建築を開拓する建築集団です。ものづくりに情熱を捧げる設計者・技術者・製作者によって構成され、設計から部品製作まで一貫しておこなっています。 先鋭的な建築物を創造する集団のホームぺージらしく、洗練されたデザインからはプロフェッショナルで先進的な印象を感じられます。 メリハリのあるフォント、適度な空白によって非常に見やすく、シンプルながら飽きのこないデザインに仕上がっています。 ビーワイディージャパン株式会社 https://byd.co.jp/ 電気自動車をはじめとする製品・サービスを通じて、お客様のビジネスや暮らしに寄り添う「BYDジャパン株式会社」のホームぺージです。 電気バスやEVフォークリフトなど先端技術を駆使した製品を扱う企業らしく、技術革新とサステナビリティを強調し、クリーンで洗練された印象を与えるデザインに仕上がっています。 アフターサービスや製品情報など訴求ポイントは多めですが、アイコンや適切なナビゲーションを駆使し、時間をかけず情報を網羅できる構成になっています。 Morght https://morght.com/ 「株式会社Morght」は、D2C寝具ブランド「NELL」の企画・販売をおこなう東京都港区の企業です。社名には朝 (Mornig) 起きてから (to)、夜 (Night) 寝るまでの人々の生活を豊かにする。 という意味が込められています。 色使い、メリハリのあるフォント、余白、レイアウト、写真すべてが高いレベルでまとまっています。デザインはシンプルですが、イラストやアニメーションに遊び心が感じられ、見ていて楽しくなるサイトです。 サービス・商品の魅力が伝わるデザイン事例 サウスレイン https://southrain.com/ オーストラリアや南アフリカ原産の植物、オージープランツ（ネイティブプランツ）を取り扱う「サウスレイン」のブランドサイトです。 若葉色に近い柔らかなグリーンを基調にし、自然と温かみを感じさせるデザインで、高品質な写真を多用し商品の魅力を視覚を通してダイレクトに伝えています。 商品を魅力的に魅せたいECサイトやブランドサイトを作る際に参考にしたいデザインです。 バイオリン工房 Studio Mora Mora https://studio-moramora.com/ バイオリンの聖地クレモナで8年に渡り培った技術で、バイオリン・ビオラ・チェロの製作・修理・販売を行うバイオリン工房「Studio Mora Mora」のホームぺージです。 クラシカルで上品なデザインと、落ち着いた色合いとバランスよく配置されたタイポグラフィーが、ユーザーに安心感を与えます。 屋号のMoraには「ゆっくり」という意味があり、それを表すように「ゆっくり」と眺められるホームぺージに仕上がっています。 西川株式会社 https://www.nishikawa1566.com/ 1566年（永禄9年）創業。450年以上に渡り生活用品の製造・販売を通じて人々の暮らしを支える「株式会社西川」のホームぺージです。 白をベースにした清潔感が漂うデザインは、商品の品質と企業の信頼性を強調しています。 商品情報やコラムなど多くのコンテンツを有していますが、ナビゲーションから動線がうまく張られ、整然としたレイアウトで見にくさを感じさせません。 デザイン性はもちろんUIも作り込まれており、シンプルで見やすく、使い勝手に優れたサイトを制作する際には参考になるでしょう。 小川ぶどう園 https://ogawa-vineyard.studio.site/ 濃厚な甘さと豊かな風味を持つ葡萄（ぶどう）を育てる「小川ぶどう園」のホームぺージです。 自然と調和する穏やかなデザインで、シンプルで使いやすいUIは、快適なユーザー体験を提供するでしょう。 ツタのイラストをあしらい、美味しそうな葡萄の写真が目を引くデザインは「ぜひ食べてみたい！」と思わされます。 蛇足的なコンテンツは一切なく、ひたすら葡萄の美味しさと園主の想いを伝える、シンプルながら引き込まれるホームぺージです。 代官山青果店 https://daikanyamaseikaten.com/ 東京・代官山にある小さな街の八百屋さん「代官山青果店」は、生産者に代わって手間と愛情のこもった野菜や食品を地域に届けています。 仕入れるものは、生産者と直接会い、店主が惚れ込んだものをメインに厳選したものばかりです。 地域コミュニティとのつながりを大切にする街の八百屋さんらしい、温かみと親しみを感じるホームぺージです。 高品質な商品画像が食欲を刺激し、眺めているとつい「バッグに入れる」ボタンを押しそうになります。 かっこいいデザイン事例 アナログファウンデーション https://analoguefoundation.com/ 「アナログファウンデーション」は、音と音楽を軸に五感に響く忘れられない体験や、未来へつながるもの・ことをカタチにとらわれずに生み出すクリエイティブコレクティブです。 モダンでアーティスティックなデザインで、創造性と革新性を前面に押し出しています。ベースはモノトーンですが、明るい色使いの写真が程よい彩りを与え、大胆なグラフィックが目を引きます。 創造的なイメージを前面に出したい企業の参考になるWebデザインです。 AIアニメプロジェクト (AI Anime Project) https://ai-anime-pj.com/ 「AIアニメプロジェクト」はAIによるクリエイティブが台頭するなか、人の心を震わせる根源がどこにあるのか？をテーマに、AIとクリエイターが共創し、今までにない形でIP・キャラクターを生み出すことを目的に、テクノロジーカンパニー・アニメスタジオ・クリエイティブスタジオで挑む、新しいアニメの可能性を探求するプロジェクトです。 最先端であるAI技術を採り入れたプロジェクトのLPらしく、テクノロジーとクリエイティビティを融合させた現代的なデザインです。 明るく鮮やかな色使いとアニメーションがユーザーを引き込み、エネルギッシュな印象を与えます。「人×AIがこれからどんなアニメを生むのか？」とてもワクワクさせられます。 独創的なデザイン事例 建築空間創作集団 colours https://www.beams-factory.com/ 「建築空間創作集団 colours」は、「明日をもっとcolourfulに。」をコンセプトに、空間をトータルプロデュースする職人集団です。 コンセプトどおり、ファーストビューはカラフルなイラストが画面一杯に表示され、インパクトは抜群です。テキスト、写真などコンテンツも大きく配置され、ダイナミックさを演出しています。 サイト全体で創造性と独創性を強調しており、多くのビジュアルと動きを利用して、ワクワクを感じるユーザー体験とインスピレーションを生み出します。 Renxa株式会社 https://recruit.renxa.co.jp/ クライアントのマーケティングに新たな価値を提供し続ける「Renxa（レンサ）株式会社」のリクルートサイトです。 暖色系のグラデーションが温かみを、多彩なアニメーションがPOPさを演出し、楽しんで働けそうな企業イメージがうまく作られています。 色彩、動きの多いデザインとは反対にナビゲーションはシンプルで、求職者にとって必要な情報が過不足なくまとめられています。 UUUM https://www.uuum.co.jp/ YouTuberの総合プロデュース事業を手掛ける「UUUM株式会社」のホームぺージです。 常に新しいエンタメを創造してきたUUUMらしい、明るく活動的なデザインです。カラフルで動的なキャラクター・イラストはエネルギッシュで前向きな印象を与えます。 活気とエネルギーを表現したいサイトを作るとき参考にしたいデザインです。 レスポンシブWebサイトで快適なユーザー体験を レスポンシブWebデザインは、スマホユーザーが増えたオンラインビジネスにおいて重要なファクターとなっています。 デザイン・UIともに優れたホームぺージは、企業・ブランドイメージの向上にも貢献します。 ●スマホ時代に対応したい ●ワンランク上のサイトをつくりたい ●ホームページを使って集客したい ●ホームページで売り上げを伸ばしたい という方は、ぜひ弊社にご相談ください。 これまで培ったノウハウ・実績で、スマホユーザーに快適なユーザー体験を提供するレスポンシブWebサイトをご提案します。
更新日：2024.1.04
公開日：2023.10.19
スポーツジムにとって、ホームページはユーザーの第一印象を決める重要なツールです。 しかし、デザインや機能のクオリティが低いため、集客につながらないケースも少なくありません。 この記事では、ターゲットに合わせたデザイン事例、デザインを作る際に考慮すべきポイントをご紹介します。 ターゲットに響くデザインを作るためのヒントが得られるので、ぜひ参考にしてください。 カジュアル層をターゲットにしたデザイン事例 スマイルフィット24 https://smile-fit24.com/（弊社制作） 富山県滑川市にある24時間営業のフィットネスジム「スマイルフィット24」のホームページです。「笑顔と健康を応援する」をコンセプトにした、いつでも、誰でも気軽にフィットネスを楽しめるフィットネスジムです。 老若男女、初心者ベテラン問わず「通いやすいジム」がコンセプトであるため、身近さ・親しみやすさが出せるホワイトをベースカラーにしました。清潔さをイメージさせ、女性からの関心を得るという狙いもあります。 アクセントカラーには健康的なイメージを持つグリーンを採用し、健康志向を刺激するカラーでデザインを構成。ロゴと合わせて統一感を持たせました。 写真は実際にトレーニングしている様子が想像しやすいようモデルを使って撮影しました。 キャンペーンやイベントをひんぱんに打つため、情報をすぐに見られるようトップページにピックアップエリアを設けています。 コナミスポーツクラブ https://www.konami.com/sportsclub/ 東京を中心に全国展開しているスポーツジム「コナミスポーツジム」のホームページです。 ファーストビューのカルーセル画像で、マシントレーニング・プール・シミュレーションゴルフなど、ジムでどんな体験ができるかイメージできます。 カルーセルのすぐ下には各レッスンの無料体験へ申し込めるバナーが並び、コンバージョンへの動線もしっかり設計されています。 白ベースにアクセントとして赤色を採り入れることで活発な印象となっており「なんだか体を動かしたいな」という気分になります。 essence https://essence-kyoto.com/ トレーニングと「ほっと一息」を提供する京都北山のパーソナルトレーニングジム「essence（エッセンス）」のホームページです。 全体的に彩度を抑えた色が使われ、落ち着いた印象になっています。併設されたカフェの画像もあり「ほっと一息」というコンセプトがうまく表現されています。 フォントや文字サイズも丁度よく、ストレスなくテキストを読み進められます。 トップページ上部にあるコース紹介では、それぞれターゲットと得られる効果が明記させており、訴求力の高いコンテンツになっています。 MIRIZ https://miriz.jp/ 浜松市にあるダイエット初心者のためのパーソナルジム「MIRIZ」のホームページです。 ファーストビューで流れるショートムービーが施設やトレーニング中の雰囲気を分かりやすく伝えてくれます。無料体験やオンライントレーニングのバナーを配置して申込みしやすい構成になっています。 白メインで色を抑えることで写真が目を引くデザインになっており、各セクションに設けられたリンクでサイト内を回遊しやすいように設計されています。 下層ページのトップページ同様に色味が抑えられており、シンプルながら退屈しないよう工夫され、サイト全体の雰囲気に統一感を持たせています。清潔感を感じるサイトで、女性をターゲットにしたジムのデザイン参考にもなるでしょう。 デザイン・構成ともどんなコースがあるか、どんな効果が得られるか非常に分かりやすくまとめられています。 トレーニングボックス https://trainingboxx.jp/ トレーニングボックスは東京、大阪、神奈川に展開する少人数パーソナルジムです。 サイト全体に散りばめられた写真からは、少人数制ならではの和気あいあいとした雰囲気が伝わってきます。一人では続けられなくとも、仲間と一緒に頑張れるかもと思えます。 テキストが多めですがセクションごとに配置された写真と見出しを上手く使い、テキストを読み込まなくても内容がなんとなく分かる構成になっています。 本格派をターゲットにしたデザイン事例 LEO FIT https://leofit-personal.com/（弊社制作） 1人ひとりに合わせたオーダーメイドプログラムで、多くのダイエット・パンプアップを成功させた本格派のパーソナルジム「LEO FIT」のホームページです。 もともとランディングページをお持ちでしたが、新店舗のオープンにあたりビフォーアフターの更新に力を入れたいとの要望でしたのでページの再構成をおこない、メニュー、料金、トレーナー紹介、店舗一覧ページを作り、それぞれ内容を充実させたホームページとしてリニューアルしました。 メインカラーは、店名に込められた「フィットネス業界の百獣の王になる」という想いを受け、力強さと威厳を感じさせるブラックを採用。 実績と自信に裏付けされ料金設定も高めということもあり、高級感・リッチなイメージを演出するためアクセントカラーはゴールドにし、余白を広めにとって、フォントは明朝体にしました。 女性ユーザーも意識して、ベースカラーは薄めのベージュを使っています。 代表でありパーソナルトレーナーである浅川様の経歴が特筆すべきものであったため、それらをトレーナー紹介に掲載することで、入会を迷うユーザーの背中を押すためのパワーコンテンツにしました。 b-monster https://www.b-monster.jp/ 「b-monster」は東京を中心に中国にもスタジオを持つボクシング・フィットネスジムです。 「暗闇の中、大音量の音楽に身を委ね、思いっきり身体を動かす」非日常的なエンターテイメント性により、45分間という時間を「高揚感」「解放感」「充足感」「達成感」で満たしてくれます。 白・黒・オレンジを基調とした、スタイリッシュでカッコ良さが際立つデザインです。アイキャッチ画像も外国の雑誌に載るような洗練されたものばかりです。 トレーナーを「パフォーマー」と呼ぶなど、細かいところまでジムのコンセプトが反映されており、強いこだわりを感じます。 デザインばかりに目を奪われそうですが、パフォーマーの詳細ページからスケジュールを確認できるなどユーザビリティもしっかり考慮されています。 CHACHARITO https://chacharito.jp/ chacharito（チャチャリート）は、専属トレーナーがマンツーマンでレッスンをおこなうパーソナルジムです。 ファーストビューでは鍛え抜かれた女性のトレーニング風景が目を引きます。デザインは白×グレーでシンプルにまとまり、写真が丁度いいアクセントになっています。 E.V.O https://evopersonalgym.com/ E.V.Oは名古屋市内を中心にお客様の目的やお悩み、ライフスタイルなどに合わせて最適なトレーニングメニューを提案するパーソナルトレーニングジムです。 女性をターゲットとしているのか、サイト全体に女性がトレーニングする画像が散りばめられています。デザインは白ベースでシンプルに仕上がっており清潔感があります。 カフェが併設されており、トレーニング以外の魅力もしっかり発信されています。デザインやコンテンツを見ていると、ジムというより美容室のホームページにも見えてきます。 女性をターゲットにしたデザイン事例 bonniie https://bodymake-studio-bonniie.com/ 「bonniie」は徳島の女性専用パーソナルジムです。 ファーストビューを始め、白×ピンクでまとめたデザイン、アイキャッチすべてが女性向けと一目で分かるホームぺージです。 コンテンツもトレーニング中心ではなく「美しくありたい！」「自信をつけたい！」「痩せたい！」といった、感情に訴求するものが多くなっています。 女性をターゲットにした場合、データなどより「感情」に訴えたほうがコンバージョンを得やすいという理論に基づいた構成といえます。 クライミングジム グラビティーリサーチ https://www.kojitusanso.jp/bouldering-mama/ 「グラビティリサーチ」は登山・アウトドア用品総合専門店 好日山荘が運営するボルダリングジムです。 白をベースに淡いブルーやグリーンなどを使い、女性的なデザインになっています。 色とりどりのホールド（壁に付けられた手がかりになる突起物）が写り込んだアイキャッチが多く、非常に賑やかしい雰囲気が伝わってきます。 体を鍛えるというより「美容と健康」をテーマにしており、絞りまれたターゲットへの訴求をできる限り高めた、一見美容ブログにも見えるデザインに仕上がっています。 ジムのホームページはターゲットを明確にして訴求しよう さまざまなターゲットに向けたホームページデザインをご紹介しました。 「健康に」「キレイに」「痩せたい」など、ユーザーの目的がはっきりしているジムだからこそ、デザインもターゲットに合ったものにすべきです。 ●お店の「らしさ」を表現したい ●ワンランク上のサイトをつくりたい ●ホームページを使って集客したい ●ホームページで売り上げを伸ばしたい という方は、ぜひ弊社にご相談ください。 どんな雰囲気なのか、どんな成果が得られるかを表現したデザイン、来店につながるコンテンツをご提案します。
公開日：2023.10.10
レスポンシブデザインは、画面サイズやデバイスに応じてホームページのレイアウトや表示を自動的に調整する技術です。 スマートフォンやタブレットが普及したことで、ホームページ制作において欠かせない技術となっており、導入することで以下のメリットが得られます。 この記事では、レスポンシブデザインの概要やメリット・デメリット、導入方法などを詳しく解説します。 ホームページの制作やリニューアルを検討している方は、ぜひ参考にしてください。 レスポンシブデザインとは レスポンシブデザインは、ホームページを閲覧しているデバイスやブラウザに合わせレイアウトを自動で最適化するWebデザインです。 ひとつのデザインで様々なデバイスに対応でき、ユーザビリティ向上、制作費や管理コストの削減、ブランディングしやすいなどメリットも多くあります。 レスポンシブデザインの仕組み レスポンシブデザインの登場以前は、PC・スマホ・タブレットそれぞれに合わせてHTMLファイルを作る必要がありました。 対して、レスポンシブデザインはひとつのHTMLファイルを用意し、メディアクエリ（閲覧環境に合わせてスタイルを切り替える機能）で制御します。 画面サイズに合わせてレイアウトやデザインを自動で調整するため、デスクトップからスマホまで幅広いデバイスに対応できるようになります。 なぜレスポンシブデザインにするのか レスポンシブデザインの必要性が急速に広まったのには2つの理由があります。 モバイル・ファースト・インデックスは、Googleのクローラーがインデックスと検索順位の決定にモバイル版コンテンツを使用する仕組みです。 以前はPC用クローラーとモバイル用クローラーが存在していましたが、2021年3月からモバイル用クローラーのみになりました。 これにより、ユーザビリティ向上だけでなくSEO面においてもスマホ対応が必要になり、そのための方法としてレスポンシブデザインが広がっていきました。 スマホユーザーファースト スマホ対応をしていないホームページをスマホで閲覧するとPCサイトが表示されます。 その際、文字が小さくて読みにくい、横幅がディスプレイ内に収まらないといった不都合が起こり、見にくく使いにくいホームページになってしまいます。 その結果、ユーザーにストレスを与え、時代に追いついていないというネガティブイメージを持たれてしまう可能性があります。ホームページからの離脱も助長するため、コンバージョンも期待できないでしょう。 レスポンシブデザインであればデバイスごとに最適化されて表示されるため、ユーザーにとって使いやすくコンバージョンも期待できるホームページが作れるでしょう。 Googleが推奨している スマホユーザーが増えたことで、Googleはモバイル端末で表示されるホームページが「見やすく操作しやすいか」「ユーザーが求める情報があるか」など、モバイルユーザー視点での評価を重視するようになりました。 スマホ対応の方法はいくつかありますが、中でもレスポンシブデザインはGoogleが推奨しています。そのため、特別な理由がないならレスポンシブデザインを採用するのが無難です。 レスポンシブデザインにするメリット レスポンシブデザインは得られるメリットが多く、スマホ対応の主流にもなっています。 ユーザビリティの向上 閲覧したホームページの操作性が悪く、すぐに閉じてしまったという経験はありませんか？スマホ対応されていないホームページは、ユーザビリティにおいて大きなデメリットが生まれます。 レスポンシブデザインにすればユーザーの閲覧環境に合わせて表示を最適化できるため、操作性がよく見やすいホームページにでき、ユーザビリティが向上します。 結果的に離脱率・直帰率の低下、ページビュー数増やコンバージョン率向上が期待できます。 SEO効果 レスポンシブデザインはSEO評価においても有利です。 PC用サイト、スマホ用サイトをそれぞれ用意する方法だと、アクセス数や被リンクによる評価が分散されるため、SEOの観点から見ると良い方法とはいえません。 レスポンシブデザインであれば、1つのURLでデバイスごとに最適化できるためアクセス数が分散されず、より多くのユーザーが閲覧しているホームページとして検索上位に入れる可能性が高まります。 管理・更新しやすい レスポンシブデザインは複数のレイアウトが存在しますが、1つのHTMLを更新するだけでPC用・スマホ用の両方を更新できます。反対に、複数のHTMLがある場合はすべてのソースを更新する必要があります。 こういったことからも、レスポンシブデザインは管理・更新コストに優れているといえます。 また、アクセス解析がしやすいというメリットもあります。1つのURLしかないためPC用・スマホ用を一括で分析できることは、マーケティング面において有利に働きます。 更新を制作会社に依頼している場合は、更新費用の節約などコスト削減にもつながります。 デザインが統一される 1つのデザインでPCやスマホ、タブレットなど複数の端末で最適化できることは、レスポンシブデザインが持つ大きなメリットです。 ベースが同じデザインでレイアウトなどを最適化しているため、どのデバイスで見てもデザインに統一感が出て、ブランディングにおいても有利に働きます。 反対にPC用・スマホ用それぞれでページを作るとデザインの幅は広がりますが、あまりに違うデザインにすると、同じユーザーが異なるデバイスでアクセスしたとき違和感を与えてしまいます。 ユーザビリティ・ブランディング面において、どのデバイスでもある程度共通するデザインにしたほうが良いことを考えると、あえてデバイスごとに異なるデザインを作るメリットは少ないです。 このことからも、レスポンシブデザインはスマホ対応において優れた手法といえます。 コスト削減 レスポンシブ対応していないホームページは、PC用・スマホ用それぞれページを作る必要があります。内容は同じであっても工数は2サイト作る分かかるため、制作費も当然2倍かかることになります（実際には割引してくれる制作会社も多いです）。 また、更新する際のコストもPC用・スマホ用それぞれにかかります。数回程度であれば許容できるかもしれませんが、定期的に更新が必要なコンテンツが多いと、将来的に大きな費用がかかります。 レスポンシブデザインであれば、1回の作業で済むため費用も節約できます。自社で更新する場合も人件費節約につながるため、コスト面を考えるのであればレスポンシブデザイン一択になります。 レスポンシブデザインのデメリット メリットの多いレスポンシブデザインですがデメリットもあります。 ただ、メリットを打ち消すほどのものではないため基本的にはレスポンシブデザインを採用して問題ありません。 CSSの記述が必要 レスポンシブデザインを実装するなら、レスポンシブ用CSSを記述する必要があります。 CSSとは、ホームページの文字や背景のサイズを設定するための言語です。 レスポンシブは1つのファイルでデバイスごとに表示を最適化するため、CSSで文字サイズや背景サイズを設定する必要があります。 自社でデザインやレイアウトを変更・更新する場合、慣れていないと作業工数がかかりコストがかさむというデメリットが生じます。 表示速度が遅くなる レスポンシブデザインは1つのURLで異なるデザインを表示させるため、モバイル版ページを表示する際もPC用のHTMLを読み込んでしまいます。 コンテンツ内容や作り方によっては、すべてのコンテンツが表示されるまで時間がかかり、スマホユーザーの離脱率を高める恐れがあります。 表示速度が遅いとユーザーの離脱率が跳ね上がるため、画像圧縮を徹底するなど対応が必要になります。 関連記事：ホームページを見てイライラする理由1位「読み込みが遅い」 デザインの自由度が低い レスポンシブデザインは1つのHTMLをCSSで見せ方を変えているため、デバイスごとに大きくデザインを変えることができません。 そのため、デバイスごとにターゲットや訴求方法を変えたいなら、レスポンシブデザイン以外でのスマホ対応を検討する必要があります。 制作期間が長くなる CSSの記述が複雑なレスポンシブデザインは、その分制作に工数がかかります。デバイスごとに文字サイズやデザイン、幅などを細かく調整する必要があるからです。 コーディングに慣れていないと制作に時間がかかるうえ、スマホやタブレットでの表示確認など手間がかかります。 自社でのレスポンシブデザイン実装に不安な場合は、制作会社への依頼をお勧めします。 レスポンシブデザインの種類 レスポンシブデザインの種類は主に4つです。 レスポンシブレイアウト 画面の幅のサイズに合わせてCSSを切り替える リキッドレイアウト デバイスの画面幅に応じて柔軟にレイアウトを変更 フレキシブルレイアウト リキッドレイアウトに画面の最小幅と最大幅を指定する グリッドレイアウト 画面の幅に合わせてボックス型のコンテンツを並べる レスポンシブレイアウト 閲覧するデバイスに合わせてCSSを切り替える、もっとも取り入れやすいレイアウトです。 どの端末でもレイアウトが崩れず、文字や画像のサイズを変更することで切り替えます。切り替えのピクセル数はブレイクポイントで指定します。 コンテンツごとにPCでは表示してスマホでは表示しないなど、デバイスごとの管理・修正がしやすいというメリットがあります。 新しいサイズのデバイスが出るたびにブレイクポイントの対応をする必要があり、デバイスごとにレイアウトを変えると読み込みに時間がかかるデメリットがありますが、導入コストや管理・更新のしやすさはピカいちです。 リキッドレイアウト 横幅を100％とし、端末の横幅に合わせてデザイン・レイアウトを縦に伸縮させます。縦スクロール限定のため横スクロールのホームページは対応できません。 スマホでもPCに近いレイアウトで表示されるのが特徴で、コンテンツ数が少ない場合やすべての端末で同じホームページを表示させたい場合に利用されます。 レスポンシブレイアウトに比べ、スマホやタブレットの規格変動に対応しやすい手法です。ただし、コンテンツによってはPCでは横に伸びたように表示されるというデメリットがあります。 フレキシブルレイアウト リキッドデザイン同様、コンテンツごとにパーセントで設定するのは同じで、加えて画面の最小値と最大値を設定でき、大画面のPCでもデザイン崩れが起きにくいのが特徴です。 サイト周りに余白を付けたい場合や、PCのデザインだけ固定したい場合に利用されます。 外部記述をCSSでしなければいけないため、導入にはCSSの知識とスキルが必要です。 グリッドレイアウト 雑誌などでよく見るレイアウトですが、ホームページでもよく取り入れられます。 コンテンツを格子状に並べるためすっきりと見やすいレイアウトに仕上がり、どんな幅のデバイスでも表示を崩さずきれいに表示させられます。 レスポンシブデザインの参考になるサイト集 Responsive Web Design JP https://responsive-jp.com/ レスポンシブ対応された日本のホームページを紹介しています。 デザイン性の高いホームページが多く、PC・スマホ・タブレットのサイトを一覧で見れることが特徴です。 WebDesignClip https://sp.webdesignclip.com/ 最新トレンドを押さえたおしゃれなホームページを集めたデザイン集です。 キーワード・カテゴリー（業種）カラー・レイアウトで絞り込めるため、自社イメージ合う参考サイトを見つけやすいでしょう。 sps collection https://spscollection.com/ スマホデザインに特化しており、豊富なジャンルが網羅されています。 デザイン性の高いホームページが多く、レイアウトを考える際は参考にしたいデザイン集です。 レスポンシブデザインを実装する方法 ①自社でコード・CSSを実装する 自社でレスポンシブデザインを実装します。手順は以下の通りです。 ここから、それぞれの手順を詳しく解説します。 ①ブレイクポイントを決める デザインが切り替わる画面幅をブレイクポイントと呼びます。 ブレイクポイントの数値については様々な意見がありますが、2023年10月現在のお勧めは下の通りです。 ちなみに、各デバイスのサイズ幅はこんな感じになります。 レスポンシブデザインを実装するときは、ホームページが閲覧される端末サイズを想定して事前に設定しておきます。 PC・スマホの画面サイズを考慮する必要があるため、2ヶ所で設定することが多いです。 上記サイズを参考にして、最適なブレイクポイントを設定してください。 ②meta viewportタグを追加 HTMLファイルで制作されたホームページの場合はHTMLファイルのヘッダー部分に記述。WordPressで制作しているならテンプレートファイル（header.php）に追記します。 ③CSSファイルの記述 viewportタグを追加したら各デバイス用のCSSを用意します。横幅ごとに見せ方を変える記述で、メディアクエリと呼ばれます。 横幅は任意で変えられるので、主流のスマホの横幅などを参考に決めるとよいでしょう。 テンプレートを使う コードやCSSの実装は知識やスキルがないと敷居が高いと思います。そこでお勧めなのがテンプレートを使ってホームページを作る方法です。 無料でもデザイン性が高く、SEOを考慮したテンプレートもたくさんあるので利用してみてはいかがでしょう。 テンプレートが紹介されているサイトをいくつか紹介しておきます。 TempNate https://tempnate.com/responsive/ 企業サイトや学校、通販サイトなどに対応したテンプレートが10シリーズ用意されています。各シリーズでカラーや幅、コンテンツ位置などバリエーションが豊富なのも大きな特徴です。 無料版はフッターに著作テキストが表示されていますが3,980円で削除できます。 ヘッダーなどのパーツや画像素材もダウンロード可能で、テンプレートの設置方法が丁寧に説明されているので初心者の方でも安心です。 無料ホームページテンプレート.com https://f-tpl.com/ HTMLサイトとWordPressのテンプレートがあり、どちらもレスポンシブ対応されています。 テンプレートは無料で使えますがページの最深部に著作テキストがあり、削除するには2,980円で購入できるシリアルキーが必要です。 デモサイトやシミュレーターを使えば各デバイスでの表示を確認できます。 TEMPLATE PARTY https://template-party.com/ 商用利用可能なレスポンシブデザインのテンプレートが無料配布されています。 様々な業種に対応したテンプレートが用意されており、その多くがレスポンシブ対応されていることが特徴です。 テンプレートとCMSをセットにした「+CMS」も有償販売されています。 制作会社へ依頼する 技術的に実装が難しい場合、制作会社へ依頼する方法があります。 自社にホームページ制作の経験がある人がいない場合、想定より工数がかかることがあり、人件費や時間的コストがかさむことも珍しくありません。 制作会社であれば様々な企業のホームページがを作っているため知識や実績が豊富です。実績ページなどを見て、イメージ通りの自社ホームページを作ってくれそうだと思ったら相談してみましょう。 レスポンシブデザインのホームページをつくるポイント スマホデザインから着手する スマホファーストのホームページを作るなら、デザインはスマホサイトから取り掛かりましょう。スマホで見られることを前提に制作し、ほかのデバイスでも表示を最適化していきます。 この手順であれば、どのデバイスでもユーザーにストレスを与えないデザインに仕上げられます。 スマホの操作性を考慮する マウスやキーワードのないスマホでは、タッチ操作が主流です。ボタンなどのクリック要素は配置に余裕を持たせるなど、タッチデバイスを中心にレイアウトを設計しましょう。 重要な情報はページ上部に 様々なデバイスに対応するデザインは、重要な情報は目に入りやすいページ上部に配置することが大切です。 スマホで閲覧される場合、画面サイズに制限があるため、あまりスクロールさせない位置に情報を置くことで見落とされるリスクを減らすことができます。 動画・画像を最適化 データ通信料によっては大きなコンテンツが表示されるまでに時間がかかるため、ユーザビリティやSEOに悪影響が出ます。 そのため、画像サイズや解析度を最適化するといった工夫が必要になります。 レスポンシブデザインになっているか確認する方法 自社ホームページがレスポンシブデザインに対応しているか確認できるツールです。 「自社ホームページが対応されているか分からない」 「レスポンシブデザインを実装したが、最適化されているか確認したい」 といった場合は利用してみてください。 Am I Responsive? https://ui.dev/amiresponsive URLを入力するとPC・ノートパソコン・タブレット・スマホ別にレイアウトが表示されます。 Responsive Checker https://responsivedesignchecker.com/ URLを入力するとデバイスの機種ごとにレイアウトが確認できます。 モバイルはiPhoneやAndroidなど計19種類、PCでは解析度ごとに表示を確認できます。 メニューのリンクもつながっているので下層ページの表示も確認可能です。 レスポンシブWebデザインチェックツール http://lqd.jp/lab/rwd.html 5種類のデバイスでの表示を一目で比較できます。 スクロールやリンククリックも可能なので、各デバイスでの見え方・使い勝手も確認できます。 レスポンシブデザインでスマホ対応しよう レスポンシブデザインの実装は、ユーザービリティ向上やSEO評価など多くのメリットにつながります。 管理・更新の工数も少ないため、制作会社に更新を依頼する際の費用、自社運営者の業務効率向上なども期待できます。 様々な環境のユーザーにとって見やすく、使い勝手に優れたホームページを構築しましょう。 弊社にはレスポンシブデザインに対応したホームページのプランニング・デザイン・構築まで多数の実績があります。 「早急にスマホ対応したい」 「自社で実装しようとしたが上手くいかない」 など、スマホ対応でお悩みであれば気軽にご相談ください。
更新日：2024.5.07
公開日：2023.9.13
工務店やハウスメーカーのホームページは、ユーザーに自社の家づくりの魅力を伝える重要なツールです。 しかし、デザインによってはユーザーに好印象を与えることができず、成約につながりにくくなってしまいます。 この記事では、与えるイメージごとに、優れたデザインのホームページを紹介します。 プロの目から見たレビューもしているので、制作・リニューアルの際は、ぜひ参考にしてください。 「暮らしをイメージ」できるデザイン事例 株式会社マイホームタナカ https://www.myhome-tanaka.co.jp/ （弊社制作） 富山県富山市・高岡市に事務所をかまえる工務店「株式会社マイホームタナカ」のホームページです。 トップページの構成はシンプルで、「イベント」「施工事例」「不動産情報」といった定番コンテンツが並びます。 白ベースのシンプルなデザインで文字は最低限、写真を多く配置することで「どんな家が建てられるか」を見せています。 「お施主様の声」は単なるインタビューではなく、日常の姿から「どんな暮らしができるか」をイメージしやすいコンテンツにしました。 la-CASA https://www.lacasa.co.jp/ 愛知県6箇所に店舗をもつ工務店「la-CASA」のホームページです。 サイトを開くと大きな写真と文字が目に飛び込みインパクトは抜群。すべてがビックサイズなので記憶に残る大胆なデザインです。 施工事例ごとにコンセプト、デザイン、こだわりが詳しく紹介され、動画やお客様の声といった複数のコンテンツで暮らしぶりがイメージできるよう工夫されています。 株式会社幸保工務店 https://www.yukiyasu.co.jp/ 熊本市で「さいしょに、しあわせがある」というコンセプトで、しあわせがまんなかにある家を建てる工務店「株式会社幸保工務店」のホームページです。 ファーストビューは家族の笑顔、四季の移ろいを感じられる画像が流れ、暮らしの中にある何気ない幸せを演出しています。 お客様の声ではお施主の暮らしが垣間見えます。こだわりなども同時に紹介され、「どんな家で、どんな暮らしをしているか」がイメージしやすくなっています。 マツシタホーム https://matsushitahome.com/ 熊本県芦北町で“小さな家で豊かに暮らす”ことを提案するマツシタホームのホームページです。 トップページではファーストビューとセクションごとに動画が配置されており、家を建てたあとどんな暮らしがまっているか鮮明にイメージできます。 サイト全体が白基調でほかの色は動画と写真だけという、美しい写真が映えるキレイで清潔感のあるデザインです。 ファーストビューのすぐ下に配置された「slowly-oclock」は、事例ごとに配置された写真と動画からゆったりした時間の流れを感じられ、「こんな風に暮らしてみたい」と思わされるコンテンツになっています。 オプトホーム 株式会社 https://www.opthome.jp/ ライフスタイルを重視し、好きに囲まれた暮らしをつくるハウスメーカー「オプトホーム株式会社」のホームページです。 ファーストビューではカフェ風の住まいで楽しそうに暮らす家族の動画が流れます。 CONCEPTやGALLERYでも「好きに囲まれた暮らし」を楽しむ家族の姿が映し出されます。楽しそうな笑顔が印象的で、見ているだけで自分も楽しい気分になります。 全体的に文字は最小限に抑え、写真が映えるデザインに仕上がっています。 温もりを感じるデザイン事例 株式会社匠建 https://www.well-house.net/ 小さい頃の記憶を呼び起こし、木の温もりを感じる木造住宅を手掛ける「株式会社匠建」のホームページです。 ファーストビューには薪ストーブの前で団らんする家族が移し出され、温もりと絆を感じさせます。 白ベースにブラウン系や赤など暖色系カラーをアクセントにしており、コンセプトがはっきりと伝わります。 施工事例やモデルハウスの写真もきれいなものが並び、全体的にビジュアルで魅せるデザインです。 共感住宅 ray-out https://www.ray-out.net/ 愛知県で注文住宅を手掛ける「共感住宅 ray-out」のホームページです。 施工事例にはナチュラルで温かみのある家が並びます。家のコンセプトに合わせ、サイトも温かいカラーでデザインされています。 事例ページはYouTubeでルームツアーもでき、どんな家を建ててもらえるかイメージできるコンテンツとなっています。 動画で魅せるデザイン事例 株式会社ひかり工務店 https://www.hikarikoumuten.com/ 暮らし方やディティールにこだわり、明るい未来につながる家をつくる大阪府豊中市の工務店「株式会社ひかり工務店」のホームページです。 ブラック×ホワイトのモノトーンカラーで洗練されたデザインになっており、ファーストビューにはサイレント映画のワンシーンのような動画が流れ、丁寧に作り込まれた世界観へ一気に引き込まれます。 動画ページでは20本以上のルームツアー動画が掲載されています。施工事例にもクオリティの高い写真が並び、動画×写真で魅せられます 洗練されたデザインを求めるならぜひ参考にしたいサイトです。 ウツミ工務店株式会社 https://www.utsumi-h.com/ 完全自由設計、無垢・自然素材にこだわる宮城県仙台市の工務店「ウツミ工務店株式会社」のホームページです。 サイトを開くと流れる楽しそうな家族の動画は、見ているだけで温かい気持ちにしてくれます。 デザインは白をベースに無垢材を思わせる緑と淡いアイボリーが配色され、柔らかさと温もりを感じられます。 写真で魅せるデザイン事例 FU設計工房 https://fu-design.jp/ 愛知県豊川市にある設計士事務所「FU設計工房」のホームページです。 白ベースのサイトに大きな画像を随所に配置した、シンプルでスタイリッシュなデザインです。 建築後の家だけでなく、住み手の暮らしが想像できるような写真も多く掲載されており、「自由に設計できる注文住宅」の魅力を余すことなく発信できるコンテンツが豊富なのも特徴です。 このサイトを見ていると、注文住宅への憧れが大きくなっていきそうです。 BRENA http://www.balena91.jp/ 長野県安曇野の自然豊かな立地に拠点を置くアトリエ系地域ビルダー「BAENA」のホームページです。 居心地よく暮らせるための「“くうき”を創る」をコンセプトに、オリジナル住宅やエコ住宅、ゲストハウス、リノベーションを手がけ、住まい手に合わせたあらゆる住空間を追求しています。 爽やかな水色をベースに雲を思わせる流線が合わさる清涼感に満ちたデザインです。アルプスに流れるキレイな水、穏やかに吹く風を想像させます。 トップページの施工写真もブルーがかかり、統一された世界観を見ることができます。ブランディングの面からも優れたデザインといえます。 施工事例の詳細ページは、古民家を再生した住まいや特徴的な外観のコテージ、無垢をふんだんに使った内装などで目を楽しませます。 世界観、写真、差し込まれたかわいいイラストと見どころ満載のサイトです。 Bell’s Works https://www.bells-works.com/ 茨城県鹿嶋市に拠点をおく工務店「Bell’s Works」のホームページです。 「この住みやすさには、根拠がある。」というブランドメッセージとともに、特色のある住まいが映し出されます。 少しスクロールする現れるロゴマークは背景にうつる画像に合わせて柄が変わるなど、細かいところまでこだわりが散りばめられています。 白ベースに黒フォントでまとまっていますが、巧みに配置した画像が味気なさを感じさせません。 施工事例には外観・内装が数多く掲載されています。「こんな家が建てたい！」と思える住まいが見つかると思いますよ。 フリーダムアーキテクツ https://freedom.co.jp/ 「お客様が求める暮らし」を最優先に、自由な設計でお応えするフリーダムアーキテクツの家づくり。 フリーダムアーキテクツが目指す「GOOD DESIGN」は、完成宅のデザインだけでなく、お客様と共に作り上げる過程をデザインしていくことも大切にしています。 ホームページ制作についてもこだわっており、訪れる方の多くは家づくりご検討者となるため、ホームページデザインよりも建築デザインに視点が向くように、事例写真が際立つ構成を意識して制作されています。 機能面においては、建築事例が700件以上掲載されているため、特定条件で事例を絞り込めるフィルタ機能を実装。また、家づくりのお役立ち記事が掲載されたマガジンや売り出し中の土地情報など、家を建てたい人がおよそ必要と思われるコンテンツが網羅されているホームページになっています。 ブランディングに優れたデザイン事例 有限会社三幸住宅 https://www.sanko-jutaku.com/ 埼玉県川越市で「日本の家」「木の家」を造りつづける「有限会社三幸住宅」のホームページです。 サイトを開いた瞬間「ここが江戸にござるか」と思う画像が目に飛び込んできます。黒ベースのシックな背景に格子など日本の伝統的な柄が配置されており、「日本家屋」への並々ならぬこだわりが垣間見えます。 スクロールすると現れるかわら版風のメニューも面白いですね。好きな人は一気に引き込まれるでしょう。ちなみに私は一発でハートを撃ち抜かれました。 どこを見てもこだわりがビンビン伝わる秀逸なデザインです。 アイ工務店 https://www.ai-koumuten.co.jp/ 「家族に愛を、住まいにアイを」をコンセプトにする「アイ工務店」のホームページです。 サイト全体にお子さんとの暮らしを連想させる画像が散りばめられ「家族愛」を感じます。 デザインは白ベースに藍色でアクセントをつけています。ここでも「アイ＝愛」がかかっているのでしょうか。 セクションごとに適度な「間」が設けられ、とても見やすいサイトに仕上がっています。 株式会社安城工務店 https://www.yasunari.co.jp/ 福岡県で無垢材で建てる注文住宅を手掛ける「株式会社安成工務店」のホームページです。 木の温もりを感じる住まい、日本の原風景である豊かな森林の写真が目に映り、「呼吸する木の家」というブランドイメージにマッチしています。 リビングや和室など内装を中心にビジュアルで魅せるサイトで、シンプルながら飽きのこないデザインです。 施工事例には庭付き住宅が多く並び、「日本の住まいの原点」へのこだわりが垣間見えます。 株式会社一条工務店 https://www.ichijo.co.jp/ 東京都江東区にに本社をおく「株式会社一条工務店」のホームページです。 「家は、才能。」というコンセプトを表すように、住宅機能に関するコンテンツが豊富に揃っています。 白ベースと画像でレイアウトをつくった、シンプルで見やすいサイトです。 ページは多いですがサイト内リンクでしっかり動線をつくり、ユーザーがサイト内で迷子にならない構成になっています。 サイト以外にもInstagramやYouTubeなどSNSを駆使したブランディングを展開しています。 木下工務店 https://www.kinoshita-koumuten.co.jp/ 世代をまたぎ住み継げる、完全自由設計のデザイン性溢れる注文住宅を提案する「木下工務店」のホームページです。 動画、カラー、レイアウト、小さ目のフォントが高級感と洗練された印象を与えます。 建設実例や展示住宅に並ぶ住まいもそれぞれコンセプトがあり、個性的な外観や内観を見ることができます。 高級感のある内装やインテリアが「ワンランク上の上質な暮らし」を期待させます。 コンセプトが伝わるデザイン事例 株式会社山下ホーム https://www.yamashitahome.co.jp/ （弊社制作） 富山県魚津市で家族が心豊かに、健康に、健やかに過ごせる暮らしを提供する「株式会社山下ホーム」のホームページです。 無垢材でつくる本物の健康住宅をコンセプトに、木の温もりが感じられる暮らしを提案しています。 サイトカラーは白をベースに、ロゴのグリーンをアクセントにしました。無垢材をふんだんに使った内装の写真を使うことで、無垢材の柔らかさ、温もりを演出しました。 アメカジ工務店 https://www.amecaji-koumuten.jp/ ガレージハウス、土間のある家づくりをウリにする北海道の工務店「アメカジ工房」のホームページです。 コンセプトの「もっと自分らしく遊ぶ。自由で、飾らない暮らし。」が遊び心あふれるイラストやフォントで表現された、デザイン性の高いサイトです。 ヴィンテージ感あふれる写真と大胆なレイアウト、はっきりした色が「自分らしく、自由な暮らし」を連想させます。 デザイン・写真・テキストなどすべてのコンテンツから、「自分らしい暮らしを思いっ切り楽しんでほしい！」というアメカジ工房の想いが伝わってきます。 株式会社ケンブリック http://www.kenbrick.co.jp/ レンガ造りの家を専門にしている東京都世田谷区の工務店「株式会社ケンブリック」のホームページです。 ファーストビューのほか、あちこちでクラシックでアンティーク感を感じる住まいが紹介されており、サイトデザインがコンセプトを前面に押し出しています。 デザイン自体はオーソドックスでシンプルですが、それだけにクオリティの高い写真が際立ちます。 専門性を打ち出すデザイン事例 積水ハウスリフォーム株式会社 https://www.sekisuihousereform.co.jp/ 積水ハウスオーナー向けのリフォーム部門「積水ハウスリフォーム株式会社」のホームページです。 積水ハウスのオーナーを対象にしたサービスのためか、建設会社の定番コンテンツであるコンセプト、施工事例などはありません。 デザイン、構成ともに非常にシンプルで、求める情報へ最短で辿りつけるユーザービリティに優れたサイトです。 旭化成リフォーム株式会社 https://www.hebel-haus.com/reform/ お客様のライフスタイルの変化に応じて最適なリフォームプランを提案する「旭化成リフォーム株式会社」のホームページです。 自社が手掛ける住宅ブランド「へーベルハウス」のサイトに合わせ、アイボリー系のカラーが使われています。 トップページにはNEWS、リフォームメニュー、施工実例、イベントなど幅広いコンテンツが並びますが、背景色の切替えやバナーの配置などを工夫しており、ごちゃごちゃした印象はありません。 メインコンテンツのリフォームメニューは、外壁塗装や蓄電池など設備・部位別リフォーム、二世帯化や賃貸化などテーマ・目的別リフォームに分かれ、それぞれポイントや実例を挙げており、情報がうまく整理されています。 コンテンツを多めに配置するなら参考にしたいサイトです。 株式会社クラフト https://craftdesign.tokyo/ 設計事務所と工務店が一緒にスタートした、リフォーム・リノベーション専門会社「株式会社クラフト」のホームページです。 白ベースにブラウン系のアクセントカラーでまとめた、建設系サイトのオーソドックスなデザインになっています。 事例の数は少な目ですが、戸建て・マンション・別荘など建築タイプや、地域・世帯・ライフステージなど細かく分類され、ナビゲーションに優れています。 グローバルナビはメガメニューになっており、バナーを配置してデザイン性も高めています。 モデルハウス・中古購入+リノベなど豊富なコンテンツがきれいに整理された、ユーザービリティに優れたデザイン・構成です。 工務店のホームページは「暮らし」をイメージさせる 「イメージしてもらう・魅せる・伝える」さまざまなコンセプトをもったホームページデザインをご紹介しました。 工務店やハウスメーカーのホームページでは、「建てたあとの暮らし」をイメージしてもらうことが大切です。 ●「暮らし」を表現したい ●ワンランク上のサイトをつくりたい ●ホームページを使って集客したい ●ホームページで売り上げを伸ばしたい という方は、ぜひ弊社にご相談ください。 コンセプトやお施主様にどう暮らしてほしいか、家づくりへの想いを表現したデザイン、来店につながるコンテンツをご提案します。
公開日：2023.9.12
美容室・美容院にとって、ホームページはお客様の第一印象を決める大切な場所です。 しかし、「どんなデザインがよい印象を与えられるか」と悩んでいるオーナー様も多いと思います。 デザインで興味を引くことができれば集客につながります。また、お客様が必要な情報をすぐ見つけることができれば、満足度を高められます。 この記事では、デザイン・使い勝手に優れたホームページデザインをご紹介します。 いろいろなデザインを見ることで、デザインのヒントを得て、集客力と満足度を高めることができます。 ホームページの制作・リニューアルを考えているのであれば、ぜひ参考にしてください。 ナチュラル・柔らかさが漂うデザイン Hair Salon Ciel https://www.hair-ciel.net/ （弊社制作） 富山県高岡市のヘアサロン「Hair Salon Ciel」のホームページです。 清潔感を与えるホワイトと安らぎや癒しを感じさせる淡いグリーンをベースに柔らかい雰囲気のデザインに仕上げ、手書き文字をアクセントにしました。 Instagramに投稿されているスタイルをトップページに表示することで、どんなスタイルをつくってもらえるかイメージしやすくなっています。 LIM – LESS IS MORE https://www.lessismore.co.jp/ 大阪府大阪市にある美容室「LIM – LESS IS MORE」のホームページです。 「人を美しくすること。」というコンセプトを表すように白×青が調和した美しいサイトで、シンプルにまとめられたレイアウトになっています。 valetta http://valetta.jp/ 鹿児島県鹿児島市の美容院「valetta」のホームページです。 築60年ほどの倉庫を改装した店内は開放感があり、心地よい雰囲気が漂います。 ファーストビューは木と緑が映える店内など、お洒落な画像がフェードして目を楽しませてくれます。 トップページは写真とメニューバーという最小限の情報で構成されており、洗練されたデザインになっています。下層ページも含め全体的に白基調でナチュラルな雰囲気が好印象です。 アレキサンドルdeアバン https://www.avan-family.co.jp/ 兵庫県内で3店舗を展開するサロン「アレキサンドルdeアバン」のホームページです。 ファーストビューではヘアスタイルの画像がスライドし、さまざまなスタイルを提案してくれます。 「木のぬくもりと優しい雰囲気でリラックスできるサロン」というコンセプトどおり、白ベースに木のぬくもりを感じるブラウン系のアクセントカラーが映え、ナチュラルで優し気な雰囲気を演出しています。 トップページの店舗外観の画像は各店舗の内装やスタッフ紹介、ブログにリンクされ、下層までしっかり作り込んでいることが分かります。 サロンのコンセプトに合わせたナチュラルで優し気な雰囲気がどのページからも伝わり、見ているとリラックスした気分になれるサイトです。 ORIGAMI http://origami-hair.jp/ 長野駅からほど近いヘアサロン「ORIGAMI」のホームページです。 サイトを開くと、壁にかけられたドライフラワーが白に映えておしゃれな雰囲気を演出します。 スクロールすると浮かび上がる折り紙をイメージしたメニューボタンが、お店のコンセプトをよく表しています。 サイト全体が白イメージで統一されており、ナチュラルで清潔感のあるデザインに仕上がっています。 NEAL STREET HAIR&MAKE http://neal-street.com/ 美容と健康と自然との調和を目指す新潟県三条町のサロン「NEAL STREET HAIR&MAKE」のサイトです。 サイトを開くと、光が差し込むホワイト基調の写真にネイビーのロゴが映えるスライドが流れます。 グレー×オレンジをメインカラーに、セクションの切り替え部分にストライプのテクスチャ、英語表記にシンプルなラインが掛かれアイコンを添えられたページタイトルなど、スタイリッシュかつポップな印象に仕上がっています。 カットの場面がイメージできるデザイン事例 Hair Salon GROEN https://www.dplus-groen.com/ 北海道札幌市のヘアサロン「GROEN」のホームページです。 ファーストビューではお店の雰囲気やカット風景など、お店を訪れた際のイメージが鮮明に浮かぶような画像が配置されています。 スクロールした際にハサミで裁断しながらコンテンツを表示する動きがユニークで印象的です。 トップページではコンセプトや想いが丁寧に紹介されています。文章は多めですがフォントやサイズにメリハリがあり、見ずらい印象はありません。 Instagramにはさまざまなスタイルが投稿され、「髪もセンスも十人十色。お客様の好みやご要望にお答えしたい」という想いがよく表れたコンテンツとなっています。 店内は白い壁と観葉植物、優しい照明で優し気で落ち着きがあり、リラックスして過ごせる雰囲気が漂います。 &LOOSEN http://andloosen.com/ 福岡市薬院のヘアサロン「&LOOSEN」のホームページです。 ファーストビューに映し出される外観からはナチュラルで柔らかな雰囲気が伝わります。白壁に大きな入り口は開放感があり、飾られた緑は目に優しく、おしゃれなカフェやお花屋さんにも見えます。 「お話しても、しなくても、雑誌を読んだり、ぼーっとしたり、好きなように過ごしてもらう。」というコンセプトそのままの素敵なお店です。 カットやスタイリングの写真はオーナーとモデルさんの笑顔が印象的で、「楽しい時間を過ごせそう」と思わせてくれます。 「photo gallery」にはお店の雰囲気やカットの様子がずらりと並び、スタッフ紹介には写真や得意なスタイルなどが掲載されています。 1ページ構成で文章も少な目ですが、写真をうまく使いどんなお店なのか鮮明にイメージできるサイトに仕上がっています。 店舗の雰囲気が分かるデザイン事例 ビジュー[bijou] http://www.bijou.jp/ 神戸市中央区にあるヘアサロン「bijou」のホームページです。 デザインは白を基調にしたナチュラルで柔らかい雰囲気にまとめられています。 bijou（ビジュー）はフランス語で「宝石」「小さくてきれいなもの」という意味。店名どおり「宝石のように光輝くスタイル」を提案してくれます。 路地裏にひっそり佇むアトリエのような店内は開放的な空間が広がり、待ち時間やカット中でものんびりした気分で過ごせる雰囲気を演出します。 店名がフランス語のためか、ロード中にエッフェル塔のイラストが浮かぶなど細部まで凝った仕上がりになっています。 なんとなく、文字フォントからもフランスっぽさが伝わってくる気もしますね。 CADENZA+ https://cadenza-salon.com/ 茨城県古河氏の美容院「CADENZA+」のホームページです。 「あなたをもっと魅力的にする」というコンセプトで、お客様と一緒に理想のスタイルをつくるアットホームな雰囲気のサロンです。 モノクロでまとめたデザインと写真で、シックでスタイリッシュなサイトに仕上がっています。 TREE http://treehair.com/ 銀座にある美容室「TREE」のホームページです。 落ち着いた照明とブラウンでまとめた内装は、美容室というより外国のスーツ屋をイメージさせます。 トップページは「ABOUT」「STYLE」「STAFF」など定番のコンテンツが並び、それぞれ詳細へのリンクが設置されたシンプルなデザインです。 「STYLE」ではスタイルとスタイリストが紐づいており、誰がどんなスタイルが得意なのかが分かりやすい構成になっています。 動画で魅せるデザイン事例 Men's Hair SPICE http://m-spice.com/ 佐賀市内に4店舗を展開するメンズ専用サロン「Men's Hair SPICE」のホームページです。 「刺激=スパイス」を与えるサロンをコンセプトに、常に流行を自分流に取り込み、1人ひとりに合わせたスタイルを提案してくれます。 ファーストビューの動画は店舗やカットの雰囲気が分かるシーンのほか、スケボーやバイクパフォーマンスなどのシーンがあり、スタイリッシュとカッコよさを演出します。 サイトカラーも黒×白のモノトーンで統一され、男っぽさと高級感がある洗練されたデザインになっています。 ラムネ https://lamune-kyoto.com/ 感性を自由に広げたスタイリストが、「似合わせ」を大切にしたヘアスタイルを提案してくれる京都のヘアサロンです。 ロード画面はカラフルな「ラムネ」の文字が浮かびあがり、ポップな印象を与えます。 ファーストビューの動画は、ひらいたドアから可愛い3人のキャラクターがひょっこり顔を出し一気に引き込まれます。 セクションごとに配置された動画にも個性的なキャラクターが登場し、ずっと見ていられます。キャラクターにカットやシャンプーしているスタッフさんの楽しそうな笑顔も印象的です。 「STYLE」ではたくさんのスタイルが掲載されていて、見れば見るほどワクワクさせてくれます。 テキストは少な目ですが、サロンの世界観を見事に表現されたデザイン・コンテンツが秀逸のサイトです。 syn https://syn-hair.tokyo/ 渋谷駅近くのヘアサロン「syn」のホームページです。 ファーストビューでは、夜の渋谷を歩く男性が映し出されます。世界観がしっかり作り込まれ、映画かPVのような完成度の高さに、つい見入ってしまいます。 メンズをターゲットにしているためかサイト全体がブラック&ホワイトに統一され、スタイリッシュなデザインになっています。 DaB https://dab.co.jp/ 代官山をはじめ都内で4店舗を展開するヘアサロン「DaB」のホームページです。 最初に目に飛び込んでくるのが、左上に大きく店舗ロゴを重ねたムービーで、シンプルながら迫力あるファーストビューです。 モノトーンでまとめたシンプルな色づかいですが、マウスを追従する丸いカーソル、スクロールによって浮かび上がるコンテンツなど、動きをつけることで洗練された印象を与えています。 フラットなデザインですが、サムネイルの配置、背景とずらして重ねた写真など、ちょっとした遊び心が垣間見えるデザインです。 個性が際立つデザイン事例 mirror mirror http://mm-hair.net/ 大分市下郡の美容室「mirror mirror」のホームページです。 ファーストビューで向かい合う女の子、各所に配置されたイラストがガーリーでメルヘンチックな世界観を創りだしています。 ローディング中も猫のイラストが浮かび上がるなど、ところどころに遊び心が見て取れます。 サイトカラーから可愛らしさ、細めの文字フォントから繊細さを感じられる、2つの要素が見事に調和したデザインです。 美容室MILLOR https://www.millor.jp/ 神奈川県武蔵小杉にある美容室「MILLOR」のホームページです。 ロード中にロゴが回転したかと思ったら、ロゴをあしらったハサミが現れる動きに引き込まれます。 スクロールするとスタイルや施術風景がふわっと浮かび上がり、どんなスタイルになれるか、どんなメニューがあるかをイメージできる設計になっています。 写真、イラストなどいろいろなものが動き回るので、見ているだけで楽しくなります。 ノングリッドとモノトーンでまとめたシンプルなレイアウト、手書き風イラストなど細部にまでこだわったデザインです。 「おしゃれ」を発信する美容室だから、ホームページも「おしゃれ」でいこう！ 「おしゃれ・かわいい・かっこいい」さまざまなテイストのホームページデザインをご紹介しました。 「おしゃれ」を発信する美容室だからこそ、ホームページもおしゃれにしたいですよね。 ●お店の「らしさ」を表現したい ●ワンランク上のサイトをつくりたい ●ホームページを使って集客したい ●ホームページで売り上げを伸ばしたい という方は、ぜひ弊社にご相談ください。 サロンの「らしさ」を表現したデザイン、来店につながるコンテンツをご提案します。
