おつかれさまです。GOROLIB DESIGNの渋谷吾郎です。

　先日（2018/9/15）、IllustratorデータからHTML+CSS一式を全自動で生成するスクリプトを公開しましたが、

参考：いきなりHTML2（レスポンシブ対応）イラレから本格HTML+CSSを全自動生成
http://gorolib.blog.jp/archives/76975720.html

　購入いただいた方から、「そもそもWebデザインとは何か、全体像がよくわかっていない。今さら誰かに聞くのは恥ずかしいし、そもそも誰に聞いたらよいかわからない。難しい用語もたくさんあって、どこから手をつけたらよいのか、お手上げ状態である」というコメントをいただきました。

　このコメントには、深く同意しました。私も、同じような状況が長く続いたからです。ひとくちにWebデザインといっても、どういう工程があって、自分はどこを勉強すればよいかわからないのです。なお、後述しますが、WebデザインはWeb案件のひとつの工程であり、以下では厳密に言葉を分けて表現します。

　私は、DTP出身のIllustrator使いですので、前述の「いきなりHTML」というスクリプト制作にあたり、HTMLやCSSを改めて勉強しました。しかし、もっとも肝心なのは、このスクリプトがWeb案件のどの工程でどのように使われるのかということなのです。DTP出身者がWeb案件を学ぶにあたっては、実はそのような「Web案件全体の工程の理解」が必要だったのです。

　そこで、過去の自分に向けて「Web案件とはこういうものだよ」という本を書くことにより、多くの人にお役に立てると考えた次第です。

※なお、本書ではコーディングの詳細な説明（HTMLやCSSの記述方法）は行なっておりませんので、ご留意ください。

　はじめに、Web案件という言葉が、とても広い範囲を指し示しているということをお話しします。

　Web案件をDTP案件と比べてみましょう。下の図を見てください。実は、要件定義（ヒアリング、打ち合わせ）から始まり、デザイン、そして校正から校了まで、DTP案件もWeb案件もやっていることはほぼ同じなのです。

　校正の媒体（PDFかプロトタイプ）や、媒体のカラーモードなどの細かい違いしかありません。その工程が受け持つ機能に大差はないのです。

　そして、入稿データ作成はスライス作業、印刷はコーディング、配送はFTPアップロードと、中身は違えど、工程として対応しているのです。そして、この対応がわかると「なるほど、Web案件とはそういうものか」ということが、DTPの方にもおわかりいただけるかと思います。

　Web案件の勉強が難しいのは、用語の難しさもあると思います。IT業界では、理解もせずに「聞いたことのないカタカナや英語を使って煙にまく」という、悪しき営業習慣がありますが、Web案件でも同じような傾向が見られます。この本では、できるだけ平易な言葉での説明を心がけます。

　Web案件とは、ひとことで言えば何なのか、DTP案件に例えるとどこに対応するのか、という初心者にもわかりやすい説明を心がけるべく、今回の執筆に至った次第です。

【目次】
はじめに
・範囲が広すぎるWeb案件
・DTPで言うとどういうこと？
・カタカナと英語で煙にまかれる
WebデザインではなくWeb案件
・WebデザインではなくWeb案件
・DTPデザインではなくDTP案件
・どこをやりたいのか？
DTPとWebを工程で比較
・入稿データ作成とスライス作業
・印刷とコーディング
・搬送とFTPアップロード
Web案件におけるワンストップとは？
・デザインとコードが両方わかる人
・デザイナーはコーダーと手を組もう
・望まれるコーディネーター
Web案件における校了とは？
・印刷前の校了と同じ
・コーディングは製造工程
・きっちり承認を得る
すべての工程を理解しよう
・Webデザイン
・スライス
・コーディング
・FTPアップロード
Webデザインって何なの？
・どこにどういう素材を置くのか
・プロトタイプを作成する
・使うアプリは自由である
スライスって何なの？
・DTP案件における入稿データ
・画像の切り出し
・製造工程に引き渡される
コーディングって何なの？
・DTP案件で言えば印刷工程
・コーディングは製造工程
・製造は設計の後工程である
HTMLとCSSって何なの？
・HTMLはページ概要と部品の説明
・CSSは部品の属性の説明
・恐ることはない！たった2ファイル
FTPアップロードって何なの？
・DTP案件における配送
・Webサーバにアップロード
Web案件に必要な環境
・Webサーバーって何なの？
・ドメインを取得する
・ドメインをどうやって紐付け？
おわりに

　ここで、改めて用語の定義をしておきます。Web制作にまつわる一連の案件を、この本では「Web案件」と呼ぶことにします。

　懇意のお客様から「Webデザインに対応できますか？」と言われた場合、それがWeb案件全体を指すのか、Webデザインだけをお願いしたいのか、よく確認すべきです。