レポートHTMLのデザインシステム

何が変わったか: これまで規定していたのは色・角丸・フォントと「縦に積む順番」だけで、レイアウトの選択肢が無かった。そのため中身が何であれ縦一列の長いページになり、案を選ばせたいページでも比較にスクロールが要る状態だった。欠けていたレイアウト層を実物のテンプレートとして足した。
使い方: 読み手にさせたいことでレイアウトを1つ選び、コピーして中身を差し替える。

色の語彙は3語だけ

状態ごとに色を割り当てるのをやめた。緑=OK・青=情報・赤=NG のような意味色は使わない。色の値そのものは変えておらず、使い方だけを絞っている。

黒 — 終わり

停止、確定、これ以上手を入れない状態。

停止確定

コーラル — 手を動かす所

結論、要対応、次のアクション。今すぐ何かする場所だけ。

要対応結論

無色 — それ以外

素通りしてよい情報。件数の大半はここに入る。

継続様子見

レイアウトの選び方

迷ったら、読み手にさせたいことで選ぶ。

読み手にさせたいこと	レイアウト
2〜3案から選ばせる	横並び比較
4案以上、または1案の情報量が多い	同枠切替
多数の項目を1件ずつ精査させる	左右分割
今日どれを止めるか判断させる	判定ファースト
画像や動画を仕分けさせる	カードグリッド
時間の流れを追わせる	時系列
理解させるだけ（判断させない）	縦読み物

レイアウト7種

中身はすべて架空のダミーデータ。骨格だけを見る。

横並び比較のプレビュー

横並び比較

2〜3案を実際に横に並べ、スクロールせずに同時に見える。行の高さも揃う。

同枠切替のプレビュー

同枠切替

4案以上を同じ位置で切り替えて差分を見る。矢印キーでも移動できる。

左右分割のプレビュー

左右分割

左に一覧、右に詳細。項目が多く1件ずつ精査する時に使う。

判定ファーストのプレビュー

判定ファースト

上部の判定バーが固定で残る。今日どれを止めるかの判断が主役の時。

カードグリッドのプレビュー

カードグリッド

画像や動画を一覧で仕分ける。要対応だけに絞るフィルタ付き。

時系列のプレビュー

時系列

動画の秒数構成、絵コンテ、手順の流れ。要修正の1点だけ色が付く。

縦読み物のプレビュー

縦読み物

理解させるだけの説明用。判断が入るページでは使わない。

土台

色・タイポと、守るべき形を実物で示したもの。

色とタイポのプレビュー

色とタイポ

3語の色の語彙、トークン一覧、文字サイズ、形と間隔。

やること・やらないことのプレビュー

やること・やらないこと

避ける形と採る形を実物で並べた5項目。文章では守られなかったので実物にした。

残っていること

1

実戦で1回ずつ使う — 7つのレイアウトを実際の成果物で使い、使いにくい所を洗い出す

2

部品を1軍に絞る — 既存32ブロックの実使用頻度を集計し、よく使うものだけを部品層に持ち上げる

3

正本を痩せさせる — レイアウトと部品の記述をこちらへ移し、散文のルールを減らす