Kyoto テーマ · ドキュメント · v1.0.0

最初の画面とバナー

ホームページやランディングページの最初の画面に使う、大きなセクションです。どれもページの途中にバナーとして置くこともできます。

サイズの設定には、範囲(または選択肢)と初期値を記載しています。†の付いた設定は、関連する項目を選んだときだけ表示されます。「その他の設定」には、残りの設定をテーマエディターでの名前のまま並べています。

最初の画面(ヒーロー)

ヒーロー

大きな画像・動画・色の面に、文字とボタンを重ねるか横に並べます。ページの途中では画像バナーとして使えます。

追加するときに選べるひな形:ヒーロー: 画像、ヒーロー: 動画、ヒーロー: 分割、ヒーロー: キャプションの列、画像バナー。

大きさと並べ方

  • 画像の幅(%) †:50、55、60、65(初期値:50)。
  • 高さ:小、中、大、画面、画像に合わせる(初期値:大)。
  • 高さ(スマホ):小、中、大、画面、画像に合わせる(初期値:中)。
  • 文字の幅:狭い(360px)、標準、広い(初期値:標準)。
  • 背景を暗くする強さ †:0〜80 %、5 刻み(初期値:20)。

その他の設定:背景、画像(アイコンの代わり)、スマホの画像、動画(音なしで自動再生、止めるボタン付き)、スマホの動画、音を出すボタン、並べ方、文字の位置、文字の位置(スマホ)、暗くする型、次のセクションへの矢印、スクロールの効果。

このほか、セクション共通の設定があります。

追加できるブロック

  • 文字(共通ブロック。共通ブロックを参照)
  • ボタン(主・副の2つ)(共通ブロック。共通ブロックを参照)
  • カウントダウン(本物の日時だけ)(共通ブロック。共通ブロックを参照)
  • インストールしたアプリのブロック
  • 表紙の目次 ブロック
    • その他の設定:新着を 00 として載せる、件数を出す。

組み合う見出しの最初の画面

数行にわたる特大の見出しと、切り抜いた商品写真を組み合わせます。見出しの行ごとに、商品の手前を通すか後ろを通すかを選べます。

デモストアの「組み合う見出しの最初の画面」。3 行の見出しが、淡い桜色の面に立つ切り抜きの赤いだるまの手前と後ろを通る

大きさと並べ方

  • 見出しの大きさ:小、中、大、特大、特大、最大(初期値:特大)。
  • 品物の大きさ:24〜60 %(初期値:40)。
  • 品物の横の位置 †:40〜90 %(初期値:62)。
  • 品物の下からの高さ †:0〜30 %(初期値:6)。
  • 品物の中心の補正 †:−20〜20 %(初期値:0)。画像を幅に対する割合で左右に動かします(すべての画面幅)。切り抜き画像の片側に影がある場合に使い、画像の枠ではなく商品そのものが中央に見えるよう補正します。影が右側にある場合はプラスの値にします。
  • 色の面の幅 †:30〜70 %(初期値:50)。
  • 説明文の幅 †:16〜40 em(初期値:26)。
  • ボタンの大きさ †:小、中、大(初期値:大)。

その他の設定:説明文、ボタンの文字、ボタンのリンク、リンクの文字、文字リンクの行き先、切り抜きの画像、商品、色の面の配色、色の面の小見出し、色の面の添え書き、アクセントの色、品物の入り方、スクロールで離れる。

このほか、セクション共通の設定があります。

追加できるブロック

  • 見出しの行 ブロック
    • 行の字下げ:0〜60 %(初期値:0)。
    • その他の設定:説明文、品物の後ろに回す、アクセントの色にする。
  • 印(丸いシール)(共通ブロック。共通ブロックを参照)

固定のブロック(セクションに常に入っています。サイドバーで選ぶと設定を変えられます)

  • スマホでの品物 ブロック
    • 横の位置(中心):20〜80 %(初期値:50)。色の面の横幅に対する商品の中心位置です。50 が中央で、値を大きくすると行末側に寄ります。片側に影のある切り抜き画像は、先にセクションの「品物の中心の補正」で調整してください。
    • 下からの高さ:0〜30 %(初期値:0)。
    • 大きさ(色の面の幅に対して):40〜100 %、2 刻み(初期値:76)。

最初の画面:丸窓

丸窓のデザインで見せる最初の画面です。片側に言葉、もう片側に丸窓に収めた写真を置き、切り抜いた商品や印も添えられます。

大きさと並べ方

  • 見出しの大きさ:小、中、大、特大(初期値:大)。
  • 丸窓の大きさ(行の %):30〜60 %(初期値:42)。
  • スマホの丸窓の大きさ(%) †:60〜100 %、2 刻み(初期値:88)。
  • 文の幅 †:280〜720 px、20 刻み(初期値:460)。
  • 丸窓と輪の間 †:0〜64 px、2 刻み(初期値:26)。0 にすると輪を表示しません。
  • 品の大きさ(丸窓の %) †:15〜70 %(初期値:38)。
  • 品の横のはみ出し(%) †:−30〜50 %(初期値:13)。
  • 品の下のはみ出し(%) †:−30〜50 %(初期値:9)。

その他の設定:丸窓の画像、手前に置く品(切り抜き)、ラベル、和文の小さなラベル、見出し、見出しの後ろのアクセントの語、説明文、丸窓の位置、丸窓の開き方。

このほか、セクション共通の設定があります。

追加できるブロック

固定のブロック(セクションに常に入っています。サイドバーで選ぶと設定を変えられます)

最初の画面を目次のように使います。コレクションや特集への大きなリンクを並べ、カーソルを合わせたリンクに応じて背景の画像が切り替わります。

大きさと並べ方

  • 高さ:小、中、大、画面(初期値:画面)。
  • 文字の大きさ:中、大、特大(初期値:特大)。
  • 背景を暗くする強さ †:0〜80 %、5 刻み(初期値:30)。

その他の設定:文字の位置、切り替えのきっかけ(PC)、画像の見せ方、切り替えの動き。

このほか、セクション共通の設定があります。

追加できるブロック

  • 項目1つ ブロック
    • その他の設定:見出し、説明文、リンク先、画像(アイコンの代わり)、スマホの画像。

スライドショー

複数のメイン画像を、1 つの枠の中で 1 枚ずつ切り替えて表示します。

追加するときに選べるひな形:スライドショー、スライドショー: 表紙、スライドショー: 枠の中。

大きさと並べ方

  • 高さ:小、中、大、画面、画像に合わせる(初期値:大)。
  • 高さ(スマホ):小、中、大、画面、画像に合わせる(初期値:中)。

その他の設定:音なしで自動再生、切り替えの秒数、切り替えの動き、操作、送る向き、1枚目の文字を全スライドに固定する、スライドの並べ方。

このほか、セクション共通の設定があります。

追加できるブロック

  • スライド1枚 ブロック
    • 背景を暗くする強さ:0〜80 %、5 刻み(初期値:20)。
    • その他の設定:背景、画像(アイコンの代わり)、スマホの画像、動画(音なしで自動再生、止めるボタン付き)、見出し、説明文、リンク先、ボタンの文字、文字の位置、商品、スマホの動画。

スクロール演出の画像

横幅いっぱいの画像または動画が、スクロールに合わせて動きます。動き方は、開いていく・寄った状態から引いていく・ページより少し遅れて動く、から選べます。

大きさと並べ方

  • 高さ:中、大、画面(初期値:画面)。
  • 背景を暗くする強さ:0〜80 %、5 刻み(初期値:30)。

その他の設定:背景、画像(アイコンの代わり)、スマホの画像、動画(音なしで自動再生、止めるボタン付き)、スクロールの効果、文字の位置。

このほか、セクション共通の設定があります。

追加できるブロック

大きな文字と締めの帯

大きな文字・大きなロゴ

横幅いっぱいに特大の文字を 1 行置きます。スローガン、店名、ロゴなどに使います。

追加するときに選べるひな形:大きな文字・大きなロゴ、大きなロゴ、フッターの大きな店名。

大きさと並べ方

  • 文字の大きさ †:大、特大(初期値:特大)。

その他の設定:中身、見出し、幅いっぱいに合わせる、文字の塗り、画像(アイコンの代わり)、揃え、大きな文字の動きの種類。

このほか、セクション共通の設定があります。

締めの帯

ページの終盤に置く、印象的な帯です。大きな見出し、短い一文、メール登録またはボタンを置き、下端から最大 3 つの商品を立ち上がらせることができます。

デモストアの「締めの帯」。朱色の帯に大きな見出しとメール登録欄があり、下端から 3 つの品が立ち上がる

大きさと並べ方

  • 見出しの大きさ(最大):40〜240 px、4 刻み(初期値:200)。
  • 文の大きさ:14〜26 px(初期値:18)。
  • 品物の高さ †:120〜640 px、10 刻み(初期値:440)。
  • 帯の最小の高さ:0〜100 %、5 刻み(初期値:0)。画面の高さに対する % です。0 にすると内容に合わせた高さになります。

その他の設定:小見出し、見出し、説明文、見出しの下、ボタンの文字、リンク先、同意の文、品物 1、品物 2(真ん中・いちばん大きい)、品物 3、品物が下から立ち上がる。

このほか、セクション共通の設定があります。

号の案内

今月の特集や季節のカタログを、机に重ねた 3 冊の雑誌の表紙のように見せて案内します。

追加するときに選べるひな形:号の案内、季節のカタログ。

その他の設定:小見出し、商品、表紙、2 枚目の表紙、3 枚目の表紙、号の番号、見出し、説明文、ボタンの文字、リンク先、並べ方、価格を出す。

このほか、セクション共通の設定があります。