サービスアイディア基盤

目的¶

LINEデザイン言語に基づく高度に洗練されたUIデザインモックをHTML形式で作成

作業内容¶

1. 画面一覧・情報アーキテクチャ設計¶

画面構成確認¶

• トップページ (/)

  • ヒーローセクション（多言語対応）
  • 物件検索フォーム
  • 注目物件一覧
  • サービス特徴説明
  • 言語切替メニュー

• 物件検索ページ (/search)

  • 検索条件フィルター（エリア、家賃、間取り等）
  • 地図連動検索
  • 検索結果一覧（リスト・カード表示）
  • ソート・ページネーション
  • お気に入り機能

• 物件詳細ページ (/property/:id)

  • 物件画像ギャラリー
  • 物件基本情報（多言語対応）
  • 周辺施設情報・地図
  • 問い合わせフォーム
  • AI相談ボタン（LINE Bot連携）

共通UI要素¶

• ヘッダーナビゲーション
  • ロゴ、メニュー、言語切替、ログイン
• フッター
  • サイトマップ、利用規約、プライバシーポリシー
• サイドバー（検索ページ）
  • 検索フィルター、最近の検索履歴

2. LINEデザイン言語準拠設計¶

カラーパレット¶

• プライマリカラー

  --line-green: #00c300;        /* LINE メインカラー */
  --line-green-dark: #00a300;   /* ダークバリエーション */
  --line-green-light: #e8f5e8;  /* ライトバリエーション */
  

• セカンダリカラー

  --accent-blue: #0084ff;       /* 情報表示 */
  --accent-orange: #ff8c00;     /* 注意喚起 */
  --warning-red: #ff3b30;       /* エラー・警告 */
  --success-green: #34c759;     /* 成功・完了 */
  

• ニュートラルカラー

  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-500: #6b7280;
  --gray-900: #111827;
  

タイポグラフィ¶

• フォント設定

  --font-jp: 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Noto Sans JP', sans-serif;
  --font-en: 'Roboto', 'Arial', sans-serif;
  --font-display: 'LINE Seed JP', 'Hiragino Sans', sans-serif;
  

• 文字サイズ階層

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  

スペーシング・レイアウト¶

• LINEスペーシング

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  

3. トップページUIモック作成¶

ヒーローセクション¶

• メッセージ（多言語対応）

  • 日本語: 「外国人のための賃貸住宅マッチング」
  • 英語: "Rental Housing for International Residents"
  • 中国語: "为外国人提供的租房匹配服务"

• 検索フォーム

  <!-- 地域・予算・間取り選択 -->
  <form class="hero-search-form">
    <select name="prefecture">
      <option>群馬県</option>
      <option>茨城県</option>
      <option>栃木県</option>
      <option>千葉県</option>
    </select>
    <input type="range" name="rent" min="30000" max="80000">
    <select name="layout">
      <option>1K</option>
      <option>1DK</option>
      <option>2K</option>
    </select>
    <button type="submit">物件を探す</button>
  </form>
  

特徴セクション¶

• 3つの主要機能

  1. 多言語対応（8言語）
  2. AI相談サポート（LINE Bot）
  3. 地域密着型検索

• アイコン・イラスト

  • LINE Design Language準拠のアイコンセット
  • 外国人向けイラスト（多様性表現）

4. 物件検索ページUIモック作成¶

検索フィルター（サイドバー）¶

• 条件設定UI

  <aside class="search-filters">
    <!-- エリア選択 -->
    <section class="filter-section">
      <h3>エリア</h3>
      <div class="checkbox-group">
        <label><input type="checkbox"> 前橋市</label>
        <label><input type="checkbox"> 高崎市</label>
        <!-- ... -->
      </div>
    </section>
    
    <!-- 家賃範囲 -->
    <section class="filter-section">
      <h3>家賃</h3>
      <div class="range-slider">
        <input type="range" min="30000" max="80000">
        <div class="range-values">3万円 - 8万円</div>
      </div>
    </section>
  </aside>
  

検索結果表示¶

• 物件カードデザイン

  <article class="property-card">
    <div class="property-image">
      <img src="property.jpg" alt="物件写真">
      <button class="favorite-btn">♡</button>
    </div>
    <div class="property-info">
      <h3 class="property-title">築浅1Kアパート</h3>
      <p class="property-rent">¥55,000/月</p>
      <p class="property-location">📍 前橋駅徒歩5分</p>
      <div class="property-features">
        <span class="tag">Wi-Fi</span>
        <span class="tag">エアコン</span>
      </div>
    </div>
  </article>
  

地図連動表示¶

• 地図・リスト切替
  • タブ形式での表示切替
  • 地図上ピン表示
  • 物件ホバー効果

5. 物件詳細ページUIモック作成¶

画像ギャラリー¶

• メイン画像表示

  <section class="property-gallery">
    <div class="main-image">
      <img src="main.jpg" alt="メイン写真">
    </div>
    <div class="thumbnail-list">
      <img src="thumb1.jpg" alt="室内写真1">
      <img src="thumb2.jpg" alt="室内写真2">
      <!-- ... -->
    </div>
  </section>
  

物件情報セクション¶

• 基本情報テーブル

  <section class="property-details">
    <table class="info-table">
      <tr><td>家賃</td><td>¥55,000</td></tr>
      <tr><td>間取り</td><td>1K</td></tr>
      <tr><td>面積</td><td>25.5㎡</td></tr>
      <tr><td>最寄り駅</td><td>前橋駅徒歩5分</td></tr>
    </table>
  </section>
  

問い合わせセクション¶

• CTA（行動促進）ボタン

  <section class="contact-section">
    <button class="btn-primary">この物件に問い合わせ</button>
    <button class="btn-secondary">LINE でAI相談</button>
    <button class="btn-outline">お気に入りに追加</button>
  </section>
  

6. レスポンシブデザイン¶

ブレークポイント設定¶

• デバイス対応

  /* Mobile First */
  @media (min-width: 640px) { /* sm */ }
  @media (min-width: 768px) { /* md */ }  
  @media (min-width: 1024px) { /* lg */ }
  @media (min-width: 1280px) { /* xl */ }
  

• モバイル最適化

  • タッチ操作に適したボタンサイズ（44px以上）
  • スワイプ対応画像ギャラリー
  • ボトムナビゲーション

7. アニメーション・インタラクション¶

LINEらしいマイクロアニメーション¶

• ボタンホバー効果

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 195, 0, 0.3);
    transition: all 0.2s ease;
  }
  

• カード表示アニメーション

  • fadeIn, slideUp効果
  • ローディング時のスケルトンUI

8. アクセシビリティ対応¶

WCAG 2.1 AA準拠¶

• カラーコントラスト

  • テキストと背景のコントラスト比4.5:1以上
  • 色以外の情報伝達手段確保

• キーボードナビゲーション

  • Tab順序の論理的設定
  • フォーカス表示の明確化

• 多言語対応

  • lang属性設定
  • 文字方向対応（RTL将来対応）

成果物¶

• トップページHTMLモック
• 物件検索ページHTMLモック
• 物件詳細ページHTMLモック
• LINE Design Language準拠CSSフレームワーク
• レスポンシブ対応確認書
• アクセシビリティチェックリスト

技術要件¶

• HTML5セマンティック マークアップ
• CSS Grid & Flexbox レイアウト
• LINE Design Language完全準拠
• 多言語表示対応（8言語）
• モバイルファースト レスポンシブデザイン

前提条件¶

• チケット#590（設計確認）完了
• LINEデザインガイドライン理解

期間¶

2週間

優先度¶

高