「理念」を可視化するサイトの力
環境問題やサステナビリティへの関心が高まる中、企業やNPOのWebサイトに求められる役割も変わりつつあります。以前は「何をしている会社か」を伝えることがサイトの目的でしたが、今ではそれに加えて「なぜそれをしているのか」「社会にどう貢献しているのか」までを伝えることが重要視されています。
無料HTMLテンプレート『BIO（ビオ）』は、まさにそうした「理念を持つ組織」のためにデザインされたテンプレートです。ヒーローエリアの有機的な波のアニメーション、スクロールに合わせて変化する背景色、ESGデータを可視化する円形のインフォグラフィック。環境や社会課題に取り組む組織の「想い」を、視覚と体感の両面から伝えるための仕掛けが詰まっています。
デザインの特徴とこだわり
波のアニメーションが紡ぐ「自然との接続」
ページを開くと、ヒーロー写真の下端に4層の波が寄せては返す動きを繰り返しています。海岸で波を眺めているときのような、穏やかで規則的なリズム。この波はSVG（画像形式の一種）とアニメーションの組み合わせで作られており、プラグインや外部ライブラリを一切使わずに実現されています。
波の層ごとに半透明度と速度が異なっており、手前の波は遅く、奥の波は速い。この「奥行きの違い」が、平面的になりがちなWebページに自然の立体感をもたらしています。サーフィンの動画を貼るのではなく、こうした抽象的な「水の動き」をCGとして組み込むことで、押し付けがましくなく、でも確かに「この組織は自然を大切にしている」と感じさせる。その匙加減が秀逸です。
スクロールで変わる背景色 ― 白からベージュへの「移ろい」
『BIO』のもうひとつの特徴的な演出が、スクロールに連動した背景色の変化です。ページ上部では清潔感のある白い背景ですが、コンテンツエリアに入ると自然にベージュ（温かみのあるクリーム色）へと移り変わります。
この変化は一瞬のフラッシュではなく、1秒かけてゆっくりと遷移するため、訪問者は「あれ、いつの間にか雰囲気が変わっていた」と感じる程度のさりげなさです。白い世界（クリーンなビジョン）から、ベージュの世界（自然で温かい活動の現場）へ。このグラデーション的な演出が、組織のメッセージと活動をストーリーとして連続させる役割を果たしています。波の色もこの背景色変化に連動して変わるため、全体の統一感は崩れません。
数字で語る姿勢 ― 円形インフォグラフィック
CSR報告書やESGレポートでよく見かける「数値の可視化」を、テンプレートの標準機能として備えているのが『BIO』の強みです。円形の枠に囲まれた大きな数字と、その下のラベル。デモでは「100%（再生可能エネルギー）」「-40%（CO2排出）」「0（埋立廃棄物）」の3指標が表示されています。
複雑なグラフライブラリを使わず、シンプルな円と数字の組み合わせだけで表現されているため、AIやテキストエディタで数値を書き換えるだけで自由にアップデート可能です。たとえば「500本（植樹数）」「30ヶ国（支援地域）」「10年（活動実績）」など、組織の特性に合わせて自在に内容を変更できます。
白からベージュへ”移ろう”背景が、活動のストーリーを語る
BIOを下にスクロールしていくと、背景の色が真っ白から、いつの間にか温かいベージュへと変わっています。これは一瞬で切り替わるのではなく、約1秒かけてゆっくり溶けるように変化するため、はっきり意識されないくらいさりげない演出です。
この”移ろい”には意味が込められています。ページ上部の白は、組織の掲げる清潔でクリアなビジョン。スクロールして活動の中身に入っていくと、現場の温かみを表すベージュへ。つまり、色の変化そのものが「理念から、実際の活動へ」というストーリーの流れを表しています。ヒーローの波の色も、この背景に合わせて一番手前だけベージュに染まり、画面全体が同じ空気に包まれるよう連動しています。
ただ綺麗な色を置くのではなく、「なぜこの色がここにあるのか」に理由を持たせる。BIOの演出は、どれも組織の哲学を体現する装置として設計されています。
こんな方・こんな用途におすすめ
環境保護団体・NPO法人のWebサイト
活動理念の発信と、具体的な成果の数値報告。この両方を1ページで美しくまとめられるのが『BIO』の最大のメリットです。波のアニメーションと背景色の変化が「自然との共生」を自然に伝え、円形インフォグラフィックが「実績に裏打ちされた信頼」を補強します。
エシカルブランド・サステナブルビジネスのコーポレートサイト
オーガニック素材を使った製品や、フェアトレードに取り組むブランドにとって、Webサイトの第一印象は非常に重要です。「自然に配慮しています」と文字で書くよりも、サイトそのものが自然を感じさせるデザインである方が、はるかに説得力があります。『BIO』のアースカラーと有機的なアニメーションは、ブランドの姿勢を言葉に頼らず体験として伝えてくれます。
企業のCSR・サステナビリティ専用ページ
コーポレートサイトのメインは別にあっても、CSRやサステナビリティの取り組みを専用ページで深く掘り下げたい場合に最適です。1ページ完結型のテンプレートなので、既存サイトの下層ページとしてリンクを貼るだけで運用できます。
カスタマイズのヒント
アクセントカラーで「活動のテーマ」を表現する
設定エリアで指定されているアクセントカラー（グリーン系）を変えるだけで、テンプレートのテーマカラーが一括で切り替わります。
- ディープブルー: 海洋保全やクリーンウォーターの活動に
- アンバー（琥珀色）: 再生可能エネルギーや太陽光関連に
- テラコッタ: 土壌保全やアグリビジネスに
会社概要セクションの背景色やフッターの色にまでアクセントカラーが反映されるため、少ない変更で大きな印象の転換が可能です。
インフォグラフィックの数と内容を変更する
デフォルトでは3つの円形データですが、設定エリアでデータを追加・削除するだけで数を変えられます。最小1つ、最大5〜6つ程度が適切なバランスです。数字だけでなくラベルの表現にもこだわると、より印象的になります。たとえば「CO2排出 -40%」よりも「CARBON REDUCTION -40%」のように英語で記載すると、海外向けのレポートとしての品格も備わります。
円形の数字は”ただの円”。だから書き換えが一瞬で済む
BIOの信頼感を支えているのが、再生可能エネルギー100%、CO2排出-40%といった、円形に囲まれた大きな数字（インフォグラフィック）です。これ、実は複雑なグラフの仕組みは使っておらず、「緑の輪っかと、その中の数字」という単純な作りでできています。だからこそ、AIやテキストエディタで数字とラベルを書き換えるだけで、一瞬で自分の組織の実績に差し替えられます。
コツは、数を絞ることです。だいたい3〜5個までに留めて、その組織が一番誇れる数字だけを選ぶと、説得力が増します。たくさん並べると、どれも印象に残らなくなってしまいます。ラベルを「CARBON REDUCTION」のように英語にすると、レポートとしての品格も出ます。
色は、アクセント1つで活動テーマを表現できます。ディープブルーなら海洋保全、琥珀色なら再生可能エネルギー、テラコッタなら土壌・農業に。AIに頼むなら「アクセントをディープブルーに変えて、円の数字を『支援30ヶ国・植樹500本・活動10年』に差し替えて」のように伝えると、テーマも実績も一度に整えられます。
まとめ ― 理念を紡ぐサイト、行動を伝えるデザイン
『BIO』は、見た目の美しさだけでなく「このデザインには意味がある」と感じさせるテンプレートです。波は自然への敬意を、背景色の変化は活動のストーリーを、円形の数字は成果への責任を。それぞれの演出が、単なる飾りではなく、組織の哲学を体現する装置として機能しています。
環境や社会に真摯に向き合う活動を、それにふさわしい器に盛りたい。そんな想いを持つ方にこそ、使っていただきたいテンプレートです。
