目次

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

• 1-1　Web制作のワークフロー
• 1-2　Photoshop向きのデザイン・作業
• 1-3　Illustrator向きのデザイン・作業
• 1-4　Adobe XD向きのデザイン・作業
• 1-5　Sketch向きのデザイン・作業
• 1-6　CCアプリ間の連携について
• 1-7　モバイルアプリとの連携について

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

• 2-1　テキストデータの上手な取り回し
• 2-2　レイアウトデータに効率よくテキストを取り込む
• 2-3　一歩進んだワイヤーフレームの作成を検討しよう
• Q　練習問題

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

• 3-1　再編集しやすさを意識してパーツを作成しよう
• 3-2　新しい［ピクセルグリッドに整合］を使おう
• 3-3　Webデザインで使える［効果］
• 3-4　Webデザインで使える［アピアランス］
• 3-5　SVGの最適な書き出しと配信設定
• 3-6　アイコンを制作してみよう
• Q　練習問題

Lesson04　Photoshopで写真の編集をしよう

• 4-1　スマートオブジェクトを利用する
• 4-2　調整レイヤーを指定する
• 4-3　外部ファイルやAdobe Stockを読み込む
• 4-4　スマートフィルターで写真を補正する
• Q　練習問題

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

• 5-1　レイヤー効果でボタンを作る
• 5-2　ブラシを使った効果
• 5-3　加工としてのマスク
• 5-4　テクスチャをプラスする
• Q　練習問題

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

• 6-1　Creative Cloudライブラリとは
• 6-2　CCライブラリにパーツを追加する
• 6-3　Capture CCを使ってパーツをつくる
• 6-4　CCライブラリのアセットを利用する
• 6-5　CCライブラリを共有する
• Q　練習問題

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

• 7-1　ガイドレイアウトをつくろう
• 7-2　アートボードの追加とサイズ変更
• 7-3　繰り返し使うパーツを共通化しよう
• 7-4　スマートオブジェクトでパーツを共通化する
• 7-5　リンクでパーツを共通化する
• 7-6　CCライブラリで共有パーツを管理する
• Q　練習問題

Lesson08　XDを利用したレイアウトをしよう

• 8-1　ドキュメント・アートボード・グリッドを設定する
• 8-2　基本的な図形とテキストを作成する
• 8-3　［アセット］パネルの活用
• 8-4　写真データをXDに取り込む
• 8-5　CCライブラリを利用したアセット共有
• 8-6　リピートグリッドで繰り返しを作成する
• Q　練習問題

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

• 9-1　プロトタイプとは
• 9-2　XDでプロトタイプを作成してプレビューする
• 9-3　XDで作成したプロトタイプを公開する
• 9-4　XDモバイルアプリで実機確認する
• Q　練習問題

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

• 10-1　PhotoshopとIllustratorのテキストの違い
• 10-2　Photoshopでのテキストデザイン
• 10-3　Illustratorでのテキストデザイン
• 10-4　テキストのスタイルを共有する
• 10-5　フォントを追加する・管理する
• Q　練習問題

Lesson11　Photoshopから画像を書き出そう

• 11-1　クイック書き出しを利用して画像を書き出す
• 11-2　［書き出し形式］で画像を書き出す
• 11-3　画像アセット生成で画像を書き出す
• 11-4　高精細ディスプレイ向け2倍サイズ画像の書き出し
• Q　練習問題

Lesson12　Illustratorから画像を書き出そう

• 12-1　オブジェクトやグループをアセットに登録する
• 12-2　IllustratorでSVGを書き出す設定
• 12-3　書き出したSVGの最適化
• 12-4　IllustratorでPNGやJPGを書き出す設定
• 12-5　マスクしたオブジェクトの書き出し
• Q　練習問題

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

• 13-1　XDから画像を書き出そう
• 13-2　デザインスペックでコーディング情報を共有する
• Q　練習問題

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

• 14-1　DreamweaverでPSDからCSSやテキストを抜き出す
• 14-2　Creative CloudエクストラクトでPSDからCSSやテキストを抜き出す
• 14-3　AIからCSSやテキストを抜き出す
• Q　練習問題

Lesson15　ほかのアプリとの連係について知ろう

• 15-1　Web制作でよく利用されるツールやサービス
• 15-2　SketchとAdobeアプリのデータの互換性
• 15-3　Photoshopで作成したカンプをZeplinで読み込む
• 15-4　XDで作成したカンプをZeplinで読み込む

付録　

• 各アプリの［CCライブラリ］パネルの対応状況
• Adobe XDに関する最新情報のチェック
• Creative Cloudデスクトップアプリケーションの表示