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

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

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

Webデザイナーとして“やるべきこと”と“やってはいけないこと”をまとめたWebデザインの新しいルールブック。

浅野 桜 著/北村 崇 著
A5判 / 224P
ISBN978-4-8443-6574-7 / 価格(本体2,200円+税)※電子版の価格は販売ストアにて
2016年03月23日発売

Webデザインは、サイトの固定的な見映えだけを考えればよいわけではありません。Webページとして公開される際は、必ずHTML・CSSによるコーディングを経る必要があります。また、端末によって画面幅も異なりますし、ユーザーの使い勝手も重要です。さらに、公開後の更新によってはコンテンツの文量も変わるかもしれません。このようなWebの特性を理解していないと、そもそも実現不可能だったり、ユーザーが使いにくかったり、更新で崩れてしまうようなデザインになりがちです。 本書では、このようなWebデザインに携わるうえで知っておくべきルールを1冊にまとめました。Webデザインの基本的な考え方から、デザインデータ作成のノウハウ、納品時の指定、Photoshop/Illustratorの効率的な使い方など、Webデザイナーがプロとして“やるべきこと”と“やってはいけないこと”を網羅しています。Webデザインの初心者はもちろん、これまでグラフィックデザインを中心に手がけていた方にもきっと役立つはずです。Web特有のマナーを踏まえて、手戻りなく、スムーズに後工程が進められるデザイン制作を目指しましょう。

→サンプルデータはこちら



twitter facebook このエントリーをはてなブックマークに追加 RSS

ページイメージ

クリックすると折りたためます
■ページ見本










目次

クリックすると開きます

【目次】
■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


カスタマーレビュー(出典:amazon.co.jp)

カスタマーレビュー(出典:amazon.co.jp)