未経験でWebデザインにチャレンジする。家具の広告バナー制作を請け負ったとします。与件としてはシンプルに「アクセス数を増やす」で良いでしょう。広告バナーを作る際に最低限必要な要素は「文字」と「写真」です。文字と写真の優先順位は、製品の内容により異なります。多くは文字を読ませ写真はそれを補足するものという考えが多いでしょう。広告バナーに使う、最初の用意するものとしては以上のようなものです。これらを優先順位にそって配置してみましょう。ロゴは左右上部に配置するのが一般的です。キャッチコピーはリードコピーより優先順位が高いので、配置も上部になります。次に文字のサイズを変更します。リードコピーは「読んでくれたら幸い」程度に考えます。キャッチコピーに惹かれて読んでみようと思う人以外、ほとんどの人は読みません。このバナーは「チェア」を探している人向けなので、キャッチコピーは「チェアの選び方」を大きくしました。要素が優先順位に沿って枠の中に収まれば、配置はひとまず完了です。デザイン(余白をつくる)基本的に人間の目線は左上から開始され、右下に流れていくのが自然です。余白は「ホワイトスペース」とも呼ばれます。余白がない一番右の例では画面に色や形がいっぱいに入っており余裕がありません。そのせいで立体感がなくなり要素の優先順位があいまいになっています。余白のある写真を使ったり文字の大きさを調整し、余白を作っていきましょう。余分な部分を消すような修正作業が必要になります。デザイン(目を引く方法と目線の流れ)目を引くための「アイキャッチ」を作ります。アイキャッチとは一番最初に目に入る要素のことです。目線の流れの最初の起点を作る作業です。この段階で、要素に対するおおよその色調を決めていきます。目線は、大きいものから小さいものへ、同じ形どうし、同じ色どうし、濃い色から薄い色へ、と移動する習性があります。下の図形の目線はどうなるでしょうか?おそらくこのような目線になると思います。目線の法則(上から下、左から右)から外れた誘導も可能となります。矢印の先(目線の先)に重要な要素を配置すれば、思い通りに誘導することができます。バナーは以下のような考えの過程でデザインされていきます。最初に目に飛び込ませたい要素を大きくし色を、椅子の脚の色を濃くした色に変えておきます。上部に有るけどメインではない要素の色を薄くして背景に溶け込ませます。文字の組み方(レイアウト)を変更し、真ん中に余白を作り、椅子への目線を邪魔しないようにします。目を細めて観察すると、目線の流れを追うことができます。ユーザーはゆっくりバナーの内容を読んでくれるわけではありません。多くのコンテンツの中からバナーを認知してもらえる時間は0.1秒以下でしょう。その限られた時間のなかで、「チェア」という言葉と「椅子の写真」を認知してもらえたらこのデザインは合格だといえます。これで椅子が欲しいなと思っているユーザーであれば、内容を読んでくれる可能性が広がりました。デザイン(書体を考える)文字の書体(フォント)を変更するとずいぶん印象が変わります。一般的に読みやすい書体は「ゴシック」、高級感を出したいときは「明朝」など言われますが、適宜てきぎデザインに合わせて選択していきます。デザインの最初の段階ではPCの標準書体(Macであればヒラギノや小塚など)で組んでも良いですが、このあたりのタイミングで大まかな書体設計を行っていきます。書体は万能ではありません。小さくした場合や大きくした場合に読みにくくなる書体もあります。実際のサイズにして可読性かどくせいを確認しましょう。一般的には5px以下の文字は読むのが困難になります。書体の追加タイトルの書体をデザインしたいとき、PCに最初から入っている標準の書体だと物足りない場合があります。そのときは書体をダウンロードして書体を追することができます。有料・無料含めて、書体はかなりの数が存在します。無料のサービスもたくさんあるのでgoogleフォントからダウンロードしてみてください。googleフォントダウンロードボタンをクリックします。ダウンロードされたフォントをクリックすると、フォントの内容が表示されます。右下の[フォントをインストール]ボタンをクリックし、インストールします。デザイン(立体感を出す)ただ文字と画像を並べただけでは平坦な印象で目に止まりません。意図的に作ってあげると機能を果たすようになります。なじませたり立体感を出しながら、まず「見れる」状態まで持っていき、上長にデザインを確認しましょう。バリエーションとしては以下のように展開することができるでしょう。写真を変えることが可能な場合はよりデザインの幅が広がりますね。質問などあればSlackで。バックエンドデザイン学習に関するご質問はこちらまで技術的な質問はSlackにログインして問い合わせてください。返答までお時間かかることもあります。