TL;DR

流行りを取り入れ、デザインの基本原則や配色などルールを守っているのに、パッとしないレイアウトになる。それは論理的にデザインを捉えてないからです。今回はユーザーが理解しやすい Web デザインのレイアウトを作る法則を書きました。

論理的に考えるサイトデザインの法則

論理的思考をデザインにあてはめると、誰が何と言おうと以下のようになります。

• ファーストビューに主張があること
• デザインに根拠がある（なぜ、斜めなのか。なぜ、スプリットスクリーンなのか）
• サイト全体を通して、意味がつながっていること

僕が実践しているレイアウト構築方法を解説していきます。

ファーストビューに主張がある

スクロールせずに見える範囲の写真やキャッチコピーに理解しやすい主張があること。ここでいう主張とは結論のことです。ファーストビューだけで「何が言いたいのか」理解できないと、混乱を招きます。

ただ「かっこいい」「流行っている」という理由だけでデザインを取り入れていると、意味の通らないファーストビューになります。

ユーザーはサイトの言わんとしていることを推測し、分かりやすく言い換えて理解します。造り手側はユーザーの理解の手間を軽減してあげることが必要です。ウェブデザインとはアートではなくて、伝えることでもあるので結論を理解しやすい形で表現すべきです。

Why 思考で根拠を確認

例えば「なぜ、明るめの配色にしたのか？」と問うと過去に向けて原因を探ることができるし、「なぜ、ここで余白を取るのか？」と問うと未来への目的を再確認することができます。当たり前のことなんですが、デザイン構築の途中段階で何度も Why 思考を行う癖をつけておくと、違和感のないデザインに向かうことができます。

「なぜ、スプリットスクリーンにするのか？なぜ、余白をとるのか？」・・・と聞かれたときに、説明できるか、説明しなくてもユーザーが根拠を理解できるか。

要望に対してすぐに YES と言わないこと

クライアントさんに「スライダーをつけてくれ」と言われたとして、そのまま YES で進めてはいけません。根拠なく思いつきで希望している場合もあるからです。問題そのものに問題がないか、Why 思考で対応すべきです。

クライアント「スライダーつけて」

✕ → どんなスライダーにしたいですか？
○ → なぜ、スライダーをつけたいのですか？

サイト全体を通して、意味がつながっていること

サイト全体を通して「統一感のあるデザイン」になっているか、飛躍したデザインが混じってないか。会話と同じで筋道を立てた構成になっているか。

デザインだけでなく、フォント・配色・文章も飛躍していないかチェックしてください。チェックの方法は「唐突に無関係な ○○」が出てきていないかです。

ロジカルに文章を書く秘術

文章はどのように構築するのか？SEO 対策優先か、ユーザビリティ優先か、デザインに添ったものにするのか。

優先順位は色々あるかと思いますが、いかなる場合も共通して、全ての文章を流れるように読ませるには「全体の文章は最初の数行を次々に言い換えたもの」にしておくことが重要です。

原理的には一行読んだところで、後は言い換えになるから繋がっているし、ユーザーは労せずして大体理解できるというわけです。

抽象化の視点でチェックすること

作り込んだ細部を組み合わせた後に、全体をみると何やら違和感を感じることがあります。これは、抽象化してチェックしていないからです。抽象化とは、特徴を大まかにとらえることです。枝葉を切り捨てざっくり考える。全体像を掴むことで、今まで気づかなかったことを気づけるようになります。

抽象化の癖をつけておくと「色々な機能を取り入れよう」という考え方ではなく、「この機能は削っても問題ない」という考え方ができるようになります。

トレンドは帰納的に発見し、優先順位に気をつける

帰納とは共通点から一般法則や結論を見つけること。例えば「ハチ公は嬉しいと尻尾を振る、スヌーピーも嬉しいと尻尾をふる」→「犬は嬉しいと尻尾をふる」といった感じ。同じようにトレンドも帰納法で発見することができるんですが、コンセプトからずれるようであれば無理に取り入れる必要はありません。

とはいえ、サイトにおいては、ユーザー視点が最優先されるべきなので、トレンドの優先順位が 1 位であってはならないです。成果物に対して、クライアントさんの反応が薄いときは、トレンド優先になっている可能性があります。

最後はパトス

アリストテレスは、人を動かすには 3 つ必要だと言っています。

• ロジック（ロゴス）
• 倫理（エトス）
• 情熱（パトス）

論理だけでは人は動かんということですね。

情熱を産み出す秘術を教えましょう。お客さんの業種に興味がないときは、その業種の本を数冊買ってザッと読んで、ノートにメモしていくと次第に興味が出てきて楽しくなります。つまり、興味は知から生まれる。知らないから興味が湧かない。

最終的には「興味持って作った！」という情熱がユーザーにも伝わるので、レトリックやロジックだけで終わらないように楽しんでデザインしましょう！