- 実績
- 本案件は、日本フィールド&マリンエンジニアリング株式会社と株式会社ボルテックのホームページを新規制作する取り組みです。対象ユーザーは機械・プラントメーカー、造船所、船主・船舶管理会社、官庁(海上保安庁など)、さらに工業高専や商船高専といった教育機関を含みます。クライアントの要望としては「青と白を基調に、赤や黒は避ける」などのデザイン指針、スタイリッシュでシンプルなロゴ、シンボルマークを含んだ表現が挙げられました。プロジェクトは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登録、表示速度改善、アクセシビリティ対応レポートを作成。
リリース後は英語ページ制作、アクセス解析・改善提案を継続。