コーポレートサイトやオウンドメディアなど、サイト制作に置いてSNSのアイコン・ロゴを使用することはしばしばあります。
その時に「デザインに合わせて色を変えたい」「目立たないように小さめに表示させたい」と思うことはありませんか？
アイコンやロゴにはガイドラインが存在しており、公式に提供されているアセットを使用しなくてはならないことがほとんどです。
しかし、その存在を知らない人が多く、準拠していないサイトが多いのが現状です。
今回はよく使われる5つのアイコン・ロゴのガイドラインを紹介します！
カラー
- 必ずブルー（#1D9BF0）かホワイト（#FFFFFF）を使う。
- 画像の上に配置する場合は、必ずホワイト（#FFFFFF）。
→背景が明るい画像の場合は、画像全体に半透明の黒い背景（不透明度10～20％）をのせて、ロゴが読めるようにする。 - 例外的にブラックを使える。
→承認が必要！
形状
- 変形・回転をしない。
- アニメーション化しない。
→喋ったり、鳴いたり、飛んだりしない！ - 古いバージョンは使用しない。
サイズ
- ソーシャルアイコンの最小サイズは32px
スペース
- 周囲はロゴの150％以上のスペースを確保する。
カラー
- 色の変更は不可。ブルーを使用する。（#1877F2）
- 技術的な制約のため正しい色を使用できない場合は、モノクロを使用する。
（アセットに含まれている#FFFFFF / #000000 / #898F9Cの3色）
形状
- 変更、回転、装飾、作り直ししない。
スペース
- 上下左右にロゴの1/4以上のスペースを確保する。
その他
- 必ずロゴを使用する。
- ワードマークだけの使用は禁止。
Instagramにはアプリアイコンとグリフアイコンがあります。
【アプリアイコン・グリフアイコンの画像】
アプリアイコンは、他のアプリがインストールされているデバイスでのみ、またはInstagramアプリのダウンロードを呼びかけたいときに使います。
より、ソーシャルアイコン＝グリフアイコンになるので注意しましょう！
カラー
- アセットにはブラック/グラデーションのグリフが入っているが、色は自由に変更できる。
- 他のアイコンと並べて表示する時以外は、ブラックかホワイトを使うのがおすすめ。
形状
- 変更・回転・修正しない。
サイズ
- 最小サイズは29px。
スペース
- 上下左右にロゴの1/2以上のスペースを確保する。
LINE
カラー
- 変更禁止。提供されたアセットにあるグリーン（#06C755）を使用する。
形状
- 変形・比率の変更・書体の変更をしない。
サイズ
- 最小サイズはMobile – 40px / PC – 20px
スペース
- 上下左右にアイコンの1/2以上のスペースを確保する。
その他
- 視認性を低下させる背景を使用しない。
- 文中で使用しない。
- 装飾をつけない。
YouTube
カラー
- フルカラーロゴ（#FF0000）とモノクロロゴ（#FFFFFF / #212121）の3種類を使用する。
サイズ
- 最小サイズは20px
スペース
- 上下左右にアイコンの三角以上のスペースを確保する。
その他
- 文中で使用しない。
- リンク先のURLはYouTubeチャンネルのみ。
おわりに
5つのSNSアイコン・ロゴのガイドラインを一部ご紹介しましたが、いかがでしたか？
カラーの変更や形状の変更など、禁止されていると知らなかったものも多かったと思います。
サイト全体のデザインとの調整もありますが、心配な方は提供されているアセットをそのまま使うのが安全ですね。
また、規約やガイドラインは随時更新されていくので、こまめにチェックしておくと良いでしょう。
大学在学中にクリエイティブ制作を通じてデザイナーを志し、2019年セブンデックスに入社。ECサイトのグロースや、コーポレートサイトのコンセプト設計からデザインまでを一気通貫で行うなど、様々なプロジェクトを通してデザイン業務に幅広く携わっている。