LogoMark.png

WebDesign/Workflow のバックアップ(No.2)


Workflow

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

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

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


CONTENTS


企画フェーズ

ヒアリング


基本事項の確認

企画立案

サイトマップ

ワイヤーフレーム

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

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

画面遷移図の作成

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


参考:Figma / Draw.io

FigmaDraw.io はサイトマップやワイヤーフレームの作成に便利なツールです。描画をWeb上でシェアしたり、様々な形式でエクスポート保存することができます。


プロトタイプ作成

中途で無駄な修正作業を発生させないためにも、サイトのインターフェイスも含めたプロトタイプをクライアントに示すことが重要です。最近では、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風のサイトデザインを考えてしまいがちですが、残念ながら、それと同様の動きを静的サイトで実現するには非常に複雑なリンク形成が必要になります。

実現したい仕様を見極めて、静的サイトか動的サイトが、ふさわしい仕組みを検討して下さい。なお、動的サイトでは「投稿」を中心にする Blog 形式のものと、「ページ」を中心にまとめサイト的なものをつくる Wiki とでは、必然的にそれにふさわしいレイアウトが変わってきますので、その見極めも必要です。

シングルページで構成する場合

index.html を以下のようにセクションで区切って、縦一列で作ります。

portfolio_single.png

シングルページ+作品個別ページで構成する場合

index.html を以下のようにセクションで区切って縦一列で作ると同時に、個々の作品を独立した別の htmlページとして作成します。メインのページと作品個別ページのテンプレートを別のものとして制作します( style.css , work.css )。

portfolio_single_plus.png

マルチページで構成する場合

一般に以下のように複数の htmlファイルをつくります。
基本的には、すべてのページが同一のレイアウト構造になります。

html_css_2.png

付記

記事の分類方法.png

授業課題、プロジェクト、公募、自主制作・・様々ある作品を掲載する際、例えばイラスト / グラフィック / CG などのページ区分を考えてはみるものの、そもそも境界がはっきりしない・・。また、アナログとデジタルという分け方もあるし、制作年ごとに整理するという方法もある。・・と、カテゴリー分けについて悩むことが多いと思います。そんなときは、「分類しない」つまり「1作品1ページ」で作ってしまう・・というWordPress的な方法も検討する価値があると思います。

マルチページでWordPress風に構成する場合

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

portfolio_multi.png

サンプル

シングルページ・レスポンシブ

シングルページで構成する前提の雛形です。

マルチページ・レスポンシブ

複数のページで構成する前提の雛形です。