建設・設備関連 / 企業サイトリニューアル

制作会社様からのご依頼で、建設・設備関連の企業サイトリニューアルに伴うコーディングとWordPress実装を担当しました。採用情報ページなど、他ページとは構成やトーンが異なる下層も含めて対応しました。

本記事では、実装時に特にこだわった点や工夫した点をご紹介します。

ワイヤーフレームを元にした実装

トップページと主要な下層ページ（一部のサービスページ・会社案内・採用情報など）のみデザインカンプが支給される要件でした。それ以外の下層ページはワイヤーフレームをもとに、デザインのトンマナに合わせて実装側でページを組み立てています。

見出し（複数種類）・共通ボタン・テーブル・定型セクションなどをモジュール化し、トンマナを揃えたまま下層ページを効率よく増やせるようにしました。

また、スマートフォン向けのデザインカンプはトップページのみでした。フォントサイズ・余白・レイアウトの切り替えルールを整理し、下層ページのレスポンシブ実装に反映しています。PCでは横並びにしていたブロックは、スマートフォンでは主に縦並びとし、自然な読み順になるよう調整しました。

ホバー時の挙動を提案

ボタンやリンクなど、仕様書に定義のなかったホバー時の動きは、実装側から案を出して反映しました。いずれも派手な演出ではなく、「次に何が起こるか」を操作前にイメージしやすくすることを意図しています。

共通ボタン

アイコンの色が反転し、背景が拡大します。

ヘッダーのドロップダウンメニュー

サムネイル画像が拡大し、テキストにアンダーラインが伸びます。

フッターメニュー

テキストにアンダーラインが伸びます。

ほかにも、ヘッダー内のリンク・カードリンク・アコーディオンのボタンなどもホバー時の動きを提案・実装しました。

また、ボタンやリンクは、クリック範囲の最適化にも留意しました。タップしづらいほど小さくならないよう、誤タップを招きやすいほど大きくもならないよう、操作しやすい領域を意識してマークアップしました。

キーボード操作への配慮

明確なアクセシビリティ要件はありませんでしたが、タブキーでサイト全体をたどれるよう、主要なUIをキーボード操作できる形にしています。以下は、ドロップダウンメニューをキーボードで操作している様子です。

次の操作を可能にしました。

• スペースキーまたはEnterキーでメニューを開閉
• Tabキーでメニュー内のリンクへフォーカスを移動
• Escキーでメニューを閉じる

ハンバーガーメニューやアコーディオンについても、同様にキーボードで操作できるよう対応しました。

ブロックパターンを活用した記事装飾

コラム記事では、本文を定型のパーツで装飾したいという要望がありました。カスタムブロックを一から作るよりコストを抑えられるため、WordPressのブロックパターンで装飾を実装しました。

以下は、枠線と背景色で装飾した「ボックスブロック」パターンの、管理画面とフロント画面の例です。

他にも「関連記事ブロック」「ポイントブロック」などのパターンを実装しました。表組みはプラグイン「Flexible Table Block」を活用し、リッチな装飾ができるようにしています。

最後に

デザインカンプの支給範囲が限られている案件でも、モジュール設計とレスポンシブのルール整理により、下層ページを効率よく揃えられるようにしました。

あわせて、ホバーやキーボード操作、WordPress側の編集しやすさを、実装者側から提案しながら進めた事例です。同様の制約があるリニューアル案件でも、ご相談いただければ幸いです。