あとで読む
Webデザイン必携。
プロにまなぶ現場の制作ルール84
著者：北村崇 浅野桜
出版社：エムディエヌコーポレーション
発売日：2016/3/23
Webデザインは、サイトの固定的な見映えだけを考えればよいわけではありません。
Webページとして公開される際は、必ずHTML・CSSによるコーディングを経る必要があります。
また、端末によって画面幅も異なりますし、ユーザーの使い勝手も重要です。
さらに、公開後の更新によってはコンテンツの文量も変わるかもしれません。
このようなWebの特性を理解していないと、そもそも実現不可能だったり、ユーザーが使いにくかったり、更新で崩れてしまうようなデザインになりがちです。
本書では、このようなWebデザインに携わるうえで知っておくべきルールを1冊にまとめました。
Webデザインの基本的な考え方から、デザインデータ作成のノウハウ、納品時の指定、Photoshop／Illustratorの効率的な使い方など、Webデザイナーがプロとして“やるべきこと”と“やってはいけないこと”を網羅しています。
Webデザインの初心者はもちろん、これまでグラフィックデザインを中心に手がけていた方にもきっと役立つはずです。
Web特有のマナーを踏まえて、手戻りなく、スムーズに後工程が進められるデザイン制作を目指しましょう。
現場で行われるWebデザイナーとエンジニアとのやり取りをできる限り円滑にしたい、という願いから本書の企画はスタートしました。Webデザイナーを目指すみなさんが、「文句のつけようがないデザインデータだ」と現場の人たちに太鼓判を押してもらえる本物のプロになるために、本書が少しでもお役に立てば幸いです。
引用：書籍「はじめに」より引用
Webデザインの作法をレベル分けされており、目次タイトルに「プロ未満：初級レベルの必須事項」「ひよっこ：中級レベルの推奨ノウハウ」「独り立ち：上級レベルの現場知識」と可愛らしい卵、ひよこ、にわとりのイラストで分かるようになっています。Webデザイナーのレベルに合わせて気になる部分から読むことができます。
本書では、具体的な”あるある”事例を下敷きにして、「よいデザインデータ、わるいデザインデータとはどんなデータか」を学べます。細かいものも含めると84ネタ以上ありますが、一貫して、周りに迷惑をかけない＆もらって嬉しいデータが作れるノウハウを収録しています。（余談ですが、作業中の仮名は「あるある本」でした。）
001 Web制作を取り巻く環境・トレンド・ニーズの変化を知る
002 平面における“Webデザイン”の独自性を理解しよう
003 マークアップの技術とデザインツールの選択肢を知ろう
004 環境の変化と連動して進化し続ける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デザインのアクセシビリティ
031 ページごとに見出しデザインが違う？ Webデザインはパターン化が大切
032 改行したら崩れた！ Webデザインは固定で考えない
033 0.5ピクセルのバグ！ スマートフォンデザインは偶数が基本
034 フリーハンドの拡大縮小によって招くサイズの小数点問題
035 ワンカラムによくあるリピート画像や繰り返すパーツの準備
036 同じに見えるけど左右でグラデーションの範囲が違う
037 無駄なガイドが多すぎる！
038 PhotoshopのラスタライズとIllustratorのアウトライン化
039 Photoshopのスマートオブジェクトは乱用しない
040 レイヤーが結合されてしまうと対処できない
041 レイヤースタイルやアピアランスの複数掛けで数値の把握が困難
042 本文のテキストエリア、字切り（改行）は大丈夫？
043 意図を持たない“謎の余白”がコーティングを複雑にする
044 いつまでも捨てられないレイヤー・レイヤースタイル・フィルター
045 CMSなどで動的に変化するコンテンツに対応できるデザイン
046 パララックスなどの動きのあるデザインの伝え方
047 要素のサイズはデザインと一緒に決定しよう
048 修正点がハッキリしているデータは“間違い探し”が不要になる
049 デザインデータ以外にも、添え書きや注釈で詳細に指示
050 デバイステキストの特性を理解して活用しよう
051 ファビコン・アプリアイコン・OGP画像の準備は万全？
052 共通部分の“どこが最新か”がわかるデータに
053 検索を前提にしてレイヤーを命名する
054 カンプ外の指定ではHTMLエレメント一覧を用意する
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 “スマートオブジェクト”と“アートボード”で手早くバナー作成
075 IllustratorをWebデザイン用の設定にする
076 デザインで使用する色はスウォッチで管理する
077 欧文フォントと和文フォントを合成フォントで組み合わせる
078 オリジナルWebフォント・アイコンフォントを作る
079 Illustratorでも使える文字／段落スタイル機能
080 角丸にはあとから半径がわかる機能を利用する
081 線の指定でひと工夫。1ピクセルの線を描くコツ
082 シンボルを使ってアイコンや素材を一元管理する
083 素材の共有に便利なライブラリ機能
084 IllustratorのCSSプロパティパネルで簡単CSS指定
コーディング用デザインマニュアル例
Photoshop&IllustratorにおけるWeb用機能の対応バージョン
画像アセットのレイヤー名のルール
Webデザインデータチェックシート
浅野桜： 印刷系制作会社、通販系化粧品メーカーのひとりウェブ担当者を経て、2015年株式会社タガス設立。
アプリケーション系の実績としては初心者向けの『PhotoshopでWebデザインをはじめよう！』(Adobe）のweb連載や、中級者向けの共著書『神速Photoshop-グラフィックデザイン編-』（アスキーメディアワークス）など。販促領域では、通販エキスパート検定各級（3-準1法律／準1ECマーケティング）保有、第22回全日本DM大賞銀賞など。
北村崇： TIMING DESIGN 代表（フリーランスデザイナー）。
POP・広告・ディスプレイ等の制作会社を経て2006年にデザイン事務所 TIMINGを設立。 ロゴマークやキャラクターデザイン。印刷物やグッズ制作などのグラフィックデザイン全般から、Webディレクター・デザイナーとしても活動し、WordPress等のCMS構築まで一貫した制作を行う。
株式会社エムディエヌコーポレーションは、雑誌・書籍・イベントを通して、グラフィックデザイン、およびWebデザインのノウハウと可能性を伝える事業を展開しています。デザインとグラフィックの総合情報誌『MdN』をはじめ、多数のデザイン関連書籍を発行しています。 www.mdn.co.jp/
「ムダな情報で頭脳を消耗することなく考える時間を確保する」
ウェブのノウハウだけに限らず、広告やマーケティング全般の知識、時には組織論や時事に至るまで、最先端や未来予測などみなさんにとって本当に必要な情報だけをお届けします。
