動きのある会社紹介サイト

会社紹介を、ページ遷移とアニメーション、立体の表現があるテーマとして組んだサイトです。ページを移動しても表示が途切れず、スクロールに合わせて説明が動きます。文章と動きは WordPress のテーマとして同じページに載せ、会社の説明を一枚の切り替えだけで終わらせないようにしています。紹介のまとまりは、立体の表現と文章の区切りで見せています。

会社の説明を、ページを移動しても途切れない表示と、スクロールに合わせた動き、立体の表現で見せます。文章の追加も WordPress のテーマの中で行い、ページごとに動きのルールが変わらないようにしています。紹介を一枚の切り替えで終わらせず、上から下まで続けて読めるようにしています。

会社紹介がページの切り替えだけで、内容のまとまりが伝わりにくい状態でした。次のページへ進むと前の説明が消え、スクロールしても見出しと本文の区切りが画面の上で続きませんでした。写真や文章を足しても、ページが独立したままなので、上から下まで一つの紹介として読めませんでした。更新のたびに、動きと文章を別々のファイルで直していました。

次のページへ進むと前の説明が消え、一つの会社紹介として繋がって見えませんでした。スクロールしても、見出しと本文の区切りが画面の上で続きませんでした。動きを足すときはテーマの外のファイルを直し、文章の更新と見た目の更新が別作業になっていました。写真を追加すると、ページの高さと動きの位置がずれていました。

ページを移動しても表示が途切れないようにし、スクロールに合わせて説明が動きます。立体の表現は、紹介のまとまりを見せる位置に置いています。文章、見出し、動きを WordPress のテーマの中で一緒に管理し、ページを追加しても同じ遷移と動きのルールで出るようにしています。読む人は上から下へ、または次のページへ進みながら、会社の説明を続けて見られます。

ページ遷移では表示を途切れさせず、スクロールの位置に合わせて説明を動かします。立体の表現は、説明のまとまりを見せる箇所に置きます。新しいページを足しても、同じ遷移と動きのルールをテーマが適用します。文章は WordPress で更新し、動きのルールはテーマ側に残します。読む人は上から下へ、または次のページへ進みながら説明を続けて見ます。

本文とページの管理は WordPress と PHP です。テーマの組み立ては Vite で、画面の動きは JavaScript です。ページ遷移、スクロールに合わせた動き、立体の表現は JavaScript 側で行い、文章と画像の登録は WordPress のテーマが受けます。ビルドした画面の部品と、PHP のテンプレートを組み合わせて、一つの会社紹介サイトとして配信します。

WordPress と PHP が文章とページの登録を受け、Vite がテーマの部品を組み立て、JavaScript が遷移とスクロールと立体の表現を実行します。テンプレートは PHP、動きは JavaScript、という分担です。ビルドした部品とテンプレートを合わせて配信し、ページを追加しても同じ動きの土台を使います。