Webサイト構築の構造・骨格・表層
自分なりのWebサイト構築手順のまとめ。
IAシンキング Web制作者・担当者のためのIA思考術 を参考にフローを整理し、サイトのコンセプト以降からシステム設計の手前に至るまでの手順。
Webサイト構築に必要なプロセス
- 戦略
- サイトの目的
- ユーザーニーズ
- 要求
- 機能仕様
- コンテンツ要求
- 構造
- インタラクションデザイン
- 情報アーキテクチャ
- 骨格
- 情報デザイン
- インターフェースデザイン
- ナビゲーションデザイン
- 情報デザイン
- 表層
- ビジュアルデザイン
1 -> 5 は時系列な順序であり、上から下に行く事で 抽象的->具体的 となる。
ここでは、「3. 構造」以降についてをまとめてみる。
※ 戦略・ 要求については、こちら で。
サイトストラクチャ
簡単に言うとサイトマップの事。動作手順や画面遷移のフローチャート等をつくる。
そしてこの段階で以下を決める
- 表現方法の統一。 エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践) で言うところの ユビキタス言語 。
- ハイレベルサイトストラクチャを作成
表現方法の統一
IAシンキングでは設計での表現方法の統一としているが、自分の場合にはサイトで利用する文言統一をこの段階で決定する
ハイレベルサイトストラクチャ
IAシンキングでは「サイトを俯瞰し要点をおさえる」とし、コアコンテンツを見つけ出し、それを書き出すとある。 で、その思考フレームワークとして以下を例示。
- トップページとその他コンテンツ群
- メインメニュー類
- サブカテゴリー
- 詳細コンテンツ群
で、自分の場合をザックリと以下に。
- ホーム:最新記事
- グローバル:部品、記事
- 部品一覧、記事検索
- 部品詳細
画面設計
IAシンキングでは「画面設計」とは、「ラベル設計」「サイトストラクチャ設計」「ナビゲーション設計」の集大成とある。 そして、次の3つを抑える必要がある 1. 画面内のエリア定義(レイアウト) 2. 画面前後のフロー(ナビゲーション) 3. 画面内の機能(アクション)
自分のサイトの特性から、あらかじめあるページタイプ、レイアウトパターンをイメージして細部をつめてみる。 自分の場合には、Free Responsive Mobile Website Templates Designs - w3layouts.com から近いカテゴリーを見つけて、設計をしてみる
ワイヤーフレーム
上記から近いイメージのページをみつけたら、 Wirify のブックマークレットを利用してワイヤーフレームを表示し、それを元に自分でCacooやKyenoteを利用してワイヤーフレームを作成する。
これ以降は?
ここまでがコンセプトを決めてからの画面イメージを決めるまでのざっとした概要。
ここからシステム設計(URL、DB、etc)に行程を進めていく。
- 作者: 坂本貴史,宮崎綾子,長谷川恭久
- 出版社/メーカー: ワークスコーポレーション
- 発売日: 2011/03/29
- メディア: 単行本
- 購入: 12人 クリック: 167回
- この商品を含むブログ (10件) を見る
エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践)
- 作者: エリック・エヴァンス,今関剛,和智右桂,牧野祐子
- 出版社/メーカー: 翔泳社
- 発売日: 2011/04/09
- メディア: 大型本
- 購入: 19人 クリック: 1,360回
- この商品を含むブログ (131件) を見る