commentsここでは、「STEP1:Webサイトを企画する」と「STEP2:Webサイトの仕様策定」で決定したコンテンツ内容を、サイト内でどのように配置していくか、どのようなページ遷移を行うかを決定していきます。サイトの構成書(構成図)は、エクセルやパワーポイントで作られることが多いのではないでしょうか。ワイヤーフレーム(モックアップ)を作るのに便利なツールも沢山ありますので、合わせてご紹介していきたいと思います。ワイヤーフレームとは、デザイン要素を一切抜きにして、ページにコンテンツを配置したレイアウト図のことをいいます。どのリンクがどのページに遷移するかも、ここに記載しておいたりします。使い勝手が良かったのは「Cacoo」でした。Web上で図の作成とリアルタイムコラボレーション使い方はいたって簡単で、直感的に図形を作って配置していくことができます。使い方については、また別の記事に書いていこうと思いますっまた、ワイヤーフレーム(モックアップ)のツールはけっこう沢山あります。自分で実際に色々使ってみて、お気に入りを見つけると良いですよ。Magazineこういったツール以外ですと、Excel(エクセル)やPowerPoint(パワーポイント)を使って作られることが多いです。サイトマップ(全体構成図)を作成するちなみに、、Webサイトで言われる「サイトマップ」は3種類あります。例)当サイトのサイトマップ価格コムのサイトマップ食べログのサイトマップ検索エンジンに読んでもらいたいページをお知らせする「サイトマップ」このサイトマップはファイルの拡張子が「.xml」になることから、「XMLサイトマップ」とも言われています。検索エンジンにサイトのページの在り処をお知らせする役割があります。例)当サイトのXMLサイトマップ食べログのXMLサイトマップnanapiのXMLサイトマップこのXMLサイトマップの作り方については、また別の記事でご紹介したいと思います。ここでは、こういう存在があるということだけお見知り置きをです。最後に、、構成段階で出てくるサイトマップは次の内容になります。ワイヤーフレーム(モックアップ)におけるサイトマップサイト全体の構成を書き出した内容を、サイトマップといいます。下図は、当サイトを元にしたサイトマップになります。■サイトマップのサンプル下記リンクは、先に紹介した「Cacoo」で作ったものを見ることができます。https://cacoo.com/diagrams/wNcw7JcjuGcnjhIwあくまでサンプルです。本来であれば、「カテゴリページ」ではなく具体的なページ名を書いて、そのページの内容がわかるようにしておくと良いです。このサイトマップは、サイトの全体像を把握できるようにするのが目的です。必要なページは、漏れなく全て書き出すようにしましょう。下図は、当サイトのサイトマップです。全ページではないのですが、作ってみましたのでご参考までにです。*クリックすると拡大します。エクセルでサイトマップを作った場合、このような形になったりもします。サイト構成図のサイトマップの形は様々です。ファイルリスト、コンテンツリストを作るこれはエクセルで作られることが多いかと思います。サイトのすべてのページを、ページの名前(タイトル)、ファイル名、ディレクトリ(カテゴリ)構成がわかるように、リスト化します。Webデザイナーはこれを元に、HTMLファイルを作成して、ページを組んでいきますので重要な部分になります。下図は、当サイトのファイルリスト(コンテンツリスト)です。先ほど紹介したサイトマップに記したページをリストにしました。*クリックすると拡大します。「ページNo.」を付けていますが、この番号はサイト仕様書、サイト構成図の中で共通No.となり、番号でどのページのことを指しているのか分かるようになっています。先ほどのサイトマップと「ページNo.」が共通しているのをご確認頂ければと思います。ワイヤーフレーム(モックアップ、ページ構成図)を作るサイトマップがサイトの全体図だったのに対し、ワイヤーフレームは各ページごとの図になります。これは、他にも「モックアップ」「ページ構成図」と言われることもあります。ワイヤーフレームはデザイン要素を完全に抜きにして、パーツの配置のみを確認する図になります。デザイン要素を含めてしまうと、デザインに目がいってしまい肝心の配置の確認が取れなくなってしまうのを防ぐためです。このワイヤーフレームの段階で、ユーザビリティを十分に考慮していかなければいけません。参考までに、当サイトのトップページのワイヤーフレームを作ってみました。*クリックすると拡大します。そのページに表示する要素を全て配置します。リンク箇所も分かるようにして、そのリンク先を表示しておくと分かりやすいでしょう。図に示したリンク先は、赤丸の番号で記してあります。番号は先に述べました共通の「ページNo.」になります。このようなページ構成図を、全ページもしくは主要なページの分だけ作ります。AMワイヤーフレームの記事ができてる!これはとてもありがたいです、あまり紹介している所がなかったんですよ。AMはじめましてwebデザイナーの勉強は始めたばかりですが、ここがわかり易くてとても勉強になっていますこれからも更新がんばってくださいね。PM>ごんべえさんコメントありがとうございます!そう言って頂けると本当に嬉しいです(涙)なかなか本編の更新が進んでおらず、申し訳ない気持ちにもなりつつ。PM熟読させて頂きました。現在、参考にしながら架空のサイトを制作中です。いつかakki師匠のように活躍できるよう頑張ります。