LogoMark.png

WebDesign/Workflow

Workflow

Webデザインのワークフロー

CONTENTS


企画フェーズ

ヒアリング


基本事項の確認


企画立案

サイトマップ

ワイヤーフレーム

サイトマップができたら、ページのワイヤーフレーム(レイアウト)を描きます。情報の項目・量に応じて空間を最適化していきます。学生さんの多くが、ビジュアルから先に作ろうとするようですが、順序としては、サイトマップの設計が先です。情報の全体像が把握できてはじめて、それに最適な画面構成ができる・・と考えて下さい。

ページの区画整理は、HTML上のセクションタグ、ID、CLASS要素などをセレクタと、CSSでコントロールします。どれだけの区画が必要か、各区画にはどのような名称をつけるか、といったレイアウト上の基本事項について、整理して下さい。

画面遷移図の作成

ECサイトなど画面遷移ルールが必要な場合に、これをグラフ化します。


参考:Draw.io


プロトタイプ作成

見積もり・制作スケジュール作成




プレゼンテーション




補足

個人が趣味で作っているページには、ページごとにデザインが異なるものが多く見られます。それがすべて良くないというわけではありませんが、「作る人(あなた)」の視点ではなく、「見る人(訪問者)」の視点で考えてください。サイトを訪れる人は、あちこちブラウジングしながら、あなたのページを訪れます。 もし、そこから次のクリックで表示されたページがまた異なるデザインのものであったとしたらどうでしょう。訪問者は別のサイトにジャンプしたように感じる のではないでしょうか。つまり、あなたのサイトには、あなたのサイトのアイデンティティーが必要なのです。それを最も端的に表すのが、サイトのロゴ、一貫したナビゲーション、ページレイアウトの同一性なのです。
 きちんとデザインされたサイトは、ナビもわかりやすく、全体のイメージも統一されています。たとえ個人のページでも、そのあたりを意識して、全ページのベースとなる基本的なページレイアウトを設計することが必要です。



設計フェーズ

ディレクトリマップの作成




ファイル命名規則の作成




基本HTMLのコーディング(文書構造)




基本CSSのコーディング(ビジュアル)




表示確認(デバイス・ブラウザごとの対応)

テンプレート完成




付記:ブラウザチェックについて

Webの閲覧環境は、OSとブラウザの組み合わせで様々な状況が考えられます。「Web標準」に準拠した環境で開発を行い、最後にひととおりのブラウザでWebサイトがきちんと表示されるかを確認することが必要です。

Chrome、Firefox、Safari は「Web標準」に準拠していることと、基本的に自動アップデートが行われるため、最新版でブラウザチェックをすればいい・・という考え方が通例となっているようです。

やっかいな存在だった IE についてですが、「2016年1月12日(米国時間)以降、IEへのサポートを各OSの最新版のIEのみに限定」ということなので、結果、「WindowsVistaのIE9はごめんなさい無視します」ということにすれば、2016年1月12日以降は Windows7・IE11以降のチェックのみでいい・・ということになります。

なお、実機を使わなくても、以下のようなサイトを活用すると、IEでの表示を確認することができます。

付記:印刷用CSSのチェックについて

ブラウザには印刷用CSSを確認する機能があります。

制作フェーズ

文書原稿の整理

画像データの整理・最適化

個別ページ編集

個別スタイルシート作成

バリデーション(ソースコードのチェック)

動作確認


プロジェクトワークについて

複数のメンバーで規模の大きなWebサイトの開発にあたる場合は、Web標準に準拠した作業フローで考える必要があります。

基本的な事項

・HTML + CSS での設計を前提とする。
・分業制を前提とした設計、ルール作りを行う。
・全員が以下の事項の基本を理解していること
  SEO HTML CSS

構成スタッフ(例)

・ディレクター(マネージメント)→ 企画提案・スケジュール管理
・マークアップエディター(制作)→ 文書の作成(HTMLのコーディング)
・スタイルデザイナー(制作)→ ビジュアルデザイン(CSSのコーディング)



PAGES

GUIDE

DATA

添付ファイル: filemedia_print.jpg 20件 [詳細] fileworkflow.png 2038件 [詳細]
Last-modified: 2019-12-25 (水) 23:41:09