Instagramハイライトのカバーサイズと位置｜中央に収める方法

Instagramのプロフィールを開くと、自己紹介文の下に丸い画像が並んでいることがあります。

この丸い画像が「ストーリーズハイライト」です。

サービス案内や料金、店舗情報、よくある質問などをハイライトにまとめておくと、プロフィールを訪れた人へ必要な情報を分かりやすく伝えられます。

しかし、ストーリーズ用に作った画像をハイライトのカバーに設定すると、次のような問題が起こることがあります。

• アイコンが丸の中央からずれる
• アイコンの上や下が切れる
• ストーリーズではきれいなのに、ハイライトでは見づらい
• カバーごとにアイコンの大きさが違う
• 小さく表示されると何のアイコンか分からない

今回は、プラグインプラスのInstagram用に制作した「Web制作」「Googleマップ」「紙媒体」「EC支援」の4種類を例に、ストーリーズ画像とハイライトカバーのサイズや位置について分かりやすく解説します。

ストーリーズとハイライトでは画像の見え方が違う

Instagramストーリーズは、スマートフォンの画面いっぱいに表示される縦長の画像です。

一方、プロフィール画面に表示されるハイライトカバーは、縦長画像の一部分が丸い形で表示されます。

イメージとしては、次のように考えると分かりやすいでしょう。

「ストーリーズは縦長のポスター、ハイライトはその中央を丸い窓から見るもの」

ストーリーズでは、画像の上から下までタイトルや説明文を表示できます。

しかし、ハイライトの丸で見えるのは、画像全体のうち中央付近だけです。

そのため、ストーリーズ画像としてはきれいに見えていても、重要なアイコンを上や下へ配置すると、ハイライトでは中央からずれたり、一部分が切れたりすることがあります。

ストーリーズ画像は1080×1920pxを基準にする

今回のプラグインプラスの画像は、次のサイズを基準に制作しました。

・横幅：1080px
・高さ：1920px
・縦横比：9：16

1080×1920pxは、スマートフォンの縦長画面に合わせやすく、CanvaやPhotoshopなどでも扱いやすいサイズです。

ただし、Instagramが必ず1080×1920pxでなければ投稿できないという意味ではありません。

大切なのは、ストーリーズの画面に合った9：16の縦長比率で作ることです。

この記事では、位置を分かりやすく説明するため、今回使用した1080×1920pxを基準に進めます。

ハイライト用アイコンは画像全体の中央に置く

1080×1920pxの画像では、画像全体の中心は次の位置です。

・横方向の中心：540px
・縦方向の中心：960px

座標で表すと、次の位置になります。

X＝540px
Y＝960px

難しく感じるかもしれませんが、簡単に言えば「縦長画像の上下左右の真ん中」です。

ハイライトの丸の中央にアイコンを表示したい場合は、アイコン全体の中心をこの位置へ合わせます。

タイトルや説明文が多いからといって、アイコンを下へ移動してはいけません。

文章が収まらない場合は、次の方法で調整します。

・文章を短くする
・文字サイズを少し小さくする
・改行位置を変更する
・行間を調整する
・上下の余白を見直す

アイコンの位置を文章に合わせるのではなく、アイコンを中央に固定したうえで、残った余白に文章を配置することがポイントです。

アイコンの中心は外接枠で合わせる

アイコンを中央へ置くときは、アイコンの一部分ではなく、アイコン全体を囲む四角形の中心を基準にします。

このアイコン全体を囲む四角形を「外接枠」と考えると分かりやすくなります。

例えば、Web制作のアイコンとして、パソコンとスマートフォンを組み合わせたデザインを使用するとします。

スマートフォンがパソコンの右側に配置されている場合、パソコンだけを見て中央を決めると、アイコン全体が右側へずれて見えることがあります。

中央へ配置するときは、次の順番で確認します。

1．パソコンとスマートフォンの両方を囲む
2．囲んだ四角形の横方向の中心を540pxに合わせる
3．囲んだ四角形の縦方向の中心を960pxに合わせる

アイコンの一番目立つ部分ではなく、アイコン全体の外接枠で位置を決めることが大切です。

透明な余白にも注意する

PNG形式のアイコンには、絵柄の周囲に透明な余白が入っていることがあります。

画像ファイルそのものを中央へ配置しても、透明部分が左右や上下で異なると、実際に見えているアイコンが中央からずれて見えます。

例えば、右側に大きな透明余白があるアイコンを中央へ配置すると、実際の絵柄は左寄りに見えます。

確認するときは、画像ファイルの大きさだけではなく、実際に見えている線や図形の範囲を確認しましょう。

ハイライトカバーでは小さなずれも目立ちやすいため、数値上の中央と、目で見たときの中央の両方を確認することが重要です。

アイコンサイズは340〜400px程度が目安

今回制作した画像では、中央アイコンを次の範囲に収めました。

・横幅：340〜400px程度
・高さ：340〜400px程度

1080pxの横幅に対して、アイコンを約3分の1程度にするイメージです。

このくらいの大きさにすると、アイコンの周囲に十分な余白が残り、ハイライトの丸の中でも窮屈に見えにくくなります。

ただし、340〜400pxはInstagramが定めている公式サイズではありません。

今回の画像で、アイコンの分かりやすさと周囲の余白を両立させるために設定した制作上の目安です。

アイコンを大きくしすぎると、次のような問題が起こります。

・丸の端に近づきすぎる
・アイコンの一部分が切れやすくなる
・小さなハイライトの中で圧迫感が出る
・他のカバーと並べたときに大きく見えすぎる

反対に小さくしすぎると、プロフィール画面で何を表すアイコンなのか分かりにくくなります。

丸の中では四隅が見えなくなる

ハイライトカバーでは、四角い画像がそのまま表示されるわけではありません。

丸い形で表示されるため、四角い画像の四隅に置いた文字や装飾は見えなくなります。

そのため、次のようなデザインは避けたほうが安全です。

・アイコンを四隅まで大きく広げる
・重要なマークを左右の端へ置く
・アイコンの周囲に長い文字を配置する
・小さな文字を丸の端に沿って並べる
・タイトルまで丸の中に収めようとする

ハイライトカバーでは、中央に分かりやすいアイコンを1つ配置し、その周囲に十分な余白を残すと見やすくなります。

タイトルや説明文は丸の中に入れなくてよい

ストーリーズ画像には、タイトル、リード文、アイコン、対応内容などを掲載できます。

しかし、ハイライトカバーとして表示されたときに、すべての文章を見せる必要はありません。

今回のプラグインプラスの画像では、ストーリーズとハイライトの役割を分けています。

ストーリーズとして見たとき

・上部のタイトルでサービス名を伝える
・中央のアイコンでサービス内容をイメージしてもらう
・下部の文章で具体的な対応内容を伝える
・リンクスタンプからサービスページへ誘導する

ハイライトカバーとして見たとき

・中央のアイコンでサービスを見分けてもらう
・複数のカバーに統一感を持たせる
・プロフィール全体の印象を整える

タイトルや説明文まで丸の中へ無理に収めようとすると、文字が小さくなり、かえって見づらくなります。

ハイライトの下には設定した名前が表示されるため、丸の中はアイコンを中心としたシンプルなデザインでも内容を伝えられます。

ストーリーズ画像を3つのエリアに分ける

中央のアイコンを固定したら、タイトルと説明文を上下の余白へ配置します。

今回の1080×1920px画像では、次のようにエリアを分けました。

上部テキストエリア

位置の目安：Y＝140〜650px

配置する内容：

・プラグインプラスの表記
・サービス名
・リード文

中央アイコン専用エリア

位置の目安：Y＝760〜1160px

配置する内容：

・メインアイコン

中央アイコン専用エリアには、タイトル、本文、補足文などを入れません。

装飾を使用する場合も、アイコンの視認性を邪魔しない程度に抑えます。

下部テキストエリア

位置の目安：Y＝1300〜1650px

配置する内容：

・対応サービス
・補足説明
・リンクスタンプを置くための余白

このように、最初からエリアを分けておくと、文章量に影響されずアイコンを中央へ固定できます。

複数のハイライトは位置と大きさを統一する

複数のハイライトカバーを並べる場合は、アイコンの位置だけでなく、見た目の大きさも統一することが重要です。

今回、プラグインプラスでは次の4種類を制作しました。

・Web制作
・Googleマップ
・紙媒体
・EC支援

それぞれのアイコンは次の内容です。

Web制作
パソコンとスマートフォン

Googleマップ
地図、店舗、位置ピン

紙媒体
チラシ、名刺、ショップカード、ペン

EC支援
ショッピングカート、商品箱、買い物袋

アイコンの形は異なりますが、中心位置、外接サイズ、周囲の余白をそろえています。

ただし、すべてのアイコンを単純に同じ横幅にすればよいとは限りません。

横長のアイコンと縦長のアイコンでは、同じ横幅にしても見た目の大きさが違って見えることがあります。

次の項目を確認しながら調整します。

・外接枠の大きさ
・線の太さ
・アイコン内の余白
・図形の密度
・並べたときの見た目

完成した画像を4枚並べて確認すると、上下のずれや大きさの違いを発見しやすくなります。

小さく表示しても分かるアイコンにする

ハイライトカバーは、プロフィール画面では小さく表示されます。

ストーリーズの全画面ではきれいに見えていても、小さくすると細部が分からなくなることがあります。

アイコンを選ぶときは、次の点を意識します。

・細かい文字を入れない
・線を細くしすぎない
・複雑な模様を入れすぎない
・背景とアイコンの色に差をつける
・一目でサービスを想像できる形にする

美容サロン向けのデザインだからといって、装飾を増やしすぎる必要はありません。

上品さを保ちながら、ハイライトでは何のアイコンか分かることを優先します。

背景装飾はアイコンより目立たせない

今回の画像では、美容サロンのInstagramにもなじみやすいように、アイボリーや淡いグレージュを背景に使用しました。

さらに、くすみピンク、セージグリーン、淡いゴールドなどを少量使用しています。

背景には、植物を連想させる細い線や、やわらかな曲線を入れています。

ただし、背景装飾が中央へ入りすぎると、ハイライトで小さく表示されたときにアイコンと重なって見えます。

装飾は次の場所へ控えめに配置するのがおすすめです。

・画像の四隅
・上部テキストの周辺
・下部テキストの周辺
・アイコンから離れた背景部分

中央のアイコンを主役にし、装飾は雰囲気を整える役割に抑えましょう。

リンクスタンプは投稿時に追加する

ストーリーズからホームページやサービスページへ誘導したい場合は、リンクスタンプを利用できます。

リンクスタンプは、画像を制作するときに画像内へ埋め込むのではありません。

Instagramへストーリーズを投稿するときに追加します。

中央のアイコンにリンクスタンプを重ねると、デザインが見えにくくなります。

今回のようなレイアウトでは、下部テキストの下にある余白へ配置すると分かりやすくなります。

ただし、画面の最下部にはInstagramの操作表示が重なる場合があります。

リンクスタンプや重要な文字は、画面の端ぎりぎりに置かないようにしましょう。

Canvaで作成するときの基本手順

Canvaを利用する場合は、次の流れで作成できます。

1．1080×1920pxのカスタムサイズで新しいデザインを作る

2．縦と横の中央を確認する

3．X＝540px、Y＝960pxを中心として考える

4．中央に340〜400px程度のアイコンを配置する

5．アイコン全体の外接枠を確認する

6．上部にサービス名とリード文を配置する

7．下部に対応内容を配置する

8．アイコン周辺に十分な余白を残す

9．複数の画像を並べて位置と大きさを比較する

10．PNGまたはJPGで書き出す

Canvaでは、オブジェクトを移動したときに表示される中央のガイド線も活用できます。

ただし、透明な余白があるアイコンでは、ガイド線上に配置しても絵柄が中央に見えない場合があります。

最後は必ず、実際に見えているアイコンの位置を確認してください。

よくある失敗と対策

アイコンが下へずれている

タイトルやリード文を大きくしすぎた結果、アイコンを下へ移動してしまうケースです。

アイコンは中央から動かさず、文章を短くするか、文字サイズや行間を調整します。

アイコンごとに大きさが違う

パソコン、地図、チラシ、ショッピングカートなどは、それぞれ形や縦横比が異なります。

横幅の数値だけではなく、外接枠と見た目のボリュームを確認しましょう。

アイコンが丸からはみ出す

アイコンを大きくしすぎたり、横長の装飾を追加したりすると、丸の端に近づきすぎます。

アイコンを中央に置き、周囲に十分な余白を確保します。

細かい文字が読めない

ストーリーズでは読める文字でも、ハイライトの丸ではほとんど読めません。

丸の中で見せることを目的とした細かい文字は避け、サービス名はハイライト名で補います。

背景とアイコンの色が近い

アイボリーの背景に薄いベージュのアイコンを置くなど、色の差が少ないと小さく表示したときに見えにくくなります。

全体の雰囲気を壊さない範囲で、背景とアイコンの明るさに差をつけましょう。

装飾が中央へ入りすぎている

花、葉、曲線、光などの装飾を中央へ入れすぎると、メインアイコンとの区別がつきにくくなります。

中央はできるだけシンプルにし、装飾は四隅や上下へ控えめに配置します。

最後はInstagram上で確認する

画像制作ソフトで中央を合わせても、最終的にはInstagram上での見え方を確認することが大切です。

ハイライトのカバーを設定するときは、次の点を確認します。

・アイコンが丸の中央に見えるか
・アイコンの一部分が切れていないか
・4つのアイコンの大きさがそろっているか
・背景色や装飾に統一感があるか
・小さく表示しても内容が分かるか
・ハイライト名とアイコンの内容が一致しているか

数値上は正確な中央でも、アイコンの形によっては少しずれて見えることがあります。

その場合は、Instagramのカバー編集画面で、見た目を確認しながらわずかに調整します。

ストーリーズとハイライトの両方を考えて設計しよう

Instagramストーリーズ用の画像をハイライトカバーにも使用する場合は、縦長画像としての見やすさだけでなく、丸く表示されたときの見え方も考える必要があります。

今回のポイントをまとめます。

・画像は9：16の縦長比率で作成する
・今回の基準サイズは1080×1920px
・画像の中心はX＝540px、Y＝960px
・アイコンの外接枠の中心を画像中央へ合わせる
・アイコンサイズは340〜400px程度を目安にする
・中央には文章や大きな装飾を入れない
・タイトルと説明文は上下の余白へ配置する
・複数のカバーで位置と大きさを統一する
・最後はInstagramのプロフィール画面で確認する

ストーリーズでは詳しいサービス内容を伝え、ハイライトの丸では中央のアイコンでサービスを見分けてもらいます。

この2つの役割を分けて考えると、情報を詰め込みすぎず、見やすく統一感のあるデザインを作りやすくなります。

プラグインプラスでは表示場所と導線まで考えます

プラグインプラスでは、ホームページ、Googleマップ、紙媒体、EC販売支援など、地域の小規模事業者に必要な制作や運用をまとめてサポートしています。

Instagram用の画像についても、単に見た目を整えるだけではありません。

・誰に見てもらうのか
・どの画面に表示されるのか
・小さくなったときにも内容が伝わるか
・どこからホームページへ誘導するのか
・問い合わせや販売へどうつなげるのか

こうした点まで考えて制作することが大切です。

個人サロンや少人数で運営している事業者の方にも無理のない形で、今必要なものと、後から追加してもよいものを整理しながらご提案しています。