読者です 読者をやめる 読者になる 読者になる

Lチカ開発ブログ

https://l-chika.com/の開発ブログ

Webサイト構築の構造・骨格・表層

webサービス

自分なりのWebサイト構築手順のまとめ。

IAシンキング Web制作者・担当者のためのIA思考術 を参考にフローを整理し、サイトのコンセプト以降からシステム設計の手前に至るまでの手順。

Webサービス構築のきっかけについては、 こちら で。

Webサイト構築に必要なプロセス

  1. 戦略
    • サイトの目的
    • ユーザーニーズ
  2. 要求
    • 機能仕様
    • コンテンツ要求
  3. 構造
  4. 骨格
    • 情報デザイン
      • インターフェースデザイン
      • ナビゲーションデザイン
  5. 表層
    • ビジュアルデザイン

1 -> 5 は時系列な順序であり、上から下に行く事で 抽象的->具体的 となる。

ここでは、「3. 構造」以降についてをまとめてみる。

※ 戦略・ 要求については、こちら で。

サイトストラクチャ

簡単に言うとサイトマップの事。動作手順や画面遷移のフローチャート等をつくる。

そしてこの段階で以下を決める

表現方法の統一

IAシンキングでは設計での表現方法の統一としているが、自分の場合にはサイトで利用する文言統一をこの段階で決定する

ハイレベルサイトストラクチャ

IAシンキングでは「サイトを俯瞰し要点をおさえる」とし、コアコンテンツを見つけ出し、それを書き出すとある。 で、その思考フレームワークとして以下を例示。

  1. トップページとその他コンテンツ群
  2. メインメニュー類
  3. サブカテゴリー
  4. 詳細コンテンツ群

で、自分の場合をザックリと以下に。

  1. ホーム:最新記事
  2. グローバル:部品、記事
  3. 部品一覧、記事検索
  4. 部品詳細

画面設計

IAシンキングでは「画面設計」とは、「ラベル設計」「サイトストラクチャ設計」「ナビゲーション設計」の集大成とある。 そして、次の3つを抑える必要がある 1. 画面内のエリア定義(レイアウト) 2. 画面前後のフロー(ナビゲーション) 3. 画面内の機能(アクション)

自分のサイトの特性から、あらかじめあるページタイプ、レイアウトパターンをイメージして細部をつめてみる。 自分の場合には、Free Responsive Mobile Website Templates Designs - w3layouts.com から近いカテゴリーを見つけて、設計をしてみる

ワイヤーフレーム

上記から近いイメージのページをみつけたら、 Wirify ブックマークレットを利用してワイヤーフレームを表示し、それを元に自分でCacooやKyenoteを利用してワイヤーフレームを作成する。

これ以降は?

ここまでがコンセプトを決めてからの画面イメージを決めるまでのざっとした概要。

ここからシステム設計(URL、DB、etc)に行程を進めていく。

IAシンキング Web制作者・担当者のためのIA思考術

IAシンキング Web制作者・担当者のためのIA思考術

エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践)

エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践)

w3layouts.com

www.wirify.com

cacoo.com