WEBデザインの進め方ってどんな感じでしょう？

質問

最近WEBデザインに興味を持ち、個人的にデザインからサイト構築(HTML化)までの作業をはじめました。

私はSE方の人間で、デザインが絡むとどお進めるのがよいのかイマイチ思いつきません。

今のところ大まかな手順だと、
(1)絵コンテ作成（Power Pointで大体の構成イメージ）
(2)1枚絵作成（絵コンテを元にphoto shopでお絵かき）
(3)HTML作成（1枚絵からパーツを切り出し、手作業でHTML記述）
という感じで進めています。

皆さんはどのように進めているのでしょうか？

回答No.5

神崎 渉瑠（@taloo）

私のやり方ですが。
プログラマーなので、ソフトウェア開発の工程が基準になっています。

(1) クライアントの要望、情報の収集
　ソフトウェア開発は何のためのソフトウェアを作るかですが、ウェブデザインでは何を発信、公表、公開したいかをまとめる。

(2) サイト構成
　サイト＝工場と考えると、工場のどこに駐車場、倉庫、受付、休憩所などを作るかを考えると思いますが、
ウェブサイトでも同様に、カテゴリー分けなどをしてアクセスしやすいサイト構成を考えます。
OKWaveで例えれば、プログラミングカテゴリーに「テーマパーク」の掲示板を入れるとどうよ？な話です。

同時に、ファイルの保存場所を決めて、制作、管理しやすくします。
ソフトウェアなら、データの保存ディレクトリを決めるみたいな物ですね。

頻繁に更新したい日記や新着情報などはCGIアプリケーション（CMS）を作ったり、ブログ（BBSに近いCMSの一種）などのシステムを組み込むと、更新しやすいです。

(3) ページデザイン
　工場各部屋のインテリア、ソフトウェアならユーザーインターフェースです。
DTP出身のデザイナーが作ると１枚の絵になるようですが、
ウェブページはどちらかというと動画に近く、DTPのように固定的な（写真のような）画面構成ではあり得ないページを作れます。
フレーム（インラインフレーム、フレームセット）や疑似フレームを使えば、たとえば200pxの幅に500pxの画像を収めることも可能です。

一般的なソフトウェアでも、メニューを選択すれば表示内容が変わる物を作ると思いますが、
ウェブページでもそれと同じです。

私の個人サイトの場合は紙と色鉛筆でラフスケッチと、
アニメの絵コンテと同じ、漫画形式の動作絵コンテを描くこともあります。
（私が作るのはFlashアニメーションではなく、JavaScriptアニメーションです）

(4) 素材作成
Photoshopで写真素材を加工、Fireworksでアイコンやボタンを作成、
素材配布サイトから借りたり、市販されている素材の加工など。

(5) HTML作成
ページデザイン（ラフスケッチ）をもとに、
どの部分がタイトルや段落、表になるか、どの部分が背景画像か、前面画像かをきめ、
背景画像はCSSにするため無視、前面画像は<img>にして、それぞれHTMLに書き出します。
<a>や<input>など、JavaScriptで使用する<div>などにid属性を指定し、ブラウザで見栄えを確認します。
この時点では、文字の大きさ、太字細字、<a>の色分けしかありません。
この状態で見出しや段落、表の順番などが読みづらい場合は調整します。

(6) CSS作成
デザイン（ラフスケッチ）の通りになるように、CSSを作ります。
デザインに合わせた書き換えはclass属性の追加、変更のみに抑えられればよし、です。

(7) デバッグ
各ブラウザでの見栄え、JavaScript、CGIアプリケーションの動作不良を確認して公開。

デザインが決まらず、書きたい文章などが先に決まっている場合は、(1)-(2)-(5)-(3)-(4)-(6)の順番で作ることもあります。
HTMLを変更しなくてもCSSだけでデザインを変更できるというのが、CSSの最大のメリットでもありますから。

仕事で受けるときはHTMLコーディングしかしないのですが、
Illustratorやエクセルのファイルとして受け取った１枚絵から、スライスツールで切り出しです。
動作絵コンテがないだけでそれ以外は同じですね。
フォントや文字色が（たとえ閲覧者の視力が弱いことや色弱・色盲だったとしても）環境依存なのは困る、必ずこの通りの色と大きさで、
というデザイナーからの指示を受けて、全部<img>というめちゃくちゃなページを作ることも多いですが、
まぁ、その関係で、１枚絵からの切り出しでOKな感じなんだと思います。

デザイン、CSS、HTMLを書いてから情報収集という順番にすると、
デザインが決まった後にページの内容などをちょっとでも修正すると、画像もHTMLも全て書き直し、サイト構成もやりなおしになりかねません。

背景画像を背景画像として、前景画像は前景画像としてしっかり分別が付いていれば、（HTMLとCSSの切り分けができていれば）
DTPの罠に陥ることはないと思います。
テキストの背景画像にすべきところをテキストごと全部<img>で、なんてやると、大変ですよ。（画像作成者さんが。私はHTMLを書くだけなので関係ありません(^^)）

ウェブデザインといっても、結局のところ、紙と色鉛筆（絵の具）でどんな絵が描けるかだと思います。
それ以外のところはシステム開発と変わらないと思うのが私の考えです。
（ウェブディレクター ＝ SE。ウェブデザイン・ユーザビリティー ＝ ユーザーインターフェース設計）

お礼

回答ありがとうございます。

Webデザインという大きいところから細かいテクニックや、業界の裏話的な事までご教授いただき、ありがとうございます。

質問自体をゆるく書いたんですが、実は
>6) CSS作成
>デザイン（ラフスケッチ）の通りになるように、CSSを作ります。
の部分をどうすればいいかについて一番悩んでしました。

一枚絵から部品を切り出すのはいいんですが、一枚絵で枠とか線を引いた部分についてはHTML+CSSで書かなくてはいけないんですが、一枚絵通りに再現するのが結構大変な作業だなぁと感じていました。

そこで、そもそも一枚絵から起こすのは間違いかな？と思い、質問をさせていただこうと思いました。
せっかくなので小さい事に固執せずに広い範囲で質問できればと考え、あえてゆるい質問をさせていただいたしだいでした。

皆さんのご意見から、一枚絵からでもHTMLからでも有りだという考えに至りました。

貴重なご意見を元に自分がやりやすい方法を試してみたいと思います。

ありがとうございました。

回答No.4

abril

Web制作業務に携わるコーダー兼プログラマーです。
現在の会社のWeb制作の進め方が、
(1)クライアントから営業が受注→(2)ディレクターと営業がクライアントとやりとりをして進行→(3)営業・ディレクターがデザイナーとコーダーを交えてミーティング(4)デザイナーがラフ案を何種類か提出→(5)デザインが最終決定した段階でコーダーへ
…という流れになってしまている為、悲しいかな進行の仕方については自分の自由には全くなりません。(3)の段階で多少こちらからのフィードバックをする機会がある場合もありますが…そういった「現実」の一例としてご紹介します。

【1】構成の決定（サイトマップの作成）
【2】PowerPoint等によるフレームワークの作成・素材収集（この時点では未入手状態のもの多し）
※【1】と【2】が明確に区別して段階を踏んでない場合の方が多い。
【3】デザイン・テンプレート（ホームとカテゴリ毎の代表的1ページ）を何案か作成の上、クライアントにJPGE画像で提出
【4】決定したデザインに基づき、デザイナーが必要なパターンの数だけテンプレートを作成
【5】【4】に基づきコーディング開始。開始してからも素材の追加やデザインの変更は多々あり。

このフローを見て頂けるとおわかりの通り、一つ一つのコンテンツの論理構造などはほとんど意識されておらず、「まずサイト全体の構成とデザインありき」という状態になってしまっています。その為、コーダーはガチガチに決まってしまったデザインからHTMLを起こす際「以下に論理的な構造でマークアップ」するか、という事にかなりの労力を要しています。おかげ様で論理的マークアップの鍛錬にはなりますが…

こんな有様ですので、ANo.1様～ANo.3様の様な、コーダーにとってはより理想的であろう進め方を選択できる方達が羨ましいです。

また、外注業者等の絡みもありますので他の制作会社の様子も多少知るところなのですが、現実問題としてはANo.1様の仰る様に：

「ポイントは、最終的なデザインやデザインの変更を念頭に置いたマークアップが最も重要です。
＞(2)1枚絵作成（絵コンテを元にphoto shopでお絵かき）はありません。」
→…ではない場合も有り得ます。現に、うちのフローの【3】はまさにこの”(2)1枚絵作成”ですので。

「どちらかというと、ＳＥというより、DTP出身の方がされている手順のようですね。よく陥る罠というか」
→不幸にして”、DTP出身の方”により主導権がある場合も少なくはない様ですね。

ANo.1様は私と同様、この業界で糧を得てらっしゃる方の様ですので、そういう進行が可能な現在の状況（会社？）は恵まれた環境かと思いました。本当に羨ましいです。

勿論、質問者さまはSE畑からということですので、ANo.2様やANo.3様の方法論を是非参考にされるべきかと思います。私のケースは現実の中の反面教師的サンプルとして捉えて下さいませ。

お礼

回答ありがとうございます。

大きな流れに逆らえない部分が多いですよね～。
なんかわかる感じがします。

>このフローを見て頂けるとおわかりの通り、一つ一つのコンテンツの論理構造などはほとんど意識されておらず、「まずサイト全体の構成とデザインありき」という状態
上流工程と下流工程を行うものの間に生まれる溝とでもいいましょうか、疎通が取れない感じ。
ちょっと悲しい現実ですね。

なんか別のほうにずれてしまいがちですが、
ありがとうございました。

回答No.3

noname#76085

個人の道楽でやっているサイトなので参考になるかどうか…
あくまでページの内容がだいたい決まっていることを前提で進みます。

(1)
トップページ（ルート）から、HTMLのリンクのツリーをなんとなく頭に思い浮かべます。それに合わせて、ディレクトリ構成を作っていきます。たとえ空でも（汗;

(2)
適当なサンプルページを作って、いきなりCSSから書きます。
このときに書くCSSは、common.cssのような、どのHTMLの中でもつかわれるであろう要素（<p>など）です。

(3)
HTMLファイルを書きます。このときにCSS側で修正が必要になるならば、適宜修正します。また、サイトのトップページはやはり「看板」にもなるので、top-page.cssのように追加でCSSを用意します。

(4)
だいたい出来上がったらば、FTPでサーバーにファイルを転送、公開、です。

CSSから作り始める理由は、アクセシビリティにあります。
個人の道楽サイトなので、キーボードでリンク、や音声対応ブラウザでは云々、とまではいきませんが、私は色盲持ちなので、色に関してはかなりこだわります。
教えて！gooは、RGBを調べるとオレンジ系統と薄い緑系統の色が使われているようですが、私の目には「違いはどこ？」という箇所が多々あります。
なので、色の指定に関しては気を配っている（つもり）です。
その他、文字サイズなどはできる限り相対値を利用し、絶対値を避けています。

アクセシビリティ関連では、下記のようなソフトがあるので、実証してみるのもいいかもしれません。
http://jp.fujitsu.com/about/design/ud/assistance/

あとは、古い本ですが、「ユニバーサルHTML/XHTML」（神崎正英：著／毎日コミュニケーションズ：出版）という本を良く広げます。
この本は、技術的な説明だけでなく、サイト構成の青写真から説明していたりするので、個人的良書です。

お礼

回答ありがとうございます。

アクセシビリティからデザインするんですか～。
勉強になります。
ご教授いただいたサイトを参考にさせていただきます。
ありがとうございました。

回答No.2

noname#83877

私はプロではないですが、面白そうなので書いてみます。

■１.まず情報の量・機能でページを分割します。
1つのページで伝えられる情報には限りがあるので、例えば何かのスクリプトを公開するページであればプログラムは専用の置く場所があるとわかりやすいでしょうし、独自のルールで利用を認める場合ライセンスに関するページも必要だと思います。日記だって書きたいかもしれません。
日記に関しては全ての記事を1つのページに収めるのは不可能なので、一般的なブログのように記事を分割する必要が出てきます。
ちょっとシステムっぽいところまで入りますが、実はこれもデザインに影響してくるのでしっかり考えたほうが良いです。（ログのナビゲーションが必要なので、そのデザインを考えなければいけません）

役割ごとにページを分けた後は、デザインを統一しても良いページをまとめます。
やはりブログがわかりやすいですが、記事ごとにデザインを変えたりはしませんよね？ここで何ページ分のデザインが必要なのかが決定します。

■2.必要なデザインの枚数だけのラフを切ります。
このときページの全体的な印象を決めておくと見た目のデザインが決まりやすくなると思います。（カッコいいとかでも、もっと具体的に車のようなカッコよさとか、シンプルなシルエット的なカッコよさとか・・・）
それとwebなので機能的なほうのデザインも細かく考えていきます。
例えば幅や高さをpxで指定したボックスは文字サイズを大きくすると文字がはみ出てしまいます。どの程度余分を取ればはみ出ないのか、もしくはどのように指定すればはみ出ないのかをこの時既に考えておきます。
実際に作ることが可能かどうかもこの時点で決まります。
例えばフォーム部品なんかはデザインの統一がかなり難しいです。
一通りラフができたら、今度はイラストレーター（場合によってはphotoshopで画像を編集）でデザインを作ります。
ちゃんと実寸大で作りこんでおくと、この時点で素材が完成してしまうので後はプログラムだけになります。

■3.ようやくコーディングを始めます。
2の時点で既にだいたいのコーディングは決定済みなので後は打ち込むだけです。
普段は自分用のテンプレを用意しているので、head内は既にキーワードやタイトルを入れるくらいなので手間もかかりません。
HTMLは1ページ10分いらないんじゃないかと思います。
私はまだこの時にはidやclassは指定しません。

一通りHTMLができたらCSSに移ります。
最初はHTML側にidを追加しながら大まかなレイアウトから作っていきます。
必要に応じてHTML側にdivやspanを追加していきます。
（個人サイトなので他人がメンテすることを考えていません。仕事の場合は2の時点で既にdivの区切り方やid名までを決めておいた方が良いと思います）
CSSはバグを踏まないようにしながら記述していきます。これが一番大変で一番難しいことではないかと。
完成したら複数のブラウザで確認、想定していたものと違う場合修正して完成です。

とこんな感じで作っているのですが、参考になりますか？

お礼

回答ありがとうございます。

>私はプロではないですが、面白そうなので書いてみます。
とても具体的に作業を整理されていて、すごいと思いました。

コンテンツの整理やページ構成等の細かい作業については
あえて割愛させていただきました。
ご指摘されるかとは思っていましたが、趣味レベルという事で・・・(;^_^A アセアセ

参考にさせて頂きます。

■2のラフ切りがド素人なので、どれだけその後のコーディングを考慮して作れるかが今後の課題になりそうです。

回答No.1

ORUKA1951

う～ん。
(1)絵コンテ作成（Power Pointで大体の構成イメージ）
(2)1枚絵作成（絵コンテを元にphoto shopでお絵かき）
(3)HTML作成（1枚絵からパーツを切り出し、手作業でHTML記述）
どちらかというと、ＳＥというより、DTP出身の方がされている手順のようですね。よく陥る罠というか、
　ページのデザイン(プレゼンテーション)は、その業種、分野の色々なサイトを比較して、大まかなイメージを掴みますが、おおむね
・トップページ
・紹介ページ
　会社紹介/その他
・ニュース
・製品情報
・資料
などの大まかなラフ書きをして、それを頭に入れて
1) それぞれのページのサンプルとなるHTML作成--基本的にHTMLエディタ(テキストエディタの中でHTMLやCSSを扱えるもの)でマークアップしていきます。
　この時点で、デザインの変更に対応できるようマークアップしておきます。
2) 画像などの製作
3) スタイルシートを書いてデザイン
　この時点で、何種類かのスタイルシートを作成します。
4) 評価
　ここで、デザインが固まります。
5) (3)までで作成したHTML・CSSをテンプレートにして、文章を流し込んでいって製作する。・・ここからは下請けに出すこともある。

　ポイントは、最終的なデザインやデザインの変更を念頭に置いたマークアップが最も重要です。
＞(2)1枚絵作成（絵コンテを元にphoto shopでお絵かき）
　はありません。それに代わって(3)の段階で、何種類かのスタイルシートを適用させて、それがサンプルとなります。firefoxですと、代替スタイルシートを自由に切り替えることができますから、それで色々なサンプルをお見せします。必要なら目の前でfire bugを使って任意に変更できますしね。

お礼

回答ありがとうございます。

やはり、1枚絵の作業はいらないんですね。罠だったとは・・・・。
確かに一枚絵からHTMLを起こすのは結構骨なので、どうかなーと考えてはいたんですが、まずはゴールをはっきりさせる為になんて結論付けていました。

参考にさせて頂きます。