デザインスキル講座 第3回 LP制作とフィードバック

皆さんこんにちは。20新卒、仙台勤務の川上真歩です。

この度はデザインスキルフェロー講座第3回目（全3回）の内容や私が学んだこと・感じたことについて紹介させていただきます。

課題内容

今回の講座に先立って出題された課題は、第2回のバナー制作課題と同一のWebデザインスクールのサイト（ランディングページ）の制作でした。

・横幅は1200px以内、縦幅は任意・PCサイトのみ（スマホはなし）
・ロゴ・画像はバナー素材を使用可
・提出ファイルはPNG形式

前回（バナー広告制作）と同様、ターゲットに合ったデザインの方向性や情報の優先度を自分で考え、デザイン設計・制作を行っていきました。

今回制作したサイトには2箇所グラフがあり、グラフの内容をいかに伝わりやすく工夫するかという点が今回のポイントの1つだったのではないかと思います。

質問へのご回答とメッセージ　ピップアップ

講義の冒頭にて、米倉さんが前回参加者の制作物を見て感じたことや質問に対してお答えしていた内容で、特に気になった内容を紹介いたします。

ターゲットをイメージしたデザインを考えるコツやポイントは？

→ターゲット層が好む他ジャンルのもの、例えばブランドや雑誌をリサーチ・参考にするとわかりやすい。デザインのまとめサイト（ギャラリーサイト）などでいろんなイメージを収集してイメージムードボードを作ってみると良いです。

製作時に多くの人が陥りがちなこと、“実際のサイズで確認していない”

→制作物は100％のサイズの時に内容が伝わるかどうかをチェックする。製作時は、細かい部分を作る時に画面を拡大することが多いので要素や文字が実際にWEB上に表示されたときのサイズで見づらくなっていないか注意。ある程度細かい作業をした後、縮小して100%の大きさに戻って確認してみるようにしましょう。

私もデザイン制作時にデザインの参考探しに様々なギャラリーサイトを利用していますが、ターゲットの嗜好に合った雑誌をチェックしてみるのも面白そうなので今度普段買わない雑誌を買ってみたいと思いました。２つ目の“実際のサイズで確認していない”については、まさに私がよく起こしてしまう失敗でした。アプリのアイコンを制作するときなど、かなり拡大した状態で作業し完成してから実際の画面に当てはめてみると線がつぶれて見えてしまい、再度調整するということがしばしば…。「途中で実寸サイズに戻して確認」を習慣づけようと思います。

フィードバックについて

参加者の皆さんの制作物に対してフィードバック頂いた内容の一部をまとめさせていただきました。

・写真背景に文字をかぶせる場合は、被写体とのバランスに気をつける。人物の顔に文字が被らないようにするなど。
・文字の配列のルールはある程度揃える。見出しを中央揃えにしたらそれ以降の見出しも中央揃えに統一するなど。
・文字の視認性に気をつける。背景とのコントラストが弱いと読みづらくなるので、十分な強さになるよう設計する。
・情報は大きさや色、装飾などで強弱をつける。目立つものとそうでないものを分けると内容が入ってきやすい。
・ボタンなど、押して欲しいところは目立たせて目線を誘導させるとGOOD！
・グラフは「減少」などネガティブな項目を暗い印象の色にするとわかりやすい。
・同じまとまりの情報は「近接」させてぱっと見で同じグループだとわかるように。
・ドロップシャドウを使うなど要素の重なりを表現したい場合、現実に存在するものと同じく上の要素の影が大きくなるように。

課題で登場した「説明会を予約する」ボタンなど、コンバージョンに関わる要素は特に目に止まるよう、位置や色・大きさを工夫することが必要ですね。

私は自分で先に決めていた色数で制作したいがあまり、背景と文字のバランスが合わず視認性が低くなっている部分があったので反省です…！

所感

現在の業務ではアプリ画面制作をメインに行っているので、久しぶりにバナーやLPの制作をすることができて楽しかったです。

また、今回の講座は１００人を超す参加者だったため、他の人の制作物を沢山目にすることができました。１人１人がターゲットやサイトの目的について独自の視点から解釈をしており、自分では辿りつけない考え方に触れることができてとても勉強になりました。

新卒1年目の私はデザイナーとしてまだまだ半人前ですが、一人前になったと周囲に認められるようになってからも勉強はずっと続くと思います。

時代の流れを汲みとり、常に新しい知識を取り入れて最適な形でアウトプットできるよう、日々努力を続けていきます。