# Explaining good UI through examples

> A Japanese educational deck examining interface design through a payment-terminal photograph, annotated payment and ticketing redesigns, an app collage, and diagrams connecting function, benefit, value, and experience.

- Kind: Slides
- Live deck: https://speakerdeck.com/yuichi_hara7/ii-ui-toha-shoshinshamuke-ni-jirei-o-moto-ni-ui-dezain-o-bunkai
- Page: https://meetreference.com/v/ref-ui-ui-a9d2/
- Ready-to-use agent handoff: https://meetreference.com/v/ref-ui-ui-a9d2/agent.txt
- Authorship: Not stated
- Made with: Not stated
- Model: not stated
- Built with: not stated
- Style: Decks; educational, minimal, neon green, annotated diagrams, bold typography, interface analysis
- Slides: 30
- Preview: a flip-through of inspected screenshots; open the live work to experience its motion and interactions.
- Shared by 原 佑一｜クリエイティブディレクター in Website: https://speakerdeck.com/yuichi_hara7/ii-ui-toha-shoshinshamuke-ni-jirei-o-moto-ni-ui-dezain-o-bunkai
- Prompt fidelity: Unavailable in this entry. The recreation brief is written by Reference.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

## Recreating this deck

This is a visual reference. No original creator prompt is available. The following brief was written by Reference after inspecting the work.

Place a real interface example before a stripped-down redraw, then attach bright rectangular callouts to exact controls using thick elbow arrows. Reuse one geometric framework across conceptual sections, emphasizing the active level while fading the others, but increase inactive-label contrast for standalone readability. For a new subject, replace the payment and app examples with relevant workflows and retain the alternation between evidence, analysis, framework, and a high-contrast concluding slide.

1. Open the live work or source and inspect the frame images below.
2. Adapt its layout, hierarchy, palette, and interaction patterns to the user's own content and brand.
3. Compare the result against the reference. Use your own assets and credit the original creator.

## What it looks like

Written by Reference from the captured walkthrough frames, not by the creator.

初心者向けに、UIの改善例や使いやすさの考え方を図と画面例で説明するプレゼンテーション。

- Color: 白と薄いグレーを基調に、鮮やかな緑を強調色として使用。文字や画面例には黒、濃紺、淡い緑も見られる。
- Type: 日本語のサンセリフ体。見出しは太めで大きく、説明文は小さめ。緑のラベルや色面で重要箇所を目立たせている。
- Framing: スライドが3列×3段の一覧状に並ぶ。各スライドは余白の広い構成で、文章、ピラミッド図、UI画面例を組み合わせている。
- Structure: UIの定義から始まり、決済画面などの改善事例、学習しやすさやサービスらしさの説明へ展開。最後に、よいUIはサービスの機能をユーザーのよい体験に変えるという要点を示す。

Storyboard of the slides: https://meetreference.com/media/ref-ui-ui-a9d2/storyboard.webp

- Slide 1: https://meetreference.com/media/ref-ui-ui-a9d2/f1.webp
- Slide 5: https://meetreference.com/media/ref-ui-ui-a9d2/f2.webp
- Slide 8: https://meetreference.com/media/ref-ui-ui-a9d2/f3.webp
- Slide 12: https://meetreference.com/media/ref-ui-ui-a9d2/f4.webp
- Slide 16: https://meetreference.com/media/ref-ui-ui-a9d2/f5.webp
- Slide 19: https://meetreference.com/media/ref-ui-ui-a9d2/f6.webp
- Slide 23: https://meetreference.com/media/ref-ui-ui-a9d2/f7.webp
- Slide 26: https://meetreference.com/media/ref-ui-ui-a9d2/f8.webp
- Slide 30: https://meetreference.com/media/ref-ui-ui-a9d2/f9.webp

## Links

- View deck: https://speakerdeck.com/yuichi_hara7/ii-ui-toha-shoshinshamuke-ni-jirei-o-moto-ni-ui-dezain-o-bunkai
- Original post: https://speakerdeck.com/yuichi_hara7/ii-ui-toha-shoshinshamuke-ni-jirei-o-moto-ni-ui-dezain-o-bunkai
- Source and design credit: https://speakerdeck.com/yuichi_hara7/ii-ui-toha-shoshinshamuke-ni-jirei-o-moto-ni-ui-dezain-o-bunkai