LINEやSNSでURLを送ったときの「見え方」を整える

1. 「送ったら、灰色の四角とURLだけが出まして」

中小企業の経営者の方とお話していて、こんな言葉をよく聞きます。

「取引先にLINEでうちのサイトのURLを送ったんです。そしたら、画像のところが灰色で、文字は『ホーム』だけ。ちゃんとしたサイトのつもりだったのに、送った画面を見て急に心配になりまして」

この話は、よく伺います。サイトを開けば、写真も文章もきちんと載っている。それなのに、送った瞬間の見え方だけが、何も整っていない。こういうサイトは少なくありません。

URLを送られた相手は、まだサイトを開いていません。トーク画面に出た画像と見出しだけを見て、開くかどうかを決めています。つまり、共有されたときの見え方は、サイトの「表紙」のような役目をしています。

この記事では、URLを送ったときに出る画像と文字、そしてブラウザのタブに出る小さなアイコンについて、何を決めておけばいいかを順に書きます。

この記事で書くこと

• URLを送ったときに、何が表示されているのか
• 何も設定していないと、どう見えるか
• ページごとに画像を用意する意味
• 画像に入れる文字の量と大きさ
• 社名とページの中身が伝わる文言
• タブの小さなアイコンと、直したのに古い見え方が残る理由

2. URLを送ると、何が出ているのか

LINEやSNSにURLを貼ると、URLの文字だけでなく、カードのような枠が出てきます。この枠に出ているものは、だいたい4つです。

• 画像 ― 枠のいちばん大きな部分。横長で出ることが多いです
• 見出し ― そのページのタイトル。太い文字で出ます
• 説明文 ― 見出しの下に、1〜2行で出る文章。サービスによっては出ません
• サイトの住所 ― ドメインが小さく添えられます

このうち画像は、制作の現場では「OGP画像」と呼ばれています。ページの中に「共有されたときは、この画像を使ってください」という指定を入れておくと、その画像が出る仕組みです。この記事では、ここから先は共有用の画像と呼びます。

タブに出る、小さなアイコン

もう1つ、見落とされがちなものがあります。パソコンでサイトを開いたときに、ブラウザのタブの左端に出る小さな正方形のアイコンです。業界では「ファビコン」と呼ばれます。この記事ではタブのアイコンと呼びます。

タブのアイコンは、タブの中だけでなく、ブックマークの一覧や、スマートフォンでホーム画面にサイトを追加したときにも使われます。何枚もタブを開いている人にとっては、貴社のサイトを見つけるための目印になります。

検索結果の見え方とは、別に考える

検索結果に出るタイトルと説明文も、同じページの情報から作られます。ただし、検索結果のほうは検索エンジンが書き換えることもあり、考えることが少し違います。検索結果の見え方の直し方は 検索結果に出ている自社の見え方を、直す にまとめてあります。この記事では、人から人へURLが送られたときの見え方に絞ります。

3. 何も設定していないと、どう見えるか

共有用の画像も見出しも決めていないと、表示する側のサービスが、ページの中から勝手に拾ってきます。何が拾われるかはサービスによって違いますが、よく見るのは次のような姿です。

説明文に、関係のない文字が出る

画像と見出しだけでなく、説明文にも困った姿があります。説明文を決めていないと、ページの最初のほうにある文字が、そのまま拾われることがあります。

メニューの項目が「ホーム 会社概要 サービス お問い合わせ」と並んで出る。クッキーの同意の案内文が出る。「ようこそ、〇〇のホームページへ」という挨拶が出る。どれも、受け取った人の判断には役に立ちません。

送る人は、社内だけではない

「うちはURLなんて送らない」と思われるかもしれません。ただ、URLを送るのは貴社の社員だけではありません。お客様が、知り合いに貴社を紹介するときにも送ります。家族に「この会社に頼もうと思う」と送ることもあります。

紹介してくれる人は、見え方を選べません。整っていない表紙のまま、貴社を紹介してくれているのです。

4. ページごとに画像を用意する意味

共有用の画像は、トップページに1枚あれば最低限は整います。それでも、ページごとに用意する意味があります。

送られるのは、トップページとは限らない

実際に送られるのは、むしろトップ以外のページのほうが多いくらいです。

• 採用のページ ― 社員が知り合いに「うち、人を募集してるよ」と送る
• サービスや料金のページ ― 社内で決める人が、上司や家族に「ここどう？」と送る
• 施工事例や実績のページ ― 「こういう仕事をしている会社」と、紹介する人が送る
• 説明会やイベントのページ ― 参加者を集めるために、社員が一斉に送る

このどれもが、トップと同じ表紙だと、受け取った人には用件が伝わりません。送られる場面が多いページほど、そのページだけの表紙を持たせる意味があります。告知のページの作り方は 説明会・セミナー・見学会の告知ページを、どう作るか に書きました。

全ページに作らなくていい

とはいえ、全ページに専用の画像を作る必要はありません。順番はこうです。

• まず全ページに、共通の1枚 ― 社名と、何の会社かが分かる画像。灰色の四角をなくします
• 次に、よく送るページに専用の1枚 ― 採用、主なサービス、イベントの告知など
• 新しくページを作るときに、そのつど1枚 ― 公開してから足すより、作るときに一緒に決めるほうが楽です

画像は、そのページの写真から選ぶ

専用の画像を作るといっても、一から描き起こす必要はありません。いちばん手軽なのは、そのページに載せている写真から1枚選ぶことです。採用のページなら働いている様子、施工事例なら仕上がりの写真。開いた先と同じ写真が出るので、受け取った人も迷いません。

気をつけたいのは、写真の権利です。他社のサイトや検索で見つけた画像を、共有用の画像に使わないでください。共有されるたびに、その画像が貴社の名前と一緒に広がっていきます。自社で撮った写真か、使ってよいと確かめた写真を使います。

紙から来た人も、送ることがある

名刺やチラシのQRから開いたページを、その場で家族や同僚に送る人もいます。紙からの入口になっているページは、送られるページでもあると考えておくと、どこに専用の画像を用意すべきかが見えてきます。紙ごとの飛ばし先の決め方は 名刺・チラシ・看板のQRコードは、どのページに飛ばすか にまとめてあります。

5. 画像に入れる文字の量と大きさ

共有用の画像に文字を入れるかどうかは、どちらでも構いません。仕事の様子が分かる写真だけでも、十分に伝わります。文字を入れるなら、気をつけることがあります。

画像は、思っているよりずっと小さく出る

いちばん大事なのはこれです。共有用の画像は、スマートフォンのトーク画面の中で、かなり小さく表示されます。パソコンの大きな画面で作ったときの印象のまま文字を入れると、受け取った人の画面では読めません。

作ったら、実際に自分のスマートフォンに送って、トーク画面で読めるかを確かめてください。それがいちばん確実な確かめ方です。

文字は、ひと目で読める量だけ

入れる文字は、ひと目で読める量にとどめます。目安は、大きな文字で1行、多くても2行です。

• 入れるもの ― そのページが何のページかを表す短い言葉。たとえば「中途採用」「外壁塗装の施工事例」
• 小さく添えるもの ― 社名、またはロゴ
• 入れないもの ― 電話番号、住所、営業時間、長い説明。小さすぎて読めず、画面がごちゃつくだけです

細かい情報は、開いたページの中で読んでもらえば十分です。共有用の画像の役目は、開いてもらうところまでです。

大事なものは、真ん中に寄せる

共有用の画像は横長が基本ですが、サービスによっては、端が切り取られたり、正方形に近い形で出たりします。どの形で出るかは、こちらでは選べません。

そのため、文字やロゴは画像の真ん中に寄せて、上下左右に余白を取っておきます。端ぎりぎりに社名を置くと、切れて読めなくなることがあります。

細い文字、薄い色は潰れる

小さく出る画像では、細い書体や、背景と近い色の文字は潰れて読めなくなります。太めの書体を選び、背景と文字の色ははっきり差をつけてください。

写真の上に文字を載せる場合は、文字の後ろに無地の帯を敷くと読みやすくなります。写真の明るいところと暗いところに文字がまたがると、どちらかで読みにくくなりがちだからです。

6. 社名とページの中身が伝わる文言

画像と同じくらい大事なのが、見出しと説明文です。画像が出ないサービスや、画像が小さすぎる画面では、見出しだけで判断されます。

見出しは、中身が前、社名は後ろ

見出しの形は、検索結果のタイトルと同じ考え方で決めます。そのページの中身を前に、社名を後ろに置きます。

社名の書き方を、どこでも揃える

見出しの後ろに置く社名は、全ページで同じ書き方にしてください。「株式会社〇〇」と「〇〇（株）」と「〇〇」が混ざっていると、受け取った人には別の会社のように見えることがあります。

名刺、封筒、Googleマップの登録名とも揃えておくと安心です。表記の揃え方は ホームページと名刺・封筒で、書いてあることが違う にまとめました。

説明文は、開く理由を1文で

説明文は、出るサービスと出ないサービスがあります。出る場面のために、そのページを開くと何が分かるかを、1〜2文で書いておきます。

「神戸市北区で外壁と屋根の塗装をしています。施工事例と料金の目安を載せています」。このくらいで十分です。挨拶や意気込みより、開いた先に何があるかを書いてください。

7. タブのアイコンと、直したのに古いまま残る見え方

タブのアイコンは、正方形の目印を1つ

タブのアイコンは、とても小さな正方形で出ます。横長のロゴをそのまま縮めると、何が描いてあるか分からなくなります。

マークだけ、または社名の頭文字1字のような、小さくても形が分かるものを用意してください。何も設定していないと、地球のような既定のマークや、作ったツールのマークが出たままになります。複数のタブの中で、貴社のサイトだけが目印の無い状態になります。

ロゴが無い会社のアイコンの作り方は ロゴが無い会社の、ホームページ に書きました。ロゴが無くても、文字から十分に作れます。

直しても、すぐには変わらないことがある

ここが、いちばん質問をいただくところです。共有用の画像や見出しを直したのに、送ってみると古い見え方のまま、ということがよく起きます。

これは、多くのサービスが、一度読み取ったページの見え方をしばらく覚えておく仕組みを持っているためです。どのくらいの間覚えておくかは、サービスによって違います。こちらのサイトを直しても、サービスの側が覚えている間は、古い見え方が出ることがあります。

古い見え方が残ったときの考え方

古い見え方が残ったときは、次のように考えてください。

• まず、時間をおく ― しばらくすると、サービスの側が新しい見え方に読み直すことが多いです
• サービスによっては、読み直しを頼む方法がある ― やり方はサービスごとに違うので、制作会社に確かめてもらうのが早いです
• 大事な送信の前に、自分宛てに試しに送る ― 取引先に送る前に、自分のスマートフォンで見え方を確かめておきます

慌ててサイトの設定を何度も変えると、かえって原因が分からなくなります。直したら、まず自分宛てに送って、時間をおいてもう一度送る。この順番で確かめるのが落ち着いたやり方です。

直すのは、変わったとき

共有用の画像と見出しは、一度決めれば終わりではありません。社名やロゴが変わったとき、サービスの中身が変わったとき、催しが終わったときは、画像と見出しも一緒に直す必要があります。ページの本文だけ直して、共有用の画像に古い情報が残る、というずれはよく起きます。

8. 雄喜晃の伴走：共有されたときの1枚まで、公開前に用意します

私たち雄喜晃のホームページ制作では、共有用の画像、見出し、説明文、タブのアイコンを、ページを作るときに一緒に用意します。灰色の四角のまま公開することはしません。

私たちがやること

• ページごとの見出しと説明文を書く ― 中身を前に、社名を後ろに。全ページで社名の書き方を揃えます
• 共有用の画像を用意する ― 全ページ共通の1枚と、採用やサービスなどよく送られるページの専用の1枚を作ります
• タブのアイコンを用意する ― ロゴが無い場合は、社名の文字から小さくても形が分かるものを作ります
• スマートフォンに送って確かめる ― 公開前に、実際のトーク画面で読めるかを見ます

料金と条件

料金は制作費0円、月額8,800円（税別）からです。6ページ構成のプランは月額13,800円（税別）です。サーバー、独自ドメイン、SSL、保守はすべて月額に含まれます。月5回までの更新代行も同じ月額の中なので、催しの告知に合わせた画像の差し替えや、見出しの書き直しも、ご連絡いただければこちらで反映します。

最低契約期間は6ヶ月です。7〜35ヶ月で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、サイトをお渡しします。

私たちがやらないこと

見え方を整えれば問い合わせが増える、というお約束はしません。共有用の画像は、開いてもらうきっかけを整えるもので、その先はページの中身次第だからです。

また、各サービスでの表示を、思いどおりに固定することはできません。どう切り取るか、いつ読み直すかは、表示する側のサービスが決めています。私たちができるのは、どの形で出ても伝わる画像と文言を用意することです。

「URLを送るたびに、灰色の四角が出て気になっている」という方は、一度ご相談ください。実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月から活動しています。

9. まとめ：開く前の1枚で、用件を伝える

URLを送ったときの見え方と、タブのアイコンで押さえることは、5つです。

• 共有されたときの見え方は、サイトの表紙 ― 受け取った人は、開く前に画像と見出しで判断している
• まず全ページに共通の1枚、次によく送るページに専用の1枚 ― 灰色の四角をなくすところから
• 画像の文字は、大きく1〜2行 ― 真ん中に寄せ、太い書体で。スマートフォンに送って確かめる
• 見出しは中身が前、社名は後ろ ― 社名の書き方は、どこでも揃える
• タブのアイコンは、小さくても形が分かる正方形 ― 直したのに古い見え方が残ったら、時間をおいて確かめる

共有用の画像は、サイトの中で貴社の側からは見えにくい場所です。でも、紹介してくれる人が貴社のことを話すとき、最初に相手の目に入るのはこの1枚です。

今日できることを1つだけ挙げます。貴社のトップページと採用のページのURLを、ご自身のLINEに送ってみてください。出てきた画像と見出しが、そのまま取引先に見せていいものかどうか。それだけで、直すところが分かります。

送ったときの見え方が気になっている、という方は、一度ご相談ください。