株式会社倉橋商事
コーディング外注対応／建設・産廃企業コーポレートサイト
プロジェクト概要
プロジェクト概要
山口県岩国市を拠点に、ダンプトラックによる資材運搬、アスファルト合材の製造、産業廃棄物の収集運搬などを行う株式会社倉橋商事様のコーポレートサイト制作において、Net:Engage; は株式会社オーエスプランニング様からの依頼で、フロントエンドコーディングおよび WordPress 実装を担当した案件です。
オーエスプランニング様が設計・デザインされた
- 建設・インフラを支える会社としての力強さ
- 現場のスケール感が伝わるビジュアル
- 求職者向けの分かりやすい職種紹介
といった表現を崩さないことを前提にしつつ、
- 業務内容（合材製造／運搬／産廃収集運搬）
- 職種紹介（ドライバー・オペレーターなど）
- 保有車種一覧
- 許可証情報
- 採用情報・ニュース
など、更新頻度の高いコンテンツを運用しやすい形で実装することが役割でした。
そこで、BEMルールとSCSSを用いたコンポーネント設計により、トップページのヒーロー、業務紹介、保有車種リスト、許可証一覧、採用コンテンツなどを再利用しやすいレイアウトパターンとして整理。
WordPress では、カスタム投稿タイプ／カスタムフィールドを設計し、将来的に業務内容や車種、採用情報が増えても、同じUIで簡単に追加・更新できるような管理画面を構築しています。
また、建設・運送業という特性からスマートフォン閲覧が多いことを想定し、モバイルでの読みやすさ・操作しやすさを重視したレスポンシブ実装を行いました。
制作のポイント
-
BEM＋SCSSで「増やせる」レイアウトを実装
デザインの世界観を維持しつつ、今後のページ追加や改修にも耐えられるよう、
• セクションごとの余白・グリッド
• カード・ラベル・ボタンなどのUIパーツ
• 番号付きセクション（01/02…）の表現
をBEMルールとSCSSでコンポーネント化。
新しい業務や車種ページを追加しても、既存と同じ見た目で増やせる構造にしました。 -
カスタム投稿・フィールドによる更新しやすい管理画面
「NEWS」「業務内容」「保有車種」「許可証」「採用情報」などを
カスタム投稿タイプとして分離し、それぞれに必要な項目だけをカスタムフィールドで用意。
• 業務内容：タイトル／説明文／関連画像
• 保有車種：車種名／台数／写真／スペック
• 許可証：都道府県／許可番号／PDFや画像へのリンク
といった形で入力できるようにし、
HTMLやCSSに触れなくても、クライアント側で更新しやすい管理画面を実装しました。 -
スマホ前提のレスポンシブ・UI調整
現場のスタッフや求職者がスマホから閲覧する状況を想定して、
• 大きめのフォントと行間
• スクロールしやすい縦長レイアウト
• タップしやすいボタンサイズ
• テーブルやリストの縦並び最適化
などを実装段階で調整。
PCデザインの単なる縮小ではなく、モバイル優先でブレイクポイントを組んでいます。 -
コードの再利用性・パフォーマンスへの配慮
画像圧縮・lazyload、セマンティックなHTML構造などを導入し、
表示速度とSEOのベースを確保。
同時に、倉橋商事様サイトで使ったコンポーネント群が、
オーエスプランニング様側の今後の建設・運送系サイト制作でも再利用しやすいよう、
クラス設計とSCSSの構成を整えました。
公開後の変化
情報更新の内製化とスピードアップ
カスタム投稿とカスタムフィールドによって、
• 新しい車種の追加
• 許可証の更新
• ニュース・採用情報の公開
といった作業を、制作会社経由にせず社内で対応しやすくなりました。
結果として、事業内容や許可証情報をタイムリーに反映できる運用が可能になっています。
取引先・求職者への事前説明ツールとして機能
業務内容・保有車種・許可証・採用情報をWeb上で整理したことで、
取引先や求職者に対して「まずはWebサイトをご覧ください」と案内しやすくなり、
紙の会社案内だけに頼らない情報提供ができるようになりました。
スマートフォンからのアクセス性向上
レスポンシブ実装とモバイル前提のUI調整により、
現場や移動中でも、スマートフォンから会社情報・事業内容・採用情報を
ストレスなく確認できるようになっています。
打ち合わせや面接の場で、その場でサイトを見せながら説明するケースも想定した構成です。
コーディング資産としての再利用
BEM＋SCSSとコンポーネント設計により、
オーエスプランニング様側の類似案件や、
Net:Engage; 自身の建設・物流系サイト制作のベースとしても流用しやすいコードとなっており、
以降の制作効率向上にも寄与しやすい実装になっています。