TH01-18
デザインの4原則を完璧に守ると、非常に美しく、整った画面が完成します。
しかし、あまりにも整いすぎていると、ユーザーの視線はどこにも引っかからず、スムーズに通り過ぎてしまうことがあります。
プロは、ここぞという場所で「あえて原則を崩す」ことで、ユーザーの足を止めさせる「フック（違和感）」を作り出します。
目次
「崩し」は「型」があってこそ生きる
大前提として、9割の要素が4原則に従っているからこそ、残りの1割の「崩し」が際立ちます。
すべてがバラバラなのは単なる「下手なデザイン」ですが、整列の中にひとつだけズレた要素があるのは「意図的な演出」です。
具体的な「崩し」のテクニック
① 【整列・近接】を崩す：はみ出しと孤立
グリッドに沿って配置された要素の中で、写真だけを大きくはみ出させたり、広大な余白の中にポツンとひとつの要素を置いたりします。
- 効果：画面に奥行きが生まれ、その要素に圧倒的な「主役感」が生まれます。
② 【反復】を崩す：異質な要素の挿入
同じパターンのリストが続く中で、1箇所だけ全く異なる形状や色のバリエーションを混ぜます。
- 効果：ユーザーの「慣れ」による見落としを防ぎ、「おや？」と思わせて注目を促します。
③ 【対比】を崩す：優先順位の「逆転」と「同化」
通常は「タイトル ＞ 本文」ですが、あえて本文中の1単語をタイトルより巨大化させたり、逆にすべての対比をなくしてフラットに並べたりします。
- 効果：情報の階層を意図的に壊すことで、ユーザーに「なぜ？」という引っかかりを与え、情緒的でアーティスティックな印象を残します。
「不快な違和感」にしないためのロジック
ルールを破る際、それが「ミス」に見えないようにするための防波堤が必要です。
- 中途半端にズラさない：数ピクセルのズレはミスに見えます。崩すときは、誰が見ても「意図的だ」とわかるほど大胆にズラします。
- 目的を明確にする：その崩しは「どこを見てほしいから」やるのか？ 理由が説明できない崩しは不要なノイズです。
ルールを知る者は、ルールを超えられる
本サイトの最終目標は、ロジックを使いこなした上で、それを自らの手でコントロールすることです。
まずは4原則を完璧にマスターしましょう。
その上で、ユーザーの視線を釘付けにしたい瞬間、あえて「正解」を捨ててみてください。
その「違和感」こそが、人の心を動かすデザインのスパイスになります。