デザイン参考
青い網点を重ねた、手綱を持つ人物の古典画に、白く細長いセリフ体の Design Harness。下に日本語の説明、上に小さな英字のナビゲーション
青い絵を背景に、左は番号付きの同心円、右は Four Layers と制約・文脈・検証・評価の四行。各行の右端に矢印
白地に青い Patterns。下は実例の画面二枚と事例募集の三列で、分類のピル、題、タグを同じ位置に揃える
青い馬と手綱の絵に「ハーネスを、あなたのデザインに。」。白く塗ったお問い合わせと、輪郭だけの noteを購読を並べる

REFERENCE

Design Harness

サイトを見る
日本語/AI/タイポグラフィdesign-harness.com

AIエージェントと進めるデザインプロセスの考え方と実例を紹介するサイト。青い網点と細長いセリフ体で入り、4層モデルは同心円と罫線、実例は白地の三列に戻す。

Design Harness は、AIエージェントの力を人の判断で方向づけながら、デザインを進めるための考え方と、実例・記事・イベントを紹介するサイト。第一画面は手綱を持つ人物の古典画に鮮やかな青と網点を重ね、白く細長いセリフ体の Design Harness を大きく置く。上のナビゲーションは字間を広げた小さな英字で、説明は下の日本語二行。大きな題と明朝の本文に対し、番号や英語の補助情報は小さく揃える。下にはパートナーのロゴが横に流れ、端の一時停止ボタンで動きを止められる。

この画面を残しているのは、手綱という比喩を青い絵に預け、抽象的な説明を図と一覧へ切り替えているからだ。Four Layers は左に四つの同心円、右に制約・文脈・検証・評価の四行。番号、和文、英語、右端の矢印を細い罫線で揃え、各層をボタンにする。Patterns は白地へ戻り、実例の画面と事例募集を三列に並べる。画像の下は分類のピル、題、タグの同じ順で、青は見出しと枠に残る。終盤の相談は再び青い絵を敷き、「ハーネスを、あなたのデザインに。」を二行にし、お問い合わせを白い面、noteの購読を白い輪郭のボタンに分ける。flenteが画面を組むときも、概念を伝える絵と大きな題で入り、読む部分は罫線の行と同じ幅のカードに揃え、青い面を導入と相談の目印に使う参照になる。

相談