Design Vault 用途・構成・配色・本文で検索 /
索引 カテゴリ タグ English
索引に戻る

設定パネル — 状態に色を足さない

縦積み
設定パネル — 状態に色を足さない
28 28

480 × 640 作品として見る

持ち帰る

コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。

全部入り

settings-panel-single-accent-everything.md

このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown

依頼文

1.5 KB 
以下の仕様で画面部品を 1 枚作ってください。

- 版面 480 × 640
- 余白 上 28 右 28 下 28 左 28

## 強調
1 行目のみ。手段は 塗り だけ。ほかは変えない

## 文字（版面 480px に対する px）
title  20px / 700 / 字間 0.01em
note  12px / 400 / 行送り 1.7
legend  11px / 500 / 字間 0.12em / 大文字
label  13px / 500
state  13px / 500
value  14px / 400
help  12px / 400 / 行送り 1.7
action  14px / 500

## 配色
地 #FFFDFB / 面 #F6F2ED / 文字 #1C1815 / 補助 #6F675E / 強調 #B4432A / 罫 #E4DCD2

## 外すと崩れる点
- 状態のために色を増やさない。入切も誤りも accent 1 色・罫の太さ・文言で示す。赤を足すと、配色を替えたとき意味と色の対応が崩れる
- 誤りは罫を太らせて文言で言う。1px の罫を 2px の ink に替え、下の説明も muted から ink へ上げる
- 欄は罫で囲まず面（surface）で示す。罫は地との差が 1.10 まで落ちてよい約束なので、配色によっては輪郭だけが消える
- ラベルは欄の上に置く。幅 480 で左に置くと、入力できる幅が読めないほど短くなる
- 主操作は 1 つ。2 つ目は塗らず、罫も外して文字だけにする

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/settings-panel-single-accent/pattern.html

仕様

1.8 KB

/ai/designs/settings-panel-single-accent.json 

format: component
density: medium
layout:
  kind: stack
  canvas:
    w: 480
    h: 640
  margin:
    top: 28
    right: 28
    bottom: 28
    left: 28
  emphasis:
    row: 1
    via:
      - fill
type:
  title:
    size: 20
    weight: 700
    tracking: 0.01em
  note:
    size: 12
    weight: 400
    leading: 1.7
  legend:
    size: 11
    weight: 500
    tracking: 0.12em
    transform: upper
  label:
    size: 13
    weight: 500
  state:
    size: 13
    weight: 500
  value:
    size: 14
    weight: 400
  help:
    size: 12
    weight: 400
    leading: 1.7
  action:
    size: 14
    weight: 500
colors:
  ground: "#FFFDFB"
  surface: "#F6F2ED"
  ink: "#1C1815"
  muted: "#6F675E"
  accent: "#B4432A"
  rule: "#E4DCD2"
rules:
  - 状態のために色を増やさない。入切も誤りも accent 1 色・罫の太さ・文言で示す。赤を足すと、配色を替えたとき意味と色の対応が崩れる
  - 誤りは罫を太らせて文言で言う。1px の罫を 2px の ink に替え、下の説明も muted から ink へ上げる
  - 欄は罫で囲まず面（surface）で示す。罫は地との差が 1.10 まで落ちてよい約束なので、配色によっては輪郭だけが消える
  - ラベルは欄の上に置く。幅 480 で左に置くと、入力できる幅が読めないほど短くなる
  - 主操作は 1 つ。2 つ目は塗らず、罫も外して文字だけにする

ファイル

pattern.html

5.1 KB

/designs/settings-panel-single-accent/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>設定パネル — 状態に色を足さない</title>
<meta name="dv-font" content="M PLUS 2:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */
  :root {
    --ground: #FFFDFB;
    --surface: #F6F2ED;
    --ink: #1C1815;
    --muted: #6F675E;
    --accent: #B4432A;
    --rule: #E4DCD2;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 480px; height: 640px; }
  body { font-family: "M PLUS 2", "IPAGothic", sans-serif; }

  .artboard {
    width: 480px; height: 640px;
    background: var(--ground); color: var(--ink);
    padding: 28px;                        /* → layout.margin */
  }
  /* [data-content] は版面そのもの。height:100% で余白と一対一に対応させる。 */
  .panel { height: 100%; display: flex; flex-direction: column; }

  .head { padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
  .note { color: var(--muted); margin-top: 6px; }

  .group { padding-top: 22px; }
  .legend { color: var(--muted); padding-bottom: 12px; }

  /* 欄は罫で囲まず面で示す。罫の床は 1.10 しかないので、配色を差し替えると
     輪郭だけが消える。面なら地との差が残る。 */
  .field { background: var(--surface); padding: 11px 14px; border-bottom: 1px solid var(--rule); }
  .label { display: block; color: var(--muted); }
  .value { display: block; margin-top: 3px; }

  /* 誤りは赤ではなく、罫を太らせて文言で言う。状態のために色を増やすと、
     配色を差し替えたときに意味と色の対応が崩れる。 */
  .field[data-invalid] { border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
  .help { color: var(--muted); margin-top: 7px; padding-left: 14px; }
  .help[data-invalid] { color: var(--ink); }

  .switch { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--rule); }
  .switch:first-of-type { border-top: 1px solid var(--rule); }
  /* 入切は accent 1 色と、つまみの位置と、文言。3 つとも同じことを言う。 */
  .track { width: 40px; height: 22px; border-radius: 11px; background: var(--rule); position: relative; flex: none; }
  .track[data-on] { background: var(--accent); }
  .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ground); }
  .track[data-on] .knob { left: 21px; }
  .state { color: var(--muted); margin-left: auto; margin-right: 12px; }

  .acts { margin-top: auto; display: flex; gap: 10px; align-items: center; }
  .btn { padding: 11px 20px; border: 1px solid var(--rule); background: var(--ground); }
  /* 主操作は 1 つ。2 つ目は塗らず、文字だけにする。 */
  .btn[data-emphasis] { background: var(--accent); border-color: var(--accent); color: var(--ground); }
  .btn[data-plain] { border-color: transparent; color: var(--muted); }

  .title  { font-size: 20px; font-weight: 700; letter-spacing: .01em; }
  .note,
  .help   { font-size: 12px; font-weight: 400; line-height: 1.7; }
  .legend { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
  .label,
  .state  { font-size: 13px; font-weight: 500; }
  .value  { font-size: 14px; font-weight: 400; }
  .btn    { font-size: 14px; font-weight: 500; }
</style>

<div class="artboard" data-artboard>
  <div class="panel" data-content>
    <div class="head">
      <h1 class="title" data-type="title">通知</h1>
      <p class="note" data-type="note">変更は保存したときに反映されます。</p>
    </div>

    <div class="group">
      <p class="legend" data-type="legend">配信</p>
      <div class="switch">
        <span class="label" data-type="label">請求書の発行</span>
        <span class="state" data-type="state">送る</span>
        <span class="track" data-on><span class="knob"></span></span>
      </div>
      <div class="switch">
        <span class="label">週次のまとめ</span>
        <span class="state">送らない</span>
        <span class="track"><span class="knob"></span></span>
      </div>
    </div>

    <div class="group">
      <p class="legend">宛先</p>
      <div class="field">
        <span class="label">既定の宛先</span>
        <span class="value" data-type="value">keiri@example.co.jp</span>
      </div>
      <p class="help" data-type="help">請求に関する通知はここへ届きます。</p>
    </div>

    <div class="group">
      <p class="legend">追加の宛先</p>
      <div class="field" data-invalid>
        <span class="label">メールアドレス</span>
        <span class="value">keiri@example</span>
      </div>
      <p class="help" data-invalid>この形式では送れません。@ のうしろにドメインが要ります。</p>
    </div>

    <div class="acts">
      <span class="btn" data-row="1" data-emphasis="fill" data-type="action">保存する</span>
      <span class="btn" data-row="2" data-plain>取り消す</span>
    </div>
  </div>
</div>

font.css

2.7 KB

/designs/settings-panel-single-accent/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    M PLUS 2 400;500;700
 * chars   89 (8fd2460d616e1eed)
 *
 * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
 */

@font-face {
  font-family: 'M PLUS 2';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+2e, U+40, U+61, U+63, U+65, U+69-6d, U+6f-70, U+72, U+78, U+2014, U+3002, U+3044, U+3046, U+304b-304e, U+3053-305c, U+305f-3060, U+3066-306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+3089-308d, U+3092-3094, U+3099-309a, U+30a2, U+30a4, U+30b9-30ba, U+30c8-30c9, U+30cd, U+30cf-30d1, U+30e1, U+30eb-30ec, U+30f3, U+30fc, U+4fdd, U+4fe1, U+5148, U+52a0, U+53cd, U+53d6, U+5909, U+5b58, U+5b9a-5b9b, U+5c4a, U+5f0f, U+5f62, U+614b, U+65e2, U+6620, U+66f4, U+66f8, U+6b21, U+6c42, U+6d88, U+72b6, U+767a, U+77e5, U+8272, U+884c, U+8981, U+8a2d, U+8acb, U+8db3, U+8ffd, U+9001, U+901a, U+9031, U+914d, U+95a2;
}
@font-face {
  font-family: 'M PLUS 2';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+2e, U+40, U+61, U+63, U+65, U+69-6d, U+6f-70, U+72, U+78, U+2014, U+3002, U+3044, U+3046, U+304b-304e, U+3053-305c, U+305f-3060, U+3066-306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+3089-308d, U+3092-3094, U+3099-309a, U+30a2, U+30a4, U+30b9-30ba, U+30c8-30c9, U+30cd, U+30cf-30d1, U+30e1, U+30eb-30ec, U+30f3, U+30fc, U+4fdd, U+4fe1, U+5148, U+52a0, U+53cd, U+53d6, U+5909, U+5b58, U+5b9a-5b9b, U+5c4a, U+5f0f, U+5f62, U+614b, U+65e2, U+6620, U+66f4, U+66f8, U+6b21, U+6c42, U+6d88, U+72b6, U+767a, U+77e5, U+8272, U+884c, U+8981, U+8a2d, U+8acb, U+8db3, U+8ffd, U+9001, U+901a, U+9031, U+914d, U+95a2;
}
@font-face {
  font-family: 'M PLUS 2';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+2e, U+40, U+61, U+63, U+65, U+69-6d, U+6f-70, U+72, U+78, U+2014, U+3002, U+3044, U+3046, U+304b-304e, U+3053-305c, U+305f-3060, U+3066-306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+3089-308d, U+3092-3094, U+3099-309a, U+30a2, U+30a4, U+30b9-30ba, U+30c8-30c9, U+30cd, U+30cf-30d1, U+30e1, U+30eb-30ec, U+30f3, U+30fc, U+4fdd, U+4fe1, U+5148, U+52a0, U+53cd, U+53d6, U+5909, U+5b58, U+5b9a-5b9b, U+5c4a, U+5f0f, U+5f62, U+614b, U+65e2, U+6620, U+66f4, U+66f8, U+6b21, U+6c42, U+6d88, U+72b6, U+767a, U+77e5, U+8272, U+884c, U+8981, U+8a2d, U+8acb, U+8db3, U+8ffd, U+9001, U+901a, U+9031, U+914d, U+95a2;
}

ノート

この構成について / About this pattern

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の寸法はどちらもそこから機械的に出している。編集するのは pattern.html だけ。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it, so the three cannot drift apart. Edit the artboard, never the numbers.

Techniques

Apply to