デザイントレーニング編08【LPデザイン①】
こんにちは。いぬのパグです。
雑談
突然ですが最近、
スパイスの「花椒（ホアジャオ）」にハマっています。
中国原産の調味料「花椒」。日本の「山椒」と同じミカン科サンショウ属の植物で、中国語で「ホアジャオ」、日本語では「かしょう」と読みます。山椒とは種が異なり、熟した赤い実を乾燥させたもので、より強い辛みとしびれが特徴的。
中華料理で花椒を使う代表的なメニューは「麻婆豆腐」。本場四川では、まず油で花椒と一緒に肉などを炒め、完成した麻婆豆腐にさらに花椒をミルなどで細かく挽いたものをふりかけるのが定番。日本の麻婆豆腐にはない強烈な辛みとしびれを楽しむことができます。
おすすめの花椒油とパウダーを貼らせていただきます。もやしのナムルなどにひと振りするも良し、坦々麺や麻婆豆腐にかけるとグッと本場感が出て「旅気分〜」と、ウキウキできます。
さて本題のトレーニングについてです。今回はLP（ランディングページ）のデザインをしていきます。
なんと１から！
とはいっても、トレーニング02の記事で作ったWFを使ってデザインしていきます。
まず！
LPとは
ランディングページ（Landing Page）とは、検索結果や広告などを経由して訪問者が最初にアクセスするページのことです。
訪問者がホームページに着地する（land）イメージからこの名前がつきました。略してLPとも呼ばれます。
デザインしたLP
諸事情により、実際の成果物と写真を一部変えて記載しております。デザインにてあたってスクリーンショットは以下から引用させていただいております。
●要素まとめ●
１）フォント
日本語：筑紫B丸ゴシック、英語：Sofia Pro Condensed
（日本語はナチュラルで親しみやすさを演出、英語はBOTANISTのロゴに近い縦長のフォントだったため採用）
２）カラー
テキストは#000000、そのほか#3589B8、青系
（透明感、ボタニカルから連想して青系や緑系の色味がいいと思った）
３）イラスト、写真
（イラストは線画でシンプルに。写真はできるだけ自然系、ボタニカル、水っぽいものを選んだ）
バナーデザインなどトレーニングしてきましたが、LPになると途端に何をしていけば良いのかわからなくなりました。
初めは「シンプル」、というより「単調で地味なデザイン」ばかりをしており、上司からのアドバイスやいろんなサイトを見て学んだことから、この完成形まできました。
苦労したこと・注意したいこと
Q１）シンプルと地味を履き違えていた。
▼
A１）初めは「シンプル、シンプル」と呪文のように唱え続け、ワイヤーフレームからほとんど手を加えてないようなデザインをしていました。それを上司に見せたところ、「いろんなサイトを見てみましょう」と提案され、参考事例としてスタジオスプーンの先輩デザイナーの完成デザインを見せてもらいました。
サイトはいつも通り以下から「シンプル」「ボタニカル」「自然」など、いろいろなキーワードやフィルターを用いて検索してみました。
シンプルながら魅力的なデザインがたくさんあり、その要素をまずは一つずつ詳細まで見て、それから真似て作ってみるというのを繰り返しました。自分の中にあるアイデアの箱をゴソゴソと探すより（そこはほとんど空っぽに近いので）、今はいろんなものを見て真似て手を動かしてみるのが一番いいなと思います。
Q２）あしらいを入れたいが、シンプルからかけ離れてしまいそうで、どんなあしらいを入れたらいいかわからない。
▼
A２）色のついたあしらいを入れすぎると、ごちゃごちゃとうるさくなってしまう気がしたので、線画のシンプルなイラストを各所に入れてみました。程よい華やかさと上品な感じが一気に増して、全体にまとまりが出たように感じました。
Q３）商品スペック・成分表示の欄がぎちぎちしすぎてしまう。
▼
A３）テキストサイズだけでなく「字間」「行間」を意識してテキストを組み立てよう。余白を「空け過ぎたかな」というほどとってみよう。物理的な線で区切らなくても、余白を十分にとることで、情報は整理されてシンプルさが生まれます。
Q４）BOTANISTっぽいフォントを使いたい。
▼
A４）XDはフォントを見て選ぶ機能がなくて大変不便ではありますが、いろいろ試してみるべし。私は漢字やひらがな、カタカナなど日本語には基本的に「筑紫B丸ゴシック」、英語や数字には「Sofia Pro Condensed」を使いました。
日本語に「筑紫B丸ゴシック」を使ったのは、ゴシックながらポップ過ぎず、シンプルで親しみやすさを感じたからです。
英語や数字に「Sofia Pro Condensed」を使ったのは、このフォントが縦長でBOTANISTのロゴに似ているな〜と思い、親和性が高いように感じたからです。
皆さんのおすすめのフォントがあればぜひ教えてください。
上司からのアドバイス
❶写真の上に置くキャッチコピーの背景に「ぼかし白」を入れる
❷成分表示のところでは、線を入れるよりも、余白を開けて背景の色をうつした方がブランドイメージに合っている。 （線を濃く入れると少しポップに見えるので、今回はできれば控えた方がいいか、線を薄くする方がいい）
❸ガイドだけでなく、視覚的な中心に配置することを心がける
❹画面の左右に縦にガイドを引いて、揃える箇所は揃える
特に❷と❸については「驚きの発見！」と言わんばかりの、自分には全くなかった視点だったので、「いいアドバイスをいただいてしまった…！」と吸収し、修正していきました。
ここからは作ったデザインで「ここよかったな〜」と思うポイントを紹介していきます。
Good1）モノクロイラストで綺麗めのあしらい
先ほども触れましたが、あしらいに迷ってモノクロの線画イラストを入れたのはGoodポイントだったと思います。カラフルでポップなあしらいを入れて、商品写真やテキストより目立ってしまっては本末転倒なので、その点はこれからも配慮していきたいですね。
Good2）写真と文章を交互に配置した
遊び心と言いますか、「かっちり順番に並べただけでは面白味がないなー」と思っていた時に思いついたレイアウトです。余白はしっかりとって、流れ・導線を作りながら。今改めてデザインを見ると、画像と見出し・本文をもう少し近接させて、セクションのまとまりを出してもよかったなと思いました。文字サイズももう少し大きくてもよかったのかも。
Good3）成分表示は実線で区切らず余白で魅せる
これは上司にいただいたアドバイスをもとに作成したデザインです。今まで、成分表示＝堅苦しく読みにくいもの、であり、区切る＝実線という頭だったので、正直度肝を抜かれました。実線よりもはるかにすっきりして、トンマナの統一を感じました。背景が隙間から見えることで、商品スペックがまるで水に浮いているようで視覚的にも入ってきやすい情報になったように思います。
最後に
今回は初めてLP（ランディングページ）のデザインにチャレンジしてみましたが、本当に大変なことばかりでした。
私には集中力がないのか、とりあえずヘッダーを作ったら「ふうぅ。」と休憩、そのあとMV（メインビュー）を作ったら「ふうぅぅ。」と休憩。というように、セクションが終わるごとに小休憩を挟んでいたほど、ぐっと疲労感を感じていました。
バナーなどは詰め込める要素が元から少ないので、サクッと作れるイメージがありますが、その分情報の整理をして取捨選択しなければなりません。LPなど一枚ものは、逆に情報量が多く一つひとつ要素を作り込んでいくことが大変です。
私は上から下まで順にデザインしていくやり方をとっているのですが、他のデザイナーさんたちはどのような順番で作っているのでしょうか？
ちなみにスプーンの先輩方に同じ質問をした際は
・MVや写真などまず目立つ要素を作り込んでいき、その後に他の要素をデザインしていく
・見出しや各場所の写真など目立つものを始めに作り込んでいく
などいろんな方がいました。
自分なりの、やりやすい順番を徐々に見つけていきたいですね。
次回はサイトリニューアルのトレーニングに移ります！
楽しみですね〜！
乞うご期待！
そのほかの記事はこちら。
この記事が気に入ったらサポートをしてみませんか？