こんなやり方もあったとは！最近のWeb制作のワークフローにおけるAdobe系ソフトの効率的な使い方が詳しく解説された完全保存版の良書

Web制作にAdobe系のソフト、Adobe XDとPhotoshopとIllustrator、そして、Creative Cloudを活用している人は多いと思います。ブラウザやスマホなどの閲覧環境が多様化する中、デザインツールや制作のワークフローも大きく進化しています。

今すぐに試したくなるテクニックが満載で、最近のWeb制作のワークフローを効率的にする解説書を紹介します。

本書は現役で活躍しているWeb制作者がAdobe系アプリを現場でどのように使用しているか、Web制作のワークフローを詳しく解説した一冊です。
初心者の人はもちろんのこと、今まで変わらず同じ使い方をしてきたベテランの人にも「こんなやり方があったとは！！」となり、きっと目から鱗だと思います。

Kindle版も発売されています。

• Illustrator & Photoshop & XD Webデザインの教科書（Kindle版）

紙面のキャプチャで、中身を少しだけご紹介。

本書はWeb制作に特化されたAdobe XDとPhotoshopとIllustrator、そしてCreative Cloudの使い方を学べます。2018年9月現在の最新版に対応しており、それぞれの便利な機能や連携のテクニックなど、Web制作の作業効率が何倍にもアップすると思います。

特に注目は「連携」です。それぞれのソフトウェアでの連携だけでなく、Creative Cloudを介しての連携、スマホアプリとの連携など、クラウドやスマホを使った連携機能にも注目です。また、SketchやZeplinとの連携も詳しく解説されています。

本書は15章構成で、Web制作のワークフローのノウハウがぎっしり詰まっています。
1章は概要で、2章から制作のテクニック、テキストデータの扱い方です。

デザイナーもコーダーも共通して使用するのが、テキストデータです。仕様書にあるテキストデータ、デザインファイルにあるテキストデータ、PhotoshopやIllustratorやXDに効率よく流し込む方法、そして取り出す方法が詳しく解説されています。

もう、これだけで「買いだ！」と思った人は正解です！！
Web制作のワークフローについて非常に詳しく解説されているのが本書の特徴です。

3, 4, 5章はPhotoshopとIllustratorでのデザイン要素やパーツの作り方。スマートオブジェクトを使用した画像の編集方法、ボタンやテクスチャや背景の作り方、アイコンやロゴの作り方など、修正に強い作成方法が分かります。

CCユーザーだけど、Creative Cloudライブラリを活用できていない人は、この6章です。Adobe Capture CCを使用してデザイン要素やカラースキームを作成し、簡単に管理することができます。

作成したデザイン要素やカラースキームは、アセットとして利用することができます。個人のみで利用するだけでなく、チーム内でアセットを共有することも簡単にできます。

7章はPhotoshopで、8章はXDでのレイアウトのデザインです。それぞれアートボードの使い方から、グリッドやガイド、パーツの共通化、アセット共有など、Webサイトやスマホアプリのレイアウト手法が解説されています。

XDの強みはプロトタイプをさくっと作成でき、簡単に実機でプレビューできることです。XDのスマホアプリを利用すると、より現実に近いプロトタイプでの検証もできます。

Webサイトでもスマホアプリでもテキスト、文字のデザインは欠かせません。PhotoshopとIllustratorの特徴を活かして、デザインしやすくて変更しやすい作成方法が解説されています。

また、文字のデザインで表現の幅を広げるにはフォントも重要です。フォントの効率的な管理方法、文字パネルや字形パネルの使い方、また画像化されたフォントが何なのかというのもPhotoshopで見つけることもできます。

11, 12, 13章はそれぞれでの画像書き出し。Photoshopで作成したカンプデータから、レイヤー単位で書き出すだけでなく、画像アセットの機能を使用すると簡単に自動化することもできます。

Illustratorでの書き出しは今まではスライス機能を使用していたかもしれませんが、現在ではアセット機能が推奨されています。そして、SVG形式での書き出しやSVGの最適化なども、最近では必須です。

XDでも画像を書き出すことができます。しかし、さらに便利なので、コーディングで必要になるデザインの指定データを書き出すことができる「デザインスペック」です。わざわざデザインの仕様をコーダーに渡す必要はありません。

14章はコーダーに役立つ情報です。PSDやAIなどのデザインファイルから、サイズやカラーや文字装飾などのプロパティを抜き出す方法の解説です。

最後の15章では、Adobe以外のプロダクトとの連携です。Sketchファイルを渡されたり、Zeplinでデータを渡さなければいけなかったり、いざという時のためにAdobe系とそれ以外のデータ互換方法についても学んでおきましょう。

Illustrator & Photoshop & XD Webデザインの教科書の目次

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

   Web制作のワークフロー

   Photoshop向けのデザイン・作業

   Illustrator向けのデザイン・作業

   Adobe XD向けのデザイン・作業

   Sketch向けのデザイン・作業

   CC アプリ間の連携について

   モバイルアプリとの連携について

2. ワイヤーフレームからレイアウトへのスムーズな進行

   テキストデータの上手な取り回し

   レイアウトデータに効率よくテキストを取り込む

   一歩進んだワイヤーフレームの作成を検討しよう

3. Illustratorでアイコンやロゴマークなどのパーツを制作しよう

   再編集しやすさを意識してパーツを作成しよう

   新しい「ピクセルグリッドに整合」を使おう

   Webデザインで使える「効果」

   Webデザインで使える「アピアランス」

   SVGの最適な書き出しと配信設定

   アイコンを制作してみよう

4. Photoshopで写真の編集をしよう

   スマートオブジェクトを利用する

   調整レイヤーを指定する

   外部ファイルやAdobe Stockを読み込む

   スマートフィルターで写真を補正する

5. Photoshopで写真・パーツ加工をしよう

   レイヤー効果でボタンを作る

   ブラシを使った効果

   加工としてのマスク

   テクスチャをプラスする

6. Creative Cloudライブラリへのパーツの登録と活用

   Creative Cloudライブラリとは

   CCライブラリにパーツを追加する

   Caputure CCを使ってパーツをつくる

   CCライブラリのアセットを利用する

   CCライブラリを共有する

7. PhotoshopでのWebページ制作テクニック

   ガイドレイアウトをつくろう

   アートボードの追加とサイズ変更

   繰り返し使うパーツを共通化する

   スマートオブジェクトでパーツを共通化する

   リンクでパーツを共通化する

   CCライブラリで共有パーツを管理する

8. XDを利用したレイアウト

   ドキュメント・アートボード・グリッドを設定する

   基本的な図形とテキストを作成する

   「アセット」パネルの活用

   写真データをXDに取り込む

   CCライブラリを利用したアセット共有

   リピートグリッドで繰り返しを作成する

9. XDを利用したプロトタイプ作成を学ぼう

   プロトタイプとは

   XDでプロトタイプを作成してプレビューする

   XDで作成したプロトタイプを公開する

   XDモバイルアプリで実機確認する

10. 各アプリで効率的にテキストをデザインする

    PhotoshopとIllustratorのテキストの違い

    Photoshopでのテキストデザイン

    Illustratorでのテキストデザイン

    テキストのスタイルを共有する

    フォントを追加する・管理する

11. Photoshopから画像を書き出そう

    クイック書き出しで画像を書き出す

    「書き出し形式」で画像を書き出す

    画像アセット生成で画像を書き出す

    高精細ディスプレイ向け2倍サイズ画像の書き出し

12. Illustratorから画像を書き出そう

    オブジェクトやグループをアセットに登録する

    IllustratorでSVGを書き出す設定

    書き出したSVGの最適化

    IllustratorでPNGやJPGを書き出す設定

    マスクしたオブジェクトの書き出し

13. XDからの画像書き出しとコーダーとのデータ共有

    XDから画像を書き出そう

    デザインスペックでコーディング情報を共有する

14. PSD, AIファイルからCSSやテキストを抜き出そう

    DreamweaverでPSDからCSSやテキストを抜き出す

    Creative CloudエクストラクトでPSDからCSSやテキストを抜き出す

    AIからCSSやテキストを抜き出す

15. ほかのアプリとの連携について知ろう

    Web制作でよく利用されるツールやサービス

    SketchとAdobeアプリのデータの互換性

    Photoshopで作成したカンプをZeplinで読み込む

    XDで作成したカンプをZeplinで読み込む

こういう解説書を待っていた人も多いと思います。
PhotoshopやIllustratorの使い方やチュートリアルは数多くありますが、ワークフローをベースに解説されているのは非常に数が少ないです。しかも現時点で最新版対応です！

初心者にも確かにお勧めですが、ベテランにもぜひ手に取って欲しい一冊です。ずっと変わらずに同じワークフローで続けている人は、新しい発見がたくさんあると思います。

献本の御礼

最後に、献本いただいた著者様・技術評論社の担当者様に御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス