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

［表紙］世界一わかりやすい Illustrato

紙版発売
電子版発売

B5判／272ページ

定価2,728円（本体2,480円＋税10%）

ISBN 978-4-297-10032-2

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

Webデザインの現場では必須のツールといえるIllustratorとPhotoshopは，アイコンやSVGの制作，写真の補正や加工など，高度なデザイン作業においては欠かせません。一方，プロトタイピングの普及でWebデザインのワークフローが変化し，制作工程ではCCライブラリを使ったアセット共有のほか，プロトタイプツール（Adobe XD，Sketchなど）や各種デバイスでの表示確認ツールと連携し，効率よく制作を進めるスキルが重要になっています。モダンなWebデザイン制作現場の知見を取り入れ，XDを含めた複数ツールの長所を組み合わせて使い分けていく，いままさにWebデザインをしている人のためのAiとPsとXDの活用術のテキストです。

こんな方におすすめ

  • WebデザインでのIllustratorとPhotoshopとXDの活用法を知りたい方
  • Adobe CCを中心に制作をしているWebデザイナー
  • XD、Sketch、Zeplinなどのツールと連携して使いたい方

著者の一言

本書は，Adobe IllustratorとPhotoshopの基礎操作をご存じの方を対象に，Webデザイン業務で実際に使えるテクニックの初歩を学ぶための学習書です。

「Illustratorで基本的な図形の作成はできる」「Photoshopで写真の色を変えたり汚れを消したりする操作はできるけれど，Webデザインを実際にどう進めていくのかよくわからない」といったレベルのデザイナー志望者さん，仕事を始めたばかりのジュニアレベルのデザイナーさんの役に立つよう，現役デザイナーとプロのインストラクター4人が集まり，現場で使われているテクニックを幅広く学べるように構成しました。

また，この書籍では，IllustratorとPhotoshopだけではなく，2017年に正式版が発表されたUIデザイン／プロトタイピングツールのAdobe XDの使い方も解説しています。XDは非常に軽い操作感とシンプルに絞り込まれた描画ツール類が特徴的なアプリケーションで，IllustratorやPhotoshopで制作したアイコンや写真を取り込んでレイアウトしたり，画面間の遷移を表したプロトタイプをつくったりすることができます。

繊細なベクトルアートを制作できるIllustrator，ビットマップデータの編集とリッチなグラフィック制作ならお任せのPhotoshop，実際に動くプロトタイプを軽い操作で作成できるXD。それぞれの特長を活かせるようになると，デザイナーとしての幅が格段に広がります。

Webサイトの閲覧環境がますます多様化するなか，制作手法／デザインツールも百花繚乱の様相を呈しています。「私はこの手法／ツールしか使えない」と固定してしまうことなく，案件に合わせて最適なものを選べるようになったとき，デザイナーとして成長している自分を実感できることでしょう。

その成長の一歩をお手伝いできる存在になれるよう，本書の中にはさまざまなパターンの作例をご用意しておきました。必要なところから拾い読みしてもよし，最初から通読して練習してもよし，ご自分のニーズに合わせてご活用いただければ幸いです。

（「はじめに」より）

本書のサンプル

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

サンプル画像3

目次

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デスクトップアプリケーションの表示

著者プロフィール

黒野明子（くろのあきこ）

ファッションカメラマン事務所，広告系デザイン事務所，Web制作会社勤務を経て，2003年よりフリー。Webサイトの企画・UI設計・デザイン・コーディングおよび講師・執筆などが主な業務。2017年11月よりAdobe Community Evangelistとして活動している。東京・原宿のロクナナワークショップにて「黒野明子のAdobe XD初心者入門講座」「黒野明子のAdobe XD＋Photoshop＋Illustrator連携講座」を開講中。
Twitter：@crema

庄崎大祐（しょうざきだいすけ）

下北沢で，うさぎやaiboと一緒に暮らしているWebデザイナー。 渋谷の「Stocker.jp / Space」にて「スマートフォン時代のWebデザインスクール」や「WordPressカスタマイズ講座」の講師をしたり，ブログ等でWeb制作者向けに情報発信している。
Blog：https://stocker.jp/diary/
Twitter：@Stocker_jp

角田綾佳（すみだあやか）

フリーランス＆株式会社キテレツ　デザイナー・イラストレーター。Web制作会社勤務を経て，2006年よりフリーランスとしてWebデザイン・イラスト制作を行う。イラスト制作のほとんどをIllustratorで行なっているためベジェが大好き。
Twitter：@spicagraph

森和恵（もりかずえ）

“むずかしいことでも，わかりやすく伝える”がモットーのウェブ系インストラクター。YouTubeのライブ配信，eラーニングの教材開発も営む。講師歴は19年で，ウェブの知識を一日完結で学べて気軽に参加しやすいこと，リピーターが多いことが担当講座の特長。現在は『Adobe XD・Bootstrap・WordPress』の学びに注力している。
YouTube：https://youtube.com/r360studio
Twitter：@r360studio