初心者でも簡単!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であれば、図形が均等に並んでいるかどうかをサジェストで示してくれることも多いため、活用しながら図形を整えてください。
スクリーンショット画像を削除する
図形の整理が完了したら、元のスクリーンショット画像を削除します。
各パーツの役割を書き込む
元のスクリーンショット画像を削除したら、各パーツの役割、名称などを書き込みます。元のスクリーンショット画像と見比べながら、構成要素を枠の中に収めるようにしてください。
もし収まらないパーツがあれば、線で場所を示しつつ枠外に書いても構いません。
完了したらファイルを保存して作成完了です。
ワイヤーフレーム作成をして全体の作業効率をUP
ワイヤーフレームの作成はデザイナーの仕事、と決めつけるのではなく、指示を出すディレクターが簡単なワイヤーフレームを作成しておけば、より短時間でチームが目指すページ作りができます。
今回紹介した方法でワイヤーフレームを作成すれば、これまで作成したことのない初心者の方でも簡単に作業できます。ぜひ試してみてください。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング