登場
「下へ進むとカードがふわっと出る」
スクロール・リビール
下へ進むと、カードや見出しがふわっと現れる演出です。
見て、比べて、言葉にする
見た目から探す
名前を覚えていなくても大丈夫です。小さなUIの動きと、Webサイト全体の雰囲気を、見た目から選べます。
13種類の見本
小さなデモ集
気になる動きを見つける
ボタンやカードなど、一部分の見せ方・動かし方を探せます。
反応
「カードにマウスを置くと少し浮く」
ホバー・リフト
選べるカードを、少し浮かせて伝える反応です。
情報整理
「質問を押すと答えが開く」
アコーディオン
質問や見出しを押すと、その下へ説明が広がるUIです。
重なり表示
「ボタンを押すと中央に小さな画面が開く」
モーダルダイアログ
背景を暗くして、中央の小さな画面で確認や入力を行うUIです。
フィードバック
「保存したあと画面の端に短いお知らせが出る」
トースト通知
保存やコピーのあと、画面の端へ短く現れるお知らせです。
情報整理
「上のボタンを押すと下の内容が切り替わる」
タブ切り替え
同じ場所で、選んだ見出しの内容へ切り替えるUIです。
補足
「アイコンに触れると小さな説明が出る」
ツールチップ
アイコンや短い言葉へ触れると、小さな補足が現れるUIです。
閲覧
「矢印を押すと次の画像へ切り替わる」
カルーセル
同じ大きさの見本を、前後へ一枚ずつ切り替えるUIです。
ページ全体の雰囲気
好きな空気感を選ぶ
迷ったら、一番近そうな見本から見てみましょう。あとから自由に組み合わせられます。
シンプル
「影を減らしてすっきり見せたい」
フラットデザイン
影や質感を抑え、色と形で役割をはっきり見せるデザインです。
余白
「白くて余白の多い画面にしたい」
ホワイトミニマル
白と広い余白を主役にし、必要な情報だけを静かに見せるデザインです。
情報整理
「大小のカードをパズルのように並べたい」
Bento Grid
情報を大小の箱へ分け、全体像と優先順位を同時に見せるデザインです。
透明感
「背景をぼかしてガラスみたいにしたい」
ソフトグラスモーフィズム
背景をやわらかく透かし、カードが薄いガラスのように浮かぶデザインです。
ダーク
「黒っぽくてかっこいい画面にしたい」
ダークミニマル
暗い面と少ない差し色で、集中しやすく落ち着いた印象を作るデザインです。