Springfalfal

使用ツール：　Affinity

天然温泉真名井の湯　様サイトトップページデザインコンペ応募作品紹介です。

依頼詳細

• 【依頼概要】
• ・依頼工程：デザインのみ
• ・作業ボリューム：トップページのみ（指定のセクションのみの制作）
• ・モバイルファースト
• 【 提供素材 】
• ・ワイヤー、ラフ案：あり （添付ファイル）
• ・画像、文章等：あり（画像は添付ファイルの通りですが、必要に応じてAIなどで追加してください）
• 【 デザインイメージ 】
• ・ターゲット層：20〜40代
• ・雰囲気：シンプル、和風
• ・カラー：背景はベージュやオフホワイトをベースにするか、またはもう少しモダンなトーンで、ポイントとしてグリーンなど
• ・参考サイト：
• https://www.hoshino-area.jp/tombo-no-yu/
• https://kashiba-onsen.jp/　

制作の意図

「真名井（清き水が湧き出る場所）」という美しいコンセプトを踏まえ、訪れたお客様が非日常の癒やしを感じられ、
スムーズに来店につなげられるよう、細部まで意図を持って設計いたしました。
以下にデザインのポイントをご説明いたします。

━━━━━━━━━━━━━━━━━━━━━━━━━━
1. カラーとフォント（和モダンの表現）
━━━━━━━━━━━━━━━━━━━━━━━━━━
● フォント：
「游明朝体」「游教科書体」をベースに使用し、格式高い【和モダン】を表現しました。
また、CTAボタンなど読みやすさが求められる部分には、視認性の高い「Noto Sans」を採用しています。

● カラー：
清潔感と癒やしを与える「ベージュ」と「ホワイト」をベースに、豊かな自然や温泉を連想させる「緑」をアクセントに配置しました。
お客様のアクションを促すCTAボタン（予約等）には、パッと目を引く可視性の高い色を使用しています。

━━━━━━━━━━━━━━━━━━━━━━━━━━
2. ファーストビューと視線誘導の仕掛け
━━━━━━━━━━━━━━━━━━━━━━━━━━
● 魅力的なメインビジュアル（MV）：
シックな黒の背景に「夜」と「昼」の2つの表情豊かな画像を大胆に使用し、温泉の魅力をエモーショナルに伝えます。

● 湯けむりを表現したキャッチフレーズ：
縦書きのキャッチフレーズの背景に「ぼかし」を入れ、温泉の湯けむりを表現しました。
お湯によって心身が「解く」「解きほぐす」というイメージを五感に訴えかけます。

● スムーズな行動（CV）を促す導線：
画面右上から左下へとキャッチフレーズを配置し、人の視線の動き（Nの字の法則）を意識したレイアウトにしています。
視線が最後に辿り着く「Nの終着点」にCTAボタンを配置することで、自然な流れでCVを促します。

━━━━━━━━━━━━━━━━━━━━━━━━━━
3. 各セクションのこだわりとUX（使いやすさ）
━━━━━━━━━━━━━━━━━━━━━━━━━━
● ストーリー性のある背景移行：
メインビジュアルから次のセクションにかけて、グラデーションと「湯のロゴ」のあしらいを施しました。
高級感ある非日常の空間から、癒やしを感じるメインコンテンツへと自然に気持ちが移行する演出です。

● 水をイメージしたセクション繋ぎ：
「真名井の湯」様らしさを大切にし、セクションの境目には「水・水紋」をイメージした美しいカーブを用いています。

● スマホでの押しやすさ（UXへの配慮）：
各種ボタンはデザイン上「30px×30px」とコンパクトに見える部分もありますが、
スマートフォンの操作性（UX）を考慮し、背景の余白を含めて【最低50px以上のタッチスペース】をしっかりと確保しております。
誤操作を防ぎ、ストレスのない操作が可能です。

● 暖簾（のれん）をイメージしたフッター：
フッターのタイトル部分にはボーダー（線）のあしらいを使い、店名を「のれん」のように見せる粋なデザインに仕上げました。

━━━━━━━━━━━━━━━━━━━━━━━━━━