halftone-ch/drawn-ui

Drawn UI（ドローンUI）

描画された画面は、デザイナーがケーススタディのためにスケッチするような形でプロダクトを表現します。つまり、実際のインターフェースを構造だけが残るまで簡略化し、プロダクト自身のカラーで着色します。これは「貼り付けた」と感じさせるスクリーンショットとは異なり、デザインワークとして読まれます。また、テキストはすべてバーで表現されるため、プライベートデータが表示されることはありません。

ルールが少なく厳格であるため、見た目は落ち着いています。それでも各プロダクトは、色合い、画面、浮き上がるパーツがプロジェクトから派生するため、それぞれが自身であると認識できます。描画がどこに使われるか（ヒーロー、グリッド、機能一覧、スライド）は、それを使う人に委ねられます。

この順序で作業する

1. 実際のプロダクトを読む。 コード、アプリ、またはデザインファイルから、現在の画面を確認します。すべての描画は実際の画面またはコンポーネントを元にします。メタファー（浮かぶスケール、ドア、カード間の矢印など）を決して発明しないでください。プロダクトにそれがなければ、描画にも現れません。
2. 瞬間を選ぶ。 各描画が何のためのものかを決めます。1つの画面、1つのコンポーネント、1つの状態。セットは、1つのコンポーネントを細かく描き込むのではなく、異なるコンポーネントを表示します。
3. アクセントを取得する。 プロダクト自身の色合いまたはブランドカラーです。scripts/tint.py "#hex" で生成されるトーンを確認できます。複数のアクセントは、プロダクト内で意味を持つ場合（ステータスカラー、ブランドペア）のみ使用します。
4. 仕様を書く。 drawings.json の形式は references/spec.md（描画前にサイズ、浮き上がり、トーンに関するセクションを読んでください）にあり、例は examples/ledger/drawings.json にあります。各描画のサイズは、それが配置されるスペースに合わせてください。
5. 描画して確認する。 python3 scripts/draw.py drawings.json --shots（スクリーンショットにはChromiumが必要です）。出力されたすべての問題を修正し、out/shots/sheet.png を開いて見てください。数値がフラグを立て、目が判断します。カード内の空きコーナー、片側に傾いた描画、丸薬のように見える積み重ねなど。問題がなくなり、落ち着いて見えるまで繰り返します。

ルール

1. 描画には単語が含まれません。すべてのテキストはバーになります。高さは12, 8, 6, 4で、幅は4の倍数、完全に角丸です。
2. 白いカード。役割ごとに1つの半径（カードは12、内側のボックスは8、行は4、電話は32）。1つのカード影、1つの浮き上がり影。
3. 各描画の1つのパーツだけがカードから浮き上がることができます。片側だけに16～72（24～40が最も読みやすい）だけはみ出し、カードの上下を超えず、周囲に8以上の余白が必要です。幅600以上の描画では2つまで浮き上がります。浮き上がったパーツは、元のパーツを置き換え、半分覆い隠しません。
4. 各描画に1つのアクセントカラー。その画面で重要なものに使用します。
5. 各描画に最大1つのライングリフ。線幅1.5、丸い端で描画します。
6. デフォルトでは背景なし。描画は影のためのスペースだけを持ち、配置されたページ上にそのまま置かれます。"ground": true を指定すると、着色された地面が付き、描画は幅と高さの65～75%を占め、中央に配置されます。
7. すべての要素は4のグリッド上で1:1のスケール。並べて配置されるセット内の描画は同じスケールを共有します。表示されるサイズで描画し、列に並ぶ場合は高さを揃えます。
8. 電話のアスペクト比は1～2.05。

出力の使用方法

out/<id>.svg ファイルは自己完結型で、自身の幅と高さを持ち、ページに適応します。白背景では明るく、黒背景では暗くなります。ユーザーのシステム設定に従い、親要素に dark または light クラス（または data-theme）を指定することで強制的に設定できます。これらは aria-hidden で、IDは描画ごとに名前空間化されているため、1つのページに複数をインラインで配置できます。図形にはホバー時アニメーション用のロールクラス（p-ground、p-card、p-bar、p-dot、p-glyph、浮き上がりパーツは p-hi）が付いています。out/index.html は、Reduce Motionに対応した落ち着いた例を示しています。電話に収まりきらない幅の描画は、より狭い2つ目の描画を生成します。絶対に圧縮しないでください。

代わりにFigmaでデザインする場合：同じルールが適用され、仕様値はフレームに1対1でマッピングされます（カードはオートレイアウト、浮き上がったパーツのみ絶対位置）。各地面（ground）をSVGとしてエクスポートします。

ルールがプロダクトと競合する場合

単一のアクセントカラーがないプロダクトは、最も暗いニュートラルを使用できます。2つのハイライトがなければ意味をなさない画面は、2つの描画に分けることができます。一度に1つのルールだけを曲げ、どのルールを曲げたかを明示してください。