【WEBサイト制作の手引】#6設計書の作成

—————(ФωФ)—————
■WEBサイト制作の手引 記事一覧

1. はじめに
2. 企画の確認
3. 目的の設定
4. 役職の割り当て（アサイン）
5. スケジュール作成
6. 設計書の作成（この記事）
7. デザイン・トーン＆マナー決定
8. 実装
9. テスト
10. 本番公開
11. 運用

—————(ФωФ)—————

案件制作の準備が整ったら制作に入っていきます。システムの制作がある場合はそちらの要件定義書や仕様書、設計書を作る必要があります。

今回は主にディレクターが作成する、フロントエンドにおけるWEBサイトの設計書（俗に言うワイヤーフレーム）について触れていきます。

まず1ページ目に制作概要の表を貼る

#2企画の確認と#3目的の設定で作成した、制作概要をまとめた表を1ページ目に貼っておき、いつでも方針が確認できるようにしましょう。

ツール

ワイヤーフレーム制作のツールはAdobe XDなどがおすすめです。

Adobe XD CCの購入 | UI/UXデザイン、プロトタイプ、共同作業ツール

Webサイトやモバイルアプリのデザインとプロトタイプの作成が、これ1つでできるAdobe XD CC、UI/UXデザイナー向け初めてのオールインワン製品です。

www.adobe.com

Adobe Xdでワイヤーフレーム制作を効率よく進めるでも書きましたが、XDでは原寸サイズでの作成が可能なので、後のデザイン制作との齟齬が起こりにくく便利です。

全員攻撃型デザインのススメ 〜Adobe XDでつくるこれからのワイヤーフレーム入門〜【第2回】今すぐパワポとサヨナラできる?! Adobe XDの便利機能5つ | Adobe Creative Station　より

コツ

設計書は漫画で言うネームのようなものです。
これの良し悪しでサイトの価値が決まると言っても過言ではないでしょう。

サイトマップを作成する

スケジュール表作成の時と同じように、まずは大まかな内容を組んでいきましょう。
サイトマップを作成し、ツリー（階層）構造となるように組み上げます。

ページ共通のブロックを作る

サイトマップが出来たら、それを基に全ページ共通となるヘッダー・フッター・サイドバーを配置します。
ユーザーが「今どのページに居るか」が分かるような造りが望ましいです。

お約束の配置

ログインフォームが右上にあったり、最下部にサイトマップ/リンクがあるような配置は定番でユーザーにも馴染み深いです。
分かりやすい配置として、お約束の組み方を参考にしましょう。

ページごとに記述できる要点を絞る

あれもこれも1つのページに情報を盛り込んでしまうと読みづらくなってしまいます。
各ページのテーマは1つに絞りましょう。

文書構造を守る（セマンティックウェブ）

紙媒体と違い、WEBページでは「見出し」と「段落」の繰り返しでページを構成します。
見出しはレベル1～6（h1～h6）で作成し、階層構造を持たせましょう。

コーダーでなくとも、それが何を意味するかを表す情報(メタデータ)を意識して文章を作るのは簡単です。
下記の情報を意識しましょう。

• 見出し：h1～h6
• 段落：p
• 改行：br
• リスト：ul,ol
• 表：table
• 強調：strong,em

• ページ名：title
• ページの要点：description

デザインと設計を分けて考える

あくまでサイトの「機能」を明確にするための設計書です。デザイン、装飾などをこの時点で考える必要はありません。

コンテンツを作り込む

枠が出来たら、各ページコンテンツは省略せずに作り込みましょう。
「デザイナーやコーダーが内容を考えなくてはならない」という事態は案件が遅れることを意味します。

また、コンテンツを作り込むことによって気付くこともあります。これは早い段階で発見するほど効率が上がります。

ユーザーが「求めているもの＆解決方法」を今一度見直しましょう

いろいろ書きましたが、ユーザーが本当に必要としている情報が何なのか、そしてそれに対応するコンテンツは何なのかを考えましょう。
いわゆる「ジャベリンボード」を使用し、仮説の作成を繰り返してみましょう。

ユーザー体験（UX）を意識しましょう。そして…

実際にユーザーがサイトにアクセスする工程や感覚を意識しましょう。
例えばスマホユーザーが多くなると思われる場合は、スマホを手に持った感覚を大事にしないといけません。

実際に運用してから分かることの方が多い

設計をきちんと組み立てることは大事です。
しかしサイトの構成や、アクセスの経緯などは要素が非常に多く、複雑に絡み合っています。

実際にサイトの運営が始まると、Googleアナリティクスやサーチコンソールを活用することになります。
そこで制作初期には見えなかったものがいくつも見えてきます。
最もパフォーマンスが発揮されるよう後から柔軟に設計を変えることも見越しておきましょう。