動き
Kyoto のアニメーションは、大きく動かすことも、まったく動かさないこともできます。動きはすべて設定で決められ、まずストア全体の強さを選び、必要に応じて動きの種類ごと・セクションごとに調整します。端末で「視差効果を減らす」などを設定しているお客様には、常に動きを抑えた表示になります。
ストア全体の動きの設定は、すべて テーマ設定 > 動き にあります。
動きの強さ
| 設定 | 選択肢 | 内容 |
|---|---|---|
| 動きの強さ | なし、控えめ、標準、大胆 | 自動 のままにしている動きの設定は、すべてこの値に従います。なし にするとストアのアニメーションがすべて止まります。プリセット Kyoto の初期値は 大胆 です。 |
| 動きの速さ（小さいほど速い） | 50〜200 %（10 刻み） | 100 % より小さいと速く、大きいとゆっくり動きます。 |
| 動きの質感 | なめらか、やわらか、きびきび、はずむ、するどい | 動き全体の印象です。動き始めと止まり方が変わります。 |
最初に決めるのは強さです。ストアが落ち着かないと感じたら、個別の設定を触る前に 控えめ を試してみてください。
動きの種類ごとの設定
下の表の設定には、どれも 自動 があり、選ぶと 動きの強さ に従います。名前の付いた動きを選ぶとストア全体でその動きを使い、なし を選ぶとその種類の動きだけを止めます。
| グループ | 設定 | 選択肢 |
|---|---|---|
| スクロールで現れる | セクションが画面に入ったときの出方 | フェード、下からフェード、フェードと拡大、マスク、霞が晴れる、そっと置かれる、外から寄る、中央から配る、斜めの順に、映画の帯が開く、線を描いてから、色が広がる、弾んで貼られる |
| スマホでも動かす | オン・オフ。オフにすると、スマホではセクションが動かずに表示されます。 | |
| 一覧を1つずつ出す間隔 | 0〜150 ms。カードや列などの項目を 1 つずつ表示するときの間隔です。0 にするとまとめて表示されます。 | |
| 見出しと画像 | 見出しの出方 | フェード、行ごとにフェード、行ごとにマスク、行ごとに回転、単語ごと、文節ごと、文字ごと、字間が締まる、ピント送り、罫線が伸びてから、インク、色の帯が横切る、輪郭に色が満ちる |
| 画像の現れ方 | フェード、拡大から戻る、下から開く、横から開く、中央から開く、円、カーテン、白黒から色が戻る、粗さが澄む、帯が開く（簾）、インク、絞りが開く、斜めの順に | |
| ホバー | 色の見本に乗せると画像が替わる | オン・オフ。カラースウォッチにカーソルを合わせるかフォーカスすると、カードの画像がその色の写真に切り替わります。 |
| ボタンの反応 | フェード、横から塗る、下から塗る、反転、矢印、インク、文字が転がる、指先へ寄る、ピクセルの波、影がずれて浮く、外周の線を描く、色が満ちる＋矢印 | |
| リンクの下線 | なし、広がる、スライド、下線が太る、下地が滑る | |
| ページとカート | ページの切り替え | フェード、フェード（画像つき）、スライド（画像つき）、紙の色をはさむ、下からのシート、押した場所から円。View Transitions に対応したブラウザで動きます。非対応のブラウザでは通常どおり次のページが開き、テーマエディター内では再生されません。 |
| カートに入れたときの動き | バッジ、飛んで入る、粒が飛ぶ、形が変わる | |
| ドロワーとメニューの開き方 | スライド、スライドとフェード、フェード、ページを押す | |
| スクロール効果 | パララックスなどのスクロール連動を使う | パララックスなど、スクロールに連動する効果です（対応ブラウザのみ）。強さが なし か 控えめ のときは使われません。 |
| パララックスの強さ | 0〜20 % | |
| 画面の中央のセクションの配色へ地の色を替える | セクションが画面の中央に来ると、ページの背景色がそのセクションの配色に切り替わります。 | |
| テーマエディター | 設定を変えたとき、エディタで動きを再生する | セクションを選んだり設定を変えたりしたときに、テーマエディターでそのセクションの動きを再生します。公開中のストアには影響しません。 |
セクションごとの設定
各セクションの設定には 動き のグループがあります。
- このセクションの動き：テーマ設定に従う、なし、控えめ、標準、大胆。なし にすると、テーマ設定に関係なく、そのセクションは一切動きません。
- 詳細 > 細かく設定する：このセクションだけの 現れ方、見出しの出方、画像の現れ方 と、一覧の時間差を変える をオンにしたときの 一覧の時間差 を指定できます。
ブロックにも、個別に動きを選べるものがあります。印（丸いシール）、ステッカー（飾り）、博物館のラベル、大きさの定規、色の面の舞台、商品の並びの見た目 の各ブロックと、フッターの 大きな店名 ブロックです。マーキー、ニュースの帯、ロゴの列、お知らせバーのように横に流れる要素には、流れる速さ（px/秒） と ホバーとフォーカスで止める の設定があります。
「視差効果を減らす」への対応
Kyoto は、お客様が OS で設定する動きの軽減設定に従います（iPhone の 設定 > アクセシビリティ > 動作 > 視差効果を減らす、Windows の アニメーション効果 など）。
この設定がオンのお客様には、次のように表示します。
- セクション・見出し・画像は、動くとしても単純なフェードだけになります。スライド、拡大、飛び込み、スクロールへの追従はしません。見出しを行や単語に分けて動かすことも、ページ切り替えのアニメーションもありません。
- マーキーなどの流れる要素は止まって折り返し、すべての項目が読める状態になります。
- スライドショーは自動で進みません。
- 背景動画は自動再生されず、カバー画像を表示します。お客様はボタンを押せば再生できます。
ページ切り替えのアニメーションは、Instagram などのアプリ内ブラウザと、スマホのデータセーバーがオンの場合にも行いません。
すべてのお客様向けに、動きのオン・オフを切り替えるボタンを置くこともできます。テーマ設定 > アクセシビリティとその他 の フッターに「動きを止める」ボタン をオンにしてください。お客様が選んだ状態はブラウザに保存されます。
マーキーや自動で進むスライドショーなど、数秒以上動き続ける要素には、必ず一時停止の操作があります。マウスのカーソルが乗っている間と、キーボードのフォーカスが中にある間も止まります。
使い方のヒント
- 動きは見せ場に絞ると効果的です。最初の画面、商品が登場する箇所、スクロールで読ませるストーリーなどです。
- 大胆 を使う場合は、処理の遅いスマホでも表示を確認してください。重く感じたら 標準 か 控えめ に下げます。
- 編集中にアニメーションの再生が気になるときは、設定を変えたとき、エディタで動きを再生する をオフにします。