【Web制作】―第4章―PowerPointで作る設計書

設計書

はじめに

こんにちは、内定者の鈴木です。
前回は、Web制作の「サイトマップ」の作り方について紹介いたしました。
今回は、「設計書」の作り方について紹介いたします。
設計書は、サポーター(デザイナーやコーダー)との共有がしやすくなるため、Webサイトの出来栄えや完成までのスピードに大きな影響を与える重要なツールです。設計書は、様々なツールを使って作成することができます。今回は、最も一般的であるPowerPointによる設計書の作成方法を紹介いたします。

設計書とは

設計書2

設計書とは、一言で言うと「Webサイトの設計図」です。

Webサイトの大まかなコンテンツやレイアウトを決定し作成していきます。設計図を書くことで、「何を」「どこに」「どのように」Webサイト画面に配置するかを明らかにすることができ、要素の不足がないか可視化することができます。

設計書のことを、IT業界用語で「ワイヤーフレーム」と呼ぶこともあります。

Webサイトの制作は、家を建てる工程と似ています。

家を建てる

家を建てる際は、建築士が設計図を書き、部屋の大きさやキッチンなどの配置、ドアの向きまで決めていきます。
そして、出来上がった設計図をもとに大工さんが家を建てていきます。
もし、設計図がなかったらどうでしょう。家の建築に関わる大工さんが、それぞれ好きなように部屋の配置、大きさなどを決めていくと、ちぐはぐな家が完成します。あなたは、そこに住みたいと思いますか?きっと、嫌な人が多いはずです。

これを、Webサイト制作に置き換えて考えてみて下さい。

設計書がない、方向性が決まっていない、情報があちこちに配置してあるWebサイトを見たいと思いますか?きっと、このようなサイトでは見づらくてすぐにお客様が帰ってしまいますよね。そして、競合のWebサイトにお客様が流れてしまう可能性も考えられます。
上記の事態を防ぐためには、やはり設計書を作成することが望ましいでしょう。

建築士は住みやすい家を考えるプロです。そして、大工は建築士の設計図を忠実に再現し、安全面も考慮した構造の家を建てるプロです。お客様が、家を建てる際にハウスメーカーや建築士にお願いをするのは、建築士が住みやすい家やお客様の希望に合った家を提案してくれるからでしょう。

Webサイトでも同じことが言えます。
Webディレクターは、見やすく使いやすいWebサイトを考えるプロです。そして、サポーター(デザイナーやコーダー)はWebディレクターの作成した設計書を最大限に活かし、形にするプロです。
お客様が、Webサイト制作の専門家にサイト制作をお願いするのは、お客様の望むサイトや見やすく使いやすいWebサイトを知っているからです。そして、成果の出るWebサイトのノウハウを持っているからです。

▼Webサイト制作を家を建てるときに例えた場合

<Webサイト><家>
Webディレクター建築士
デザイナー建築士

インテリアコーディネーター

コーダー大工


設計書は、
Webサイト制作の段階に関わる人(デザイナー、コーダー)が見ても、みんな同じように共通の理解を深めることが期待されています。そのためには、見やすく分かりやすい設計書を書くことが重要です。

設計書作成には、様々なツールやソフトがあります。
弊社では、「Microsoft PowerPoint」を使って設計書の作成をしています。
そのため、今回は「PowerPoint」を使った設計書の作成に焦点を当てて紹介いたします。

PowerPointで作るメリット

 

  • 他社やサポーターの方など、多くの人のPCにインストールされているため、データのやり取りがしやすい
  • 自分以外のメンバーと共同で修正をすることができる
  • オンライン上の設計書作成ツールと違い、インターネット回線がなくとも使えるツールなので、安心して使える
  • ワイヤーフレームの周辺に使用説明を記載できる欄がある
  • デザインが明確ではない分、必要な要素やいらない項目が分かりやすい
  • 情報の配置に目が行く

 

PowerPointで作るデメリット

 

  • 実際のWebサイトのサイズではない
  • デザインのイメージが表現しづらい、盛り込みづらい
  • スライドの大きさが小さく導線が書きづらい

 

設計書作成のポイント

大枠要素を書き出す

ほとんどのWebサイトには、以下の大枠要素があります。これを設計書に配置していきます。

▼大枠要素5

  • ロゴ
  • ヘッダー
  • グローバルナビゲーション
  • ボディ
  • フッター
大枠要素img

上記の5つの要素で、Webサイトの全体のイメージができました。
初めは、適当に枠をとっていただいて構いません。設計書にテキストや画像を落としていった際に、細かく微調整をしていきましょう。

また、ここでの押さえておきたいポイントは、

  • 色をつけない
  • デザインを入れない

 

です。
色やデザインを入れてしまうと、デザイナーの発想力を妨げてしまう可能性があるからです。
また、設計書の目的である要素の洗い出しよりも、色やデザインに目がいってしまうからです。

詳細要素を書き出す

  • ヘッダー

ロゴにプラスして、お店の電話番号や問い合わせフォーム、キャッチコピーやお店の特徴といったテキストも入ってきます。

  • グローバルナビゲーション

メニュー、店舗情報、問い合わせフォーム、ブログ等が入ります。グローバルナビゲーションは、配置順が重要です。人は、左から右の順に目線を移動するため、左に重要な項目・見てもらいたい項目を置きます。

  • ボディ

ミスターフュージョンでは、Webサイトに訪問した人が、

3秒で何屋かわかる

メインビジュアルにすることを重視しています。
また、子供から高齢者まで誰が見ても、

何屋かわかる

ことを重視しています。
そのためには、アイキャッチ画像やキャッチコピーが重要となるでしょう。
Webサイトに訪れる人が100%、トップページから訪問するとは限りませんが、トップページは各ページに移るための情報が満載のページです。導線を考え、訪問者が知りたい情報をいち早く見つけられるような設計を考えましょう。

設計書1

要素に優先順位をつける

要素を洗い出したら、次は優先順位をつけます。
目立たせたいテキスト(キャッチコピー、タイトル等)を太字にします。設計書に上記のように強弱をつけることで、デザイナーが見る際にもどこに焦点を当てたら良いのかが分かりやすくなります。

設計書テキスト①②

ショートカットキーを使いこなそう

ショートカットキー

PowerPointで設計書を作る際に、押さえておきたいのがショートカットキーです。
ショートカットキーの操作を覚えることで、業務の効率化を図ることができます。
よく使うショートカットキーは、以下でございます。

  • Ctrl + X

選択したテキスト、オブジェクト、スライドを切り取る。

  • Ctrl + C

選択したテキスト、オブジェクト、スライドをコピーする。

  • Ctrl + V

切り取るかコピーしたテキスト、オブジェクト、スライドを貼り付ける。

  • Ctrl + Z

直前の操作を元に戻します。

  • Ctrl + ←

左へ 1 単語分移動する。

  • Ctrl + →

右へ 1 単語分移動する。

  • Ctrl + ↑

1 段落上に移動します。

  • Ctrl + ↓

1 段落下に移動します。

他にも便利なショートカットキーは沢山あります。詳しくは、以下をご参照ください。

https://goo.gl/FE4FgTMicrosoft「ショートカット キーを使用してプレゼンテーションを作成する」閲覧日:2017/11/25

マウスでの操作に慣れている方も、ぜひショートカットキーに挑戦をしてみて下さい。慣れるまでは、考えながらキーを押すため、時間がかかることもありますが慣れてしまうと、とても便利です。

まとめ

この記事では、Webサイト制作の「設計書」の作り方について述べてまいりました。いかがでしたでしょうか?

  • 設計書は、「何を」「どこに」「どのように」Webサイト画面に配置するかを明らかにするツール
  • デザイナーやコーダーがみて理解できる設計書の作成を心掛けることが大切。設計書の内容が分かりづらいと、デザイナーやコーダーとのやり取りが多くなり時間のロスにつながる
  • まずは大枠を埋め、それからテキスト作成や画像を決める
  • 誘導したいページへの導線を考えながら作成する
  • デザイナーやコーダーがみて理解できる設計書作成を心掛ける

以上の点をふまえながら作成をしてみて下さい。
次回は、「デザイン」についてご紹介いたします。ここから、サポーターの方々と連携をする機会が増えていきます。

設計書

参考になったらシェアをお願いします!