GRAPHNOTES

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

日付:
2017年11月21日
カテゴリー:
ディレクション

今回は主にディレクターが作成する、フロントエンドにおけるWEBサイトの設計書(俗に言うワイヤーフレーム)について触れていきます。この連載ではWEBサイト制作に不慣れな人のために簡単な解説を行っていきます。

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

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

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

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

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

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

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

ツール

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

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

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

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

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

コンテンツを作り込む

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

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

殆どのことは設計で決められる

プロトタイプを作る計画でない限り、ページの主旨、テキスト内容、レイアウトなどは設計の時点でFIX(確定)させることが出来ます。
ちゃんとした設計を作成し、関係者で十分なコミュニケーションを取ることが出来れば、デザインやコーディングの段階まで内容を保留する必要はありません。

広告枠