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

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

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

本の表紙

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

本の表紙

Webデザイン必携。
プロにまなぶ現場の制作ルール84
[Amazonでみる]
[楽天でみる]

著:
北村 崇、浅野 桜
出版社:
MdNコーポレーション
発売日:
2016/3/23

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デザイナーがプロとして身につけておきたい知識やテクニックが満載で、スキルアップしたいと思ってる人にはぴったりの一冊です。

本の表紙

Webデザイン必携。
プロにまなぶ現場の制作ルール84
[Amazonでみる]
[楽天でみる]

著:
北村 崇、浅野 桜
出版社:
MdNコーポレーション
発売日:
2016/3/23

献本の御礼

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

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

sponsors

top of page

©2024 coliss