App Storeで配信中

UI/UXデザインの用語を、 あそんで覚える。

UIパーツから、資格の用語まで

UIパーツの名前と使いどころから、HCD基礎検定・UX検定(基礎)の範囲の用語まで。4つのミニゲームで、すきま時間に少しずつ身につけるiPhoneアプリです。

  • 無料(広告あり)
  • アカウント登録なし
  • iOS 17以降
  • 日本語・English

ボタン、トグル、スライダー、スナックバーなど、100種類のUIパーツと、HCD基礎検定・UX検定(基礎)の範囲の用語を収録しています。

UIパーツ
100種類
パーツの出典
HIG+M3
資格の用語
2つの試験
ミニゲーム
4本

ためしに1問

この説明、どのパーツ?

アプリのカルタ(UIパーツ編)と同じ遊び方です。読み札の説明に合うパーツを選んでください。

ミニゲーム

すきま時間に、1ゲーム。

カルタと神経衰弱は、UIパーツでも資格の用語でも遊べます。仕分けと並べ替えは、資格の用語で遊ぶゲームです。

カルタ

読み札からカードを取る

  • 1〜2人
  • CPU・オンライン
  • UIパーツ・資格の用語
  1. 読み札が出るUIパーツや用語の説明文が表示されます。読み上げもします。
  2. 取り札をタップ説明に合うカードを、制限時間内に選びます。
  3. 早く、正確に正解で加点、まちがえると減点。むずかしさは3段階です。

神経衰弱

対応するカードの組を見つける

  • 1〜2人
  • ひとり・オンライン
  • UIパーツ・資格の用語
  1. 色ちがいを2枚めくる緑と赤を1枚ずつめくります。組になるのは色がちがうカードどうしです。
  2. 組をそろえる対応している組なら、そのまま残ります。
  3. 少ない回数でめくった回数と時間でスコアが決まります。

仕分け

用語を分野の箱に分ける

  • 1人
  • 資格の用語
  • 1ゲーム12枚
  1. カードを持つ用語のカードを長押しして持ち上げます。タップで選んでもかまいません。
  2. 箱に入れるその用語が入る分野の箱へ入れます。箱の「?」から分野の説明も見られます。
  3. 全部分けたら終わりまちがえたら正しい箱を教えます。

並べ替え

手順を正しい順にならべる

  • 1人
  • 資格の用語
  • 解説つき
  1. 手順が出るばらばらに並んだ手順の段階が出ます。
  2. ドラッグで並べ替え上から正しい順になるように動かします。
  3. 回答して解説を読む答え合わせのあと、正しい順と解説が出ます。

資格の勉強

HCD・UXの資格の用語も、ゲームで覚える。

「資格勉強」タブから、HCD基礎検定・UX検定(基礎)の範囲の用語を、4つのミニゲームで覚えられます。

HCD基礎検定のトップ画面。「受験日を入れる」、この資格で身につくこと、よく間違える単語の数、遊べるゲームの一覧が並ぶ
  • HCD基礎検定

    利用者の立場から考える「人間中心設計」の考え方や、利用者を理解して要求を整理する手法など。

  • UX検定(基礎)

    UX(ユーザー体験)の基本の用語と考え方や、ユーザー理解からデザイン・評価までの流れなど。

  • 事例や考え方を問う問題も、1問ごとに解説つき
  • 間違えた用語は「よく間違える単語」にたまり、くり返し確かめられる
  • 受験日を入れると、学習記録に試験までの日数と分野ごとの習熟度を表示
  • 試験の1週間前・3日前・前日・当日におしらせ(通知を許可している場合)

主催団体とは関係のない、非公式の学習コンテンツです。
資格の勉強は、iPhoneの表示言語が日本語のときに使えます。

収録パーツ

実務で出会う100のパーツ。

Apple Human Interface Guidelinesから56種類、Google Material Design 3から44種類。 遊んで出会ったパーツは「ずかん」にたまり、いつでも見返せます。

  • ボタン(Button)
  • ツールバー(Toolbar)
  • メニュー(Menu)
  • コンテキストメニュー(Context Menu)
  • プルダウンボタン(Pull-Down Button)
  • ポップアップボタン(Pop-up Button)
  • 編集メニュー(Edit Menu)
  • ナビゲーションバー(Navigation Bar)
  • タブバー(Tab Bar)
  • サイドバー(Sidebar)
  • 検索フィールド(Search Field)
  • ページコントロール(Page Control)
  • アクションシート(Action Sheet)
  • アラート(Alert)
  • シート(Sheet)
  • ポップオーバー(Popover)
  • アクティビティビュー(Activity View)
  • トグル(Toggle)
  • スライダー(Slider)
  • ステッパー(Stepper)
  • ピッカー(Picker)
  • テキストフィールド(Text Field)
  • カラーウェル(Color Well)
  • アクティビティインジケーター(Activity Indicator)
  • プログレスインジケーター(Progress Indicator)
  • レーティングインジケーター(Rating Indicator)
  • リスト/テーブル(List and Table)
  • 分割ビュー(Split View)
  • ディスクロージャーコントロール(Disclosure Control)
  • タブビュー(Tab View)
  • 画像ビュー(Image View)
  • テキストビュー(Text View)
  • ボタン(塗りつぶし/アウトライン/テキスト)(Common Buttons (Filled / Outlined / Text))
  • フローティングアクションボタン(Floating Action Button (FAB))
  • 拡張FAB(Extended FAB)
  • アイコンボタン(Icon Button)
  • セグメンテッドボタン(Segmented Button)
  • カード(Card)
  • ダイアログ(Dialog)
  • ボトムシート(Bottom Sheet)
  • サイドシート(Side Sheet)
  • ディバイダー(Divider)
  • ツールチップ(Tooltip)
  • カルーセル(Carousel)
  • ボトムアプリバー(Bottom App Bar)
  • ナビゲーションバー(M3)(Navigation Bar)
  • ナビゲーションドロワー(Navigation Drawer)
  • ナビゲーションレール(Navigation Rail)
  • タブ(Tabs)
  • トップアプリバー(Top App Bar)
  • チェックボックス(Checkbox)
  • チップ(Chip)
  • ラジオボタン(Radio Button)
  • スイッチ(Switch)
  • スライダー(M3)(Slider)
  • 日付ピッカー(Date Picker)
  • 時刻ピッカー(Time Picker)
  • メニュー(M3)(Menu)
  • テキストフィールド(M3)(Text Field)
  • 検索バー(Search)
  • バッジ(Badge)
  • プログレスインジケーター(M3)(Progress Indicator)
  • スナックバー(Snackbar)
  • リスト(M3)(List)
  • ラベル(Label)
  • スクロールビュー(Scroll View)
  • ボックス(Box)
  • ウインドウ(Window)
  • セグメンテッドコントロール(Segmented Control)
  • コレクション(Collection)
  • Webビュー(Web View)
  • ウィジェット(Widget)
  • チャート(Chart)
  • 数字入力ビュー(Digit Entry View)
  • 通知(Notification)
  • スコープバー(Scope Bar)
  • パネル(Panel)
  • コンボボックス(Combo Box)
  • トークンフィールド(Token Field)
  • パスコントロール(Path Control)
  • アウトラインビュー(Outline View)
  • カラムビュー(Column View)
  • ロックアップ(Lockup)
  • ゲージ(Gauge)
  • コンプリケーション(Complication)
  • ライブアクティビティ(Live Activity)
  • イメージウェル(Image Well)
  • Dockメニュー(Dock Menu)
  • スプリットボタン(Split Button)
  • ボタングループ(Button Group)
  • ローディングインジケーター(Loading Indicator)
  • フルスクリーンダイアログ(Full-Screen Dialog)
  • リッチツールチップ(Rich Tooltip)
  • アシストチップ(Assist Chip)
  • フィルターチップ(Filter Chip)
  • サジェスチョンチップ(Suggestion Chip)
  • 露出型ドロップダウンメニュー(Exposed Dropdown Menu)
  • FABメニュー(FAB Menu)
  • ツールバー(M3)(Toolbar)
  • 入力チップ(Input Chip)

アイコン右上の点は出典です。緑がHIG、赤がMaterial 3。

できること

覚えて、見返して、苦手をつぶす。

ずかんの画面。上に検索欄と「全て」「UIパーツ」「HCD基礎検定」「UX検定(基礎)」の切り替えがあり、UIパーツのアイコンと名前がグリッドで並ぶ

01

ずかんとブックマークで、いつでも見返せる

出会ったUIパーツや資格の用語は「ずかん」に記録され、名前・説明・使いどころをいつでも見返せます。気になったものはブックマークして、あとでまとめて確かめられます。

  • 名前での検索
  • UIパーツ・HCD基礎検定・UX検定(基礎)の切り替え
  • ブックマークしたものだけを表示
学習記録の画面。プレイ回数・といた数・正答率・連続学習日数と、7日・30日の推移のグラフ、出典べつの成績

02

苦手が、数字で見える

正答率、連続学習日数、日ごとの推移、出典や資格ごとの成績、苦手な用語。どこが弱いかが分かるので、次に何を復習すればいいかがはっきりします。

  • 7日・30日の推移
  • よく間違える単語(間違えた回数の多い順)
  • 苦手なものをまとめて復習
フレンドの学習記録の画面。相手の名前とアバター、[対戦をたのむ]のボタン、プレイ回数・といた数・正答率・連続学習日数と推移のグラフ

03

フレンドと、学習記録を見せ合える

フレンドIDで申請して、相手が承認するとフレンドになれます。フレンドどうしは、プレイ回数・正答率・連続学習日数・推移・苦手な用語を見せ合えます。

  • 「対戦をたのむ」から、カルタや神経衰弱の対戦をおねがい
  • 名前での検索はなく、IDを知っている相手とだけつながる
  • iCloudにサインインしている場合に使えます
ゲーム詳細の画面。モード・むずかしさと、「CPUとあそぶ」「友達と対戦」「世の中の誰かと対戦」から相手を選ぶ

04

ひとりでも、誰かとでも

カルタと神経衰弱は、Game Centerでオンライン対戦ができます(UIパーツ編)。カルタは二人に同じ問題が出て、先に正しく取ったほうが得点。神経衰弱は交互にめくって、多く取ったほうが勝ちです。

  • CPUと対戦(カルタ。初級・中級・上級)
  • 友達を招待して対戦・自動で相手を探して対戦
  • 相手にはニックネームとアバターが表示され、迷惑な相手は通報・ブロックできる
  • アカウント登録なし

    メールアドレスもパスワードも要りません。開いたその場から遊べます。

  • iCloudで引き継ぎ

    iCloudにサインインしていれば、機種変更しても記録が引き継がれます。

  • 日本語と英語

    iPhoneの表示言語に合わせて切り替わります。パーツの説明も両方の言語で書いています。資格の勉強は日本語のときだけ使えます。

画面

こんなアプリです。

ホーム画面。カルタ・神経衰弱・仕分け・並べ替えが並び、右上にフレンドの入口がある
ホーム
資格勉強タブ。HCD基礎検定とUX検定(基礎)のカードに、身につくことと習得した語数
資格勉強
カルタのプレイ画面。読み札と6枚の取り札
カルタ
ずかん。UIパーツがグリッドで並ぶ
ずかん
学習記録。正答率と推移のグラフ、出典べつの成績
学習記録
フレンドの学習記録。[対戦をたのむ]と相手の成績
フレンド
ユーアイランドのアプリアイコン

今日のすきま時間に、
1ゲームだけ。

ユーアイランドは、App Storeで配信中です。

iPhoneアプリ App Storeで入手