【Webデザイン初心者向け】PowerPointでワイヤーフレームを作成する方法とは?

フォーザウィン社員発のIT業界にまつわる豆知識。
「フォーザウィンアカデミー」

HOMEフォーザウィンアカデミー 〉【Webデザイン初心者向け】PowerPointでワイヤーフレームを作成する方法とは?

【Webデザイン初心者向け】PowerPointでワイヤーフレームを作成する方法とは?

200703_img

ホームページを作るにあたって、ディレクターと実際にコーディングやデザインをするデザイナーの間でどのようなページを作りたいという意思疎通ができていることが大切になってきます。そのような時に重要なのがワイヤーフレームの作成になります。ワイヤーフレームの作成の仕方はいくつもありますが今回はPowerPointを使ったワイヤーフレーム作成方法についてご紹介いたします。

もくじ

  1. ワイヤーフレームの役割
  2. PowerPointのワイヤーフレームの作成方法
  3. PowerPointでワイヤーフレームを作る際のメリット
  4. まとめ

 

◆ワイヤーフレームの役割

まず、ワイヤーフレームとはサイトの構成要素の設計図です。
サイトの中の共通のナビゲーションの位置や、コンテンツの配置などをワイヤー(線)のフレーム(枠組み)で示します。

ワイヤーフレームの作成はディレクターが行うことが多く、始めにディレクターがクライアントの求めているニーズをヒアリングします。そしてページの全体構成やページ数を確定し、予算や工程を算出していきます。全体構造を設計した後に、デザイナーが具体的なデザインを作ります。デザインをもとにコーダーやプログラマーがサイトを構築します。
ワイヤーフレームはデザイナーやコーダーにどんなサイトにしたいか、クライアントの要望を伝える際にも役立ちます。また、外部の制作会社にサイト制作を依頼する時などにもこちらの意向を伝える際などにも役立ちます。

◆PowerPointのワイヤーフレームの作成方法

・まずPowerPointを起動し文章を作成できる状態にしておきます。
・お手本にしたいサイトのスクリーンショットを撮影します。
・保存したスクリーンショットをPowerPointにペーストします。この時スライドのデザインは「無地の白」を選択します。
・ペーストしたスクリーンショットをなぞるように四角形でパーツをトレースします。四角形の色は透過にしておきます。
・トレースした四角形のパーツの大きさを均一に揃えたり、線の高さや幅を統一するなど、微調整を行います。
・図形が綺麗に調整されたらスクリーンショットを削除します。
・先ほど作成したパーツに各役割や名称などの構成要素を入れます。
・保存して完了です。

◆PowerPointでワイヤーフレームを作る際のメリット

PowerPointでワイヤーフレームを作る際の最大のメリットは、PowerPointはオフラインでも作業できるのでパソコンさえあれば作業が出来るといった点です。
移動中の乗り物の中やネット環境がなくても作業ができます。
また、PowerPointは操作しやすく、クライアントや社内でメンバーに共有した際に相手にも簡単に閲覧してもらえるメリットがあります。
しかし、PowerPointのバージョンが違ったり、OSの違いなどでフォントが変化したりレイアウトのズレが起きることがあるので注意が必要です。

 

◆まとめ

作りたいサイトの構成やイメージを伝える際に重要なのがワイヤーフレームです。
ワイヤーフレームの作成方法はいくつもありますがPowerPointを使えば初心者の方でも簡単にワイヤーフレームを作ることができます。
ぜひ挑戦してみてはいかがでしょうか。

フォーザウィンはIT業界で働く仲間を募集しています!
経験、未経験は問いません。是非当社の採用情報をご覧ください。
採用情報を見る >

最新記事

2020.07.31
2020.07.28
2020.07.17
2020.07.10
2020.07.03

カテゴリー

TOP