PhotoshopのスマートオブジェクトやアートボードをWeb制作でどうやって活用しているのか、制作現場のテクニックが分かるオススメの本

ここ数年で、Webデザインは大きく変わりました。
ビットマップからベクターが主流になり、ページはマルチデバイス対応、パララックスなどのインタラクション アニメーション、最小要素からデザインする「Atomic Design」など、成果物やワークフローも進化を続けています。

デザイナーとしてWeb制作で役立つ必須知識、基本的な考え方、効率的なデータの作り方など、制作の現場ですぐに役立つ知識やテクニックを身につけることができる一冊を紹介します。

本書は制作現場のナマの知識が学べ、Webデザインの初心者だけでなく、現役でバリバリ活躍している人にもオススメの本です。

Kindle版は、お値段が少しお得です。

• Webデザイン必携。（Kindle版）

本書はオールカラーで、84個のWebデザイナーが身につけておきたい知識やテクニックが紹介されています。版元様から誌面をいくつかお借りしました。

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。
すぐに確認、実践してみたいことばかりです。

Webデザインといえばやはり、Photoshopでしょう。そんなPhotoshopも基本設定がおろそかだと自身の作業パフォーマンスだけでなく、チーム全体にも影響を与えてしまいます。

PhotoshopのRGBには、Adobe RGBとsRGBの2種類があります。
Adobe RGBの方がより豊かな色彩表現が可能ですが、対応しているモニターが必要なため、WebではsRGBが主流です。

レイヤーも数が増えるとしっかりした管理が大切です。空のレイヤーや未使用のレイヤーは削除し、レイヤーの構造や管理方法もいろいろなメソッドがあります。

最近のデザインはベクターデータが主流で、Photoshop上で扱うデータもベクターが増えました。シェイプは単に形を描くだけでなく、写真のマスクなどにも相性がばつぐんです。

同じ数値のシェイプでもサイズが微妙に合わない！ そんな時は「線」の設定を確認してみてください。

シェイプなのに角がぼけてる！ そんな時はサイズが小数点になってませんか？ 「エッジの整列」にチェックをしておけば、ぼけを自動で防ぐことができます。

スマートオブジェクトもPhotoshopのよく使う機能の一つですね。

ライブラリと連携させて共通パーツを管理し、全ページにそのファイルをリンクで配置します。共通箇所に修正が入っても、共通パーツを修正するだけで、全ページに適用されます。
アートボードツールと組み合わせると、量産ページの修正も非常に簡単になります。

CCの目玉機能の一つ「アートボード」は、レスポンシブ用のデザインだけでなく、さまざまなシーンで活躍します。

サイズが異なるバナーのデザインもアートボードを使うと効率的に作成できます。

本書はPhotoshopだけではありません。
ベクターが得意なIllustratorをWebデザインで使用している人も多いでしょう。

Illustratorはベクターだけでなく、フォントがより強力で、合成フォントで独自のフォントセットを作成できたりもします。ほかにもシンボルやライブシェイプなどWebデザインに役立つ機能がたくさんです。

Webデザイン必携。の目次

1. Webサイトをデザインするということ

   001　Web制作を取り巻く環境・トレンド・ニーズの変化を知る

   002　平面における「Webデザイン」の独自性を理解しよう

   003　マークアップの技術とデザインツールの選択肢を知ろう

   004　環境の変化と連動して進化し続けるWeb制作のワークフローを意識しよう

2. Webデザインの基本的なルール

   005　ボタンのサイズが小さすぎると使えない

   006　これからのPCサイトはタップ対応を視野に入れる

   007　Webデザインの単位は印刷物とは違う

   008　Webの色表現のしくみをきちんと踏まえる

   009　リキッド画像は縮んだりズレたりして表示される

   010　Webサイトをデザインするときの推奨サイズは？

   011　PCやスマートフォンの解像度対応

   012　FacebookやTwitterと連係させるには

   013　グリッドシステムを利用して計画的なレイアウトを行う

   014　明朝体でWebデザインはダメ？

   015　Webで表示されるフォントは環境で変化する

   016　テキストの太字や斜体指定には書式設定を使わない

   017　Webフォントってなに？

   018　10ピクセル以下の文字サイズは指定に注意が必要

   019　タイポグラフィへのこだわりはどこまでできる？

   020　ロイヤリティーフリーの画像は本当に「フリー」？

   021　CSSで表現できる範囲を踏まえてデザインしよう

   022　ロールオーバーやデバイステキストはレイヤーで管理しよう

   023　レスポンシブWebデザインの基本を知ろう

   024　基本の文章構造にあわせた設計をする

   025　簡単なアイコンにはWebアイコンフォントが使える

   026　スマートフォンの向きで起こる問題に注意する

   027　対象の端末・OS・ブラウザを決めておく

   028　スマートフォンのピンチ操作に注意

   029　title要素・meta要素・alt属性に設定する情報も検討しよう

   030　そのデザインは見えないかも？　Webデザインのアクセシビリティ

3. コーディングに困るデザインデータとは

   031　ページごとに見出しデザインが違う？　Webデザインはパターン化が大切

   032　改行したら崩れた！　Webデザインは固定で考えない

   033　0.5ピクセルのバグ！　スマートフォンデザインは偶数が基本

   034　フリーハンドの拡大縮小によって招くサイズの小数点問題

   035　ワンカラムによくあるリピート画像や繰り返すパーツの準備

   036　同じに見えるけど左右でグラデーションの範囲が違う

   037　無駄なガイドが多すぎる！

   038　PhotoshopのラスタライズとIllustratorのアウトライン化

   039　Photoshopのスマートオブジェクトは乱用しない

   040　レイヤーが結合されてしまうと対処できない

   041　レイヤースタイルやアピアランスの複数掛けで数値の把握が困難

   042　本文のテキストエリア、字切り（改行）は大丈夫？

   043　意図を持たない「謎の余白」がコーティングを複雑にする

   044　いつまでも捨てられないレイヤー・レイヤースタイル・フィルター

   045　CMSなどで動的に変化するコンテンツに対応できるデザイン

   046　パララックスなどの動きのあるデザインの伝え方

4. わかりやすい納品データの作り方

   047　要素のサイズはデザインと一緒に決定しよう

   048　修正点がハッキリしているデータは「間違い探し」が不要になる

   049　デザインデータ以外にも、添え書きや注釈で詳細に指示

   050　デバイステキストの特性を理解して活用しよう

   051　ファビコン・アプリアイコン・OGP画像の準備は万全？

   052　共通部分の「どこが最新か」がわかるデータに

   053　検索を前提にしてレイヤーを命名する

   054　カンプ外の指定ではHTMLエレメント一覧を用意する

5. Photoshopの上手な使い方

   055　デザインする前にPhotoshopの単位を揃えよう

   056　カラーモードとカラープロファイルに注意する

   057　色をきちんと管理してシステマティックなコードを実現

   058　レイヤーパネルの「汚い洋服ダンス」化から卒業しよう

   059　レイヤーの構造は後作業の効率を考えて整理する

   060　特定の状態用のデータは「状態ごと」に非表示でまとめる

   061　Webデザインの基本はシェイプ

   062　シェイプで角丸を使う場合はライブシェイプで

   063　サイズが微妙にあわない？　シェイプの「線」の設定に注意する

   064　シェイプの「エッジの整列」を忘れるとオブジェクトがボケる

   065　手作業で設定するより「文字／段落スタイル」を活用

   066　便利なレイヤースタイルだが色の使い方には要注意

   067　スマートオブジェクトで手戻りと修正に強くなろう

   068　色々使えるスマートオブジェクト

   069　様々な「画像書き出し」をケースバイケースで駆使しよう

   070　「画像アセット（生成）」による書き出し

   071　「スライス」&「Web用に保存」による書き出し

   072　コーディングの助けになるPhotoshopの「CSSのコピー」

   073　PhotoshopCCの新機能「アートボード」を知ろう

   074　「スマートオブジェクト」と「アートボード」で手早くバナー作成

6. Illustratorの上手な使い方

   075　IllustratorをWebデザイン用の設定にする

   076　デザインで使用する色はスウォッチで管理する

   077　欧文フォントと和文フォントを合成フォントで組み合わせる

   078　オリジナルWebフォント・アイコンフォントを作る

   079　Illustratorでも使える文字／段落スタイル機能

   080　角丸にはあとから半径がわかる機能を利用する

   081　線の指定でひと工夫。1ピクセルの線を描くコツ

   082　シンボルを使ってアイコンや素材を一元管理する

   083　素材の共有に便利なライブラリ機能

   084　IllustratorのCSSプロパティパネルで簡単CSS指定

付録

• コーディング用デザインマニュアル例
• Photoshop&IllustratorにおけるWeb用機能の対応バージョン
• 画像アセットのレイヤー名のルール
• Webデザインデータチェックシート

付録は本書に掲載されていますが、データとしてダウンロードすることもできます。

コーディング用デザインマニュアルの一部

Webデザインの考え方、PhotoshopやIllustratorの効率的な使い方、Webデザイナーがプロとして身につけておきたい知識やテクニックが満載で、スキルアップしたいと思ってる人にはぴったりの一冊です。

献本の御礼

最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。

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

• お問い合わせ｜コリス