日本フィールド&マリンエンジニアリング日本フィールド&マリンエンジニアリング 様

CATEGORY
実績
本案件は、日本フィールド&マリンエンジニアリング株式会社と株式会社ボルテックのホームページを新規制作する取り組みです。対象ユーザーは機械・プラントメーカー、造船所、船主・船舶管理会社、官庁(海上保安庁など)、さらに工業高専や商船高専といった教育機関を含みます。クライアントの要望としては「青と白を基調に、赤や黒は避ける」などのデザイン指針、スタイリッシュでシンプルなロゴ、シンボルマークを含んだ表現が挙げられました。プロジェクトは2024年末より開始され、TOPページのデザイン提案から事業内容ページ、会社情報、沿革、福利厚生、採用情報など各コンテンツページの制作に順次着手し、2025年春にリリースを迎えました。
技術ノウハウ
構築には WordPress を基盤とし、デザイン制作とコーディングを分離した体制で進められました。デザイン段階ではXDでモックアップを作成し、確認後にHTML/CSS/JavaScriptによるフロントエンド実装を行いました。SEO対策としてtitle・description・hタグの整理、ALT属性やOGP設定を実施し、アクセシビリティ対応や表示速度改善もレポート化して反映しています。検証環境ではレスポンシブ表示(1920px~425px)やリンク切れチェックを行い、公開前にバリデートチェック・サーチコンソール登録・301リダイレクト設定を実施。リリース後は英語ページ制作やDNS切り替えを含む運用フェーズへ移行し、持続的な改善・拡張が進められています。
開発体制・構築手法など
  • 開発言語CMS:WordPress を採用。管理画面を活用しつつ、テーマのカスタマイズを中心に構築。

    テンプレート言語:PHP(WordPress テーマ開発の基盤)。

    マークアップ/スタイル:HTML5 / CSS3 によるページ構造とデザイン実装。

    スクリプト:JavaScript(必要に応じて jQuery を含む)で動的要素やUI改善を実装。

    設定ファイル:.htaccess によるリダイレクト設定、JSON形式による一部設定やデータ管理。

    外部連携:GA4タグ、Google Search Console、SEO設定(meta情報・OGP等)をWordPressプラグインやカスタムコードで対応。
  • DB使用DB:WordPress が標準で利用する MySQL / MariaDB を採用。

    用途:

    投稿・固定ページ・カテゴリ・タグなどのコンテンツ管理

    お知らせ・沿革・会社情報ページなどのカスタム投稿タイプやカスタムフィールド管理

    問い合わせフォームデータ(Contact Form 7 などプラグイン連携)

    管理方法:

    WordPress 管理画面を通じて日常的な運用を行い、直接SQL操作は行わない前提

    バックアップはサーバー側の自動バックアップ機能とエクスポートを組み合わせて実施

    拡張:

    SEO関連メタ情報やOGP、ALTタグの追加設定はWordPressのDBに保存される仕組み

    多言語対応(日本語/英語ページ)は同一DB上でページを追加し、URLで切り替え
  • 開発期間プロジェクト開始:2024年12月下旬

    WBSの策定、TOPページデザイン案の提出、ロゴ素材確認などの初期フェーズ。

    デザイン・実装フェーズ:2025年1月〜2月

    テスト環境構築、事業内容・会社情報・沿革ページなど主要コンテンツのデザイン・コーディングを進行。

    コーディング進捗に応じてSEO対策(title/description/hタグ)、ALTタグ、OGP設定、301リダイレクトなどを実施。

    検証・リリース準備フェーズ:2025年3月

    アクセシビリティ対応レポート、表示速度改善、バリデートチェック、レスポンシブ表示確認などを完了。

    3月28日時点でリリース準備を整え、PDFアップロードやメール設定を調整。

    正式リリース:2025年4月初旬

    noindex解除、サーチコンソール登録、DNS切替を経てリリース完了。

    追加対応(運用・拡張):2025年4月以降
  • 開発体制プロジェクト管理

    株式会社サンシーアが全体進行を担当。WBS策定、定例MTG(週1回)、リリース計画の調整を実施。

    クライアント(日本フィールド&マリンエンジニアリング株式会社、ボルテック)は要件確認・デザイン承認・素材提供を担う。

    デザインチーム

    Adobe XD によるデザイン案作成(TOPページ、事業内容、会社情報、沿革など)。

    ロゴ制作・カラーバリエーション提案、スマホ/PC両対応デザインの検討。

    フロントエンド/実装チーム

    WordPressをベースに、PHP・HTML・CSS・JavaScriptでテーマカスタマイズ。

    コーディング進捗に応じて、SEOタグ設定(title/description/hタグ)、ALT/OGP設定、301リダイレクト設定を実施。

    動画・画像差替え、スライダー仕様変更、レスポンシブ対応などを順次反映。

    検証チーム

    デザイン・コーディング担当と別メンバーをアサインし、ブラウザテスト・端末テストを実施

    「共有」日本フィールド&マリンエンジニアリング株式会社


    チェック項目:デザイン一致、原稿一致、レスポンシブ表示確認、リンク切れ、コードバリデーション。

    SEO/解析対応

    GA4タグ設置、Search Console登録、表示速度改善、アクセシビリティ対応レポートを作成。

    リリース後は英語ページ制作、アクセス解析・改善提案を継続。