未経験からWebデザイナーになるには?あっきー転職ノート
未経験からWebデザイナーになるには?あっきー転職ノート > 独学でがんばるWebサイト制作勉強方法 > STEP3:サイト構成書 / 構成図 / ワイヤーフレーム(モックアップ)を作る

STEP3:サイト構成書 / 構成図 / ワイヤーフレーム(モックアップ)を作る

ここでは、「STEP1:Webサイトを企画する」と「STEP2:Webサイトの仕様策定」で決定したコンテンツ内容を、サイト内でどのように配置していくか、どのようなページ遷移を行うかを決定していきます。

サイトの構成書(構成図)は、エクセルやパワーポイントで作られることが多いのではないでしょうか。

また、ワイヤーフレーム(モックアップ)を作るのに便利なツールも沢山ありますので、合わせてご紹介していきたいと思います。

ワイヤーフレームとは、デザイン要素を一切抜きにして、ページにコンテンツを配置したレイアウト図のことをいいます。どのリンクがどのページに遷移するかも、ここに記載しておいたりします。

ワイヤーフレーム(モックアップ)を作るのに便利なツール

わたし自身、5種類くらいのフリーソフトを使ってみたのですが、
一番使い勝手が良かったのは「Cacoo」でした。

https://cacoo.com/lang/ja/
Cacoo – Web上で図の作成とリアルタイムコラボレーション

使い方はいたって簡単で、直感的に図形を作って配置していくことができます。
使い方については、また別の記事に書いていこうと思いますっ

また、ワイヤーフレーム(モックアップ)のツールはけっこう沢山あります。
自分で実際に色々使ってみて、お気に入りを見つけると良いですよ。
ツールについてまとめた記事↓

こういったツール以外ですと、
Excel(エクセル)やPowerPoint(パワーポイント)を使って作られることが多いです。

サイトマップ(全体構成図)を作成する

ちなみに、、Webサイトで言われる「サイトマップ」は3種類あります。

Webサイト内に設置されたサイトの案内板的役割を果たす「サイトマップ」

例)

検索エンジンに読んでもらいたいページをお知らせする「サイトマップ」

このサイトマップはファイルの拡張子が「.xml」になることから、「XMLサイトマップ」とも言われています。
検索エンジンにサイトのページの在り処をお知らせする役割があります。

例)

このXMLサイトマップの作り方については、また別の記事でご紹介したいと思います。
とりあえずここでは、こういう存在があるということだけお見知り置きをです。

そして最後に、、構成段階で出てくるサイトマップは次の内容になります。

サイト構成図 / ワイヤーフレーム(モックアップ)におけるサイトマップ

サイト全体の構成を書き出した内容を、サイトマップといいます。
下図は、当サイトを元にしたサイトマップになります。

■サイトマップのサンプル
サイトマップのサンプル
下記リンクは、先に紹介した「Cacoo」で作ったものを見ることができます。
https://cacoo.com/diagrams/wNcw7JcjuGcnjhIw

あくまでサンプルです。
本来であれば、「カテゴリページ」ではなく具体的なページ名を書いて、そのページの内容がわかるようにしておくと良いです。

このサイトマップは、サイトの全体像を把握できるようにするのが目的です。
必要なページは、漏れなく全て書き出すようにしましょう。

下図は、当サイトのサイトマップです。
全ページではないのですが、作ってみましたのでご参考までにです。

エクセルで作ったサイトマップ
*クリックすると拡大します。

エクセルでサイトマップを作った場合、このような形になったりもします。
サイト構成図のサイトマップの形は様々です。

ファイルリスト、コンテンツリストを作る

これはエクセルで作られることが多いかと思います。

サイトのすべてのページを、ページの名前(タイトル)、ファイル名、ディレクトリ(カテゴリ)構成がわかるように、リスト化します。

Webデザイナーはこれを元に、HTMLファイルを作成して、ページを組んでいきますので重要な部分になります。

下図は、当サイトのファイルリスト(コンテンツリスト)です。
先ほど紹介したサイトマップに記したページをリストにしました。

サイト構成図/仕様書のファイルリスト(コンテンツリスト)
*クリックすると拡大します。

「ページNo.」を付けていますが、この番号はサイト仕様書、サイト構成図の中で共通No.となり、番号でどのページのことを指しているのか分かるようになっています。
先ほどのサイトマップと「ページNo.」が共通しているのをご確認頂ければと思います。

ワイヤーフレーム(モックアップ、ページ構成図)を作る

サイトマップがサイトの全体図だったのに対し、ワイヤーフレームは各ページごとの図になります。これは、他にも「モックアップ」「ページ構成図」と言われることもあります。

ワイヤーフレームはデザイン要素を完全に抜きにして、パーツの配置のみを確認する図になります。デザイン要素を含めてしまうと、デザインに目がいってしまい肝心の配置の確認が取れなくなってしまうのを防ぐためです。

このワイヤーフレームの段階で、ユーザビリティを十分に考慮していかなければいけません。

参考までに、当サイトのトップページのワイヤーフレームを作ってみました。

ページ構成図のサンプル

*クリックすると拡大します。

そのページに表示する要素を全て配置します。

また、リンク箇所も分かるようにして、そのリンク先を表示しておくと分かりやすいでしょう。

図に示したリンク先は、赤丸の番号で記してあります。番号は先に述べました共通の「ページNo.」になります。

このようなページ構成図を、全ページもしくは主要なページの分だけ作ります。

そして、この構成図を元に、いよいよWebデザインの工程に入るのですっ

  1. 独学でWebデザイナーになるための第一歩
  2. Webサイト制作の流れ
  3. STEP1:Webサイトを企画する
  4. STEP2:Webサイトの仕様策定
  5. STEP3:サイト構成書 / 構成図 / ワイヤーフレーム(モックアップ)を作る
  6. STEP4:Webサイトのデザインを制作する
  7. STEP4-2:Webサイトデザインの基礎ルールやポイント

この記事を読んだ人は他にも次の記事を読んでいます

記事公開日:2012年9月25日
最終更新日:2013年5月13日

9 comments

  1. パパ より:

    ワイヤーフレームの記事ができてる!
    これはとてもありがたいです、あまり紹介している所がなかったんですよ。

    頑張って下さいね!

    • akki より:

      >パパさん

      ありがとうございます!
      コメントは励みになります><

      スローペースであれですが、、
      なんとかかんとががむばります!

  2. ごんべえ より:

    はじめまして
    webデザイナーの勉強は始めたばかりですが、ここがわかり易くてとても勉強になっています
    これからも更新がんばってくださいね。応援してます

  3. akki より:

    >ごんべえさん

    コメントありがとうございます!
    そう言って頂けると本当に嬉しいです(涙)

    なかなか本編の更新が進んでおらず、申し訳ない気持ちにもなりつつ。。
    自分の経験も踏まえながら、わかり易いサイト作りを目指してがむばります!

    知りたいことや、わからない部分ありましたら
    またお気軽にコメントを頂ければです^^

    共にがむばりましょうヽ(゚ー゚*ヽ)

  4. Ryo より:

    熟読させて頂きました。現在、参考にしながら架空のサイトを制作中です。   そして只今就活中。。。大変厳しい業界ですね。でもいつかakki師匠のように活躍できるよう頑張ります。記事の更新楽しみにしてます☆  

  5. akki より:

    >Ryoさん

    おぉ、制作と就活!
    ダブルは本当に大変かと思います(>人<;)
    動いていれば必ず光が見えてくるはずなので、あまりこん詰めない程度にふぁいとですっ
    akki師匠Σ( ̄。 ̄ノ)ノそんなそんな、私はまだまだですorz
    共に、活躍の場を目指してがむばりましょう!!
    そしてありがとうございます、更新もがむばります!w

  6. […] 勉強になったサイト構成図の内容を書かれているサイト homepage masters MdN Design 未経験からWebデザイナーになるには […]

  7. mika より:

    初めまして。25歳で転職をしようと奮闘中のmikaと申します。
    今日、akkiさんのこのページを見て、私もウェブデザイナーを目指そうと決意しました!

    私もまったくの未経験なのですが、参考書とakkiさんからご教授頂いた知識で頑張ります!

    勉強、就活しながら、陰ながら応援させていただきます(*^^*)

    • akki より:

      mikaさん

      はじめまして!コメントありがとうございます!
      25歳まだまだこれからですね!

      大変なこと沢山あるかもですが、ぜひぜひがむばっていきましょう(´Д` )!
      わたしも応援していますっ

akki にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.