第２１回：ランディングページデザインの制作で最初に行うこと

どうも！スカーレット坊やです！

いよいよページデザインを進めていきますよ！

このブログで解決できること

・ここまで読んでくれた人の続き（笑
・ランディングページを作る際に、まず何をするかが分かる
・ワイヤーフレーム、モックアップ、プロトタイプとは何かが分かる

ワイヤーフレームとは何か

WEBの世界でワイヤーフレームというのは、DTPでいったら、いわゆる「ラフ」の事です。

DTPデザインの場合は作る前に、

1. 原稿を整理して、入れなければいけないものを洗い出す
2. 優先順位を付ける
3. デザインを決める
4. ラフを書く

WEBページでも同様で、この作業をおこなうことになる。上記手順で言ったら④に当たる部分がワイヤーフレームだ。ここで一度クライアントに「内容について」確認を行うことになる。不足物や、追加物、削除物があるなら、この時点でしっかりと確定させていこう。

こんな感じで書いていく。ペン書きでもIllustratorでもXDでも構わない。「何が」「どんな大きさで」「どこに入るのか」がわかれば良い。

この段階で「できる限り内容についての不明点」を排除できるのが望ましい。

このワイヤーフレームがすべての基準となり、モックアップ、プロトタイプへとすすんでいくからだ。

モックアップとは何か

ワイヤーフレームに色やデザイン要素が加わったものをモックアップと呼ぶ。

DTPでラフを作ったら、決めたデザインや世界観に合わせて、色つけや加工を施していくと思いますが、それを行うのがこのモックアップと呼ばれるものです。言ってみれば「WEBデザイン」はこのモックアップで決まります。スカ坊もこのモックアップに校了が出たら、デザインOKだと判断しています。

ここでクライアントに見てもらうことは内容ではなく、「色味」「雰囲気」「ビジュアル」「キーオブジェ」「イラスト」「写真」などのデザイン要素が主になります。レイアウトはもう見てもらわなくても良いですが、デザインを入れたことで多少なりとも印象が変わることがあるので、そこは柔軟に対応していきましょう。

このように、色味を含めデザイン的な部分がを説明するのがモックアップになります。　特にアイキャッチやファーストビューに関しては重要な要素になりますので、しっかりと見てもらいましょう。

この段階でデザインはほぼ完了している。クライアントにもその目線で見てもらうことが重要だ。

ただ「デザイン」というといくらでも修正が効くとかいう変な誤解をしている人もいるので、あまりデザイン、と言わないほうが良いのかもしれないが、それはクライアントの質次第ともいえる。

プロトタイプとは何か

掲載内容・デザイン、DTPであればここで完成します。ですがWEBにはもう一つ、ページを彩る大きな要素があることを忘れてはいけません。そう「動き・操作性」ですね。

• 写真が横からスッと入ってくるように
• ボタンにマウスを置いたらふわっと色が変わるように
• ページ切り替えの時に、左からシュッとスライドさせたい
• このオブジェクトはゆらゆらとずっと動いていてほしい

クライアントによっては、非常に様々な要望をされることがあるかもしれません。その「動き」の情報をまとめたのがこのプロトタイプです。

WEB上でのオブジェクトの動きだけではなく、

• ここをクリックするとこのページに遷移する
• ここをクリックするとここまで下がっていく

などというリンク系の設定もここに含まれます。どこのオブジェクトに、何をすると、どうなるのか、という情報を詰めていきましょう。

プロトタイプとは「操作性」ユーザビリティの計画書になります。

ワイヤーフレーム・モックアップ・プロトタイプがすべて揃ったら、静止画においてのデザインは終了です。どちらかというと、DTPデザイナーが得意としている部分ではないでしょうか？

アセット書き出しでパーツ化しよう

Illustratorでモックアップを作っている場合で、「画像」として、素材を使う場合はこの機能はずば抜けている。Photoshopでも同様にPNG書き出しができると思うが、スカ坊はIllustratorの方が簡単なので助かっている。

Illustratorのメニュー「ウィンドウ」から「アセットの書き出し」で表示します。「書き出し設定」の▶をクリックすると

このように書き出し設定が展開されます。

素材化したいIllustratorのオブジェクトを、グループ化してください。グループ化されたものが１枚の画像となります。ここでグループにせずに持ってくると、バラバラでウィンドウに表示されます。

この場合、文字も一緒にボタンにしたいので、こうなっていれば正解です。　青い枠線でくくられていますが、これは後ほど重要になるので覚えておいてください。

ここで書き出しの設定をしましょう。

• サイズ
• 名前
• 保存形式

を決めてください。各項目の右側にある▼をクリックすると、もう少し細かい設定が出来ます。　設定が終わったら、右下の「書き出し…」ボタンをクリック。

青い枠で囲まれたものが書き出されます。書き出す前に、ほしい素材が青枠で囲まれているか確認してください。

保存するフォルダを選んで実行すると、指定の場所にこのように出てきます。アセットという名前が気になる場合はリネームしましょう。半角英数にしておくとエラーが起きにくくなります。

アセット以外の素材データを揃えよう

アセット以外、クライアントから支給される「画像」「動画」などの素材の事だ。自分で作り出す素材以外の素材なので、フリー素材の写真なんかもこちらに含まれる。これらが全て用意できたら、WEBで構築する準備は完了。

ここからは実際に、プラグイン「Elementor」を使って、ページデザインへと進んでいきましょう！

静止画デザインは得意だったな？
「それは坊やじゃないかも」

それではまた！