CORPORATE SITE / WORDPRESS
事業の輪郭が伝わる
コーポレートサイト
「何ができる会社なのか」を1スクロールで伝えるトップページと、サービス単位で深掘りできる詳細ページ。WordPress上にテーマ非依存のHTML/CSSで構築しました。
SCREENSHOT
実際の画面
公開中のトップページ（ファーストビュー）です。画像またはリンクから実際のサイトをご覧いただけます。
サービスが複数あるほど、「違い」の説明が難しくなる。
EC開発、WordPress制作、Next.js × Firebase開発、システム受託開発。扱う領域が広いほど、訪問者は「自分の相談先かどうか」を判断できなくなります。トップページでは領域の全体像を、詳細ページでは各サービスの課題・提供内容・進め方を、同じ型で読めるように設計しました。
CHALLENGES
抱えていた課題
着手前に整理した、解くべき課題です。ここが決まらないまま作り始めると、あとから作り直すことになります。
何ができる会社なのか、一言で伝わらない
サービスが複数あり、違いを説明しきれない
更新のたびに制作会社へ依頼が必要になる
WHAT WE BUILT
つくったもの
課題に対して実際に設計・実装した内容です。
テーマに依存しないLP構造
Cocoonの既定レイアウトをCSSで打ち消し、1つのHTMLブロックとして完結するランディングページを構築。テーマやプラグインの更新で見た目が崩れにくい構造にしています。
サービス詳細ページの共通フォーマット
課題 → 提供内容 → 対応範囲 → 進め方 → FAQ という共通構成を用意。ページを追加しても情報の粒度と読み順が揃い、比較検討しやすくなります。
構造化データとFAQの実装
各サービスページに Service / FAQPage の JSON-LD を実装。提供者・提供地域・よくある質問を検索エンジンが解釈できる形で記述しています。
3段階のレスポンシブ設計
980px / 720px / 380px でレイアウトを組み替え、グリッドの段組みから余白・文字サイズまで作り分け。スマートフォンでも読み順が崩れません。
SCOPE & TECHNOLOGY
対応範囲と技術
TECHWordPressCocoon 子テーマHTML / CSSJSON-LD
PROCESS
進め方
この案件で実際にたどった流れです。
訴求と対象の整理
誰にどのサービスを届けるか、判断材料は何かを言語化します。
構成・ワイヤー設計
トップと詳細ページの型を決め、読み順と導線を先に固めます。
デザイン・実装
配色・タイポグラフィ・コンポーネントを定義し、そのまま実装します。
公開・改善
公開後は問い合わせの内容を見ながら、文言と導線を調整していきます。
OUTCOME
できるようになったこと
公開後の状態を、事実ベースで整理しています。
サービスの全体像と個別の詳細を、同じ画面設計のまま行き来できる導線に整理
ページ追加が既存の型に沿って行えるため、実績・サービスの拡張が容易
テーマ更新の影響を受けにくく、表示崩れの保守コストを抑制