私が執筆した「プロになるためのWebデザイン入門講座 実践で役立つPhotoshop＆Illustrator徹底ガイド」が7月24日に技術評論社より発売されました。
表紙（カバー含む）も私がデザインしています。
Gihyo Digital Publishing で電子書籍（PDF）版を購入する
この本は、PCの基本操作（エクスプローラーや Finder でファイル整理、文字列を選択してコピーなど）ができる方であれば、まったくWebデザイン制作の経験がない方でもWebデザインの基礎を学び、Web制作のためのPhotoshopとIllustratorの基礎を学び、広告バナーや架空のカフェのWebサイトを制作できるように書かれています。
本書の内容
本書は、7つの Chapter（章）で成り立っています。それぞれの Chapter は以下の内容となっています。
Chapter 1 Webに求められるデザインって何だろう？
この Chapter では、Webページの各部の呼び方、色彩・配色の基礎、フォントの基礎など、Webデザインの基礎について学びます。
Webデザイン初挑戦の方が心配することのひとつは「どうすれば失敗なく色を選ぶことができるのか」ということではないかと思います。
古い Word や PowerPoint で作られた書類は鮮やかすぎる黄色や赤色など、どぎつい色合いになってしまう場合があります。
なぜそうなってしまうのか、どうすればそのような失敗を防ぐことができるのかという観点から、配色について解説しています。
Chapter 2 必要なアプリケーションと画像についての基礎知識
Photoshop、Illustrator、Fireworks などの画像編集アプリは、使ったことのない方には何が違うのかが分かりにくいかもしれません。
また、これまで Fireworks を使用してWebデザインしていた方が Photoshop に乗り換えようとした場合、Photoshop のどの機能が Fireworks の機能と同じものなのか分からないかもしれません。
3ページに渡って収録されている「Adobe Photoshop・Illustrator・Fireworks アプリケーションの機能比較表」は、まだ使ったことがない方はもちろん、既にそれらを使用している方にも役立つと思います。
Chapter 3 PhotoshopをWebデザインで効率的に使う方法
ここから、Photoshopを使ってWebデザイン制作を始めますが、その前にWindowsやMacの環境設定、そして Photoshop の環境設定をしっかりと行ないます。
Photoshop は本来写真補正用のアプリケーションですので、Webデザインで使用するには環境設定をきちんと変更しておく必要があります。
それぞれの設定項目の意味と、Photoshop のカンバスの表示がおかしくなった時はどの設定を変更すればよいかなども解説しています。
環境設定後、Photoshop による図形作成の基礎からやります。
たとえば長方形の作成は、カンバス上でドラッグして作成だけでなく、数値を指定して作成、移動する練習をします。
なぜドラッグで長方形を作成するだけでなく数値を指定して作成・移動する練習が必要かというと、ドラッグで長方形を作成・移動した場合、たとえば下記のように少しだけずれが発生してしまう場合があります。
このようになってしまうと、Dreamweaver などを使って HTML・CSS コーディングする際に面倒なことになってしまいます。
ですので、最初から数値を指定して作成・移動する練習が必要だと考えています。
その後、グラデーションやレイヤースタイルなどの装飾（レイヤースタイル）の練習をしてから、以下のようなレイヤースタイルを使用したやさしいデザインのボタンの制作をします。
Chapter 4 必要な場面でIllustratorを使えるようにしておこう
「Photoshop と Illustrator はどう使い分けるのか」、「Illustrator の環境設定」の後、初めての方が苦戦すると思われる「ペンツール」の使い方を8ページに渡って丁寧に解説します。
その後、パスの型抜きと分割（パスファインダー）について解説します。
Chapter 5 バナーのデザインでひと通りのテクニックを身につけよう
この Chapter では、Web制作の第一歩として「エステサロンの広告バナー」と「旅行券キャンペーンのバナー」を制作します。
「エステサロンのバナー」は、Photoshop のみで制作します。
女性の写真は背景が白いため、写真を切り抜く必要があります。
女性の髪の毛を綺麗に切り抜くのは、昔は大変な作業でしたが、Photoshop の新しい機能を使えば初めての方でもそれほど苦労せずに切り抜くことが可能です。
女性の写真の切り抜きは、書籍に書いてある手順通りにやれば特に難しくはないと思うのですが、もし分からなかった時のためにサポートページに解説動画を用意しています。
Photoshop で文字を配置し、レイヤースタイルで装飾して仕上げます。
「旅行券キャンペーンのバナー」は、Photoshop と Illustrator を連携して短時間でWebデザイン制作を行うためのエクササイズです。
旅行券キャンペーンのバナーでは、下記のようなパーツを使用しますが、このような形状を制作するには Photoshop より Illustrator の方が簡単で、短時間で制作することができます。
Illustrator で制作した図形を Photoshop に貼り付け、レイヤースタイルで装飾してバナーにします。
Chapter 6 標準的なワークフローに沿ってWebサイトをデザインしてみよう
ここから、いよいよWebサイトを Photoshop と Illustrator でデザインします。
この書籍では、以下のようなカフェサイトを制作します。
まずは、左のサイドバーのアイコンを Illustrator で制作します。
コーヒーのアイコンは「楕円形の組み合わせ」でできるアイコンで、ドリンクのアイコンは「旅行券キャンペーンのバナー」の応用でできるアイコンで、サンドイッチのアイコンは「パスファインダー」という機能でできるアイコンになっています。
大抵の書籍では、アイコンの制作時は「楕円形ツールを選択し、このようにドラッグします」のようにアバウトな説明になっていたりしますが、それでは初めての方には厳しいのではと感じていたので、この書籍では初めての方でも分かりやすいように「下地ファイル」を用意しておきました。
サポートページからダウンロードできるサンプルファイルの中に「下地ファイル」がありますので、それを開くとこのように完成形がうっすら見えます。
書籍の手順に従い、ソーサー（お皿）レイヤーを表示すると、このようになります。
次に、楕円形ツールで「S」から「G」の位置にドラッグします。
書籍の手順に従い、「レイヤーの表示→SからGまでドラッグ」を繰り返せばアイコンが完成します。
もし、書籍の手順だけでわからない場合はサポートページに解説動画も用意しています。
逆に、既に Illustrator に慣れている方や、本書のサンプルをひと通り制作し終わって復習で再度制作する場合などは「下地ファイル」なしでもよいと思います。
アイコンと地図以外の部分は Photoshop で制作し、デザインカンプ完成です。
とはいえ、これでカフェサイト完成ではありません。HTML と CSS でコーディングする必要があります。
Chapter 7 Dreamweaverによるコーディングの基礎を学ぼう
Chapter 7 では、デザインしたカフェサイトを HTML と CSS でコーディングします。
書籍では Dreamweaver を使用したコーディング方法について解説していますが、普段別のエディターなどを使用している方はそれを使用されても構いません。
<section>、<nav> などの HTML5 の新しいタグを使用し、角丸や半透明の背景などは CSS3 で表現します。
本書の対象となる方
- Photoshop を使ったWeb制作の方法をゼロから学びたい方
- プロになりたいけど何から学習してよいか分からない方
- 現場のワークフローに沿った制作方法を知りたい方
- グラフィックデザインの経験はあるがWeb制作は初めての方
- Fireworks を使っていたが、Photoshop でも制作したい方
他のWebデザイン入門書との違い
FireworksではなくPhotoshopによるWebデザイン制作
多くのWebデザイン入門書は Fireworks によるWebデザイン制作について解説していますが、Fireworks は事実上開発が終了しており、多くのWeb制作会社は Photoshop と Illustrator でWebデザイン制作を行なっています。
なるべく効率よく、修正に強い方法で
多くの書籍では、例えばコピーのやり方を「メニューの『編集』をクリックし、『コピー』をクリック」のように解説していますが、実際に制作の現場でそのようなことをしていては仕事が間に合いません。
そこで、この書籍では、なるべく効率よく、修正に強い方法で制作するよう解説しています。
最初は少し難しく感じられるかもしれませんが、これまでWebデザインスクールの講師をした経験上、一度メニューやツールアイコンのクリックに慣れてしまった方に、より効率のよい方法を教えても、そちらに移行していただくことは難しいです。
ですので、最初からなるべく効率のよい方法で慣れて頂けるよう解説しています。
はじめての一歩はとても大切なものです。
図版が見やすい
図版（Photoshop などの画面キャプチャー）は、極力高解像度な Retina ディスプレイで撮影しています。
そのため、普通にキャプチャーしたものと比べて、文字やツールなどのアイコンがくっきりし、とても見やすく、美しいです。
Windows、Mac 両対応
Web制作業界では、Windows、Mac のどちらも利用されていますので、この書籍では Windows、Mac の両方の解説を行なっています。
キーボードショートカットを併記することはもちろん、OS の環境設定など、画面が違う箇所は Windows と Mac の両方の画面を掲載しています。
CS5・CS6・最新のCCに対応
最新の Photoshop CC、Illustrator CC はもちろん、Photoshop CS6、Illustrator CS6、Photoshop CS5、Illustrator CS5 に対応しています。
書籍に掲載しているキャプチャーは基本的にCS6のものですが、「CS5では操作が異なる」場合や、「CCではより便利な方法がある」箇所などは、コラムにて解説しています。
※Photoshop でWebデザイン制作をする場合、私は CS6 以降、できれば CC をおすすめします。また CC は今後継続的にアップデートされ、新しい機能が搭載されたりインターフェースが変更される可能性がありますが、本書サポートページにて2013年12月までにリリースされたバージョンについてサポート致します。
HTML5・CSS3によるコーディング
初めての方向けの書籍では XHTML 1.0 と CSS 2.1 で解説している書籍もありますが、この本では現在普及しつつある HTML5 と CSS3 を積極的に使用しています。
付録: チートシート
巻末には「Photoshop のツール」と「Photoshop のキーボードショートカット」を付けています。
紙の書籍版では切り取って、PDF版では印刷してお使いください。
「Photoshop のツール」は、グラデーションツールなどWebデザインでは使うべきでないものは「使用しません」と書いています。
「Photoshop のキーボードショートカット」はWebデザインでよく使用しそうなものに絞って書いています。
はじめての方でも安心
本書は、執筆時に原稿を 社会人のためのWebデザインスクール の受講生の方などに見て頂き、分かりづらい表現などがないかチェックして頂いています。
初めての方が困りそうな箇所や、社会人のためのWebデザインスクール で質問の多い箇所は、あらかじめコラムなどでサポートしています。
さらに、特に操作が複雑な箇所はサポートページに制作方法の解説動画を掲載しています。
もし、本書を読んでみて著者に直接聞きたい箇所や、Webデザインについてより深く知りたいという場合は、社会人のためのWebデザインスクール の受講をご検討頂けると幸いです。
社会人のためのWebデザインスクールでは、書籍の内容だけでなくコーディングも含めてより深い解説をしているほか、1対1での質問や、授業外でも Facebook グループにて質問にお答えしております。
ご注意
書籍の内容に関するご質問は、こちらのブログや Twitter では受け付けておりません。
書籍内に掲載されている技術評論社のお問い合わせ先または 技術評論社のサポートページ にてご質問ください。
ただし、社会人のためのWebデザインスクール 受講者の方に限り、書籍の内容に関するご質問にも1対1で詳しく回答しております。
サポートページは、今後も積極的に情報を更新する予定です。ぜひ何度かアクセスして頂けると幸いです。
紙の書籍版のご購入は、全国の書店もしくは Amazon でどうぞ。
電子書籍（PDF）版は、Gihyo Digital Publishing で販売しております。
PDF はプロテクトはかかっておらず、iPad（第3世代）+ iOS6 で表示できることを確認しております。
※PDF版の閲覧には、7インチかそれ以上の大きさのタブレット（iPad、Nexus 7など）をおすすめします。
EPUB形式ではございませんので、iPhone やその他のスマートフォンでは文字が小さく、閲覧に適しておりません。
Gihyo Digital Publishing で電子書籍（PDF）版を購入する
書籍内容に関するお問い合わせ｜gihyo.jp … 技術評論社
