黄金比デザイン

状況: 記事ページのコンテンツ幅とサイドバー幅を「なんとなく」で決めていたが、デバイスごとの表示崩れが頻発し、リデザインのたびに幅を再調整していた。

適用プロセス:

1. コンテンツエリア960pxを黄金比で分割：メイン593px、サイドバー367px
2. メインコンテンツの行間を本文16px×1.618=26pxに設定
3. セクション間の余白を26px×1.618≒42pxで統一

成果: 記事の読了率が平均15%向上。デザイナーからも「レイアウトの意思決定が速くなった」との評価。リデザイン時の幅調整議論がなくなり、設計工数が30%削減された。

状況: プロダクトの拡大に伴い3つのチームが独自のフォントサイズを使用。h1が32px・36px・40pxの3バリエーションが混在し、一貫性が崩壊していた。

適用プロセス:

1. 本文14pxを基準に黄金比スケールを計算：14→23→37→60px
2. 4段階のヘッディングサイズとして全チームで採用
3. 余白も8px基準で8→13→21→34pxの4段階を設定

成果: フォントサイズのバリエーションが12種→4種に統一。コンポーネント間の余白も一貫し、ユーザーの「読みやすさ」スコアが5段階中3.2→4.4に向上した。

状況: ロゴリニューアルに際し、新ロゴのシンボルとロゴタイプ（文字部分）のバランスが何度修正してもデザインチーム内で合意に至らなかった。

適用プロセス:

1. シンボルの高さとロゴタイプの高さを1:1.618に設定
2. シンボルとロゴタイプの間隔はシンボル高さの1/1.618（≒0.618倍）
3. 黄金螺旋をガイドにシンボル内のフォーカスポイントを配置

成果: 黄金比という客観的基準があったことで、レビュー2回で全員合意に到達。従来は平均6回の修正サイクルが必要だった。完成ロゴは外部評価でも「洗練されている」との高評価を獲得した。