TH01-17
「デザインを始めたら、なんだか情報が整理できなくなった」
その原因の多くは、ワイヤーフレーム（WF）の段階でデザインの4原則を無視していることにあります。
色や写真という「化粧」に頼らず、モノクロの四角と文字だけで情報を整理しきる。
これがデザイナーの設計術です。
目次
「グレースケール」で対比を設計する
WFは単なる配置図ではありません。
この段階で、情報の優先順位を「明度差」で確定させます。
- ロジック：最も重要な要素（CTAなど）は黒に近いグレー、補足情報は薄いグレー。サイズ差だけでなく「濃淡」で対比をつけることで、色をつける前から視線誘導が完成します。
「近接」をマージンの数値で定義する
「なんとなく」四角を並べるのではなく、WFの時点で余白のルールを適用します。
- 情報の塊を作る：関連する見出しとテキストをグループ化し、他のセクションとの距離を「大・中・小」の数値（例：64px / 24px / 8px）で明確に分断します。
- この段階で「塊」として見えないものは、色をつけても整理されません。
「整列」の軸（グリッド）を固定する
WFの時点で「見えない線」を一本通します。
- グリッドシステム：12カラムなどのグリッドを引き、すべての要素がその線の上に載るように配置します。
- ロジック：骨組みがガタついている建築に、きれいな壁紙を貼っても傾きは直りません。整列はWFにおける「背骨」です。
「反復」をコンポーネントとして配置する
同じ役割のパーツ（ニュースリスト、ボタン、見出し）を、WFの段階でコピペして使い回します。
- 一貫性の検証：全ページを通して「同じルールが機能するか」を、色がない状態でテストします。
- ここで違和感があれば、それは装飾の問題ではなく、構造の欠陥（反復の崩れ）です。
ワイヤーフレームは「設計図」
本サイトの視点では、WFが完成した時点でデザインの8割は終わっています。
色や写真でごまかせないモノクロの世界で、4原則を使って情報を完璧に統制する。
この「骨組みの精度」が、最終的なアウトプットの説得力を左右します。