ランディングページのデザイン制作をする時、全く捗らなくてパソコンの前でマウスを動かすだけで時間ばかりが過ぎていくことありませんか？
実はプロのデザイナーなら必ず行なっているある1つの工程を取り入れるだけで、誰でも効率よくデザイン制作が捗るようになります。
その工程とは「ラフ制作」といいます。
プロのデザイナーでも、この「ラフ制作」を省くとデザイン制作に時間がかかってしまうくらいこの工程は必須です。
本記事では、ランディングページの「ラフ制作」の方法を紹介いたします。
「ラフ制作」をマスターして、効率よくランディングページのデザインを行えるようにしましょう！
この記事の内容
ランディングページのラフって何？
ランディングページの制作過程は基本的に以下の流れになります。
まずはワイヤーフレームを制作して、ランディングページの骨格部分を作ります。
そして、次にラフ制作へ取り掛かります。
ラフ制作というのは、手書きでデザインのスケッチを行い、デザインソフトで清書することです。
ランディングページはもちろん、ロゴデザイン、フライヤー、ポスターなど、全てのデザインに於いて、いきなりパソコンの前に座り、デザイン制作を始める人は中々いません。
頭の中の情報が整理されておらず、マウスをカチカチしているだけで時間が無駄になってしまいます。（既に頭の中で情報整理が出来ているのであれば例外）
キャッチコピーの位置、画像の位置などをデザインを施す前に、予めイメージしておくことで頭の中で情報整理が出来ているので、非常に効率が良くなります。
今回_musubuのランディングページを元に、ラフの作り方を解説していきます。
https://musubu-official.jp/lp/
【完成図】
ラフの作り方
ランディングページのラフ制作には3つのステップがあります。
1.手書きでラフスケッチをする
2.デザインソフトで清書する
3.ユーザー目線に立って確認する
この3つのステップが必要になります。
全て必須項目のステップなので順を追って説明していきますね。
1.手書きでラフを作る
まずは手書きでスケッチができる紙とペンを用意します。
ある程度ヘッダーの高さなどを決めて、ビジュアル面のラフスケッチをしていきます。
今回のサンプルであれば、手の位置、アイコンの位置、コピーの位置などを手書きで書き起こしていきます。
もちろん、キレイに作る必要なんてないです。
キレイに描こうとすると、余計な時間をばかりを取られてしまうので、ディレクターなどに確認作業が必要な場合以外は、自分だけがわかればいいです＾＾
いきなりパソコンで作らず、あくまでも手作業で作ってイマジネーションを広げていきます。
ちなみに手書きのラフスケッチが必要な箇所は、デザインを施す部分だけで良いです。
ヘッダーはもちろんですが、他にもデザインが施される箇所ですね。
2.デザインソフトで清書する
ある程度手書きのスケッチができたら、デザインソフトで清書しましょう。
清書をするデザインソフトはいくつかあります。
Illustrator（イラストレーター）
元々はグラフィックデザイン（平面上で写真や文字を配置するデザイン）専用で作られたソフトですが、現在はウェブデザインも作れるような仕様になってきています。
Photoshop（フォトショップ）
一般的には画像編集ソフトとして非常に有名です。
スライス（ウェブ用に画像を切り取る）作業がPhotoshopだと非常にやりやすいということから、今も多くの方がウェブ制作をPhotoshopで行なっています。
ちなみに私は清書、デザインを起こす時は必ずIllustratorで行なっています。
というのもIllustratorはグラフィックデザインソフトとして開発されているので、細かい作業の融通が効きます。
例えば文字を大きくしたり、文字を移動させたりする工程を簡単に行うことが可能です。
もしこれからIllustrator、Photoshopで悩んでいるのであれば一度自分で操作してみて判断するのもいいかもしれません。
中にはPhotoshopの方が操作しやすいという人もいますので＾＾
ただ今回はIllustratorで清書をしていきたいと思います。
画像の位置や、実際に入るコピーを入れていきます。
手書きスケッチの際は、ヘッダーより下のコンテンツ部分の文章は入力しなくてよかったですが、清書の場合はすぐにデザイン制作に入れるように実際に入力しましょう。
清書が終わればランディングページのレイアウト、長さなどを把握することができます。
3.ユーザー目線に立って確認する
清書が完成してもすぐにデザイン制作へは入らず、必ず清書したランディングページを上から下まで何度でも読んでください。
なぜこの確認作業が必要なのか？
誤字脱字の確認はもちろんなのですが、デザインを施していない状態で見ると、フラットに見ることができます。
つまりこの文章と構成でユーザーに刺さるランディングページなのか？を確認することができます。
この状態でユーザーの心理に突き刺さらないランディングページは、結局デザインを施してもただの飾りでしかなりません。
ランディングページにおけるデザイン役目は、コピーを引き立てる事が役目です。
なぜラフが必要なのか？
ランディングページにラフ制作が必要な理由として2つあります。
その1.デザイン制作をスムーズに行う為に必要
ランディングページだけに限った話ではないですが、デザイン制作全般を行う際、ラフ制作がないと次の工程のデザイン制作がスムーズに行えません。
理由は、頭の中で整理されてない状態でマウスを動かしているだけだと、パソコンから生み出されるデジタルの固いイメージが邪魔をして、柔軟な発想ができないのです。
例えばロゴデザイン。
何百個のラフスケッチを手書きで描き上げて、ノート一冊がロゴのラフスケッチになることはデザイナーあるあるです。（最初からイメージができている場合は、最初からデザインソフトで作り上げることもあり）
柔軟な発想を作り上げるのはアナログで描くラフスケッチ。
ラフスケッチを行いイメージとあったものをピックアップし、次の工程のデザイン制作をスムーズに行えるようにしましょう。
その2.デザイン制作前にクライアントへの確認
デザイン制作を本格的に行う前に、私は必ずクライアントへ清書段階のサンプルを確認していただきます。
ここでは文章はもちろん、クライアントが求めているないようになっているのかの確認作業です
この工程を飛ばしてしまうと、デザインに入ってから大幅なレイアウトや大幅な文章の変更になってしまうと、時間や手間がかかってしまいます。
清書の段階で一度クライアントに確認していただき、問題なければそのままデザイン制作に入り、足したい内容や削除したい内容があればここで修正します。
クライアントの確認は必ず行うようにしましょう。
ワイヤーフレームとの違いとは？
ワイヤーフレームとラフの違いですが、これはラフと混同されている方もいらっしゃるので、あくまでも自分の見解を述べさせていただきます。
まずランディングページ制作の工程をご覧ください。
ワイヤーフレームとは、制作を行う最初の作業でWebページのレイアウト設計図となります。
実際の_musubuランディングページのワイヤーフレームを見てみましょう
どこにCVボタンがあるのか、どこに画像が入るのかがわかるような設計図になってます。
ランディングページの場合は主に1カラムで構成されているので、そこまで複雑なワイヤーフレームではありませんが、通常のホームページの場合はページ毎にレイアウトが必要なため、ページの枚数ほどワイヤーフレームが必要になってきます。
ワイヤーフレームを作っておくことで、足りない情報や必要のない情報をここで確認することもできます。
このようにワイヤーフレームはランディングページまたホームページのレイアウト設計図として必要なものであり、ラフ制作はデザインを施す前に必要な工程です。
人によっては混同されていますが、実際は全く別工程となります。
まとめ
ランディングぺージのラフの作り方を理解できましたか？
デザイン制作入る前に一手間かかりますが、頭の中でデザインができている場合でも、私はラフ制作は必ず行うようにしています。
実際、頭の中で描いているものと、パソコン上に映し出されるとイメージが違うことが多々あるからです。
それだけでも時間のロスになってしまいますので、『急がば回れ』という言葉があるように、効率よくランディングページを制作するには、ラフ制作の工程は必ず取り入れるようにしましょう。
それではラフ制作のおさらいをしましょう。
・手書きでラフを作る
・デザインソフトで清書する
・ユーザー目線に立って確認する
この3つのポイントを抑えて、デザイン制作をよりクオリティ高く、より効率よく作れるようにしましょう。