デザイン応用例

分かります。各見本の上にある「解説を重ねる」を押すと、画面に番号が重なり、その場所で使われている部品（ボタン・カード・切り替え・出現の動きなど）を示します。番号ごとに仕様書とコードが開くので、気になった部分だけを深く見られます。

できます。各見本の上にある「表示幅」で「スマホ」を選ぶと、スマートフォン相当の幅（390px）で同じページを表示します。段組の変わり方や写真の切れ方を、実機を出さずに確かめられます。

できます。各見本の上にある「動きの度合い」で「静」を選ぶと、出現の演出やスクロール連動を止めた版に切り替わります。同じページで動きの量だけを見比べられるので、自分のサイトにどれだけ動きを入れるかの判断に使えます。端末の「視差効果を減らす」設定が有効なときは、最初から「静」で開きます。

いいえ。店名・会社名・価格・文章はすべて架空です。写真は商用利用できるライセンスの実在の作品で、作者と出典は各ページの末尾「写真の出典」に載せています。参考にした実在のサイトは各ページの「参考にした実在のサイト」に、型の使われ方の観察としてだけ載せています。