01
web / information architecture / seo and llmo
6つの活動を、一つの公式ハブへ。
自社運営・公開事例
体験として歩ける世界と、仕事を判断できる情報を、同じサイトの二幕として設計・実装しました。
課題
6つのメディア、公開OSS、プロフィール、相談領域が別々に存在し、誰が何を運営し、どのような仕事を相談できるのかを一つの場所で説明できていませんでした。
制約
- 体験表現とsemantic HTML / SSRを両立する
- touch、reduced motion、JavaScript fail-openを維持する
- SEO / LLMO、構造化データ、日英対応を同じ情報設計へ収める
担当範囲
- 企画、情報設計、体験設計、デザイン、実装
- 構造化データ、sitemap、llms.txt、hreflang
- 性能・アクセシビリティQA、リリース、本番観測
判断
- 感情的な発見を担うACT Iと、信頼・仕事・相談を担うACT IIへ分ける
- 重要情報はCanvasだけに閉じず、SSRされた同一情報から提示する
- 派手さよりも、白い余白、点、線、手描きの人物という固有の文法を守る
実装
- Canvas 2Dの点描世界と、縦に読めるLiving Atlasを接続
- PHPの正本データから可視HTML、JSON-LD、日英ページを生成
- desktop / mobile / keyboard / touch / Tilt / reduced motionを回帰テスト
確認できる結果
- 6メディア、公開OSS、人物、相談領域へ一つの公式ハブから到達可能
- CSS Design Awards Special Kudosを受賞
- 一般投票でBest UI Design、Best UX Design、Best Innovationを受賞