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

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

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

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

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

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

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

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

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

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

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

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

STEP１：作成前の準備と確認

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

構成・テキストの確認

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

使用可能な素材の確認

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

対応デバイスの確認

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

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

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

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

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

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

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

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

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

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

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

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

STEP３：デザイナーへ依頼

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

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

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

トンマナを決める

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

素材の共有

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

便利な描画ソフト３点

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

Figma

FigmaはWeb制作の現場で人気が高まってきている優秀なデザインツールです。無料プランと３つの有料プランがあり、個人でワイヤーフレームを作る程度であれば無料プランの機能で十分まかなうことができます。

無料プランでは１チームにつき１プロジェクト、１プロジェクトにつき3ファイル、1ファイルにつき３ページまでの上限が設けられていますが、下書きやチーム自体の数を増やす分には上限がありません。プロジェクトやファイル数が多く案件の管理が複雑なケースでは有料プランをおすすめします。

Figmaは手軽にブラウザ上で操作できることも長所です。ブラウザ版とは別にローカルフォントを使用することができるアプリ版も用意されています。

アプリ版ダウンロードページ：https://www.figma.com/ja/downloads/

Figmaの操作方法

まずアカウントを作成します。

アカウントを作成したらアプリもしくはブラウザ上でFigmaを開きます。

下の画像はアプリ（Mac）の画面です。右上の青いボタンからファイルを作成すると下書き（Draft）の中に保存され、左下からチームを作成するとプロジェクト内にファイルを作ることができます。

ファイルを開くと灰色のアートボードが広がっているので、この上に左上のアイコンからフレームを作成します。もしくはアイコンを選択した状態で右側に出てくるテンプレートから最適なサイズを選択します。

該当するサイズが無い場合はフレームを選択した状態で右側の数値を変更すると自由にカスタマイズすることができます。左上の図形ツールやテキストツールを使ってワイヤーフレームを作成していきましょう。画像や動画は図形ツールのタブの１番下から配置することができます。

ワイヤーフレームをURLで共有したいときは右上の「共有」ボタンを押します。公開範囲を「リンクを知っているユーザー全員」にすると誰でも閲覧することができ、「このファイルに招待されたユーザーのみ」にすると、メールアドレスを入力して招待した相手だけに公開することができます。

画像で共有したいときは右下の「エクスポート」から書き出すことができます。

Google図形描画

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

Google図形描画の操作方法

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

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

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

Microsoft Excel

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

Microsoft Excelの操作方法

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

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

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

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

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

まとめ

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