brunest.studio

Designing Intent.
Coding Purpose.

WORKS
  • 制作実績

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

Context

企業の想いを整理し、
信頼につながる形へ。

見込み顧客や取引先に事業内容や企業理念をわかりやすく伝え、企業としての信頼感と安心感を届けるためのコーポレートサイトを制作しました。

Webディレクターの方にディレクションをご担当いただき、提供された事業情報を整理し、サイト構成・掲載テキストの検討からPC・SPデザイン、実装、CMS構築までを担当しました。

サイトに求められていたこと

事業内容や企業理念をわかりやすく伝え、見込み顧客・取引先に信頼感と安心感を持ってもらえること。

ご要望である白とグリーンを基調に、清潔感と透明感のあるデザインを通して、企業の誠実な姿勢が伝わるサイトを目指しました。

サイトで目指す行動

企業への理解を深め、お問い合わせにつなげること。

事業内容や企業理念、会社情報を通して、企業としての信頼感と安心感を醸成。見込み顧客や取引先が相談・取引を検討するための情報を提示し、最終的にお問い合わせへつなげることを目指しました。

Target

事業内容や企業の姿勢を知りたい、
見込み顧客・取引先。

取引や相談を検討するうえで、企業がどのような事業を行い、何を大切にしているのかを知りたい人。

まず事業内容を把握し、その背景にある理念や企業としての姿勢を確認することで、安心して次のアクションを検討できるような情報の流れを意識しました。

何をしている会社なのか。
その先にある想いまで、
自然に伝わる順番を。

Overview

Minori コーポレートサイトのPC・スマートフォン表示イメージ

企業の事業内容や想いを伝えるコーポレートサイトを制作しました。
Webディレクターの方にディレクションをご担当いただき、情報整理からデザイン・実装・CMS構築までを担当。企業としての信頼感を大切にしながら、公開後の更新や運用まで見据えたサイトを目指しました。

View Website

Project Information

Scope
デザイン / コーディング / WordPress構築 / アニメーション実装（一部）
Stack
HTML / SCSS / JavaScript / PHP / WordPress
Duration
3週間
Design
PC・SPデザイン制作（Figma） / 最終調整はディレクション担当者
Focus
情報設計からデザイン・実装・CMS構築まで。更新後の見た目と将来の運用を考慮した設計。
Type
コーポレートサイト
CMS
WordPress / Meta Box / ブロックエディタ
Publish
デザイン・アニメーションの最終調整および公開作業はディレクション担当者が対応

Approach & Implementation

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

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

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

View Process
  • 01 Information Architecture

    何をしている会社か。
    まず、そこから伝える。

    提供された事業情報やヒアリング内容をもとに、各ページの構成と掲載テキストを整理しました。

    TOPページでは、企業理念よりも先に事業内容を配置。まず「何をしている会社なのか」を知ってもらい、その背景にある想いや企業の姿勢へと理解が深まる流れを設計しました。

    TOPページで伝える情報と下層ページで詳しく紹介する内容を整理し、サイト全体で自然につながる構成を目指しました。

    伝える内容だけでなく、
    伝える順番にも、
    理由を持たせる。

  • 02 Visual Design

    企業の想いを、
    色と余白に落とし込む。

    「挑戦を、実りに変える。」という企業の想いを、視覚的にも伝えられるデザインを目指しました。

    先方から要望のあった白とグリーンを基調に、ヒアリング内容や参考サイトを踏まえて色味を検討。
    企業としての誠実さと透明感が伝わるグリーンに、稲穂の実りをイメージした落ち着いたイエローを組み合わせました。

    アクセントは意味のある箇所に絞り、余白やタイポグラフィ、装飾のルールを全ページで統一しています。

    挑戦の先にある、
    豊かな実り。

    その想いを、
    ひとさじの色に。

  • 03 CMS Design

    更新の自由度と、
    デザインを守る仕組み。

    公開後の更新も考慮し、コンテンツの性質に合わせて編集方法を使い分けました。

    デザイン性のある固定ページは、文章や項目が変わってもレイアウトを保てる構造に。一方、お知らせなど自由な構成が必要なページでは、画像や文章を柔軟に組み合わせられる編集方法を採用しました。

    更新後の表示や将来の変更にも対応しやすいよう、見た目の再現性と運用のしやすさを両立する設計を心がけています。

    完成した、その先も
    変えやすく、
    崩れにくい設計を。

Technical

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

  • HTML / SCSS / JavaScript

    Figmaで制作したPC・SPデザインをもとに、各ページを実装。中間幅での表示や余白、テキストの折り返しも調整し、画面サイズに応じた自然なレイアウトを整えました。

  • WordPress / PHP

    オリジナルテーマを構築し、固定ページ・お知らせ・お問い合わせなどを実装。ページの役割に合わせてテンプレートを整理し、サイト全体を一貫した構造で管理できるようにしました。

  • Meta Box / Custom Fields

    デザイン性のある固定ページに編集項目を設け、文章や画像の差し替えに対応。空欄時の表示制御や装飾の追従も調整し、更新後もレイアウトを保てるようにしました。

  • Gutenberg / Editor Style

    お知らせやプライバシーポリシーにはブロックエディタを採用。公開画面に近いスタイルを編集画面にも反映し、更新する人が仕上がりをイメージしながら編集できるようにしました。

  • Contact Form 7 / JavaScript

    入力・確認・完了の流れを持つお問い合わせフォームを構築。選択内容に応じた入力欄の表示やバリデーションを調整し、迷わず操作できるフォームを目指しました。

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

Back to Works 一覧へ

Related Works

Closing

次の制作を、ご一緒に。

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

View Service Contact