化学メーカー（シンプル）

だれに向けたページか

新しい素材を探しているメーカーの開発・購買担当者と、研究職を目指す学生。 余計な飾りを削り、白い余白と青い雲だけで「澄んだ技術」を感じさせる。

色

文字

• 見出し・本文：IBM Plex Sans JP（見出し 600・本文 400 16px）
• 英字のラベル・化学式風の番号：IBM Plex Mono

ページの構成と演出

1. メインビジュアル（D03＋E03）：白い画面に青・水色・薄紫のぼかした雲が3つ、ゆっくり形を変えながら漂う。見出し「分子から、あしたの素材を。」が1文字ずつぼかしから現れる。右に六角形で切り抜いた実験の写真
2. わたしたちについて：短い文と、数字3つ（見本の値）
3. 事業（F04）：塗料・接着剤・電池材料の3事業。写真をそれぞれ六角形・丸・アーチで切り抜き、画面に入ると下から形が伸びて現れる。見出しは E03
4. 研究開発：横長の写真の上に、雲を透かした白い板。数字は見本の値
5. 工場と環境：工場の写真をアーチで切り抜き。環境への取り組みを3行で
6. 採用・お問い合わせ：2つの入口
7. フッター

動きの決まり

• JSや GSAP が無いとき：雲は止まったまま（CSS の blur の円）。写真は最初から切り抜いた形で出ている。見出しは最初から読める。全部読める
• prefers-reduced-motion のときは、雲も止まる
• E03 は短い見出し（12文字まで）だけに使う。本文には使わない
• 雲は1周 20秒以上かけて形を変える。速く動かさない

写真（codex）

実験の手元／工場／塗料・接着剤・粉体・フィルム／研究者の後ろ姿、の7枚。人は後ろ姿か手だけ。

見本の値（会員が本物に替える）

創業年・研究者の数・特許数・売上の比率・住所・電話は見本（〇〇）。会員が本物に替える。

下層ページを作るときの決まり

• 色は白・薄い青・濃紺の3つだけ。青い面は1ページに1回まで
• 写真の切り抜きは六角形・丸・アーチの3種から、1区切りに1種
• ぼかした雲は1ページの最初の画面だけに敷く