brunest.studio

Designing Intent.
Coding Purpose.

WORKS
  • 自主制作

Category
コーポレートサイト
Role
Coding / WordPress / Design
Year
2026 / 07

Context

3ページのPCカンプから、
ひとつのサイトとして完成させる。

制作開始時に用意されていたのは、TOP・施工実績・会社情報のPCカンプ3ページのみでした。
まずは支給範囲の実装からスタートし、その後、サイト内に想定されていた事業内容・ご依頼の流れ・採用情報・お問い合わせなどへ制作範囲を拡張。
カンプのないページを単に既存パーツの組み合わせで補うのではなく、元カンプに共通するデザインの考え方を読み取りながら、それぞれのページに必要な情報が伝わる構成へ展開しました。

Target

建築の設計・施工を検討している
個人・法人

新築やリノベーションをはじめ、店舗・オフィス、外構など、
暮らしや事業に関わる空間づくりの相談先を探している方。

Overview

山田建築事務所サイトのPC・スマートフォン表示

限られたPCカンプから、サイト全体のデザインを読み解き、実装へ。
ご提供いただいたPCカンプ3ページをもとに、WordPressオリジナルテーマでコーポレートサイトを構築しました。
支給されたのはTOP・施工実績・会社情報のPCカンプのみ。カンプのない下層ページやフォーム、全ページのレスポンシブは、既存カンプから余白・配色・見出し・写真の扱いなどのデザインルールを読み取り、それぞれの情報に合わせて設計しています。
また、シンプルでモダンな建築サイトの静かな世界観を、レイアウトだけでなくAnimationの順番や間にもつなげました。

View Website

Project Information

Scope
ページ設計 / レスポンシブ設計 / コーディング / WordPress実装 / 公開作業
Stack
HTML / SCSS / JavaScript / PHP / WordPress
Duration
約18時間
Design
PCカンプ支給 / 下層・レスポンシブ設計
Type
コーポレートサイト

制作範囲について
本制作は、提供いただいたTOP・施工実績・会社情報のPCカンプをもとに制作した自主制作です。
カンプのない下層ページおよび全ページのレスポンシブは、支給デザインの意図を読み取りながら設計しています。
会社情報・登録番号等は架空の情報です。

Approach & Implementation

この制作で、
考えたこと。

案件ごとに異なる目的やデザイン、
運用条件に合わせて、
実装方法や情報の見せ方を考えています。

いつも大切にしていることは、
Processへ。

View Process
  • 01

    限られたカンプから、デザインルールを読み解く。

    支給されたPCカンプから、余白の取り方、ネイビーの帯による区切り、見出しの組み方、写真とテキストのバランスなど、サイトに共通するデザイン要素を整理しました。

    カンプのないページでは同じフォーマットを繰り返すのではなく、そのルールを土台にしながら、各ページの情報量や役割に適した構成を設計。ページごとの違いを持たせながらも、ひとつのサイトとして世界観が揃うことを意識しています。

    カンプがないから自由に、
    ではなく。
    すでにあるデザインの意図を手がかりに、同じ世界観を再現。

  • 02

    PCを縮めるのではなく、意図をSPへ翻訳する。

    SPカンプは全ページで用意されていなかったため、PCレイアウトをそのまま縮小するのではなく、画面幅が変わっても情報のまとまりや世界観が保たれるよう再設計しました。

    TOPの事業内容・施工実績では、不均等なサイズや配置を特徴として残しながら、SPで比率や情報の見え方が不自然にならない構成へ調整。CTAでも、フォームへの導線は中央配置、電話番号と営業時間などの関連情報は左揃えにするなど、PCでの配置に縛られず内容に応じて判断しています。

    残すのはレイアウトではなく、
    デザインの意図。
    小さな画面でも同じ空気感で伝わるよう、情報のまとまりから組み直す。

  • 03

    静かな世界観を、動きの「順番」と「間」まで。

    シンプルでモダンな建築サイトの印象を崩さないよう、派手な演出を加えるのではなく、要素が現れる順番と間を設計しました。

    TOPでは余白のある静けさを保ちながらも、間延びしないテンポを意識。下層ページでは短いFVのAnimation中に次のコンテンツが動き始めないよう発火タイミングを調整し、それぞれの演出が競合しない流れにしています。

    動きそのものを目立たせるのではなく、静かに動いていることがサイトの世界観につながるAnimationを目指しました。

    動かすことより、どう現れるか。
    静けさをつなぐ、順番と間。
    動きまでひとつの世界観として設計しました。

  • 04

    2つのフォームを、混ざらず迷わない設計へ。

    お問い合わせと採用応募には、それぞれ入力・確認・完了の3ステップフォームを実装しました。

    制作中、一方のフォームで入力した内容が、もう一方のフォームにも引き継がれる現象を確認。過去に複数フォームを実装した際の経験から入力保持の仕組みに着目し、フォームごとにCookieを分離することで、互いの入力状態が干渉しないよう修正しました。

    エラー発生時のスクロール・フォーカス制御なども加え、複数ステップでも現在の状態が分かりやすく、操作に迷いにくいフォームを目指しています。

Technical

使用した技術と、何のために使ったか。

  • WordPress / PHP

    共通化を前提としたオリジナルテーマ構築。固定ページテンプレートと共通パーツを組み合わせて構築。FV・パンくず・見出し・CTAなどをTemplate Parts化し、事業内容や施工実績などはPHP配列から出力することで、重複する記述を抑えています。

  • HTML / CSS / Accessibility

    意味のあるマークアップと、操作性を意識した実装。会社概要・募集要項などは dl / dt / dd、住所・電話番号は address、営業時間は time、ご依頼の流れは ol など、情報の意味に沿ったHTMLを選択。キーボード操作や :focus-visible、prefers-reduced-motion などにも対応しています。

  • JavaScript / IntersectionObserver

    世界観に合わせたAnimation制御。FV・スクロールAnimation・SPドロワーなどを実装。FV終了後にスクロール演出を開始するなど、複数のAnimationが競合しないよう表示順と発火タイミングを制御しています。

  • Contact Form 7 / Multi-Step Forms

    2種類の3ステップフォームを構築。お問い合わせ・採用応募それぞれに、入力・確認・完了の3ステップフォームを実装。フォームごとに入力状態を分離し、エラー時のスクロール・フォーカス制御なども加えています。

  • Responsive / Interaction

    デバイス特性まで考慮した操作設計。SPドロワーでは aria-expanded の状態管理、Escキーでの閉じる操作とトリガーへのフォーカス復帰に対応。hoverで表示していた情報はタッチデバイスでは常時表示するなど、入力方法の違いに合わせて挙動を調整しています。

掲載していない実装についても、必要に応じてご説明します。

Back to Works 一覧へ

Related Works

Closing

次の制作を、ご一緒に。

対応できる範囲や進め方は、Service ページにまとめています。
ご相談の内容が固まっていない段階でも、お気軽にお問い合わせください。

View Service Contact