タイトルのとおりですが「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」という書籍を書きました。
この本は技術評論社から出版されているシリーズもので、私1人の単著ではなく、4人の著者による共著となっております。
Amazonで予約受付中: 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書
著者は、渋谷で「スマートフォン時代のWebデザインスクール」や「スマートフォン時代のWebコーディングスクール」をやっている私（庄崎）のほかに、Adobe MAX Japanに登壇する黒野さんと森さん、デザイナーの角田さんとなっております。
角田さんはすぴかあやか（@spicagraph）というTwitterアカウントでよく漫画ツイートが話題になっているので、見たことがある方も多いのではないでしょうか。
「アウトプットしよう」っていうのは「人に見せる」ことだけじゃないよねっていう話 pic.twitter.com/FFZ4dtUUjq
— すぴかあやか（角田綾佳） (@spicagraph) 2018年7月6日
この書籍の対象となる方
この書籍は完全所初心者ではなく、PhotoshopやIllustratorをある程度使える方向けの本となっております。
「Webデザインスクールや他の入門書などで基本操作はわかったけれどさらにステップアップしたい方」、「普段Web制作をしているが最近のAdobe CCの新機能をキャッチアップできていない方」などに良いのではと思います。
書籍の内容
この書籍はLesson 1から15までの章に分かれています。太字は私が執筆を担当した章です。
- Webデザインにおける各アプリの使い分け
- ワイヤーフレームからレイアウトへのスムーズな進行
- Illustratorでアイコンやロゴマークなどのパーツを制作しよう
- Photoshopで写真の編集をしよう
- Photoshopで写真・パーツ加工をしよう
- Creative Cloudライブラリへのパーツの登録と活用
- PhotoshopでのWebページ制作テクニック
- XDを利用したレイアウトをしよう
- XDを利用したプロトタイプ作成を学ぼう
- 各アプリで効率的にテキストをデザインする
- Photoshopから画像を書き出そう
- Illustratorから画像を書き出そう
- XDからの画像書き出しとコーダーとのデータ共有
- PSD・AIファイルからCSSやテキストを抜き出そう
- ほかのアプリとの連係について知ろう
ここでは、内容の一部を紹介します。
Lesson01：Webデザインにおける各アプリの使い分け
この章では近年Web制作のワークフローがどのように変化しているか、Photoshop、Illustrator、Adobe XD、Sketchなどがそれぞれどのようなデザインや作業に向いているかについて解説しています。
分かりやすいイラストを、Adobe XDの書籍を執筆されている北村さんに描き下ろしていただきました。
なお、Lesson01 の内容の一部を以下の記事で紹介しています。
Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？
Lesson03：Illustratorでアイコンやロゴマークなどのパーツを制作しよう
ここでは再編集しやすさを意識してパーツを作成する方法、Web制作者向けの［効果］、［アピアランス］、新しい［ピクセルグリッドに整合］の解説のほか、SVGの最適な書き出しと配信設定について解説しています。
YouTubeの再生ボタンのようなアイコンの制作方法や、たくさんのSVGを快適に配信するためのサーバー設定などについても解説しています。
※スクリーンショットはMacですがキーボードショートカットはWindowsとMacを併記しており、Windowsの方もご活用いただけるようになっています。
Lesson12：Illustratorから画像を書き出そう
SVGとはWebブラウザーで表示できるベクターグラフィックスの一種で、Retinaディスプレイのような高密度ディスプレイでも美しく表示できるなどメリットも多いですが、JPEGやPNGとは異なる注意点があります。
たとえば、Illustratorから書き出したSVGはそのままではファイルサイズが大きすぎるため、ファイルサイズを縮小し、最適化したいとします。
SVGを最適化する方法をGoogle検索すると「SVGOMGを使用すると良い」と出てきたので、書き出したSVGをSVGOMGで最適化したところ、IE11などの古いWebブラウザーで表示がおかしくなってしまった…というのは割とあることです。
ではどうすれば良かったのか？ということをこの書籍に書いています。
SVGに関する解説は、SVGの仕様に大変詳しい株式会社まぼろしの松田さんにチェックしていただいています。
Lesson15：ほかのアプリとの連係について知ろう
ここは私が執筆した章ではありませんが、「SketchとAdobeアプリのデータの互換性」、「XDで作成したカンプをZeplinで読み込む」など、Adobe以外のアプリも利用されている方には興味ありそうなトピックがまとめられています。
なお、このブログでは今後私が執筆を担当した記事のうちいくつかを紹介したいと考えています。お楽しみに。
この書籍は、全国の書店やAmazonなどで10月5日発売開始予定です。
Amazonで予約受付中: 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書
書籍の内容に関するお問い合わせについて
書籍の内容に関するご質問などは技術評論社のお問い合わせフォーム↓よりお願い致します。
このブログのお問い合わせからは受け付けておりませんのでご注意ください。
