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

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

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

本のキャプチャ

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

書籍の表紙

Illustrator & Photoshop & XD Webデザインの教科書
[Amazonでみる]
[楽天でみる]

著:
黒野 明子、庄崎 大祐、角田 綾佳、森 和恵
出版社:
技術評論社
発売日:
2018/10/5

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の使い方やチュートリアルは数多くありますが、ワークフローをベースに解説されているのは非常に数が少ないです。しかも現時点で最新版対応です!

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

書籍の表紙

Illustrator & Photoshop & XD Webデザインの教科書
[Amazonでみる]
[楽天でみる]

著:
黒野 明子、庄崎 大祐、角田 綾佳、森 和恵
出版社:
技術評論社
発売日:
2018/10/5

献本の御礼

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

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

sponsors

top of page

©2018 coliss