大成テクノ株式会社
コーディング外注対応／設備工事業コーポレートサイト
プロジェクト概要
プロジェクト概要
株式会社オーエスプランニング様より、コーポレートサイトのフロントエンド実装をご依頼いただきました。
本サイトは、トップで強いビジュアル訴求（キャッチコピー＋動画／写真）を行い、下層を 「vision」「services」「sustainable（SDGs）」「recruit」「company」「news」「cases（施工事例・Instagram）」 といった目的別セクションで構成する設計です。
実装では、セクション見出し・装飾ライン・背景パターン・固定導線（サイドCTA等）を含む“情報設計込みの見せ方”が崩れやすいため、PC/スマホそれぞれでの見え方の破綻ポイントを優先的に洗い出し、レイアウトの再現性を担保しました。
また「公共事業／一般工事」など事業別の切り替え導線や、施工事例（Instagram連携を含む）など更新頻度が高い領域が想定されるため、運用時に破綻しにくいマークアップと調整を意識し、最終的な公開品質に寄せています。
※デザイン：株式会社オーエスプランニング（https://osplan.jp/）
制作のポイント
-
セクション型LPに近い構成の“読みやすさ”を壊さない実装
トップから各セクションへの遷移が多い設計のため、余白・背景・見出しの階層が崩れると一気に読みにくくなる。視線誘導の意図を維持したまま、端末幅ごとのバランスを調整。 -
「公共／一般」など事業導線の切り替えを前提に、崩れやすい箇所を重点的に安定化
タブ／ボタン的な導線は、hover・active・スマホ時の挙動で破綻しがち。デザインの見せ方を保ったまま、状態差分が出る箇所を実装側で吸収。 -
施工事例（Instagram含む）など“更新される領域”を想定した実装
更新頻度が高い領域は、画像比率・文字量・件数の増減で崩れる。運用フェーズでの破綻コストが増えないよう、コンテンツ変動に強い組み方を意識。
公開後の変化
PC/スマホでの表示品質を担保し、セクションデザインの意図を維持した公開状態を実現
ビジュアル訴求が強いトップ～下層導線まで、見出し・余白・背景の破綻を抑え、ブランド印象を落とさない状態に整備。
導線（各セクション／施工事例）を機能させる“読めるサイト”として成立
単に見た目を再現するだけでなく、情報が追える構成として成立するよう、UI要素の状態差分や読みやすさを調整。
運用更新を想定した崩れにくい実装で、改修・保守コスト増を抑制
コンテンツ増減・画像差し替えが起きても破綻しにくい状態に寄せ、運用フェーズの手戻りを減らす方向で着地。