作成:2019/01/21Webデザイン流行りを取り入れ、デザインの基本原則や配色などルールを守っているのに、パッとしないレイアウトになる。それは論理的にデザインを捉えてないからです。今回はユーザーが理解しやすいWebデザインのレイアウトを作る法則を書きました。論理的思考をデザインにあてはめると、誰が何と言おうと以下のようになります。ファーストビューに主張があることデザインに根拠がある(なぜ、斜めなのか。スプリットスクリーンなのか)サイト全体を通して、意味がつながっていること僕が実践しているレイアウト構築方法を解説していきます。ファーストビューに主張があるスクロールせずに見える範囲の写真やキャッチコピーに理解しやすい主張があること。ここでいう主張とは結論のことです。ファーストビューだけで「何が言いたいのか」理解できないと、混乱を招きます。「かっこいい」「流行っている」という理由だけでデザインを取り入れていると、意味の通らないファーストビューになります。ユーザーはサイトの言わんとしていることを推測し、分かりやすく言い換えて理解します。造り手側はユーザーの理解の手間を軽減してあげることが必要です。ウェブデザインとはアートではなくて、伝えることでもあるので結論を理解しやすい形で表現すべきです。「なぜ、明るめの配色にしたのか?」と問うと過去に向けて原因を探ることができるし、「なぜ、ここで余白を取るのか?」と問うと未来への目的を再確認することができます。当たり前のことなんですが、デザイン構築の途中段階で何度もWhy思考を行う癖をつけておくと、違和感のないデザインに向かうことができます。「なぜ、スプリットスクリーンにするのか?なぜ、余白をとるのか?」・・・と聞かれたときに、説明できるか、説明しなくてもユーザーが根拠を理解できるか。要望に対してすぐにYESと言わないことクライアントさんに「スライダーをつけてくれ」と言われたとして、そのままYESで進めてはいけません。根拠なく思いつきで希望している場合もあるからです。問題そのものに問題がないか、Why思考で対応すべきです。スライダーをつけたいのですか?サイト全体を通して、意味がつながっていることサイト全体を通して「統一感のあるデザイン」になっているか、飛躍したデザインが混じってないか。会話と同じで筋道を立てた構成になっているか。デザインだけでなく、フォント・配色・文章も飛躍していないかチェックしてください。チェックの方法は「唐突に無関係な○○」が出てきていないかです。文章はどのように構築するのか?SEO対策優先か、ユーザビリティ優先か、デザインに添ったものにするのか。優先順位は色々あるかと思いますが、いかなる場合も共通して、全ての文章を流れるように読ませるには「全体の文章は最初の数行を次々に言い換えたもの」にしておくことが重要です。原理的には一行読んだところで、後は言い換えになるから繋がっているし、ユーザーは労せずして大体理解できるというわけです。抽象化の視点でチェックすること作り込んだ細部を組み合わせた後に、全体をみると何やら違和感を感じることがあります。これは、抽象化してチェックしていないからです。抽象化とは、特徴を大まかにとらえることです。枝葉を切り捨てざっくり考える。全体像を掴むことで、今まで気づかなかったことを気づけるようになります。抽象化の癖をつけておくと「色々な機能を取り入れよう」という考え方ではなく、「この機能は削っても問題ない」という考え方ができるようになります。トレンドは帰納的に発見し、優先順位に気をつける帰納とは共通点から一般法則や結論を見つけること。「ハチ公は嬉しいと尻尾を振る、スヌーピーも嬉しいと尻尾をふる」→「犬は嬉しいと尻尾をふる」といった感じ。同じようにトレンドも帰納法で発見することができるんですが、コンセプトからずれるようであれば無理に取り入れる必要はありません。いえ、サイトにおいては、ユーザー視点が最優先されるべきなので、トレンドの優先順位が1位であってはならないです。成果物に対して、クライアントさんの反応が薄いときは、トレンド優先になっている可能性があります。最後はパトスアリストテレスは、人を動かすには3つ必要だと言っています。ロジック(ロゴス)倫理(エトス)情熱(パトス)論理だけでは人は動かんということですね。情熱を産み出す秘術を教えましょう。お客さんの業種に興味がないときは、その業種の本を数冊買ってザッと読んで、ノートにメモしていくと次第に興味が出てきて楽しくなります。興味は知から生まれる。知らないから興味が湧かない。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2013/10/28プロっぽくなった!フォントや「文字」に関するまとめ先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩2016/08/16アイデアがガンガン降り注ぐ、Webデザインの参考になるギャラリー集ありきたりのWebデザインギャラリーではなく、グリッド線が入っているもの、料金表専門、インフォグラフィックスやグリッド・404・サイドバーなど、少し掘り下げたようなWebデザイ2013/11/5画像は使わない!文字を装飾するCSS/jsまとめ画像を使うと変更がめんどう。出来ることならテキストで済ませたい。波を取り入れたファーストビューを提案したい時に。デザインカンプなどに使える、Photoshopで波や曲線を作る方法。