【2~3ヶ月目】キービジュアル・デザインのスマホ化

バナー制作の次は、LPに戻って、キービ作成・スマホ化です。
その後、実践的な課題をやってみようということで、ランサーズに落ちている案件に実際に取り組みました。

１、キービジュアル
　１−１、キービジュアル課題の意味
　１−２、キービジュアルで難しかったこと
　１−３、キービジュアルから学んだこと

２、デザインのスマホ化
　２−１、スマホ化の課題の意味
　２−２、スマホ化で難しかったこと
　２−３、スマホ化から学んだこと

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

１、キービジュアルの作成

１−１、キービジュアルを学ぶ意味
人は今情報過多な状況で、瞬時に判断をしています。例えばそのWebページを「読むか、読まないか」も。

LPに与えられた時間もわずか2秒です。
2秒で「それ以降読み進めるか否か」を判断していると言われています。

ですから、最初に目に入る「キービジュアル」は最重要ポイントになります。ユーザーにとって「もっと読みたい」と思わせられるデザインができれば（思考が身につけば）、どんな商材になろうと応用を効かせられるようになります。

１−２、キービジュアルで難しかったこと

・伝えたい情報の伝え方
　┝余白、フォントサイズ、グルーピング、色味
・ありきたりなデザインから脱するには
　┝人バーン！キャッチコピードーン！な、よくあるLPデザインにしたくない←

まだまだデザイン素人な私たち生徒に対して先生は、こんなアドバイスをくれていました。

「装飾をつけずにデザインすること」

基礎ができていないのに装飾を多用すると、ダサくなりがち。例えば、光彩とかドロップシャドウとか、境界線など。初めはそれらを使わないで、デザイン基礎を叩き込みましょうという方針で進みました。

１−３、キービジュアル制作で学んだこと

それ以降の全体のLPデザインにも関わってくる大事な初段階。

・メリハリの付け方（色、フォント、グルーピング、余白）
・ユーザーの視線誘導
・参考サイトを見つけて、デザインのイメージをつけること

＜私の実際の制作物＞

それぞれbeforeとafterです。

情報をどうグルーピングするのか。
グルーピングの方法として、フォントサイズ・配置・整列・余白などがありますが、これらは私は卒業するまでずっと課題でした。なかなかつかめなくて難しいです。

先生にフィードバックを受けると、細かい奥行き感の出し方や色の使い方など、知らなかった新しいことを教えてもらえ、少しずつ自分の中で引き出しが増えていく感じでした！

キービジュアルのカリキュラムは2週間、3つ作成しました。

２、スマホ化
２−１、デザインのスマホ化を学ぶ意味

今どき、スマホで情報収集したり買い物したりする人の方が多いので、スマホで見るデザインを重視する傾向にあるのですが、そうは言っても特にtoB商材はやはりPCで見られることも多いので、PCデザインも必要。

レスポンシブで実装すれば一つのデザインを作ってdoneな感じもしますが、どうしてもそのデバイスに“最適化”されたデザインにはなりません。だからMD Studioの運営元free web hopeは、基本的にPCデザインとスマホデザインをそれぞれ作って納品します。スマホだけのデザインをしっかり作り込むのです。

・スマホ（縦長画面）でも見やすいデザイン・フォントの感覚を掴む
・操作性を考える

という思考が身につきます。

２−２、スマホ化で難しかったこと

これまでずっとPCデザインをしてきたので、適切なフォントサイズがさっぱりわかりません。

先生からアドバイスをもらったのは、

・Yahoo!ニュースなどのニュースサイトなど、普段目にするサイトのフォントサイズを見てみる
・スマホデザインのインプットをする

２−３、スマホ化で学んだこと

基本的に全て縦組みデザインになるので、どうしてもページが長くなりがちです。

ユーザーは基本的に文字は「読まない」前提でLPは作るのですが、それでも「読ませたい（目に入れさせたい）」「できたら読んでほしい」「読まなくてもよい（←え）」文章に自分の中で優先順を付けて、フォントサイズやデザインを決めていくのが良さそうだと思いました。そのためには、やはり商材理解が必須。PCデザインでも必要なのですが、スマホ化する場合はさらに伝える情報の取捨選択が必要そうです。

＜私の実際の制作物＞

すでに完成したPCデザインのPSDデータがあり、それをスマホ用に組み換える感じです。

2カ月を終えて

・フォトショの使い方はだいぶ慣れた
・デザインの様々な着眼点が増えた

・参考サイト見つけて、デザインの構想をイメージする時間がかなりかかる
・余白、フォントサイズ、グルーピングなどデザイン基礎がなかなか掴めない
・