【case study】導入企業ロゴのまとめ方

2024年5月14日 19:07

こんにちは。こんばんは🪻
株式会社トルクのデザイナーまるです。

ご存知の通り、多くのBtoBサイトではサービスの導入実績をアピールするため導入企業ロゴをTOPでまとめています。導入企業ロゴを並ばせるデザインを作成するには苦手な方はいませんか？（🙋🏻‍♀️）一緒です。どう綺麗にまとめるか？バランスどう整えるのか？たまに悩んでいて時間がかかってしまいます。

今回のブログで、~~苦手な自分のため~~ 参考になれるサイトを探し、いくつかの導入企業ロゴの処理方法をまとめてみました。

3つ(+1)の導入企業ロゴまとめ方

もちろん、紹介する導入企業ロゴ数が多い大企業さんには「導入企業一覧」専用ページにまとめることが多いですが、今回紹介していきたいのはTOPページで導入企業を紹介したい場合の事例です。

STUDIO株式会社の導入企業一覧ページ — STUDIO株式会社導入企業一覧ページ例2

それでは４つのまとめ方を紹介していこうと思います。

①リスト形

一般的のまとめ方だと思います。ロゴを列で並べる形になります。
当たり前の話になるかと思いますが、この形にするときはバランスをとれるように、目に見えない枠をつけると良いでしょう。

下記、参考になれるサイトを紹介します。

テックタッチ株式会社
検証モードで見るとバランスをキレイにとれるように並べるロゴたちは枠内におさめています。

テックタッチ株式会社のTOPにある、横並びの導入事例ロゴの画像 — https://techtouch.jp/

株式会社プレイド KARTE
アクセシビリティ配慮を忘れずに画像の情報、ALTを書きましょう〜

KARTEのTOP、FVの下、キレイに並んでいる導入事例ロゴの画像 — https://karte.io/

Six Eastern
こちらのサイトの場合は、横並びより、カラムに分けて縦並びにするリスト形です。あまりみたことないパターンで個人的に面白いなと思いましたので紹介させていただきます。

カラムに分けて縦並びの形になります。メガメニューのような処理です。 — カラムに分けて縦並びもあり。おしゃれ　https://sixeastern.com/

②流れる形

こちらのまとめ方も多いです。企業ロゴが多いのにすべてTOPに見せたいときによく使われているかと思います。リスト形よりはオシャレかもしれないのですが、基本的に動いているものはアクセシビリティ的に良くないので、一時停止ボタンを忘れないように⏸️ いくつかの参考サイトをみてみましょう〜

ウェブスタッフ株式会社
白い帯におさめて流される導入企業まとめ方になります。

FVの下、白い帯におさめて流れる導入企業ロゴ紹介です。 — https://www.webstaff.jp/

Remote
いろいろなところでかっこいいサイトなのでぜひ参考してみてください。

remoteのTOPにある流れる形の導入企業ロゴ処理 — https://remote.madebyburo.com/why-remote

Pomalo株式会社
FVのすぐ下ではなく、事例の下にまとめている導入企業ロゴです。

位置はFVの下にすぐではなく、事例の下に紹介された導入企業ロゴです。 — https://www.pomalo.jp/

③枠をつける

１番目に紹介したリスト形には「目に見えない枠」をつける形になるかと思いますが、こちらは目に見える枠をつけるパターンです。バランスをとりやすいではないかと思います。枠の形もデザインに合わせて角丸などをつけたら統一感を出せるでしょう。参考サイトはこちら：

due
同じ大きさのグレーベタのなかにおさめて流される導入企業ロゴ紹介。

Contra
クリッカブル導入企業ボタンのまとめ方です。
枠の中に矢印をつけたり、形はボタンに揃えたりするとクリッカブルですよとすぐわかるまとめ方になります。

枠の中に矢印をつける導入企業ロゴ紹介 — 枠の中に、矢印をつけるとクリッカブル感を出せる

タブのボタンにもなれる導入企業ロゴ — 形を変えると、タブになったり、ボタンになったりすることができる

Stripe
Stripeの場合は枠よりグリッドに近いかと。こちらはリスト形に似ているまとめ方ですが、線で分けるのでまとまり感は枠をつけるまとめ方に近いかと思います。

線で分ける処理です — https://stripe.com/jp/customers

mural
枠線をつけて中におさめて綺麗なバランス。

枠線の中におさめている導入企業ロゴ紹介 — https://www.mural.co/

3+1 ステップアップ

Bauer-lab
韓国の舞台・ビデオデザインスタジオです。スクロールできるリスト形になる導入企業紹介です。ホバーすると企業ロゴを見えるようになる演出になります。アニメーションごりごり動くサイトを作りたいときは良い参考になれるかと思います。

テキストリストの形で、ホバーするとロゴが出る — https://www.bauer-lab.com/

Abigail Phillips
スクロールできる横並びのリスト形です。サイトのキーカラーに合わせて単色にするロゴが並んで、スクロールするとすべてのロゴ紹介してから次のエリアを入ってくる処理です。自動で流れるより少しオシャレな形になるかと思います。

スクロールしたらロゴが出る処理になります — 動きを見るにはぜひ、現行サイトを開いてみてください👀　https://www.drabigailphillips.com/

Addifico
最後に、枠形の処理になっています。枠の形はサイトのトンマナーに合わせてもっと見るボタンを右下につけるデザインになります。もっと見るをクリックするとランダム風に導入企業ロゴを見せる機能になります。

枠の中に入っていてもっと見るボタンをクリックするとシャッフルでロゴが変わります — 現行サイトでぜひ+Load moreボタンをクリックしてみてください。https://www.addifico.com/

お役立ちTIPS🤝🏻

導入企業一覧だとアルファベット順に並ばせることが多いのですが、
TOPに紹介するにはアルファベット順にならないことも多いので、ロゴの大きさ・長さ・テキストロゴかロゴマークかを整理して一番良いバランスで並べても良いのでしょう
デザインファイル上、フレームをつけてそのフレームの中にバランスを
調整する
時間をかかってしまうより、エリアだけを先に用意してフッターまで作ってから最後に仕上げてもありかなと
モノクロ・単色にする
案件・クライアントによるモノクロ・単色にできない可能性もありますが、モノクロ・単色にするによって配色的にバランスをとりやすいことやクールな印象をとれるかと思います。

Shopify Inc.
黒抜きにすることにより全体的の統一感を出せるかと思います。

すべてのロゴは黒抜きにする — https://www.shopify.com/jp/plus

MESON, inc.
リスト形になるまとめ方です。黒い背景に白抜き導入企業ロゴを並ばせるとクールな印象になるかと思います。

逆に黒背景で、白抜きにするロゴ — https://www.meson.tokyo/

最後に

世の中にあるサイトを参考に、3+1の導入企業ロゴのまとめ方をまとめてみました。

枠をつけたり、単色かモノクロにしたりする方法は様々ですが、やはりブランドガイドラインなどを参考してクライアントに相談することも必要なステップになります。一般的にリスト形や流れる形は最も安全安心な処理になるかと考えています。

自主学習用の軽めにまとめたブログでしたが、参考になれたら嬉しく思います🤓📚

それではまた✌🏻

【case study】 導入企業ロゴのまとめ方