2018年10月02日デザインPowerPointマイページにお気に入りホームページを作る際、ディレクターなどの作成の指揮をとる人と、実際にコーディングをして作成するデザイナーの間で意思疎通ができていないと、認識のズレが生じてしまい、何度も作成し直さなければならなくなります。どのようなホームページを作りたいかという意思疎通のために、ワイヤーフレーム作成は重要な作業です。専門的なツールを使用するために学習する時間がない、難しい操作はハードルが高い、という問題もあります。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であれば、図形が均等に並んでいるかどうかをサジェストで示してくれることも多いため、活用しながら図形を整えてください。スクリーンショット画像を削除する図形の整理が完了したら、元のスクリーンショット画像を削除します。各パーツの役割を書き込む元のスクリーンショット画像を削除したら、各パーツの役割、名称などを書き込みます。元のスクリーンショット画像と見比べながら、構成要素を枠の中に収めるようにしてください。収まらないパーツがあれば、線で場所を示しつつ枠外に書いても構いません。完了したらファイルを保存して作成完了です。ページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るGoogleGoogleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。詳しく見るGoogleGoogleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。OS、スマートフォンではiOSやAndroidが有名です。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るレイアウトレイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。詳しく見るGoogleGoogleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。詳しく見るGoogleGoogleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。いう名称がついていますが、実際には日本でもURLという語が使われています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。詳しく見るコンテンツコンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。CD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るタイトルホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。移住しライティングや編集などを中心とした事業を展開。“振り返り”に役立つ5つのフレームワーク。