【day64】株式会社JEMS 環境マネジメント事業 #1日1サイトレビュー
【概要】
環境情報で企業のSDGs・ESGの取り組みを共創する企業の公式サイト
【選んだ理由】
ロゴを彷彿させるような抽象的な形の画像と、ボタンリンクのデザインが印象的だったから
【参考になるデザイン(PC)】
・最近みかけるような円にラインが差し込まれるようなリンクボタンのデザイン
→スタイリッシュな印象で、事業内容にもマッチ!
▼ボタンにホバーするとラインが円中心に動くデザイン
▼詳細ページへの遷移する文字リンクにはライン長めのデザイン
▼ページトップリンクは縦書き
・キャンペーンの情報がポップアップで固定表示されている
→目には飛び込んできやすいけど「×」ボタンで消せるが結構邪魔な印象、、
→「!!」の文言がサイトの落ち着いた印象を考えると違和感あり
・ファーストビューに事業ビジョンへのリンクが配置されている
→事業について知ってもらいたい気持ちが伝わる
・取り組み事例やプレスニュースなどの要素はうっすら影がある
→ペラっとした印象ではなく、立体感がある
・ヘッダーの緑背景ボタン、フッター上の余白いっぱいのエリアなど、問い合わせページへの導線が多い
・フォントで使われている色が3色ほど、フォントの種類も和文、英文の2種類のみ
→フォントサイズを変えることで文章の情報整理をしている
→ごちゃつかずにスッキリ、シンプルな印象
・フォントだけではなく、アクセントカラーにあわせた線画イラストをつかうことで、単調さを感じさせない
→ソリューションの紹介で依頼主と担当者のイラストサイズが異なることで、解決案に目線がいきやすい!
▼担当者のほうが手前にいるような印象。吹き出しのデザインもラストの印象に合っている。
【ターゲット】
SDGs・ESGに課題や関心がある企業(これから取り組んでいく段階)
【サイトの目的】
・事業内容を知ってもらう
・取り組みを知ってもらう
・お問い合わせや資料請求をしてもらう
【フォント】
和文:Noto Sans JP(Google Fonts)
英文:Lato(Google Fonts)
【カラー】
見出し:008d3f(緑)
フォント:2d394a(柔らかい黒)
アクセントカラー:0d924c(濃い緑)
【レスポンシブ(SP)】
・メニューはページ上部のヘッダー固定ではなく、ハンバーガーメニュー
→メニュー内は縦1列の文字と「>」マークでリンクを表現
→お問い合わせ・資料ダウンロードはPC版とあわせて緑背景ボタンで見立たせている
・キャンペーンのポップアップは画面下部に表示されている
【感想まとめ】
SDGs・ESGの印象にあった、クリーンな印象のサイト。
数学の図形のような形で表現された背景が印象的で、シンプルなフォントのアクセントになっている。
▼PCサイズのキャプチャ