インスタとホームページの世界観を統一する手順|揃える5つの要素とチェックリスト【個人事業主向け】

「インスタで気になってWebサイトも見てみたら、雰囲気が違って不安になった」
見る側は、こう感じることがあります。

インスタはおしゃれなのに、Webサイトは別の会社のように見える。
逆にWebサイトは整っているのに、インスタは投稿ごとに雰囲気がバラバラ。
どちらも、興味を持った人が次の一歩=相談や申し込みの前に離れてしまう原因になります。

この記事では、インスタとWebサイトの世界観を統一するために何を揃えるのか、どの順番でやるのかを手順とチェックリストでまとめます。

目次

インスタとホームページの世界観がズレると、何が起きる?

インスタでは「気になる」までは進みやすいのですが、決める前に確かめたくなる人は大体Webサイトまでチェックします。

そのとき、次のような「違和感」が起きます。

  • インスタで感じた雰囲気と、Webサイトの雰囲気が違う
  • 同じ事業なのに、言葉づかいや肩書きが違う
  • どちらが本当の姿なのか、判断できない

人は違和感があると、安心して任せられません。
世界観がそろっていること自体が「ちゃんとした事業者だ」という信頼のサインになります。

統一するべき5つの要素

世界観は、感覚ではなく5つの要素に分けて揃えられます。

要素インスタで見る点Webサイトで見る点揃えるルール
① 色投稿の背景色・文字色・強調色背景・見出し・ボタンの色メインの色を1〜2色、補助色を1色。これ以外は増やさない
② フォント投稿画像内の文字見出し・本文見出し用と本文用で、それぞれ1種類
③ 写真の雰囲気明るさ・トーン・構図トップの写真・サービスページの写真明るさと色味の方向性を揃える(例:自然光でやわらかい、など)
④ 言葉づかいキャプション・プロフィール文キャッチコピー・本文・肩書き一人称、敬語の度合い、事業の名前・肩書きの表記を統一
⑤ ロゴ・プロフィールアイコン・プロフィール画像・ハイライトのカバーロゴ・ヘッダー・ファビコン同じロゴ・同じ雰囲気の画像を使う

大切なのは、5つ全部を完璧にすることではなく、見た人が「同じ人・同じ事業だ」と3秒で感じられることです。

見た目より先に決めるのは言葉、つまり「事業の軸」

色やフォントを揃える前に、決めておきたいことがあります。それは「誰に、何を、どんな立場で届けるか」を一文にした、事業の軸(コンセプト)です。

軸が決まっていないと、「何の色に揃えるか」「どんな写真を使うか」を選ぶ基準がありません。
結局そのときの好みで決めてしまい、また時間がたつとバラバラになります。

たとえば軸が「忙しい個人事業主に、短時間で迷わず進められる方法を伝える」だとしたら。
色はすっきり、写真は余白があるもの、言葉は短く、と決めていけます。
軸が決まれば、5つの要素を選ぶ迷いが減ります。

インスタとホームページの世界観を統一する【5ステップ】

STEP
客観的に並べてみる

スマホで、インスタのプロフィール画面とWebサイトのトップ画面を並べて見ます。スクリーンショットを撮って1枚に並べると、ズレが見えてきます。

STEP
事業の軸を一文にする

上の章の方法で、軸を一文にします。以降は、すべての判断をこの一文に照らします。

STEP
5つの要素のルールを決める

先ほどの表の「揃えるルール」の欄を、自分の事業の分だけ書きます。
色は何色か、フォントは何か、写真はどんな雰囲気か、言葉づかいはどうするか。
どれも端的に説明できるくらいまで言語化しましょう。

STEP
どちらを直すか決める

もしもズレを発見したら。
インスタとWebサイト、ルールを統一させます。目安は次のとおりです。

  • 事業の軸に近いもの
  • 届けたい層(ターゲット)が「私が対象だ」と直感で感じられるもの

まずはこの辺りを意識するところからやってみましょう。

STEP
お客様の目に入る順に直す
  1. インスタのプロフィール(アイコン・プロフィール文・リンク先)
  2. Webサイトのトップ画面(最初に見える写真・キャッチコピー)
  3. インスタのハイライトのカバー・固定投稿
  4. Webサイトのサービスページ・お問い合わせページ
  5. 新しい投稿から、ルールに合わせて作る

ズレやすい場所のチェックリスト

次の項目を、見比べてチェックしてみてください。

  • インスタのアイコンと、Webサイトのロゴが同じ雰囲気になっている
  • プロフィール文の肩書きと、Webサイトの肩書き・事業名が同じ表記になっている
  • Webサイトのトップの写真が、インスタの投稿写真と同じ雰囲気(明るさ・色味)になっている
  • Webサイトのボタンの色が、インスタの強調色と同じ系統になっている
  • 一人称・敬語の度合いが、インスタとWebサイトで同じになっている
  • インスタのプロフィールのリンク先が、Webサイトの適切なページ(目的に合うページ)になっている
  • インスタのハイライトのカバーが、Webサイトと同じ色・フォントのルールで作られている
  • Webサイトの最初の画面を見て、「インスタの人だ」と3秒で分かる

当てはまらない項目が多いほど、揃える余地があります。

Webサイトを直すか、作り直すか迷ったら

ズレの大きさによって手を入れる範囲も変わってきます。

状態目安
色・フォント・写真を差し替えれば揃う今のWebサイトを部分的に直す
事業の軸(誰に、何を)が、そもそも今のWebサイトの内容と合わなくなっている軸を決め直してから、Webサイトの作り直しを検討する
何から直せばいいか分からないまず現状を客観的に確認する

見た目だけを直しても、事業の軸と合っていなければまた違和感が出ます。「どこまで直すか」の判断が難しい場合は、先に現状を整理するのがお勧めです。

ありがちな失敗3つ

1. 流行のテンプレートに合わせてしまう

今流行りのデザインに寄せると、他の事業との差がなくなります。事業の軸から出発しないと、世界観が自分のものになりません。

2. 色やフォントを増やしてしまう

「この投稿には別の色が合う」と増やしていくと、いつのまにかバラバラになります。
ルールを決めたら統一させます。

3. 見た目は揃えたけど、言葉がバラバラ

画像は揃っているのにキャプションとWebサイトの文章で、言葉づかいや肩書きが違うケース。
見た目と言葉はセットで揃えます。

よくある質問

インスタとWebサイトは、どちらを基準に揃えればいいですか?

「事業の軸」を基準にします。軸に近いほうが基準で、直す量が少ないほうを調整します。迷う場合は、お客様が先に目にするほうに合わせると、違和感が出にくくなります。

テンプレートのWebサイトでも、世界観は統一できますか?

できます。色・フォント・写真・ロゴ・あしらいを決めたルールに差し替えることで、近づけることができます。
ただしレイアウトの自由度が低いテンプレートでは、完全に揃えるのが難しい場合があります。

自分でやるなら、どこから始めればいいですか?

ステップ1(並べて見る)と、ステップ5の1番目(インスタのプロフィールを直す)から始めます。1日でできる範囲です。

インスタをやっていなくても、世界観の統一は必要ですか?

必要です。名刺・チラシ・Webサイトなどお客様が目にする場所が複数あるなら、同じ考え方でそろえます。

まとめ

インスタとWebサイトの世界観は、色・フォント・写真・言葉・ロゴ(プロフィール)の5つを揃えることで、統一できます。ただし、揃える前に事業の軸を一文にしておくことが先です。

まず2つの画面を並べて見て、ズレている場所を見つけるところから始めましょう。
自社のインスタとWebサイトがどこでズレているかを客観的に知りたい方は、無料の診断から始めるのもひとつの方法です。

\まず現状を知りたい方へ/

\具体的に検討している方へ/

目次