Works 三洋化成工業株式会社
コーポレートサイトコンテンツ

運用を通じた課題共有から始まった刷新プロジェクト

きっかけは、IRサイトのリニューアルを進める中での課題共有でした。

株主・投資家の方々をはじめとするステークホルダーに対し、改めて「事業内容をわかりやすく、直感的に伝える」ための発信力を強化したいという想いから、既存コンテンツの刷新も同時に進めることになりました。

以前のコンテンツは静止画かつ単一ページにすべての情報を掲載しており、閲覧しづらいという共通の認識がありました。日々Webサイトの運用に携わる中で蓄積された視点を活かし、より探索の楽しさと理解のしやすさを両立させた体験型コンテンツの構築に取り組みました。

ターゲットを意識した情報の最適化

将来を担う若い世代の方々にも関心を持っていただくため、情報の「見せ方」を改めて検討しました。BtoB向けの専門的な製品情報は既存の製品ページに委ね、本コンテンツでは「暮らしのどこに使われているか」というイメージを掴んでもらうことを最優先としています。

製品名や専門用語を極力抑え、親しみやすや遊び心を取り入れた構成を模索することで、まずは全体像を直感的に理解できる工夫を施しました。詳細を知りたいユーザーをスムーズに専門ページへ誘導する設計にするなど、情報の粒度をターゲットに合わせて調整しています。

さらに、製品紹介だけでなく、本社や研究所といった拠点を街の中に配置し、新規事業への取り組みも紹介しています。また、「3分でわかる三洋化成」や採用情報へのリンクを設け、興味を持ったユーザーがより深い企業理解やアクションへスムーズに移れるよう導線を整えました。

京都の街を描く「三洋化成シティ」の構築

本プロジェクトでは、25以上の製品が登場する京都の街をひとつのイラストで表現することに挑戦しました。
同社が京都で創立し、現在も本社を構えることから、碁盤の目の街並みをベースに設定しています。

アートディレクター監修のもと、その街並みの中に大文字の送り火や五重塔、市バスといった京都らしいモチーフを随所に配置。車のインストルメントパネルや、京都を走るバスの路線カラーを反映させるなど、細部にまでリアリティを追求したビジュアルを構築しました。

制作の過程では、三洋化成工業さまの「遊び心も取り入れたい」といった視点も取り入れ、イラストの中に反映。対話を重ねながら、親しみやすく、かつ同社らしさが伝わる独自の街並みを完成させていきました。

アニメーションの実装と動作の最適化

探索型コンテンツの実装において重視したのは、パフォーマンスと表現力の両立です。街全体のアニメーションや25以上の製品情報を1ページに収める設計のため、デバイスへの負荷を抑える仕組みを導入し、安定した動作環境を整えました。

街の中を走る車や歩行者の動きが自然に見えるよう、デザイン段階からアニメーションの経路を設計。人の歩くスピードや車の走行速度といった細かなパラメーターについても、三洋化成工業さまからのフィードバックを反映しながら、心地よい動きを実現しました。

チームの連携が生んだ「より良いものへの追求」

印象的だったのは、デザインやコーディングが形になり、実際の画面上で動く街の姿が見え始めた瞬間です。当初から具体的な要件を議論してきましたが、ビジュアルが具体化されることで、「三洋化成らしさ」をより細部まで反映させたいという想いが形になり、さらに一歩踏み込んだ議論へと繋がりました。

こうしたこだわりを確実に実装するため、週次の打ち合わせを軸にデザイナー・エンジニア・ディレクターが即座に連携。一つひとつのアイデアの実現可否をその場で判断し、最適解を共に検討しました。クリエイティブから実装までを一貫して担える体制を活かし、細部まで調整を積み重ねることで、納得のいく品質へと仕上げることができました。

また、今後の製品追加やカテゴリの拡張を見据え、将来的な拡張エリアもあらかじめイラストの中に組み込んでいます。更新時にはテキストとピンの追加で対応できる運用しやすい仕組みを整え、長く使い続けられるコンテンツの土台を構築しました。