ハンバーガーメニュー
ボタンを押すと、メニューが横から現れます。
右上の二本線を押して動きを確認
UI MOTION ARCHIVE
動きを、
試して残す。
Webサイトで使う小さな動きを、実際に触って見比べるための見本帳。気になるカードのボタンを押してみてください。
MOTION SAMPLES
01 — 09 / 09タブメニュー
選択した内容へ、表示を切り替えます。
01 / OVERVIEW
必要な情報を、
ひとつずつ。
ひとつずつ。
限られたスペースを整理して見せます。
02 / FEATURE
切り替えは軽く、
位置はそのまま。
位置はそのまま。
ページを移動せず内容だけが変わります。
03 / USE CASE
比較したい内容に、
ちょうどいい。
ちょうどいい。
サービスの違いや手順の整理に。
タブを選ぶか、左右キーで移動
アコーディオン
必要な項目だけを開いて、詳しい内容を見られます。
FREQUENTLY ASKED
制作の流れを知りたい
相談、構成、デザイン、確認の順に進めます。
素材は必要ですか？
写真や文章が未整理でも、まずは相談できます。
スマホにも対応できますか？
画面幅に合わせて見やすいレイアウトにします。
見出しを押すと、その項目を開閉
モーダル
いま見ている画面の上に、情報を重ねて表示します。
PREVIEW / 04
続きは、
手前に。
手前に。
ボタンで開き、閉じるボタンかEscで戻る
通知トースト
操作の結果を短く伝え、数秒後に消えます。
クリックすると
通知が現れます。
試作用の表示です。データ保存は行いません
パララックス
手前と奥を違う速さで動かし、奥行きをつくります。
カーソル・指・矢印キーで景色を動かす
スライド・カルーセル
カードを横に送って、ひとつずつ見せます。
矢印か丸いボタンで切り替え。左右にスワイプも可能
フェードイン
画面に入った要素が、時間差でふわりと現れます。
08 / IN VIEW
HELLO,
NEW IDEA.
NEW IDEA.
ひとつずつ、視線を導く。
スクロールで表示。ボタンでもう一度再生
ホバーエフェクト
カーソルを重ねると、色と文字の表情が変わります。
マウスを重ねるか、Tabキーで選択