こんなやり方もあったとは!最近のWeb制作のワークフローにおけるAdobe系ソフトの効率的な使い方が詳しく解説された完全保存版の良書
Post on:2018年10月11日
Web制作にAdobe系のソフト、Adobe XDとPhotoshopとIllustrator、そして、Creative Cloudを活用している人は多いと思います。ブラウザやスマホなどの閲覧環境が多様化する中、デザインツールや制作のワークフローも大きく進化しています。
今すぐに試したくなるテクニックが満載で、最近のWeb制作のワークフローを効率的にする解説書を紹介します。

本書は現役で活躍しているWeb制作者がAdobe系アプリを現場でどのように使用しているか、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デザインの教科書の目次
-
- Webデザインにおける各アプリの使い分け
- Web制作のワークフロー
- Photoshop向けのデザイン・作業
- Illustrator向けのデザイン・作業
- Adobe XD向けのデザイン・作業
- Sketch向けのデザイン・作業
- CC アプリ間の連携について
- モバイルアプリとの連携について
-
- ワイヤーフレームからレイアウトへのスムーズな進行
- テキストデータの上手な取り回し
- レイアウトデータに効率よくテキストを取り込む
- 一歩進んだワイヤーフレームの作成を検討しよう
-
- Illustratorでアイコンやロゴマークなどのパーツを制作しよう
- 再編集しやすさを意識してパーツを作成しよう
- 新しい「ピクセルグリッドに整合」を使おう
- Webデザインで使える「効果」
- Webデザインで使える「アピアランス」
- SVGの最適な書き出しと配信設定
- アイコンを制作してみよう
-
- Photoshopで写真の編集をしよう
- スマートオブジェクトを利用する
- 調整レイヤーを指定する
- 外部ファイルやAdobe Stockを読み込む
- スマートフィルターで写真を補正する
-
- Photoshopで写真・パーツ加工をしよう
- レイヤー効果でボタンを作る
- ブラシを使った効果
- 加工としてのマスク
- テクスチャをプラスする
-
- Creative Cloudライブラリへのパーツの登録と活用
- Creative Cloudライブラリとは
- CCライブラリにパーツを追加する
- Caputure CCを使ってパーツをつくる
- CCライブラリのアセットを利用する
- CCライブラリを共有する
-
- PhotoshopでのWebページ制作テクニック
- ガイドレイアウトをつくろう
- アートボードの追加とサイズ変更
- 繰り返し使うパーツを共通化する
- スマートオブジェクトでパーツを共通化する
- リンクでパーツを共通化する
- CCライブラリで共有パーツを管理する
-
- XDを利用したレイアウト
- ドキュメント・アートボード・グリッドを設定する
- 基本的な図形とテキストを作成する
- 「アセット」パネルの活用
- 写真データをXDに取り込む
- CCライブラリを利用したアセット共有
- リピートグリッドで繰り返しを作成する
-
- XDを利用したプロトタイプ作成を学ぼう
- プロトタイプとは
- XDでプロトタイプを作成してプレビューする
- XDで作成したプロトタイプを公開する
- XDモバイルアプリで実機確認する
-
- 各アプリで効率的にテキストをデザインする
- PhotoshopとIllustratorのテキストの違い
- Photoshopでのテキストデザイン
- Illustratorでのテキストデザイン
- テキストのスタイルを共有する
- フォントを追加する・管理する
-
- Photoshopから画像を書き出そう
- クイック書き出しで画像を書き出す
- 「書き出し形式」で画像を書き出す
- 画像アセット生成で画像を書き出す
- 高精細ディスプレイ向け2倍サイズ画像の書き出し
-
- Illustratorから画像を書き出そう
- オブジェクトやグループをアセットに登録する
- IllustratorでSVGを書き出す設定
- 書き出したSVGの最適化
- IllustratorでPNGやJPGを書き出す設定
- マスクしたオブジェクトの書き出し
-
- XDからの画像書き出しとコーダーとのデータ共有
- XDから画像を書き出そう
- デザインスペックでコーディング情報を共有する
-
- PSD, AIファイルからCSSやテキストを抜き出そう
- DreamweaverでPSDからCSSやテキストを抜き出す
- Creative CloudエクストラクトでPSDからCSSやテキストを抜き出す
- AIからCSSやテキストを抜き出す
-
- ほかのアプリとの連携について知ろう
- Web制作でよく利用されるツールやサービス
- SketchとAdobeアプリのデータの互換性
- Photoshopで作成したカンプをZeplinで読み込む
- XDで作成したカンプをZeplinで読み込む
こういう解説書を待っていた人も多いと思います。
PhotoshopやIllustratorの使い方やチュートリアルは数多くありますが、ワークフローをベースに解説されているのは非常に数が少ないです。しかも現時点で最新版対応です!
初心者にも確かにお勧めですが、ベテランにもぜひ手に取って欲しい一冊です。ずっと変わらずに同じワークフローで続けている人は、新しい発見がたくさんあると思います。
献本の御礼
最後に、献本いただいた著者様・技術評論社の担当者様に御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors