共進株式会社
コーディング外注対応／物流企業コーポレートサイト
プロジェクト概要
プロジェクト概要
山口県岩国市の物流企業・共進株式会社様のコーポレートサイト制作において、
株式会社オーエスプランニング様が担当されたデザインをもとに、
Net:Engage; ではフロントエンドコーディングおよび WordPress 実装を担当した案件です。
XD／デザインデータの世界観を崩さずに再現しつつ、
事業内容（配送サービス・倉庫サービス）
- 車両・設備情報
- 会社概要・沿革
- お知らせ・採用情報
といった更新頻度の高いコンテンツを、クライアント側で運用しやすい形に落とし込むことが求められました。
そこで、BEMルールとSCSSによるコンポーネント設計を行い、レイアウト・部品単位で再利用しやすい構造を採用。
WordPress ではカスタム投稿タイプとカスタムフィールドを組み合わせ、「事業内容」「車両紹介」「倉庫情報」「実績」などを入力フォームとして整理することで、制作会社経由にしなくても更新しやすい管理画面を構築しました。
また、ドライバーや現場担当者など、スマートフォンでの閲覧が多いことを想定し、レスポンシブ設計・タップしやすいボタンサイズ・読みやすい行間など、実装段階でモバイルUXを重点的に調整しています。
※デザイン：株式会社オーエスプランニング（https://osplan.jp/）
制作のポイント
-
BEM＋SCSSによる保守性の高いマークアップ設計
デザイン会社様からのリクエストに応えつつ、
以降のページ追加やコンテンツ改修にも耐えられるよう、BEMルールとSCSSでレイアウト・コンポーネントを分離。
見出し・カード・リスト・ボタンなど、共通パーツをモジュール化することで、
デザイン変更時の影響範囲を最小限に抑えられる構造としました。 -
WordPress構築と更新しやすい管理画面
「お知らせ」「事業内容」「車両紹介」「倉庫情報」など、
クライアント側が定期的に更新したい情報をカスタム投稿として分離。
それぞれに必要な入力項目のみをカスタムフィールドで用意し、
HTMLやCSSに触れなくても更新できる運用しやすい管理画面を構築しました。 -
スマートフォン前提のレスポンシブ実装
ドライバーや現場担当者がスマホからアクセスするケースを想定し、
ファーストビューの文字サイズ、行間、ボタンのタップ領域、
テーブルや一覧の折り返しなど、モバイルでの読みやすさを優先して調整。
PCデザインをそのまま縮小するのではなく、ブレイクポイントごとに最適化しています。 -
パフォーマンスとアクセシビリティを意識した実装
画像の圧縮・lazyload、セマンティックなHTML要素、
スクリーンリーダーへの配慮（alt属性・見出し構造）などを取り入れ、
表示速度とアクセシビリティのバランスを意識したコーディングとしました。
公開後の変化
更新作業の内製化と運用負荷の軽減
ニュースや採用情報、事業内容の細かな変更を、
制作会社に都度依頼しなくても社内で更新できるような管理画面構成としたことで、
情報更新の頻度を上げやすいサイトになりました。
スマートフォンからの閲覧性向上
レスポンシブ設計とモバイル優先のレイアウト調整により、
スマートフォンからもストレスなく会社情報・事業内容を閲覧できるようになり、
現場担当者や求職者が移動中に情報を確認しやすい構成になっています。
制作会社・自社双方で再利用しやすいコードベース
BEM＋SCSSをベースにしたコーディングルールにより、
株式会社オーエスプランニング様側でのページ追加や改修、
Net:Engage; 自身の物流系サイト制作でも流用しやすい設計となり、
以降の類似案件の制作効率向上にも貢献しています。