Green Loop

環境 × テクノロジーをテーマにした架空企業「Green Loop株式会社」のコーポレートサイトを自主制作しました。

環境分野に関心を持つ企業や自治体、教育機関の担当者が閲覧することを想定し、企業の理念だけでなく、「どのような事業を行っている会社なのか」まで短時間で理解できる情報設計を目指しました。

また、デザインツールは使用せず、HTML / CSSを用いてデザインから実装まで行っています。

制作目的

Green Loopのビジョンや事業内容をわかりやすく伝え、環境対策や環境教育に取り組む企業・自治体・教育機関が、連携先として検討できるコーポレートサイトを想定して制作しました。

課題

環境やサステナビリティといったテーマは抽象的な表現になりやすく、理念だけを強く打ち出しても、具体的に「何をしている企業なのか」が伝わりにくいと考えました。

そこで、

• 企業の理念と具体的な事業内容を結びつける
• 専門的な内容でも直感的に理解できるようにする
• 環境分野らしさと、企業としての信頼感を両立させる
• 問い合わせまで迷わず情報を確認できる構成にする

ことを設計上の課題として設定しました。

環境対策や環境教育に関するパートナー企業を探している、30〜40代の担当者を想定しました。

主なユーザーとして、

• 自治体の環境・地域政策担当者
• 中小企業の環境・サステナビリティ担当者
• 教育機関の教職員

などを設定しています。

業務中にPCから企業情報を確認する状況を中心に想定しながら、スマートフォンからアクセスした場合でも情報を確認できるよう設計しました。

企画・ターゲット設定からデザイン、コーディングまで一貫して担当しました。

• コンセプト設計
• ペルソナ・ターゲット設定
• 情報設計
• Webデザイン
• HTMLによるマークアップ
• CSSによるスタイリング
• レスポンシブ対応

理念だけではなく「何をしている企業か」が伝わるサイトへ

環境分野の企業サイトでは、「持続可能な未来」「環境にやさしい社会」といった抽象的なメッセージだけでは、企業の具体的な特徴を理解しにくいと考えました。

そこで、ブランドの世界観を伝えるファーストビューと、具体的な事業内容を説明するセクションの役割を分けています。

最初にGreen Loopが目指す世界観を伝え、その後に再生可能エネルギーや環境教育といった具体的な事業を提示することで、

「どんな企業なのか」→「何をしているのか」

という順番で理解できる構成を意識しました。

01｜環境分野らしさと企業としての信頼感を両立

自然や環境を連想できるグリーンとホワイトをベースカラーとして採用しました。

一方で、環境系の柔らかい印象だけに寄りすぎないよう、装飾を増やしすぎず、余白を活かしたシンプルなレイアウトにすることで、法人向けサイトとしての清潔感と信頼感を意識しています。

02｜事業内容を視覚的に理解できる設計

文章だけでサービスを説明すると情報量が多くなりやすいため、事業ごとにアイコンやイラストを組み合わせています。

まず視覚的な要素から内容を大まかに理解し、その後に説明文を読むことで、専門的なテーマでも情報を追いやすくなることを意識しました。

03｜余白によって情報のまとまりを整理

見出し・本文・画像の間に余白を設け、それぞれの情報のまとまりが視覚的に判断できるようにしました。

単純に余白を広くするのではなく、

「同じ情報は近く、異なる情報は離す」

ことを意識し、ユーザーがページをスクロールしながら情報の区切りを判断しやすい構成を目指しました。

04｜デバイスに合わせたレスポンシブ対応

PCでの閲覧を中心に設計しながら、スマートフォンでも情報の優先順位が崩れないようレスポンシブ対応を行いました。

画面幅が狭くなった際には、要素を単純に縮小するのではなく、横並びのコンテンツを縦方向へ変更するなど、読みやすさを維持できるよう調整しています。

05｜HTML / CSSによるデザイン実装

今回はデザインツールで完成形を作成してから実装するのではなく、ブラウザ上で表示を確認しながらHTML / CSSを調整しました。

コードを書きながら、

• 文字サイズ
• 余白
• 要素の幅
• 配置
• レスポンシブ時の変化

を調整し、デザインと実装を往復しながら完成度を高めています。

この制作を通して、コーポレートサイトでは見た目の印象だけでなく、

「誰がサイトを見るのか」
「何を知りたいのか」
「どの順番で情報を提示すれば理解しやすいのか」

を整理したうえでデザインすることの重要性を学びました。

また、HTML / CSSを用いてデザインから実装まで行ったことで、デザイン上の判断が実際のWebページ上でどのように反映されるのかを確認しながら制作する経験につながりました。

現在も細かなレイアウトやレスポンシブ表示を確認しながら、継続的に改善しています。