SOFTWARE OVERVIEW — v1.0.0-dev

初心者向け
SVG UI SIMULATOR

SVGで描いたスマートフォンのUIを操作しながら、
スマホの基本操作をステップバイステップで学べるインタラクティブな学習ツールです。

OVERVIEW

このソフトウェアとは

SVG UI Simulator は、スマートフォンの操作に不慣れな初心者が、実機を使わずに
タッチジェスチャーや基本操作を安全・視覚的に学べるWebベースのトレーニングツールです。

📱
SVGスマホシミュレーター
本物のスマートフォンを模したSVGグラフィックが中央に表示され、実際の操作に近いアニメーションで体験できます。
🎬
シナリオ式ステップ学習
「電源を入れる」「電話をかける」などの実際の使用場面に沿ったシナリオを、ステップごとに進めながら学習できます。
👆
ジェスチャーアニメーション
タップ・スワイプ・長押し・ピンチなど、各操作を表す指のアニメーションがSVG上でリアルタイムに再生されます。
🎯

対象ユーザー

スマートフォンを初めて使う方、高齢者向けスマホ講習の教材、デジタルデバイドを解消したい教育現場や地域支援活動での利用を想定しています。ブラウザだけで動作するため、環境構築不要です。

LAYOUT

画面構成

アプリは大きく3つのエリアに分かれており、左から「シナリオ選択」「スマホ表示」「情報パネル」となっています。

SVG UI SIMULATOR — v1.0.0-dev    初心者向けスマホ操作デモ
① 左サイドバー
シナリオ一覧
⚡ 電源を入れよう
📞 電話をかけよう
📜 スクロール操作
⚙️ 設定を変えよう

クリックすることで
シナリオを切り替え

② 中央キャンバス
STEP 1 / 4
🔒
SVG製スマホ
シミュレーター
◀
▶
▶ 再生
③ 右パネル
GESTURE GUIDE
👆 タップ（ハイライト中）
✋ 長押し
SVGコード
<rect fill="#0a0a14"/>
<text font-size="56">9:41</text>
TIPS / POINTS
01  電源ボタンは右側面にあります
02  振動したら離してOKです
SCENARIOS

収録シナリオ

4つのシナリオがあり、それぞれ複数のステップで構成されています。合計13ステップをカバーしています。

⚡

電源を入れよう

電源ボタン長押し → ロック画面表示 → 画面を上スワイプでロック解除 → ホーム画面表示まで、スマホの起動フローを学びます。

4 ステップ
📞

電話をかけよう

電話アプリのタップ → ダイヤルパッドで番号を入力 → 通話ボタンを押して発信、という一連の操作を学びます。

3 ステップ
📜

スクロール操作

上スワイプでスクロール → 下スワイプで戻る → ピンチアウトで写真をズーム、という代表的なジェスチャー操作を習得します。

3 ステップ
⚙️

設定を変えよう

設定アプリを開く → サウンド項目をタップ → スライダーを左右にドラッグして音量を調整するまでの手順を学びます。

3 ステップ
STEP FLOW

各シナリオは以下の情報構造で構成されています：

📋
シナリオ選択
左サイドバーから
クリック
→
📺
画面表示
SVGシーンが
切り替わる
→
👆
ジェスチャー再生
アニメーションで
操作を表示
→
📖
ガイド確認
右パネルで
詳細を確認
→
▶
次へ進む
ボタンまたは
自動再生
GESTURES

対応ジェスチャー

6種類のタッチジェスチャーをSVGアニメーションで視覚化します。各ステップで使用するジェスチャーはハイライト表示されます。

👆

タップ

1本指で軽く1回触れる操作。アイコンやボタンを押す際の基本ジェスチャー。指を押してすぐ離す。

最多使用
✋

長押し（ロングプレス）

1〜2秒指を離さずに押し続ける操作。電源ボタンの起動やアイコンのメニュー表示などに使用。

電源操作
⬆️

上スワイプ

指を画面の下から上に向かって素早く滑らせる操作。画面スクロールやロック解除に使用。

スクロール
⬇️

下スワイプ

指を画面の上から下に向かって滑らせる操作。スクロールした箇所を元に戻す際に使用。

スクロール
🤏

ピンチアウト（2本指ズーム）

親指と人差し指を画面上に置き、広げるように動かす操作。写真や地図の拡大に使用。

ズーム
↔️

横スワイプ（ドラッグ）

指を画面に触れたまま左右に動かし続ける操作。音量スライダーなどのUIコントロールに使用。

コントロール
TECHNOLOGY

技術仕様

完全なフロントエンドのみで動作するため、サーバー不要・インストール不要。HTMLファイルを開くだけで使えます。

◉  使用技術スタック
SVG HTML5 CSS3 Vanilla JS Noto Sans JP Space Mono Google Fonts CSS Animation CSS Grid SVG Animation
◉  動作環境
Chrome Firefox Safari Edge インストール不要 サーバー不要 単一HTMLファイル オフライン対応
CODE SAMPLE — ジェスチャーアニメーション（SVG）
renderGesture() — tap animation 
// タップジェスチャーをSVGで描画する関数
function renderGesture(gesture, { x, y }) {
  const g = document.getElementById('gestureOverlay');

  if (gesture === 'tap') {
    g.innerHTML = `
      <!-- 指の円 -->
      <circle cx="${x}" cy="${y}" r="14"
        fill="rgba(255,255,255,.7)" class="anim-tap"/>

      <!-- リップルエフェクト -->
      <circle cx="${x}" cy="${y}" r="0"
        fill="none" stroke="rgba(0,229,255,.6)"
        stroke-width="2" class="anim-ripple"/>
    `;
  }
}

// シナリオデータ構造の例
const step = {
  title: '電話アプリをタップ',
  gesture: 'tap',
  gesturePos: { x: 55, y: 455 },
  gestures: ['タップ'],
  sceneType: 'home',
  tips: ['アイコンは軽く1回触れるだけでOK']
};
ARCHITECTURE — 主要コンポーネント
◎  データ層（scenarios[]）

すべてのシナリオ・ステップ・ジェスチャー情報はJavaScriptのオブジェクト配列として定義されています。 UIコードと完全に分離されており、シナリオの追加・編集が容易です。

◎  描画層（scenes{}）

各画面（ロック画面・ホーム・ダイヤル等）はSVGを返す関数として実装。 sceneContent要素に動的に挿入されます。

◎  ジェスチャー層（renderGesture）

ジェスチャーごとにSVGアニメーション要素を動的生成。 CSSアニメーションとSVGの animateTransformを組み合わせています。

◎  制御層（render / controls）

前へ・次へ・リセット・自動再生（2.8秒間隔）のコントロールを備えます。 状態は currentScenarioIdx / currentStepIdx の2変数で管理されます。

HOW TO USE

使い方

ブラウザで開くだけですぐ使えます。操作はすべてマウスクリックのみで行えます。

01

HTMLファイルをブラウザで開く

svg-ui-simulator.html をダブルクリックするか、Chromeなどのブラウザにドラッグ＆ドロップして開きます。インターネット接続・インストールは不要です（フォント読み込みに接続が必要な場合があります）。

02

シナリオを選ぶ

左側のサイドバーにある「電源を入れよう」「電話をかけよう」などのシナリオ一覧から、学びたい内容をクリックして選択します。現在のシナリオはハイライト表示されます。

03

「▶ 再生」か「▶」ボタンで進める

中央下部の「▶ 再生」ボタンを押すと自動再生（2.8秒ごとに次のステップへ）、「▶」ボタンで手動で次のステップへ進みます。「◀」で前のステップに戻ることもできます。

04

右パネルで詳細を確認する

画面右側には、そのステップで使うジェスチャーのガイド、対応するSVGコードのサンプル、操作のポイント（Tips）が表示されます。ハイライトされているカードが今のステップで必要なジェスチャーです。

05

リセットして繰り返し練習する

「リセット」ボタンを押すと、選択中のシナリオの最初のステップに戻ります。何度でも繰り返し確認することができます。