Laugh Maker リフォーム会社サイト(職業訓練校：制作課題)

01.サイト概要

このサイトは、架空の地域密着型のリフォーム会社を想定し、「初めての人でも安心して相談できる、わかりやすい構成」 をテーマに制作した作品です。
一般家庭・高齢者世帯のどちらにも配慮し、TOP・施工事例・施工の流れ・FAQ・お問い合わせの5ページ構成で信頼性の高い企業サイトを実現しました。

02.デザインコンセプト（世界観）

本サイトのデザインは、「誠実さ・清潔感・読みやすさ」 を中心に組み立てています。

主なポイント

• ホワイト × ブルーを基調とした、清潔で安心感のある配色
• すっきりした余白と読みやすいフォントを採用
• 施工事例は「比較がしやすい」カードレイアウトで整理
• シンプルなナビゲーションで高齢者でも迷わない導線設計

03.制作の狙い（設計思想）

リフォームサイトは、ユーザーが 「不安を解消して問い合わせる」 までがゴール。
そのため Laugh Maker では、以下の3つに重点を置きました。

3-1. 安心感と信頼性が伝わる構成

• 「施工事例」を最上位メニューに配置し、品質の高さを一目で確認できる設計
• 料金ページでは “例示価格” を掲載し、費用の不透明感をなくす配慮

3-2. カラーパレットとタイポグラフィ

• 清潔感のある #3A8EE0（ライトブルー） をアクセントに見出しは太字でメリハリをつけ、段落は読みやすさ重視
• 全体的に 落ち着いたトーン で信頼度を演出

3-3. レイアウトと UI / UX

• 探している情報に 2クリック以内で到達できる導線
• 高齢者も読みやすいよう、行間と改行を広めに設定
• 各ページに共通の “問い合わせボタン” を配置し、迷わせない最短ルートで理解できる「施工の流れ」を図解で整理

3-4. 信頼感を意識した情報配置

• 「料金の目安」「工事の流れ」「よくある質問」を前面に出し初めての人でも不安を減らせる構成に
• お問い合わせボタンをページ内の複数箇所に設置し、スクロールのどの位置からでもアクションしやすいよう設計

04.制作プロセス（構築フロー）

この作品は、以下の手順で制作しました。

4-1. ページ構成の設計

• TOP：企業の強みと導線の整理
• 施工事例：カードレイアウトで視覚的にわかりやすく
• 施工の流れ：図解付きで理解しやすく
• FAQ：不安の解消が目的
• お問い合わせ：簡単に送れるフォーム

4-2. 画像・素材の統一

• 施工写真は色味を揃えて統一感を確保
• アイコンはシンプルな線画でサイト全体を整えた
• 統一した色調で「企業らしさ」を演出

4-3. HTML / CSS コーディング

• Flexbox を中心にレイアウトを実装
• ページ間の一貫性を持たせるために共通CSSを作成
• レスポンシブ対応でスマホでも見やすい構成
• ボタンやリンクはアクセシビリティに配慮したコントラストに調整

05.成果（ユーザー視点でのメリット）

• 最短2クリックで目的ページにたどり着ける直感的導線
• 高齢者にもやさしい読みやすいレイアウト
• 施工事例・工程説明・お客様の声が整い、企業の信頼性が上がる構成
• 問い合わせ導線が明確で、CV（問い合わせ）につながりやすい
• 初めてリフォームを検討する人でも安心できる内容に

06.使用ツール

• HTML / CSS（手書きコーディング）
• Sublime Text（コードエディター）
• Figma（ワイヤーフレーム・簡易デザインカンプ）
• Chrome DevTools（レスポンシブ調整・デバッグ）
• Excel（ターゲット設定シート / カスタマージャーニーマップ）
• Photoshop /Illustrator（写真トーン補正・画像作成など）
• W3C Validator（マークアップチェック）