2015年の国連サミットでSDGsが採択されてから、年々その運動は広がりをみせ、その活動をホームページで報告したりPRする企業も増えてきました。
そこで今回は、これからSDGsに関する取り組みを同じようにホームページでPRしたい企業、もっと運動を広げたい企業に向けて、参考となりそうなホームページをまとめてみました。
制作会社ならでは視点でご紹介していきますので、ぜひ参考にしてみてください。
子ども向けのデザイン
湖池屋SDGs劇場 サスとテナ ｜株式会社湖池屋
https://sustotena.koikeya.co.jp/
子ども向けサイトのお手本のようなデザインです。メインビジュアルは、楽しいキャラクターと明るい色使いで、親しみやすい雰囲気を醸し出しています。キャラクターの表情や動きが豊かで、楽しい要素が多く含まれています。色使いも鮮やかで、子どもが興味を持ちやすいポップな配色がされています。また、サイト内の各セクションには、子供たちが楽しみながら学べるコンテンツが配置されており、教育的要素を遊び感覚で取り入れられるよう工夫されています。
中京テレビグループSDGs「みらいに おもしろ いいこと」
カラフルなデザインと動きのある要素が多く、訪問者を楽しませる工夫がされています。メインビジュアルには明るい色合いのイラストとアニメーションが使用され、親しみやすい印象を与えます。色鮮やかなアイコンやイラストが豊富に使われ、楽しさと学びを提供するバランスの取れたデザインです。
ブラザーグループSDGsスペシャルサイト | ブラザーSDGsストーリー
https://sdgsstory.global.brother/j/
色鮮やかなCGアニメーションとイラストが際立つデザインです。メインビジュアルにはキャラクターがアニメーションで登場し、ナビゲーションの要素として活用されています。柔らかい印象のキャラクターと丸いフォント、パステルカラーが親しみやすい印象を与えています。
また、イラストのアイコンがサイト全体に設置されており、メニューバーを開いた後のメニューリストにまでも配置されています。これにより、サイトの雰囲気が明るくなり、ユーザーが必要な情報を簡単に見つけられるようになっています。各セクションがわかりやすく整理されており、情報やメッセージが明確に伝わります。
山本製作所 SDGs
https://www.yamamoto-ss.co.jp/SDGs/
メインビジュアルには大きなイラストとキャッチコピーが配置されており、SDGsへの取り組みが一目で理解できます。イラストをクリックすると各取り組みの詳細情報にアクセスでき、スクロールなしで多くの情報を得ることができ、この機能についてのアナウンスメッセージも記載されているので、見落としを防ぎます。
トップページはビジュアル中心で、テキストの情報量を控えめにしているため、情報量で圧倒させず、親しみやすい印象を与えます。
SDGsへの取り組み | ルートインホテルズ
https://www.route-inn.co.jp/sdgs/
メインビジュアルでは明るくカラフルなイラストが多用されており、訪問者に親しみやすい印象を与えます。
メインビジュアルをスクロールすると一変、大胆な余白にシンプルで大きなフォントで書かれたキャッチコピーが表示されます。イラストで大枠のイメージを与えたうえで、テキストに集中させ、内容理解を深めさせる効果があります。
シンプルで情報が豊富なデザイン
ビジネスに役立つSDGs情報｜講談社SDGs by C-station
白地に鮮やかなピンクをベースとした配色で、サイト全体に明るく親しみやすい印象が与えられています。ピンクのアクセントカラーは特に注目を集めやすく、重要な情報やアクションボタンを目立たせています。充実した情報量ですが、画像等のビジュアルコンテンツが豊富に用いられており、情報を理解しやすくなっています。
SDGs VISION | IR情報 | 牧野フライス製作所
メインビジュアルでは、明るい未来を連想させる家族のイメージが背景に使われ、「持続可能な社会」のイメージと希望が膨らみます。
企業の各取り組みは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宣言についてイメージしやすくなっています。スクロールしていくと徐々に文字量が多くなり、離脱を防ぐ工夫がされています。
パルシステム「超えてく」
https://www.pal-system.co.jp/koeteku/
緩めの手書きイラストが中心の、とてもかわいいサイトです。親しみやすさと温かみ、クラフト感が感じられ、サイトテーマのSDGSの優しいイメージともリンクしています。文字サイズが20-16pxと大きめで、行間も広くとってあります。全体の手書き雰囲気ともあわせて、ゆったりとエッセイを読むような印象をうけます。セクションごとの背景色がふわっと切り替わり、ストーリーが緩やかにつながっているように感じられます。パステルカラーの優しい色味もサイトテーマのサステナブルな優しい感じとリンクしていて素敵です。あしらいや写真の角、フッターの境界線まで、直線や鋭角がほとんど使われておらず、抜け感が感じられるのもおしゃれポイントだと思いました。
事業のイメージを反映させたデザイン
Yahoo! JAPAN SDGs – 豊かな未来のきっかけを届ける
メインビジュアルからネットニュースのようなアイコンと見出しの画像が配置され、Yahoo!らしさが強調されています。トップページ全体がこの形式で情報整理されており、ネットニュースをチェックする感覚で気軽にSDGs情報にアクセスできるデザインです。エフェクトは控えめで、シンプルなレイアウトが採用されており、日常的に何度もアクセスして気軽にチェックできる雰囲気を演出しています。
小川珈琲 SDGs宣言 | 小川珈琲
https://www.oc-ogawa.co.jp/sdgs/
ブランドの特長を活かした落ち着いたコーヒーブラウンを基調とするデザインが魅力です。メインビジュアルには大胆な余白にテキストが配置され、SDGsへの意識の高さが伝わります。
全体として、図解やイラストを多用し、複雑な情報を分かりやすく伝える工夫がされています。柔らかいイラスト、丸みのあるフォント、落ち着いた色使いで、珈琲好きの消費者に刺さりやすいような、リラックスした雰囲気とお洒落さを演出しています。
SDGs｜株式会社プレミアムウォーターホールディングス
https://premiumwater-hd.co.jp/sdgs/
白地を基調に、水滴や水の流れをモチーフにしたデザインでまとめられています。メインビジュアルでは大きなキャッチコピーとシンボルマークが目を引き、水資源の重要性を強調しています。
各取り組みはカード形式で表示されており、どのような取り組みが行われているか、内容を一目で把握できます。白地の背景で、アイコンや写真の色が映え、写真が密集していても読みやすいです。
PASSTO
ファーストビューが、アーチ型の切り抜きや、タイポグラフィと人物を重ねてグラフィックデザインようになっていて、さらに動きもあり、とてもキャッチーで目を惹かれました。SDGsの定番ともいえる緑ではなく、鮮やかな青がメインカラーとなっており、白背景もあわせてスポーティで爽やかな印象になっており、信頼感も感じられます。ヘッダーが2つめのセクションから表示され、ファーストビューを邪魔しないようになっており、FVへのこだわりが感じられます。幾何学的でモダンなフォントMontserratが、都会的でかっこいいです。円やアーチが至る所に使われていて、「循環」のコンセプトにリンクしているだけでなく、ポップさと親しみやすさが加わっています。
それいけSDGs！｜太陽企画
https://www.taiyokikaku.com/sdgs/
サイトを開いた瞬間、SDGsの17のカラーが混ざり合うような鮮やかで幻想的なグラフィックが強く印象に残りました。多彩な色使いでありながら不思議な一体感があるのは、全体のトーンが見事に統一されているからだと一目でわかります。
フォントに施された影やダイナミックなイラストが圧倒的な3D感を演出しており、未来へのワクワクを感じます。随所に施されたアニメーションによって、映像作品を観ているかのような深い奥行きを感じます。フォント自体はシンプルなゴシック体ですが、グラフィックの華やかさと見事なバランスを保っており、全体が1つのデジタルアートのような美しさを持ったホームページだと思いました。