【ノンデザイナー向け】ランディングページを提案したいときに読みたい、ワイヤーフレーム作成の3STEP

【ノンデザイナー向け】ランディングページを提案したいときに読みたい、ワイヤーフレーム作成の3STEP

Web広告と密接な繋がりのあるランディングページ。広告運用に携わる中で「広告に合わせて新しくページを作りたい」「既存のページの構成やテキストを修正したい」と思ったことはないでしょうか?中には改善の余地がありそうでも提案のハードルが高いと感じている方もいるかもしれません。

ランディングページを新規で提案する場合、デザイン担当者が参照する資料としてワイヤーフレーム(ページの構成案)を用意する必要があります。なんだか難しそうに聞こえるかもしれませんが、デジタルの描画ソフトを使うことでデザインの知識がない方でも簡単に作成することができます。

本記事のゴールは広告運用者がランディングページを新たに提案したいときに、ワイヤーフレームの作成からデザイナーへの依頼まで迷いなく対応できるようになることです。デザイナー側の立場である筆者の視点から、描画ソフトの紹介も含めて詳しく解説していきます。


ワイヤーフレームの役割とは?

ランディングページの制作フロー

まず最初にランディングページ制作の流れを軽くおさらいしましょう。

ワイヤーフレーム=「Webサイトの設計図」

ワイヤーフレームの解釈は人によって様々ですが、Webサイトの構成要素やレイアウトを視覚的にわかりやすく見せるための「設計図」を指します。デザイナーがデザインカンプを作るときに参照するもので、いわゆるラフのような役割を果たします。

 

ワイヤーフレームは誰が作ってもOK

アナグラムでランディングページを制作するときは各フローの担当者は固定されておらず、案件の内容や状況次第でケースバイケースに対応しています。特にワイヤーフレームに関してはデザイナーが作ることもあれば、ライターや広告運用者が作ることもあります。ライティングやデザインカンプ、コーディングは専門の知識を要しますが、ワイヤーフレームに関しては垣根がなく、誰にでも作ることができます。

広告運用者がランディングページを提案するメリットは、担当企業への理解が深く的確な提案ができること、Web広告と紐づけてより結果にコミットさせられることではないかと考えています。

STEP1:作成前の準備と確認

ワイヤーフレーム作成に入る前に、チェックしておきたいポイントが数点あります。

構成・テキストの確認

新規で一からランディングページを企画するケースではテキストを書き起こす必要があるため、ライティングスキルに自信がなければ別途ライターにお願いすると良いでしょう。テキストができたら誤字脱字や表記の揺れがないか、テキストの量や表現が適切かどうか確認します。クライアントのこだわりが強そうなときはテキストの段階でチェックを挟んでおくと安心です。

使用可能な素材の確認

レイアウトが確定してから「素材が足りなかった…」とならないためにも、あらかじめ使用できる素材を確認しておきましょう。提供素材が少ないときは素材サイトを利用するのもひとつの手ですが、企業によっては使用自体がNGのケースもあるため、事前に使用確認を済ませておくとスムーズです。

対応デバイスの確認

ランディングページはパソコンとスマートフォンで共通のものを使用することもあれば、各デバイスに合わせてレスポンシブ仕様にすることもあります。

この時点で具体的なサイズを決める必要はありませんが、対応デバイスを意識しながらワイヤーフレームを作った方がデザイナーとのイメージのズレが少なく済むでしょう。近年はスマートフォンからのインターネット利用が最も多いため(※)、スマートフォン用のワイヤーフレームを優先的に制作するのも有効だと思います。

※参考:2019年度 総務省「インターネットの利用状況」

STEP2:ワイヤーフレームを作る

以上の準備が整ったらようやくワイヤーフレームの作成に移りましょう。

図形とテキストで表現する

図形ツールなどを使用して、ロゴや写真、CTA(コールトゥアクション)ボタンなどの各パーツを配置していきます。明確なイメージが湧かないときはガチガチに作り込む必要はなく、最低限テキストや構成要素が伝わるものであれば十分です。ワイヤーフレームの完成度が高すぎると作りにくいと感じるデザイナーもいるくらいです。装飾や色、フォントなどは要望があれば伝え、無ければデザイナーにお任せしましょう。

必要に応じて写真を配置する

クライアントから写真の指定があったり、使いたい素材があらかじめ決まっているときは構成案の中に配置してしまっても構いません。その際に気をつけたいのが使用する写真のサイズや画質です。明らかにサイズが小さいものや画質が荒いものは避けてください。

迷ったらデザイナーに任せる

とはいえ写真選びや構成要素の配置に悩んでしまうこともあると思います。そんなときはデザイナーにご相談ください。迷ったときは無理に形にしようとせず、「この部分、どうしたらいいのか悩んでます」といった具合に話し合いながら進めていくことをオススメします。

ワイヤーフレーム作成に適した描画ソフトは記事の最後にご紹介します。

STEP3:デザイナーへ依頼

ワイヤーフレームが完成したらデザイナーにデザインカンプを依頼します。その際以下の3つをおさえておくとベターです。

クライアントチェックを挟む

デザインカンプ作成後の修正は工数がかかってくるため、ワイヤーフレームをデザイナーに共有する前に一度クライアントチェックを挟むことを推奨します。

トンマナを決める

参考イメージを共有するとデザイナーとの意思疎通が図りやすくなります。Webサイト集やPinterestなどのサービスを活用すると便利です。ブランドのレギュレーションが厳密に決められている場合は、事前にデザインのトンマナをクライアントと擦り合わせておくと良いでしょう。

素材の共有

素材の選択肢が多ければ多いほど表現の幅が広がります。そのため使用許可をもらった素材はなるべく全て共有し「この写真は絶対に使ってほしい」など優先順位がある場合はそれも併せて伝えておくとよいでしょう。

便利な描画ソフト3点

ワイヤーフレームは縦に長くなる傾向があるため、縦幅に制限のないソフトが適しています。その中でも人を選ばず使いやすいソフト3点をご紹介します。

Google図形描画

Googleから無料で提供されている作図ソフトウェアです。使用にはGoogleアカウントが必須ですが、ブラウザ上で編集したりURLで共有することができるため利便性が高いです。またGoogleドライブでファイルを保存・管理することが可能です。

Google図形描画の操作方法

描画する際は上部にあるツールを使います。

「ファイル」 >「 ページ設定」の「カスタム」を選択するとアートボードのサイズを自由に変更することができます。

「ファイル」>「ダウンロード」からJPGやPNG、PDFなどの画像形式で保存したり、「ファイル」>「ウェブ公開」からダウンロードパスや埋め込みリンクを発行することも可能です。

Microsoft Excel 

表計算ソフトとして認知されているExcelはワイヤーフレームの作成にも適しています。パッケージ版・サブスクリプション版共に有料ではありますが、多くの企業で導入されており、使い慣れている方にとっては1番とっつきやすいソフトだと思います。

Microsoft Excelの操作方法

「挿入」タブにある「写真」や「図形」、「テキスト」内のテキストボックスを使うと、セルの影響を受けずに自由に要素を配置することができます。

またセルの枠線は「表示」タブの「表示」内で「枠線」のチェックを外すと消すことができます。

画像として書き出したいときはPDF形式で保存することができます。

またMicrosoft Onedriveを利用している場合は、「ファイル」>「共有」からOnedrive上に保存することが可能です。

Adobe XD

ワイヤーフレームだけでなく、デザインカンプやプロトタイプまで制作できる多機能なソフトです。有料かつAdobeアカウントが必須のため導入のハードルは高いですが、操作性が良くデザイナーやコーダーとの連携が取りやすい点が魅力です。

Adobe XDの操作方法

まず最初にアートボードのサイズを選択します。後ほど調整することも可能です。

上のタブを1番左の「デザイン」にした状態で、左側の図形ツールやテキストツールを使って描画していきます。

「共有」タブの「リンクの作成」を押すと共有URLを発行することができます。

共有URLはAdobe XDを持っていない方でも閲覧することができます。

「ファイル」>「書き出し」>「全てのアートボード」から画像形式で書き出すことも可能です。

3種類とも最低限の操作方法にしか触れられませんでしたが、それぞれ優秀な機能をたくさん持っています。もっと詳しく知りたい方は各自で調べてみてください。

まとめ

Web制作の現場はスピード感が早く1つの作業に時間を割くことができなかったり、確認と制作を平行しながら進めていく場面も多々あるのではないかと思います。しかしながらワイヤーフレームはランディングページのプロットをデザイナーやコーダーへ繋ぐいわば「橋渡し」的な役割を担っており、この部分の表現の仕方が後々の工程にも影響してくるでしょう。ランディングページの最終的な完成度を高めるためにも、適切な準備や手順を踏み、各担当者としっかりコミュニケーションを取りながら制作していくことが大切です。

この記事のURLをコピーする
Kaori Naito

Kaori Naito

アナグラム株式会社 クルー。マーケティングや運用広告に興味を持ち、2021年2月よりアナグラムに入社。ディスプレイ広告やLP制作などを担当。“数字を追えるデザイナー”になるべく奮闘中。前職は観光土産やキャラクターグッズ、求人広告のデザイナー。散歩しながらレトロな喫茶店を探すのが趣味。

最近書いた記事