「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」という本を書きました

タイトルのとおりですが「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」という書籍を書きました。
この本は技術評論社から出版されているシリーズもので、私1人の単著ではなく、4人の著者による共著となっております。

世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書

Amazonで予約受付中: 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書

著者は、渋谷で「スマートフォン時代のWebデザインスクール」や「スマートフォン時代のWebコーディングスクール」をやっている私(庄崎)のほかに、Adobe MAX Japanに登壇する黒野さんと森さん、デザイナーの角田さんとなっております。

角田さんはすぴかあやか(@spicagraph)というTwitterアカウントでよく漫画ツイートが話題になっているので、見たことがある方も多いのではないでしょうか。

この書籍の対象となる方

この書籍は完全所初心者ではなく、PhotoshopやIllustratorをある程度使える方向けの本となっております。

「Webデザインスクールや他の入門書などで基本操作はわかったけれどさらにステップアップしたい方」、「普段Web制作をしているが最近のAdobe CCの新機能をキャッチアップできていない方」などに良いのではと思います。

書籍の内容

この書籍はLesson 1から15までの章に分かれています。太字は私が執筆を担当した章です。

  1. Webデザインにおける各アプリの使い分け
  2. ワイヤーフレームからレイアウトへのスムーズな進行
  3. Illustratorでアイコンやロゴマークなどのパーツを制作しよう
  4. Photoshopで写真の編集をしよう
  5. Photoshopで写真・パーツ加工をしよう
  6. Creative Cloudライブラリへのパーツの登録と活用
  7. PhotoshopでのWebページ制作テクニック
  8. XDを利用したレイアウトをしよう
  9. XDを利用したプロトタイプ作成を学ぼう
  10. 各アプリで効率的にテキストをデザインする
  11. Photoshopから画像を書き出そう
  12. Illustratorから画像を書き出そう
  13. XDからの画像書き出しとコーダーとのデータ共有
  14. PSD・AIファイルからCSSやテキストを抜き出そう
  15. ほかのアプリとの連係について知ろう

ここでは、内容の一部を紹介します。

Lesson01:Webデザインにおける各アプリの使い分け

この章では近年Web制作のワークフローがどのように変化しているか、Photoshop、Illustrator、Adobe XD、Sketchなどがそれぞれどのようなデザインや作業に向いているかについて解説しています。

PCやスマートフォなの周りに集まる人のイラスト

分かりやすいイラストを、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デザインの教科書

Webコーディングスクール 体験レッスン受付中

書籍の内容に関するお問い合わせについて

書籍の内容に関するご質問などは技術評論社のお問い合わせフォーム↓よりお願い致します。
このブログのお問い合わせからは受け付けておりませんのでご注意ください。

書籍内容に関するお問い合わせ|技術評論社

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。