MdNCORPORATION

Webデザイン必携。 プロにまなぶ現場の制作ルール84

Webデザイン必携。 プロにまなぶ現場の制作ルール84

浅野 桜 著/北村 崇 著
定価 2,420円
(本体 2,200円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2016-03-23
仕様 A5判/224P
ISBN 978-4-8443-6574-7
Webデザインは、サイトの固定的な見映えだけを考えればよいわけではありません。Webページとして公開される際は、必ずHTML・CSSによるコーディングを経る必要があります。また、端末によって画面幅も異なりますし、ユーザーの使い勝手も重要です。さらに、公開後の更新によってはコンテンツの文量も変わるかもしれません。このようなWebの特性を理解していないと、そもそも実現不可能だったり、ユーザーが使いにくかったり、更新で崩れてしまうようなデザインになりがちです。 本書では、このようなWebデザインに携わるうえで知っておくべきルールを1冊にまとめました。Webデザインの基本的な考え方から、デザインデータ作成のノウハウ、納品時の指定、Photoshop/Illustratorの効率的な使い方など、Webデザイナーがプロとして“やるべきこと”と“やってはいけないこと”を網羅しています。Webデザインの初心者はもちろん、これまでグラフィックデザインを中心に手がけていた方にもきっと役立つはずです。Web特有のマナーを踏まえて、手戻りなく、スムーズに後工程が進められるデザイン制作を目指しましょう。


■ページ見本










目次

■INTRODUCTION Webサイトをデザインするということ
001 Web制作を取り巻く環境・トレンド・ニーズの変化を知る
002 平面における“Webデザイン”の独自性を理解しよう
003 マークアップの技術とデザインツールの選択肢を知ろう
004 環境の変化と連動して進化し続けるWeb制作のワークフローを意識しよう

■CHAPTER 1 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デザインのアクセシビリティ

■CHAPTER 2 コーディングに困るデザインデータとは
031 ページごとに見出しデザインが違う? Webデザインはパターン化が大切
032 改行したら崩れた! Webデザインは固定で考えない
033 0.5ピクセルのバグ! スマートフォンデザインは偶数が基本
034 フリーハンドの拡大縮小によって招くサイズの小数点問題
035 ワンカラムによくあるリピート画像や繰り返すパーツの準備
036 同じに見えるけど左右でグラデーションの範囲が違う
037 無駄なガイドが多すぎる!
038 PhotoshopのラスタライズとIllustratorのアウトライン化
039 Photoshopのスマートオブジェクトは乱用しない
040 レイヤーが結合されてしまうと対処できない
041 レイヤースタイルやアピアランスの複数掛けで数値の把握が困難
042 本文のテキストエリア、字切り(改行)は大丈夫?
043 意図を持たない“謎の余白”がコーティングを複雑にする
044 いつまでも捨てられないレイヤー・レイヤースタイル・フィルター
045 CMSなどで動的に変化するコンテンツに対応できるデザイン
046 パララックスなどの動きのあるデザインの伝え方

■CHAPTER 3 わかりやすい納品データの作り方
047 要素のサイズはデザインと一緒に決定しよう
048 修正点がハッキリしているデータは“間違い探し”が不要になる
049 デザインデータ以外にも、添え書きや注釈で詳細に指示
050 デバイステキストの特性を理解して活用しよう
051 ファビコン・アプリアイコン・OGP画像の準備は万全?
052 共通部分の“どこが最新か”がわかるデータに
053 検索を前提にしてレイヤーを命名する
054 カンプ外の指定ではHTMLエレメント一覧を用意する

■CHAPTER 4 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 “スマートオブジェクト”と“アートボード”で手早くバナー作成

■CHAPTER 5 Illustratorの上手な使い方
075 IllustratorをWebデザイン用の設定にする
076 デザインで使用する色はスウォッチで管理する
077 欧文フォントと和文フォントを合成フォントで組み合わせる
078 オリジナルWebフォント・アイコンフォントを作る
079 Illustratorでも使える文字/段落スタイル機能
080 角丸にはあとから半径がわかる機能を利用する
081 線の指定でひと工夫。1ピクセルの線を描くコツ
082 シンボルを使ってアイコンや素材を一元管理する
083 素材の共有に便利なライブラリ機能
084 IllustratorのCSSプロパティパネルで簡単CSS指定

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

INDEX

ダウンロードデータ

Webデザイン必携。プロにまなぶ現場の制作ルール84
コーディングマニュアル等のダウンロードについて
サンプルデータダウンロード


このたびは、「Webデザイン必携。プロにまなぶ現場の制作ルール84」をご購入いただきまして、誠にありがとうございます。以下に本書に掲載しているコーディングマニュアル等のデータをPDF形式でご提供しております。


webhikkei_appendix.zip(約5.5MB)



■ダウンロードにあたってのご注意■


ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。

ダウンロードファイルには「はじめにお読みください.html」が同梱されていますので、ご使用の前に必ずお読みください。


■ダウンロードファイル解凍時のご注意■


Windowsをご利用の場合は、OS標準の機能ではダウンロードファイルをダブルクリックしても正しく解凍できない場合があります。データの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される


※弊社Webサイトからダウンロードできるデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。



お詫びと訂正

『Webデザイン必携。プロにまなぶ現場の制作ルール84』
お詫びと訂正のお知らせ


このたびは、『Webデザイン必携。 プロにまなぶ現場の制作ルール84』をお買い求めいただきまして誠にありがとうございます。

本書の初版第1刷(2016年4月1日発行)におきまして、下記のページに誤りがございました。


●70~71ページ

「ピンチイン」とすべき箇所を「ピンチアウト」、「ピンチアウト」とすべき箇所を「ピンチイン」と逆の説明をしておりました。

正しい状態に修正したページのPDFを下記にご用意させていただきましたので、ご利用いただけますようお願い申し上げます。

〈見開きページPDF〉
P070-071.pdf

〈単ページPDF〉
P070-071_single.pdf


●216ページ

MenuのOPEN時の数値を「全体の80%または500px程度」と記載しておりますが、「全体の80%または300px程度」が正しい記述となります。

以上になります。

ご迷惑をおかけいたしまして誠に申し訳ございません。訂正してお詫び申し上げます。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊