【SDGs】活動報告やPRの参考となるホームページ14選！デザイン制作のヒントにも

2015年の国連サミットでSDGsが採択されてから、年々その運動は広がりをみせ、その活動をホームページで報告したりPRする企業も増えてきました。

そこで今回は、これからSDGsに関する取り組みを同じようにホームページでPRしたい企業、もっと運動を広げたい企業に向けて、参考となりそうなホームページをまとめてみました。

制作会社ならでは視点でご紹介していきますので、ぜひ参考にしてみてください。

子ども向けのデザイン

湖池屋SDGs劇場 サスとテナ ｜株式会社湖池屋

https://sustotena.koikeya.co.jp/

子ども向けサイトのお手本のようなデザインです。メインビジュアルは、楽しいキャラクターと明るい色使いで、親しみやすい雰囲気を醸し出しています。キャラクターの表情や動きが豊かで、楽しい要素が多く含まれています。色使いも鮮やかで、子どもが興味を持ちやすいポップな配色がされています。また、サイト内の各セクションには、子供たちが楽しみながら学べるコンテンツが配置されており、教育的要素を遊び感覚で取り入れられるよう工夫されています。

中京テレビグループSDGs「みらいに おもしろ いいこと」

https://www.ctv.co.jp/sdgs/

カラフルなデザインと動きのある要素が多く、訪問者を楽しませる工夫がされています。メインビジュアルには明るい色合いのイラストとアニメーションが使用され、親しみやすい印象を与えます。色鮮やかなアイコンやイラストが豊富に使われ、楽しさと学びを提供するバランスの取れたデザインです。

ブラザーグループSDGsスペシャルサイト | ブラザーSDGsストーリー

https://sdgsstory.global.brother/j/

色鮮やかなCGアニメーションとイラストが際立つデザインです。メインビジュアルにはキャラクターがアニメーションで登場し、ナビゲーションの要素として活用されています。柔らかい印象のキャラクターと丸いフォント、パステルカラーが親しみやすい印象を与えています。

また、イラストのアイコンがサイト全体に設置されており、メニューバーを開いた後のメニューリストにまでも配置されています。これにより、サイトの雰囲気が明るくなり、ユーザーが必要な情報を簡単に見つけられるようになっています。各セクションがわかりやすく整理されており、情報やメッセージが明確に伝わります。

100年前から、SDGs発想。 | 日本ガイシ株式会社

https://www.ngk.co.jp/sdgs/

メインビジュアルは、白地の余白を大胆に使ったシンプルなデザインです。製品とキャラクターのイラストが並び、柔らかい印象を与えます。単なるイラストではなく、各イラストをクリックすると詳細が表示される要素も組み込まれています。

トップページをスクロールすると、各製品の詳細が色鮮やかな背景とともに表示され、エネルギッシュな雰囲気を醸し出しています。こちらも余白を大胆に使い、イラストや図表を大きく配置しているため、読みやすく、ビジュアルでの情報理解がしやすくなっています。

山本製作所 SDGs

https://www.yamamoto-ss.co.jp/SDGs/

メインビジュアルには大きなイラストとキャッチコピーが配置されており、SDGsへの取り組みが一目で理解できます。イラストをクリックすると各取り組みの詳細情報にアクセスでき、スクロールなしで多くの情報を得ることができ、この機能についてのアナウンスメッセージも記載されているので、見落としを防ぎます。
トップページはビジュアル中心で、テキストの情報量を控えめにしているため、情報量で圧倒させず、親しみやすい印象を与えます。

SDGsへの取り組み | ルートインホテルズ

https://www.route-inn.co.jp/sdgs/

メインビジュアルでは明るくカラフルなイラストが多用されており、訪問者に親しみやすい印象を与えます。

メインビジュアルをスクロールすると一変、大胆な余白にシンプルで大きなフォントで書かれたキャッチコピーが表示されます。イラストで大枠のイメージを与えたうえで、テキストに集中させ、内容理解を深めさせる効果があります。

シンプルで情報が豊富なデザイン

ビジネスに役立つSDGs情報｜講談社SDGs by C-station

https://sdgs.kodansha.co.jp/

白地に鮮やかなピンクをベースとした配色で、サイト全体に明るく親しみやすい印象が与えられています。ピンクのアクセントカラーは特に注目を集めやすく、重要な情報やアクションボタンを目立たせています。充実した情報量ですが、画像等のビジュアルコンテンツが豊富に用いられており、情報を理解しやすくなっています。

SDGs VISION | IR情報 | 牧野フライス製作所

https://ir.makino.co.jp/sdgs/

メインビジュアルでは、明るい未来を連想させる家族のイメージが背景に使われ、「持続可能な社会」のイメージと希望が膨らみます。

企業の各取り組みはSDGsの目標に沿って具体的に記載され、スクロールすることで詳細な説明と実際の活動写真が確認できます。各取り組みの詳細ページでは、活動の効果や背景が写真と共に丁寧に説明されており、企業の社会的責任が詳しくアピールされています。

自然や環境をテーマにしたデザイン

大和不動産鑑定株式会社 SDGs

https://daiwakantei.co.jp/sdgs/

メインビジュアルでは、自然豊かな風景の動画を背景に、キャッチコピーやメッセージが次々に現れ、訪問者の自然環境やSDGsへの意識を高めます。

トップページをスクロールするとカラフルな背景に、写真や図を大きく使ったコンテンツが並び、大枠のイメージが掴みやすく、詳細ページへ自然に誘導します。

SDGsへの取り組み・地産外消 | 越井木材工業

https://www.koshii.co.jp/sdgs/

トップページのメインビジュアルでは自然豊かな景色を背景に使用しており、企業の環境保護に対する意識の高さがイメージできます。

スクロールすると、色鮮やかなアイコンと円形の画像が各セクションを分かりやすく示し、SDGsの具体的な取り組みを紹介しています。SDGsの情報をビジュアルメインで表すと抽象的なイメージになりやすいですが、取り組みについてのリアルな写真を使うことで、取り組みについて具体的なイメージを持たせることができます。

SDGs宣言 | 富士スバル

https://www.fujisubaru.co.jp/sdgs

メインビジュアルはグリーンを基調とした優しい色合いでまとめられ、背景に環境をイメージさせるイラストが描かれており、SDGsのメッセージを分かりやすく伝えています。フォントは丸みを帯びた柔らかいデザインが選ばれており、親しみやすい雰囲気を醸し出しています。

トップページ上部には写真や図が大きく使われ、SDGs宣言についてイメージしやすくなっています。スクロールしていくと徐々に文字量が多くなり、離脱を防ぐ工夫がされています。

事業のイメージを反映させたデザイン

Yahoo! JAPAN SDGs – 豊かな未来のきっかけを届ける

https://sdgs.yahoo.co.jp/

メインビジュアルからネットニュースのようなアイコンと見出しの画像が配置され、Yahoo!らしさが強調されています。トップページ全体がこの形式で情報整理されており、ネットニュースをチェックする感覚で気軽にSDGs情報にアクセスできるデザインです。エフェクトは控えめで、シンプルなレイアウトが採用されており、日常的に何度もアクセスして気軽にチェックできる雰囲気を演出しています。

小川珈琲 SDGs宣言 | 小川珈琲

https://www.oc-ogawa.co.jp/sdgs/

ブランドの特長を活かした落ち着いたコーヒーブラウンを基調とするデザインが魅力です。メインビジュアルには大胆な余白にテキストが配置され、SDGsへの意識の高さが伝わります。

全体として、図解やイラストを多用し、複雑な情報を分かりやすく伝える工夫がされています。柔らかいイラスト、丸みのあるフォント、落ち着いた色使いで、珈琲好きの消費者に刺さりやすいような、リラックスした雰囲気とお洒落さを演出しています。

SDGs｜株式会社プレミアムウォーターホールディングス

https://premiumwater-hd.co.jp/sdgs/

白地を基調に、水滴や水の流れをモチーフにしたデザインでまとめられています。メインビジュアルでは大きなキャッチコピーとシンボルマークが目を引き、水資源の重要性を強調しています。

各取り組みはカード形式で表示されており、どのような取り組みが行われているか、内容を一目で把握できます。白地の背景で、アイコンや写真の色が映え、写真が密集していても読みやすいです。