引き出しDrawer
drawerは、画面の端からスライドして現れます。その後ろにあるページの一部も見えたままです。
ぴったりの言葉を見つけよう。
アイデアを形にしよう。
思い浮かぶのに名前が分からない画面や流れを説明してください。Vibularyが適切な用語と図解を示し、明確な開発リクエストにまとめます。
自分の言葉を使う。我々はそれが何であるか、それが何をするか、いつ必要かを見ます。どうやって質問するか分からない？試してみて
MCP · Connect to your AI559ガイド10トピック10言語128ライブデモ
見て、名前を知る。操作してみる
Drawer.
画面の横からスライドするパネル。
感覚から、具体的なアイデアへ。アトラス
アイデアを構築するために必要な言葉を学びましょう。
各用語の出所を示します。標準、公式ガイド、一般的な業界用語には異なるラベルがあります。
ボタンButton
ボタンは、今見ている画面で何かを起こすために押すスイッチだよ。
モーダルダイアログModal Dialog
モーダルダイアログは、集中するためのウインドウだよ。誰かが閉じるか完了するまで、今の画面をブロックするよ。
ボトムシートBottom Sheet
ボトムシートは、タップしやすいパネルだよ。画面の下からニュッと上がってきて、決まった高さで止まることもあるよ。
コマンドパレットCommand Palette
コマンドパレットは、キーボードで操作しやすい検索パネルです。アクションを実行したり、ページや最近のアイテムを開いたりできます。
グラスモーフィズムGlassmorphism
グラスモーフィズムは、透明な層状の表面を持つビジュアルスタイルです。ぼかし、ライトボーダー、小さな奥行き感を使用します。
春のアニメーションSpring Animation
春のアニメーションは物理モデルに従います。硬さ、減衰、質量、初速度が動き方を制御します。
デザイントークンDesign Token
Design Tokenは、デザインの選択に一つの名前をつけたものです。たとえば、色、余白、フォント、動きの速さなどがあります。
アクセシビリティAccessibility
アクセシビリティは、異なる能力を持つ人々が製品を理解し、使用するのを助けます。
製品目標Product Goal
Product Goal は、製品がユーザーやビジネスのために作り出す、役に立つ結果を書いたものだよ。
回収拡張世代Retrieval-Augmented Generation
検索拡張生成(RAG)は、実行時に外部証拠を見つけます。その証拠をモデルに提出してから書くのです。
API とエンドポイントAPI & Endpoint
APIは、ソフトウェアがソフトウェアと通信するためのルールの集合です。エンドポイントは、そのAPI内の1つのアドレスと1つの操作です。
CSSグリッドCSS Grid
CSSグリッドは行と列を一緒に扱うレイアウトシステムです。固定エリアを設定したり、スペースの変化に合わせて変更したりできます。
フォームの検証Form Validation
フォーム検証では、規則とメッセージを使用して、欠落または間違った回答を見つけ、防止し、説明します。
トースト通知Toast
トーストは短い状態のメッセージです。ページをブロックせず、たいていは時間が経てば自動的に消えます。
Git、リポジトリ、ブランチ＆コミット — 学習バンドルGit, Repository, Branch & Commit — Learning Bundle
この学習バンドルは、4つのGitの考えを結びつけます。Gitはバージョン管理システムです。リポジトリはそのオブジェクトと参照を保存します。ブランチは作業のラインに名前を付けます。コミットはメタデータと共にプロジェクトの状態を記録します。このバンドルは1つのGit用語ではありません。
動きの軽減Reduced Motion
動きの軽減はアクセシビリティ設定およびデザインモードです。不要な動きを削除または簡略化します。
問題文Problem Statement
Problem Statement は、誰が、いつ問題を抱えていて、それを解決することがなぜ大事なのかを書くよ。
仕事に合ったパターンを選びます。
2つのパターンは似て見えることがありますが、異なる作業を行います。これらの短いルールは選択に役立ちます。
↯↗
ボタン · Link
ボタンがここで何かを変更する。リンクは別の場所に移動する。
□▯▱
モーダルダイアログ · 引き出し · ボトムシート
一つの決定にはダイアログを使用し、付随作業にはドロワーを使用し、小さい画面では少数のアクションにはボトムシートを使用します。
▤◌
Skeleton · Spinner
スケルトンは、これから表示される内容の形を見せます。スピナーは、ただアプリが作業中であることだけを示します。
☑◉⊙
Checkbox · Switch · Radio Group
チェックボックスは複数の項目を選択できます。スイッチは設定を今すぐ変更します。ラジオボタンは1つの項目しか選択できません。
UIパターンの名前を挙げられますか？
状況を読み、最も明確な用語を選択してください。トリック質問はありません。
スコア 0 / 2
状況 · 1/2
「下書きを保存」を押すと、サイトは変更を保存し、成功したかどうかを知らせます。
UIの言葉を明確なビルドリクエストに変える。
必要なことを書いてください。それからUIが何をするか、どのように見えるか、どのように動くかを選びます。それをコピー可能なリクエストに変えます。
誰がこれを必要としていて、何が起きており、次に何をすべきかを伝えてください。
VIBULARY / リクエスト● ● ●
誰がこれを必要としていて、何が起きており、次に何をすべきかを伝えてください。誰がこれを必要としていて、何が起きており、次に何をすべきかを伝えてください。
V.✦
単語、役立つ例をクリア
各ガイドは、簡単な意味と明確な例から始まります。技術用語は、それを構築するのに役立つ場合のみ表示されます。