製品紹介を備えたコーポレートサイト

会社案内と製品紹介を、同じテーマの公開サイトに置いています。会社の説明、製品の一覧、製品ごとのページを同じ見出しのルールで出し、広い画面と狭い画面で見た目を分けています。画面の幅が変わっても、会社の説明から製品の個別ページまでを同じサイトの中で読めるようにしています。

会社案内、製品の一覧、製品ごとのページを同じテーマで出します。広い画面と狭い画面でスタイルを分け、幅が変わっても見出しと本文の位置が読めるようにしています。一覧から個別の製品へ進み、会社の説明と製品の説明を同じサイトの中で続けて読めます。会社案内から製品の一覧と個別ページまでを、画面の幅が変わっても続けて読めるようにしています。同じテーマです。

会社の説明と製品の紹介が、同じサイトの中で並んで見えませんでした。会社案内を読んだあと、製品の一覧がどこにあるか、個別の製品をどこで見るかがページごとに違っていました。画面の幅が変わると、見出しと本文の位置も揃わず、狭い画面では一覧の並びが崩れていました。広い画面用の見た目をそのまま狭めると、製品名と説明が重なって読めませんでした。

会社案内のあと、製品の一覧がどこにあるかがページごとに違っていました。狭い画面では、広い画面用の並びのまま製品名と説明が重なっていました。個別の製品ページと一覧で、見出しのルールも違っていました。幅を変えるたびに、どのスタイルが当たっているかをファイルで確認していました。

会社案内のページと、製品の一覧、製品ごとのページを同じテーマにしています。一覧から個別の製品へ進み、個別ページではその製品の説明を読みます。広い画面用と狭い画面用でスタイルを分け、本文の幅と見出しの位置をそれぞれの幅に合わせています。共通のヘッダーから会社案内と製品一覧の両方へ進めるようにし、製品だけが別の見た目にならないようにしています。

一覧では製品を並べ、個別ページではその製品の説明を読みます。会社案内へも同じヘッダーから進めます。広い画面用と狭い画面用の CSS を分け、同じ HTML の構造を幅に応じて組み替えます。製品を追加しても、一覧と個別のテンプレートが同じ見た目のルールを適用します。

サイトは WordPress、PHP、CSS です。会社案内は固定ページ、製品は一覧と個別のテンプレートで出します。広い画面と狭い画面のスタイルは CSS で分け、同じ HTML の構造を幅に応じて組み替えています。テーマの PHP がページの種類を選び、CSS が見た目の幅を受け持ちます。製品データ用の別 API は置かず、WordPress の投稿として製品を出しています。

WordPress が会社案内の固定ページと製品の投稿を持ち、PHP のテーマが一覧と個別のテンプレートを選びます。CSS は広い画面と狭い画面の見た目を分けます。製品のための別 API は置かず、WordPress の投稿として製品を出します。構造は PHP、幅の違いは CSS、という分担です。