無料体験レッスン

公式LINEへ移動 → 約1分で予約・体験後の入会は自由

LINE 無料体験を申し込む

ミミのアバターシステム

ミミは、Jumpstart Englishのサイトとアプリにいる、ただ一人のキャラクターです。表情・耳・ポーズ・衣装と、場面ごとの使い分けのルールを紹介します。

MEET MIMI

はじめまして、ミミです

名前は、いちばんの特徴の長い耳から。英語の上達は、よく聞く耳から始まります。

  • 名前

    ミミ（Mimi）。日本語でも英語でも呼びやすく、小さなお子さまにも覚えやすい名前です。

  • 役割

    学ぶ人を励まし、道案内をする役。メッセージを支える脇役で、主役ではありません。

  • 性格

    明るく前向きで、ときどきいたずら好き。ゲームや404のページでは、ちょっぴり張り切ります。

ミミメーカーで、ミミの画像をつくる

PRINCIPLES

5つのルール

どの画面でも同じミミに見えるための、5つの決まり。

  • 01

    1画面に1匹

    2匹を並べたり、模様のようにくり返したりしません。

  • 02

    場面で表情を選ぶ

    下の「場面と表情」の表から選びます。表にない場面は「にっこり」と「待機」。

  • 03

    文章だけで伝わること

    ミミを消しても意味が通るように書きます。ミミの上に文字・ボタン・バッジを重ねません。

  • 04

    学ぶ人を責めない

    不正解には「考え中」。「しょんぼり」「泣き」「むっ」は使いません。

  • 05

    ここにあるものだけ

    表情・耳・ポーズ・衣装はこのページのものだけ。新しいものはデザイナーに依頼し、その場で描き足しません。

MOMENTS

場面と表情

左の場面を探し、右の表情・ポーズを使います。

場面ごとに使う表情とポーズ
場面表情 · ポーズ
ようこそ・はじめての案内にっこり · 手をふる
正解にっこり · ばんざい
連続記録・レベルアップ・合格うっとり · ばんざい · 卒業
ヒント・コツウインク · 指さし
不正解考え中（もう一度うながす）
読み込み・処理中考える · ジャンプ
空の状態眠そう · 待機
404・ページが見つからないくらくら · 迷子（404ページはアニメーション）
サーバー・アプリのエラーこまった
休憩のすすめ・操作がないときすやすや · うたた寝
オフライン・セッション切れしょんぼり
ゲーム・チャレンジ・時間制限表情「たくらみ」 · ポーズ「たくらみ中」「ためる」「エネルギー波」
使い方に制限があるもの
  • 遊び専用

    ゲーム・チャレンジ・404のアニメーションだけ

    ニヤリ・こっそり・たくらみ・わるい笑み、ポーズのたくらみ中・くすくす・ぬき足・ためる・エネルギー波など。学ぶ人の解答へのフィードバックには使いません。

  • システム専用

    アプリ側の問題だけ

    しょんぼり・泣き・むっ。オフライン・セッション切れ・メンテナンスなどに、控えめに使います。

SPECS

大きさ・背景・動き

どの画面に置くときも同じ決まりです。

大きさ — 使い方ごとの最小・最大（これより小さいときはロゴかアイコンを使う）
顔 32〜48px
頭 48〜120px
全身 120px以上

  • 作り方

    • かならず部品（体・頭・顔・耳・腕・衣装）から組み立てる。rabbit() を使えば自動でそうなる
    • 拡大・縮小は縦横同じ比率で。伸ばす・つぶす・傾ける・顔の途中で切ることはしない
    • 体・線・顔の色は変えない。色が変わるのは衣装だけ
    • 顔と耳は1組ずつ。別の表情の目と口を組み合わせない
    • 頭の傾きは±8°まで。腕は肩を軸に回す

  • 置き方

    • まわりに、ミミの高さの1/8以上の余白をとる
    • 地面の影は全身のときだけ
    • ミミの背景は、クリーム（#FCF0CF）・カード（#FFF8E6）・白・紺（#1E2340）か、サイトのクリーム色
    • 写真・グラデーション・にぎやかな模様の上には置かない

  • 動き

    • 待機：2〜3秒で約6px上下する（'idle' => true）。まばたきは4〜6秒ごと
    • 表情の切り替え：顔だけを150msでクロスフェード
    • 登場：1回のジャンプかフェード、400ms未満。回転やはずみのくり返しはしない
    • ためる・エネルギー波などの演出はゲームと404だけ
    • 「視差効果を減らす」設定では止まった絵を出す

  • 紺の背景

    白い体がそのまま映えるので、色は変えずに置けます。

ミミの固定の色

ミミだけの色です。衣装のほかは変えません。サイトの文字や背景には使いません（サイトの色はデザインシステム）。

  • 体

    毛の塗り

    #FEFEFD

  • 線

    体と部品の輪郭

    #DCE0EA

  • インク

    目・口・まゆ

    #1F294A

  • ほお

    両ほおの赤み

    #FED0D0

  • 耳の内側

    両耳

    #FEC6C7

  • アクセントの青

    涙・きらめき・演出

    #73C0F0

  • ハート

    うっとりの目

    #F2738C

  • 舌

    開いた口

    #F58F9C
サイトへの組み込み（開発者向け）

サイトのページにミミを置くときは、共通の部品を1行で呼び出します。必要なスタイルと部品の読み込みは、はじめの1回だけ自動で出力されます。

rabbit.php の使い方PHP
<?php require_once __DIR__ . '/partials/rabbit.php'; ?>

<?php /* 飾りとして置く（読み上げない） */ ?>
<?= rabbit('pose', 'wave', ['height' => 200]) ?>

<?php /* 意味を持たせるとき（名前を読み上げる） */ ?>
<?= rabbit('expression', 'thinking', ['height' => 40, 'label' => '考え中のミミ']) ?>

<?php /* 待機の上下動をつける */ ?>
<?= rabbit('pose', 'idle', ['height' => 160, 'idle' => true]) ?>
EXPRESSIONS

24種類の表情

顔だけの切り抜き。トースト・チャット・リストなど、文章の横に小さく置くときに使います（32〜48px）。

  • 眠そう

    sleepy

    標準の待機顔。空の状態・静かな画面

  • にっこり

    happy

    ようこそ・正解・前向きなフィードバック全般

  • びっくり

    surprised

    新しいコンテンツの解放・思いがけないごほうび

  • うっとり

    love

    連続記録・お気に入り・レベルアップ

  • ウインク

    wink

    ヒント・コツ・近道

  • ニカッ

    grin

    大きな達成・目標クリア

  • ニヤリ

    smirk

    ゲーム中のかけ合い

    遊び専用

  • こっそり

    sneaky

    隠しアイテム・サプライズラウンド

    遊び専用

  • たくらみ

    scheming

    チャレンジの導入

    遊び専用

  • わるい笑み

    evil-grin

    ボスラウンド。フィードバックには使わない

    遊び専用

  • 照れ

    shy

    お礼のメッセージ・はじめての操作

  • こまった

    confused

    アプリのエラー・入力が読み取れないとき

  • 考え中

    thinking

    不正解（もう一度うながす）・処理中

  • しょんぼり

    sad

    オフライン・同期の失敗

    システム専用

  • 泣き

    crying

    データの消失・解約。まれに

    システム専用

  • むっ

    grumpy

    メンテナンス・停止中

    システム専用

  • くらくら

    dizzy

    404・行き止まり

  • すやすや

    asleep

    休憩のすすめ・しばらく操作がないとき

  • レーザーアイ

    laser-eyes

    404のアニメーション・ゲーム演出

    遊び専用

  • 気合い

    pumped

    404のアニメーション・ゲーム演出

    遊び専用

  • 念力

    psychic

    404のアニメーション・ゲーム演出

    遊び専用

  • ねらう

    aiming

    404のアニメーション・ゲーム演出

    遊び専用

  • こおりの息

    freeze-breath

    404のアニメーション・ゲーム演出

    遊び専用

  • キラキラ

    starry

    404のアニメーション・ゲーム演出

    遊び専用
EARS

12種類の耳

耳つきの頭。プロフィール・チャット・通知のアバターに使います（48〜120px）。

  • クラシック

    classic

    すべてのポーズとアバターの標準

  • 両耳ピン

    both-up

    注目。お知らせ・アナウンス

  • 聞き耳

    perked

    リスニング・スピーキング練習

  • うしろ流し

    swept-back

    スピード。時間制限のラウンド・速い上達

  • ひこうき耳

    airplane

    いたずら。遊びの表情と組み合わせる

    遊び専用

  • たれ耳

    droopy

    疲れ・がっかり。しょんぼり・すやすやと組み合わせる

  • アンテナ

    antenna

    404のアニメーション・ゲーム演出

    遊び専用

  • 流線形

    streamline

    404のアニメーション・ゲーム演出

    遊び専用

  • ひろげ耳

    spread

    404のアニメーション・ゲーム演出

    遊び専用

  • ふりかぶり

    wind-up

    404のアニメーション・ゲーム演出

    遊び専用

  • 吹かれ耳

    blown-back

    404のアニメーション・ゲーム演出

    遊び専用

  • ぴょこん

    perky

    404のアニメーション・ゲーム演出

    遊び専用
POSES

19種類のポーズ

全身。404・空の状態・結果・はじめての案内に使います（高さ120px以上）。

  • 待機

    idle

    標準の全身。空の状態

  • 手をふる

    wave

    はじめての案内・あいさつ・ログイン

  • ジャンプ

    hop

    読み込み・画面の切り替え

  • ばんざい

    cheer

    結果・合格・連続記録

  • 考える

    think

    処理中・小テストのふり返り

  • 迷子

    lost

    404・行き止まり

  • 指さし

    point

    ヒントやボタンに注目させる。内容の方を指す

  • うたた寝

    doze

    休憩のすすめ

  • たくらみ中

    plotting

    チャレンジの導入

    遊び専用

  • くすくす

    snicker

    ゲーム中のかけ合い

    遊び専用

  • ぬき足

    tiptoe

    隠し・ひみつのコンテンツ

    遊び専用

  • ためる

    charge

    ゲームのパワーアップ

    遊び専用

  • エネルギー波

    energy-wave

    ボスラウンド・必殺技

    遊び専用

  • レーザーアイ

    laser-eyes

    404のアニメーション・ゲーム演出

    遊び専用

  • ドスン

    ground-pound

    404のアニメーション・ゲーム演出

    遊び専用

  • 念力

    telekinesis

    404のアニメーション・ゲーム演出

    遊び専用

  • にんじんブーメラン

    boomerang

    404のアニメーション・ゲーム演出

    遊び専用

  • こおりの息

    freeze-breath

    404のアニメーション・ゲーム演出

    遊び専用

  • 魔法のステッキ

    magic-wand

    404のアニメーション・ゲーム演出

    遊び専用
FASHION

6種類の衣装

全身に衣装を重ねたもの。色が変わってよいのは衣装だけです。

  • ナイトキャップ

    nightcap

    ナイトモード・おやすみのリマインダー

  • パジャマ

    pajamas

    夜の学習リマインダー

  • 卒業

    graduate

    合格・修了証・級の修了

  • 冬

    winter

    12月〜2月のみ

    季節限定

  • 夏

    summer

    6月〜8月のみ

    季節限定

  • リボン

    ribbon

    お祝い・プレゼント・誕生日

BRAND

ブランドの関連ページ

Jumpstart Englishのブランドを形づくる、ほかのページもご覧ください。

ブランドセンター

ロゴと使い方、代表の写真、表記のルール、紹介文やLLM向けテキスト、広告バナー、各ページの原稿をまとめた素材集です。

ページを見る

デザインシステム

色・文字・余白・レイアウト・部品のルール。サイトのすべてのページが、この1つのシステムでできています。

ページを見る

ミミメーカー

ポーズ・衣装・表情・耳を選んで、背景が透明なミミの画像をつくるツール。PNGとSVGで保存できます。

ページを見る

学習アプリの紹介

生徒と保護者が使う機能の説明と、パソコン・スマホの画面の画像。記事でアプリを紹介するときに。

ページを見る

お子さまの英語力、
今日から伸ばしませんか？

半年で84%、1年で98%のお子さまが英検®合格。
まずは45分の無料体験で、現在の実力を診断し、お子さま専用のカリキュラム案をご提案します。

LINE 無料体験レッスンを申し込む

公式LINEから約1分で予約完了

  • 体験後の入会は自由
  • 無理な勧誘なし
  • 当日キャンセルもLINEで連絡OK

※ 合格率は当塾受講生を対象とした自社調べによるものです。級・開始時の習熟度や学習状況により結果は異なり、合格を保証するものではありません。

または、無料体験レッスンの内容を詳しく見る