はじめに
こんにちは！わたしは新卒2年目のフロントエンドエンジニアとしてアジアクエストで働いています。
人を喜ばせることとUI/UXデザインが大好きで、「UI/UXデザインといえばこの人！」と言われる存在になることを目標にしています。
以前、こちらのブログも書きました。
今回は、社内告知のために作成した「インフォグラフィックス」の制作プロセスについて共有します。
情報を伝えるとき、相手に興味を持ってもらえなければ、内容はなかなか伝わりません。
だからこそ、情報を正しく伝えるだけでなく、
「どうすれば興味を持ってもらえるか」を考えることが大切です。
今回、社内の情報共有を目的とした制作を通じて多くの気づきが得られたので、その思考の裏側をまとめます。
今回行ったこと
社内では、エンジニアの学びや発信を活性化するためにconnpass推進活動を行っています。
活動内容を毎年インフォグラフィックスとして可視化しており、数字や図でまとめることで、活動の広がりや変化を直感的に振り返れるようにしています。
今回は以下のインフォグラフィックスを作成しました。
全体設計の考え方：読むストレスをゼロにする
情報を伝えるうえでの大前提は、「最後まで読んでもらうこと」です。
情報量が多くても、パッと見で要点が伝わり、読むストレスを与えない構成を意識しました。
具体的には、配置や視線誘導を工夫し、自然に内容が頭に入ってくるような設計を重視しています。
目的・ターゲットの整理
デザインを始める前に目的・ターゲットを整理します。
- 目的
connpassをあまり知らない社員に興味を持ってもらうこと - ターゲット
connpassに馴染みのない25〜35歳の社員 - ゴール
「思ったより開催・参加している」「ちょっと気になる」「自分も参加してみたい」というポジティブな印象を持ってもらうこと
各項目のデザイン意図・工夫
ベースカラーの設定：なぜ「青」を選んだのか
ベースカラーには、落ち着きのある「青系」を採用しました。主な理由は以下の2つです。
- 誠実さと信頼感の醸成：connpassの実績や参加者の声など、「事実」を伝える内容であるため、誇張のない誠実なトーンを重視しました。
- 長文読解のストレス軽減：情報量が多いため、視覚的な刺激を抑え、最後までリラックスして読める配色にしています。
ちなみに、弊社内では、コーポレートカラーの「赤」を使うデザインが多い傾向にありますが、今回使わなかったのには理由があります。
赤は視線を強く引きすぎるため、文字量が多いと読者に興奮や圧迫感を与えてしまう懸念がありました。
また、前年のインフォグラフィックスも赤をベースカラーとしていたため、そのデザインとの差別化を図り、「新しさ」を感じてもらうための戦略的な選択でもあります。
「イベント開催・参加実績」セクションのデザイン
実績セクションでは、「数のインパクト」を最優先しました。
今回の情報の中でも最も伝えたい部分であるため、画像の一番上に配置しています。
- 数字の強調
- 「こんなにやってるの！？」という驚きを作るため、数字を大きく配置。単位（件）を小さくして対比させることで、一目で規模感が伝わるようにしました。
- アクセントカラー（黄色）
- 数字のアイコンにのみ差し色として黄色を使用し、特別感を演出しました。
- 視線の流れ
- アイコンを左側に配置し、左から右へ自然に視線が流れるように設計しています。
「参加者の声」セクションのデザイン
この見出しの表記は工夫したポイントのひとつです。
チーム内では「アンケート結果」と呼んでいましたが、「参加者の声」という言葉に変更することで、ターゲット層にとって身近な表現にしています。
デザイン面では、人物アイコンと吹き出しを用い、学習塾のチラシのような「信頼感と親しみやすさ」を意識しました。
吹き出しの背景を白くし、装飾を削ぎ落とすことで、少し長い文章でも集中して読んでもらえる環境を整えています。
「推進チームが選ぶ印象的なイベント」の紹介セクション
このセクションは情報のレイアウトにこだわりました。
タイトルの文字列が長めなため、改行して縦型のカードUIにするのではなく、横長レイアウトを採用しました。
また、「Z字型」の視線誘導を意識し、対角線上に色を配置（左上・右下を「濃い青」、右上・左下を「薄い水色」）。
右下を濃い青で締めることで、「ここでゴール」という区切りを無意識に認識させる工夫を施しています。
困ったポイントと解決策：情報量との戦い
文章量が多く、離脱が起きそう
制作過程で最大の課題となったのは、文章量の多さによる「離脱」の懸念でした。情報が多すぎると、読者は読む前に圧倒されてしまいます。
そこでまず、情報の優先度を徹底的に整理し、視覚的な表現に明確な強弱をつけました。
例えば「参加者の声」セクションでは、タイトルとコメントの行間をあえて詰める一方、コメント本文の行間を広く確保することで、情報のまとまりを認識しやすくし、読み進める際のストレスを軽減しています。
さらに、文章のすべてを読ませようとするのではなく、一番伝えたい核心部分のみを強調する設計を行いました。
これにより、たとえ細部まで読み込まなかったとしても、強調箇所（実績件数など）を拾い読みするだけで「たくさん開催している」「参加者が多い」という好意的な印象が残る構成にしています。
デザインが単調になりそう
次に直面したのが、画面全体が単調で平坦な印象（のっぺり感）になってしまうという課題でした。
これを解消するため、まずは視覚的なメリハリを意識しました。
人物アイコンの背景に薄い水色を敷くことで背景との差をつけ、さらに文章内でもフォントサイズや太さで強弱をつけることで、読み進める際のリズムを生み出しています。
特に工夫を要したのが、吹き出しのサイズの調整です。
掲載する「参加者の声」は人によって文章量が異なるため、すべてを同じサイズの枠に収めようとすると、余白のバラつきによる違和感が生じてしまいます。
そこで、アイコンの位置をあえて左右交互に配置するレイアウトを採用しました。
これにより、異なるサイズの吹き出しが並んでも「自然な会話のやり取り」として視覚的に処理されるようになり、文章量の差による違和感を解消しつつ、親しみやすいリズムを作ることに成功しました。
まとめ
今回の制作を通じて改めて実感したのは、
デザインは「これを見た相手にどうなってほしいか」を起点に考えるものだということです。
今回は「よく知らない」「興味が薄い」という読者の心理を前提に置き、視線誘導の徹底や認知負荷の低減、そして「すごい」「楽しそう」といった感情的なフックを設計の核に据えました。
これらの要素を積み重ねることで、情報密度の高さと「つい読みたくなる」体験を両立させたインフォグラフィックスを目指しました。
情報を整理し、視覚的に構造化するプロセスは、デザインに限らずあらゆるコミュニケーションに通じるものです。
今回の制作で得た視点は、今後のデザインだけでなく、ドキュメント作成やプレゼンなど、「誰かに何かを伝える」すべての場面で活かしていきたいと考えています。
