【架空案件】ペットサロン サービスサイト制作

➀制作の流れ

• ターゲット設計・競合リサーチ
• ワイヤーフレーム作成
• デザイン制作（Figma）
• HTML / CSS コーディング
• レスポンシブ調整・導線改善

➁カラー

• ベース：アイボリーベージュ / グレージュ
• メイン：テラコッタブラウン / オリーブグリーン
• アクセント：ハニーゴールド / ホワイト

“安心感・温もり・上質感”を意識したナチュラル配色。

➂タイポグラフィ

• 明朝体を使用し、高級感とやさしい雰囲気を演出
• 可読性を重視し、本文はシンプルなフォントで統一
• ジャンプ率を意識し、視線誘導しやすい設計に調整

④情報設計

• ファーストビューで世界観とサービス価値を訴求
• カード型レイアウトで情報を整理
• CTAを適切な位置に配置し、自然な導線を設計
• 写真を活かし、感情に訴求できる構成に調整

➄工夫したポイント

• 写真を大きく使用し、ペットとの温かな暮らしを表現
• ナチュラルカラーで安心感のあるブランドイメージを構築
• 余白を広く取り、読みやすさと高級感を両立
• スマホ閲覧時でもストレスのないレスポンシブ設計
• CTAボタンの配色・配置を工夫し、行動喚起を強化