株式会社ナルキ
コーディング外注対応／土木・建設業
プロジェクト概要
プロジェクト概要
山口県岩国市錦町に本社を構え、道路・河川・トンネル・橋梁・公共施設など、地域インフラ整備に長年携わってきた総合建設会社「株式会社ナルキ」様のコーポレートサイトリニューアルにおいて、
Net:Engage; は株式会社オーエスプランニング様からの依頼で、フロントエンドコーディングと WordPress 実装を担当しました。
オーエスプランニング様側で整理された、
• 「地域と共に歩み続けた70余年の信頼と実績」というブランドメッセージ
• 公共工事／民間工事という2軸の事業構成
• 工事実績・CSR・採用情報まで含めたサイト構成
といった情報設計とデザインを壊さずに再現しつつ、
• 事業案内（公共工事／民間工事）
• 工事実績（年度・カテゴリ別アーカイブ）
• お知らせ・ブログ
• 会社概要・有資格者一覧
• 採用情報
など更新頻度の高いコンテンツを、社内で運用しやすいWordPressサイトとして実装することが求められました。 
Net:Engage; では、BEMルールとSCSSを用いてセクションやカードをコンポーネント化し、トップページのヒーロースライダー、service／works／recruit セクション、ニュース一覧などを再利用しやすいレイアウトパターンとして実装。
WordPress側では「工事実績」「お知らせ」「ブログ」「表彰・トピックス」などをカスタム投稿タイプで分離し、管理画面から入力すれば自動でトップや各アーカイブに反映される構造を組んでいます。
また、現場・自治体・求職者などスマートフォンからのアクセスも多いことを想定し、
株式会社ナルキ様モバイルでの可読性と操作性を重視したレスポンシブ実装を行いました。
※デザイン：株式会社オーエスプランニング（https://osplan.jp/）
制作のポイント
-
事業案内・工事実績・採用をつなぐ情報設計を忠実に再現
土木・建設会社としての顔である、
• 事業案内（公共／民間）
• 工事実績（河川・道路・トンネル・橋梁・公共施設など）
• 採用情報（求める人物像・メッセージ）
の3つの入口を、トップページからシームレスに回遊できるように実装。 
ナビゲーションだけでなく、トップの「service」「works」「recruit」セクションからも
それぞれへの導線が自然につながるよう、HTML構造とリンク設定を細かく調整しています。 -
BEM＋SCSSによる土木系コーポレート用コンポーネント設計
ナルキ様サイトでは、
• ヒーロースライダーとトピックス
• 事業案内のカードレイアウト
• 工事実績の一覧カード
• 表彰・ブログ記事のカード
• CSRや会社概要のセクション
など、繰り返し使うパターンが多いため、BEMルール＋SCSSでコンポーネント化。
今後、工事実績や表彰記事、CSRコンテンツが増えても統一感のある表示を保てるよう、
見出し・メタ情報・ボタン配置などをモジュールとして設計しています。 -
工事実績・ニュースのカスタム投稿実装
「工事実績」と「お知らせ・ブログ」は、
年度・カテゴリ（公共事業／民間事業など）でアーカイブされる前提のため、
• 工事種別・発注者・年度などを入力できるカスタムフィールド
• 年度アーカイブ・カテゴリアーカイブのテンプレート
• トップページの新着実績・新着ニュース連携
をWordPress上で構築。 
これにより、担当者が管理画面から必要項目を入力するだけで、
サイト全体に一貫した形で実績を追加していけるようにしています。 -
スマホ前提のUIとアクセシビリティ
自治体担当者・協力会社・求職者がスマートフォンから閲覧する状況を想定し、
• 大きめの文字サイズと行間
• ボタン・リンクのタップ領域
• セマンティックな見出し構造（hタグ）
を意識したコーディングを実施。
画像のalt属性や、表構造のマークアップなど、
アクセシビリティ面も最低限担保した実装としています。
公開後の変化
工事実績・表彰歴をタイムリーに更新可能に
工事実績ページとニュース／ブログをカスタム投稿で構築したことで、
• 新規受注・完工した工事の追加
• 優良工事表彰などトピックスの掲載
• CSR活動や社内イベントレポートの発信
を社内でタイムリーに更新しやすくなりました。 
結果として、「最近どんな工事をしている会社なのか」「どんな評価を受けているのか」がWeb上で追える状態になっています。
事業案内・工事実績・会社概要・有資格者などを整理して掲載したことで、
• 入札・見積の場面での会社説明
• 求職者への事前案内
• 地域住民に向けた情報公開
において、「まずはサイトをご覧ください」で済む部分が増えました。
紙の会社案内やPDFだけに依存せず、常に更新された情報を共有できる基盤になっています。
スマホからの情報アクセス性向上
レスポンシブ対応とスマホ前提のレイアウトにより、
現場や移動中でも、スマートフォンから
• 工事実績
• お知らせ・ブログ
• 採用情報
を確認しやすくなりました。
自治体担当者や協力会社、求職者が現場からでも
「ナルキについて」を確認できる状態を狙った構成です。
類似案件への再利用が効くコードベース
BEM＋SCSSとコンポーネント設計により、
オーエスプランニング様側の他の建設業サイトや、
Net:Engage; 自身の公共工事系サイト制作にも流用しやすいコードとなり、
土木・インフラ系コーポレートサイトの制作効率向上にも寄与する実装になりました。