Webサイトデザイン・WordPress実装/制作期間:2〜3週間

ビルメン×デザイン×スマートハウス。 多角経営企業のブランドを1サイトで表現。

柴犬の魅力や特徴を紹介する情報サイトとして制作しました。
柴犬の基本情報をまとめたガイドコンテンツと日常ストーリーを組み合わせ、
読者同士が交流できるコミュニティ要素も取り入れたサイト構成にしています。

多角経営企業の事業内容を整理し、分かりやすく伝える

企業の信頼感・専門性をWeb上で表現する

お問い合わせにつながる導線設計

Webデザイン設計

情報構造(サイト構成)の設計

WordPress構築・実装

WordPress

HTML/CSS

PHP

ページ一覧

課題と解決(Before / After)

課題

4つの異なる事業(ファシリティ・ビルメン・内装・スマートハウス)を1サイトで統一的に表現する必要があった

既存の静的HTMLをWordPress(Lightning子テーマ)に移植する技術的難易度が高かった

Lightning親テーマのCSSとの干渉を解決する必要があった

解決アプローチ

ネイビーブルーを基調とした統一カラーパレットで「信頼・プロフェッショナル」を表現

WordPressの既存テーマと新しいデザインが「見た目の設定」で競合してしまう問題を、設計の書き方を工夫することで根本から解決。どの画面サイズでも意図したレイアウトが崩れずに表示されるよう実装しました。

全8ページをWordPress PHPテンプレートとして個別実装

こだわりポイント

①ヒーローカルーセル

3枚のスライドが自動切替・ケンバーンズエフェクト付き。テキストはアニメーションで登場。

インタラクティブな一元管理HUB図

柴犬の特徴や魅力を紹介する情報コンテンツを中心にサイト構成を設計しました。
柴犬の基本情報をまとめたガイドページと、日常のストーリーを発信する記事コンテンツを組み合わせた構成にしています。

また、読者同士が交流できるコミュニティ要素も取り入れ、柴犬に興味のある人がつながれるサイトを目指しました。

③ 全ページレスポンシブ対応

PC・タブレット・スマートフォンの3段階でレイアウトが最適化。スマートハウスページは横スクロール対応。

デザイン

長文の記事でも読みやすいよう、余白を意識したシンプルなレイアウトを採用しています。
落ち着いた印象のデザインで、読み物として楽しめるサイトを目指しました。

専門性の高いサービスでも、伝わるホームページにしたい方へ

はじめての事業立ち上げや、
「どう見せればいいか分からない」という段階でも大丈夫です。

構成・文章・デザインを一緒に整理しながら、