【CV達成27％⤴ 】月間80万人に読まれるオウンドメディア「データのじかん」サイト改善の裏側
企業が社会に与える影響に関心が高まる今、サステナビリティ戦略を積極的にWebで発信していくことは、企業にとって大きなプラスとなります。
こちらの記事では、BtoBサイトを数多く手がけてきた制作会社の視点から、ESG情報を伝えるための7つの実践ポイントをご紹介します。
投資家、求職者、そして社内メンバーに、会社と関わっていることを誇りに思ってもらえるUI/UXとは？その具体的なアプローチを丁寧にひも解いていきます。
なぜそれを行うのか？という部分をトップ→中扉→章ページの3階層を、「課題→戦略→成果」の物語で並べ替える。各ページ冒頭に“ワンセンテンス”のストーリー要約を置くと、読者は迷わず深掘りに進めます。
双日のサステナビリティ基本方針ページは、ミッションと提供価値を分けた図で整理し、企業理念とSDGsとの関係性を視覚的に伝えています。見出しや余白が整理され、読み進めやすい構成になっている点も特徴です。
企業理念に基づく取り組みを明確に示し、視覚的な図解や簡潔な構成で理解しやすくなっています。特に、サステナビリティ推進体制やステークホルダーとの価値共創を図で表現し、情報の透明性と説得力を高めています。
弊社で作成した三ッ輪ホールディングスのサイトでは、創業以来、地域社会と共に成長してきた歴史を背景に、「100年先も地域とともに」という長期的なビジョンを掲げています。 4つの重点領域での具体的な取り組みを明確にしており、各項目毎に画像や強調(枠利用)や余白を効果的に利用し、情報が整理されていて伝わりやすい。
投資家が見る温室効果ガス排出量／女性管理職比率／ROICなどはデフォルト表示に。
データ視覚化は分析体験。単に綺麗なグラフではなく「気づき」を仕込むと◎
丸井グループのTCFDページは、計画・実績・取り組みを図やグラフで明確に示し、視覚的に理解しやすい構成となっています。時系列での進捗や目標達成への道筋が一目で把握でき、情報の透明性と説得力を高めています。
【フラットアイコンと図解を随所に配置】 価値創造プロセスや7つのマテリアリティごとに統一感あるフラットアイコンと図解を随所に配置し、視覚的に情報整理を行うことで読みやすさと理解促進を図っている。
マテリアリティ（重要課題）は企業ごとに独自色が出る箇所です。スクリーンリーダー用にaria-labelを付与し、アクセシビリティ＋没入感を両立させても🙌
各課題に対応したアイコンが並ぶビジュアル構成。グリッドレイアウトで余白をたっぷり取り、淡いアクセントカラーが各項目をやさしく区分し、直感的に内容を把握しやすいデザインになっている。 また、文字サイズや行間が読みやすく、余白がしっかり確保されていて、情報に集中しやすいレイアウトになっているのも特徴です。
SDGsの課題へ総合的に取り組んでいる場合には、総合的に見易く紹介していくと◎
DeNAの「SDGsへの取り組み」ページは、事業活動とSDGsの関連性を明確に示し、具体的な事例を通じて社会貢献の姿勢を伝えています。各取り組みがSDGsの目標とどのように結びついているかを視覚的に表現し、ユーザーが理解しやすい構成となっています。また、詳細情報へ誘導することで、興味を持った読者がさらに深く学べる工夫がされています。
ESG情報を中心に、イノベーションを生み出す仕組みやオリジナルな人事施策、ガバナンス強化など、同社の持続的な企業成長への取り組みを明確に示しています。 「サステナビリティニュース」ページでは、最新の取り組みや成果を時系列で整理し、視認性の高いレイアウトで情報を分かりやすく伝えています。各ニュースにはカテゴリや日付が明記され、ユーザーが関心のある情報に迅速にアクセスできる構成となっています。
スピード感のある更新は信頼性をUPさせます。
日清食品グループの「EARTH FOOD CHALLENGE 2030」ページは、資源活用と気候変動対策を明確に分類し、科学的根拠に基づく目標設定や環境戦略とマテリアリティの連動を数値などで示すことで、取り組みの透明性と進捗状況をわかりやすく伝えています。
【図解付きで直感的に理解できるKPIや取り組みの進捗が特徴】 マネーフォワードのサステナビリティページは、自社らしいシンプルかつ信頼感あるデザインで、ビジュアルと数値情報が見やすく整理されています。KPIや取り組みの進捗が図解付きで直感的に理解できるのが特徴です。
統合報告書をWebで公開することのゴールは「デザインを整えること」ではありません。データ更新のスピード、ストーリーとしての一貫性、アクセシビリティ、そしてグローバル対応等の要素を満たしてこそ、ESGへの「本気度」が伝わります。
SDGs・ESGレポートを伝わるようにサイトに落とし込みたいけど「何処から手を付けていいか分からない」「社内リソースが足りない」というお悩みがございましたら、KOHIMOTOまでお気軽にご連絡ください✨
編集者：Chiho Ishigaki
文化女子大学で服飾を学び企業デザイナーとして経験を積む中で、ツールを使った細かいをデザインする楽しみを知りWebデザイン業界に転身。2児の母。日々学びを忘れず、人としても良いアップデートをしていく事が目標です🌷
監修者：Yuka Fujimoto
Webディレクター / デザイナー。美術大学在学中に、画面ひとつで世界中の人と繋がれるWebの可能性やデザインへ興味を持つ。インターンを経て就職したIT企業で実務経験を積む。肉より魚派🐟
INDEX
PICK UP
