
サイト概要
兵庫県姫路市で80年以上、大型船舶の係留チエンや耐震用チエンなどを製造されているメーカーのコーポレートサイトです。既存サイトの情報を整理し、会社の強み、製品・実績、採用情報が伝わる構成に作り直しました。デザインは外部デザイナーと連携し、設計から公開、公開後の保守まで進行を含めて担当しています。
実装で工夫した点
ViteとWordPressを組み合わせた開発環境
フロントエンドのビルドにViteを使い、開発サーバーが起動しているかをテーマ側で自動判定して、開発時はホットリロード、本番はハッシュ付きファイルの読み込みに切り替わる仕組みにしています。CSSやJSの変更が確実にキャッシュへ反映されるため、公開後の更新も安全です。
実績表を自分たちで更新できるカスタムブロック
施工実績表や納入実績表など、種類の異なる表をカスタムブロックとして実装しました。管理画面で表の種類を選ぶと列構成が切り替わるため、複雑な実績表でもご担当者が管理画面から安全に追加・更新できます。PDFカタログを一覧表示するブロックも用意しました。
アクセシブルなドロワーメニュー
モバイルのメニューはネイティブのdialog要素で実装し、フォーカストラップ、Escキーで閉じる操作、aria属性の連動、閉じたあとのフォーカスの戻し先まで作り込んでいます。
セキュリティと運用への配慮
セキュリティ関連のレスポンスヘッダの付与、WordPressのバージョン情報など不要な出力の削除、ユーザー名の列挙をふさぐリダイレクトを実装しています。管理画面も使わないメニューを整理し、ご担当者が迷わず更新できる状態にしました。
表示パフォーマンスとモバイルの見やすさ
画像はWebP変換とビルド時圧縮の2段構えで、すべての画像に幅・高さの指定と遅延読み込みを入れてレイアウトのずれを防いでいます。横に長い実績表には「横にスクロールできる」ことを示すヒントを表示し、スマホでも読みやすくしています。
使用技術
- WordPress
- Vite
- Sass(FLOCSS)
- GSAP
- Secure Custom Fields