初心者でも簡単！PowerPointでワイヤーフレームを作成しよう

ホームページを作る際、ディレクターなどの作成の指揮をとる人と、実際にコーディングをして作成するデザイナーの間で意思疎通ができていないと、認識のズレが生じてしまい、何度も作成し直さなければならなくなります。

どのようなホームページを作りたいかという意思疎通のために、ワイヤーフレーム作成は重要な作業です。しかし、専門的なツールを使用するために学習する時間がない、難しい操作はハードルが高い、という問題もあります。

そこでおすすめなのが、Microsoft PowerPointやGoogleスライドです。どちらのツールも、多くのユーザーに利用されている人気ツールであり、専門的な知識がなくても比較的簡単にワイヤーフレームを作成できます。

今回は、PowerPointを使用したワイヤーフレーム作成方法について解説します。

GoogleスライドでもPowerPointとほぼ変わらない操作性で作業できますので、使いやすい方で作成してみてください。

PowerPointでワイヤーフレームを作るメリット・デメリット

メリット

PowerPointはオフラインでも作業できるツールです。パソコンがあれば作業環境を選びません。また、他の専門的なツールと異なり、PowerPointは多くのビジネスマンに馴染みのあるツールです。

そのため、操作しやすく、チームメンバーやクライアントなどに共有した際に相手も簡単に閲覧できるというメリットがあります。

デメリット

ワイヤーフレームを作成したPowerPointと閲覧するPowerPointのバージョンが違う、WindowsとMacなどOSが異なるなど、作成環境と閲覧環境が異なる場合、まれにフォントが変化したりレイアウトのズレが起きることがあります。そのため、作業環境がわからない相手に対してファイルを送る時は注意が必要です。

ただしこの問題点は、Googleスライドを使用すれば解消されることがほとんどです。
GoogleスライドはGoogleドライブ上で作成・管理するため、URLを知っていれば作成環境と閲覧環境が異なる場合でもトラブルが発生しにくいという特徴があります。作業環境がわからない相手に対しては、Googleスライドを使用した方が無難でしょう。

PowerPointでのワイヤーフレームの作り方

Webサイトのスクリーンショットを撮影する

まずは、参考にしたいページのスクリーンショットを撮影します。
スクリーンショットを撮影すれば、コンテンツの比率をそのまま真似られるため、正確なイメージがわかりやすくなります。

パソコンに標準で搭載されているスクリーンショット機能を使用しても構いませんが、周囲の余計なコンテンツもスクリーンショット画像内に含まれてしまうことがあります。
その場合は、表示されているホームページだけを切り抜くことができるツールを使用しましょう。

本記事を執筆するにあたっては、以下の「WinShot」を使用しています。

参考：
WinShot

スクリーンショットをPowerPointにペーストする

PowerPointを開き、上記で撮影したスクリーンショットをペーストします。スライドのデザインは「無地の白」を選択してください。

通常、新しくファイルを作成するとタイトルスライドが表示されますが、スライドの視認性を高めるため、白紙のスライドを新しく追加して作業するのがおすすめです。

「挿入」タブから「新しいスライド」をクリックし「白紙」を選択して挿入してください。

白紙スライドを作成し、撮影したスクリーンショットを挿入すると上画像のようになります。

今回はテスト用として、ferretのページを参考にワイヤーフレームを作成します。

ページの要素を整理する

スクリーンショットをペーストしたら、ページの構成要素を整理します。
具体的には、四角形でパーツをなぞるように囲い、パーツごとに切り分ける作業です。上画像のように、ロゴやタブ、記事などをそれぞれ四角形で区切ってください。細かな図形の修正は後から行うため、ここで正確に区切る必要はありません。

ここでのポイントは、区切るために利用した四角形の色を透過させておくことです。
デフォルトでは図形が塗りつぶされているためスクリーンショットは確認できませんが、透過させると図形を重ねつつも確認できます。

「描画ツール」から「図形のスタイル」の右下にある矢印をクリックし、右側に新しく表示されたウィンドウから透明度を設定すると、透過度を調節できます。

透明度は図形とスクリーンショットが視認できれば何%でもよいですが、30%前後がおすすめです。

パーツの切り分けが完了したら、微調整を行います。
大まかに分けるよりも、きれいに整理したほうがイメージのずれは起きにくくなります。

境界線をはっきりさせる、同じパーツ群は大きさを揃える、線の高さ、幅を統一するなどの作業があります。
バージョンが新しいPowerPointであれば、図形が均等に並んでいるかどうかをサジェストで示してくれることも多いため、活用しながら図形を整えてください。

スクリーンショット画像を削除する

図形の整理が完了したら、元のスクリーンショット画像を削除します。

各パーツの役割を書き込む

元のスクリーンショット画像を削除したら、各パーツの役割、名称などを書き込みます。元のスクリーンショット画像と見比べながら、構成要素を枠の中に収めるようにしてください。

もし収まらないパーツがあれば、線で場所を示しつつ枠外に書いても構いません。

完了したらファイルを保存して作成完了です。