LogoMark.png

WebDesign/Workflow

Workflow

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

Web制作の一般的な手順について概説しています。企画>設計>制作・・言葉は異なっていますが、デザイン思考のプロセスそのものです。

現状分析 > アイデア > ||: プロトタイピング > テスト :|| > 実装


CONTENTS


企画フェーズ

ヒアリング


基本事項の確認

企画立案

サイトマップ

ワイヤーフレーム

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

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

画面遷移図の作成

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


参考:Draw.io


プロトタイプ作成

中途で無駄な修正作業を発生させないためにも、サイトのインターフェイスも含めたプロトタイプをクライアントに示すことが重要です。最近では、Webのプロトタイプを作成するためのツールが充実してきました。

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

納期までの制作スケジュールをクライアントに示すことが必要です。見積もりについては、サーバーの管理費用等を除けば、見積もりに記載する項目の大半は、当該部分の制作にかかる人件費です。見積もりの出し方は現場ごとに様々です。
Google:Webデザイン 見積もり


プレゼンテーション

企画内容をクライアントにプレゼンテーションして、合意を得ます。



設計フェーズ

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

index.html をツリーのトップに置いて、その他のファイルをどのように配置するかを検討します。ページをグループ化してフォルダに分ける方法もありますが、HTMLのフォルダ階層を不用意に複雑にすると、スタイルシートや画像へのリンクが煩雑になるので、個人のポートフォリオサイトぐらいの規模であれば、HTMLファイルはすべて index.html と同一階層に置くことをお勧めします。
テンプレートについては、以下の形を推奨します。

directory.png

ファイル命名規則

将来的にページが増えることを前提に、サイトマップに従って各ページの html ファイルの命名規則を考えます。

テンプレート制作

一般に、Webサイトをデザインする際は、閲覧者を混乱させないよう、サイトのロゴ、一貫したナビゲーションを含め、サイト内のすべてのページで、レイアウトが統一されていることが必要です。そのため、以下のコーディング作業を行って、全ページの基礎となる「テンプレート(ページの雛形)」を制作します。

基本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を確認する機能があります。

制作フェーズ

テンプレートを複製して、HTMLで個別ページの記事を記載するフェーズです。一般に以下のような作業が必要になります。

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

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

基本的な事項

構成スタッフ(例)

共同作業のためのリポジトリ

付録:Portfolioサイトについて

静的サイトと動的サイト

静的サイトとは、HTML+CSS+JavaScript によってクライアントサイドのみで完結するWebサイトです。一方、動的サイトというのは、WordPress に代表されるCMSのように、サーバーサイドでデータベースと連動して、記事情報を自動回収して表示できるようなものです。

みなさんがWeb上で見ているサイトの大半はCMS(動的サイト)なので、CMS風のサイトデザインを考えてしまいがちですが、残念ながら、それと同様の動きをするデザインを静的サイトで実現するのは非常に面倒なことですし、そうした取り組みは無駄な作業時間を消費するだけなので、おすすめできません。

Portfolioサイトをシングルページで構成する場合

一般にページを以下のセクションで区切って、縦一列でります。

シングルページのサンプル


Portfolioサイトをマルチページで構成する場合

一般に以下のように複数の htmlファイルをつくります。

マルチページのサンプル


PortfolioサイトをマルチページでWordPress風に構成する場合

トップページあるいは、ギャラリーページに作品の一覧サムネイルがあって、サムネイルのクリックで、個別作品のページにジャンプする・・というかたちでデザインしたい場合は、以下のように標準テンプレートと作品個別ページのテンプレートを別のものとして制作します。

portfolio_multi.png

PAGES

GUIDE

DATA

添付ファイル: fileportfolio_multi.png 109件 [詳細] filedirectory.png 90件 [詳細] filemedia_print.jpg 104件 [詳細] fileworkflow.png 2090件 [詳細]
Last-modified: 2020-07-14 (火) 10:14:20