スマートWebデザイン 脱・自己流のデザイン＆データ作成術

試し読み

スマートWebデザイン　脱・自己流のデザイン＆データ作成術

浅野桜　著/北村崇　著

定価 2,420円
（本体 2,200円＋税10%） ※電子書籍の価格は各販売ストアにてご確認ください｡

紙の本を買う

紙の書籍を購入

電子版を買う

電子書籍版を購入
- Kindle
- 楽天kobo

発売日	：2024-01-26
仕様	：B5変形判／224P
ISBN	：978-4-295-20509-8

内容紹介
目次
ダウンロードデータ
お問い合せ

Webデザインは、サイトの固定的な見映えだけを考えればよいわけではありません。Webページとして公開される際は、必ずHTML・CSSによるコーディングを経る必要があります。また、端末によって画面幅も異なりますし、ユーザーの使い勝手も大切です。さらに、公開後の更新によってコンテンツの文量も変わるかもしれません。このようなWebの特性を理解していないと、そもそも実現不可能だったり、更新で崩れてしまったりするようなデザインになりがちです。

本書では、このようなWebデザインに携わるうえで知っておくべき知識をルールとして1冊にまとめました。Webデザインの基本的な考え方から、デザインデータ作成のノウハウ、納品時の指定、Photoshop・Illustrator・Figmaの効率的な使い方など、Webデザイナーがプロとして“やるべきこと”と“やってはいけないこと”を網羅しています。Webデザインの初心者はもちろん、“正しいやり方”をしっかり学び直したい方にもきっと役立つはずです。Web特有のマナーを踏まえて、スマートにワークフローを進められるデザイン制作を目指しましょう。

※本書は2016年に刊行された書籍『Webデザイン必携。プロにまなぶ現場の制作ルール84』に大幅に加筆・修正を加えた改訂新版です

■ページ見本

■CHAPTER1　Web制作のトレンド
01　Web制作におけるトレンドをおさえる
02　Web制作のワークフローを理解する
03　マークアップとデザインツールを把握する
04　アクセシビリティに配慮する

■CHAPTER2　Webデザインのトレンドと基礎知識
05　Webサイトとアプリの違いを知る
06　ニーズと技術で読み解くトレンド3選をおさえる
07　印刷物とWebデザインの違いを理解する
08　Web制作に必要なツールを準備する
09　デザインアプリの得意分野と選び方を理解する
10　一般的なWebサイトの特性を知る
11　ランディングページ（LP）の特性を理解する
12　現在はマルチデバイス対応が前提
13　メディアクエリ、2つのピクセル、ビューポートを理解する
14　画像のライセンスに注意する

■CHAPTER3　Webデザインの基本的なルール
15　基本の文章構造にあわせた設計をする
16　ランドスケープモードの挙動に注意する
17　対象の端末・OS・ブラウザを決めておく
18　タップを含めたタッチ対応は必須項目
19　Webサイトの拡大操作に注意
20　Webデザインの単位を理解する
21　Webの色表現(1)　RGBと色の指定の仕組みを理解する
22　Webの色表現(2)　カラープロファイルを適切に選ぶ
23　指で操作するためのサイズを考慮する
24　リキッドレイアウトでは画像サイズが変わる
25　Webサイトをデザインする際の推奨サイズを理解する
26　PCやスマホの解像度対応を把握する
27　レスポンシブウェブデザインを理解する
28　グリッドシステムを理解する
29　Webデザインで明朝体を使用するのはNG？
30　Webサイトのフォントは環境で変化する
31　テキストの太字や斜体指定には書式設定を使わない
32　特定のフォントを使いたいときはWebフォントを利用する
33　簡単なアイコンにはWebアイコンフォントが使える
34　Webで使える最小文字サイズを知っておく
35　タイポグラフィへのこだわりはどこまでできる？
36　CSSで表現できる範囲を踏まえてデザインする
37　SNSアイコンの使用方法を知っておく
38　アクセス解析、title要素、meta要素、alt属性を検討する

■CHAPTER4　LP・バナー・パーツのデザイン
39　PhotoshopをWeb向けに初期設定する
40　IllustratorをWeb向けに初期設定する
41　サイズがあわない「線」の設定に注意
42　オブジェクトがボケる理由を把握する
43　Photoshopのスマートオブジェクトで修正に強いデータを作る
44　バナーやサムネイル制作には「アートボード」を活用する
45　Photoshopで図形を描くなら「シェイプ」を基本に
46　角丸には半径が数値でわかる機能を利用する
47　欧文フォントと和文フォントを合成フォントで組み合わせる
48　スマートオブジェクトとシンボルで素材を使い回す
49　色はスウォッチで管理する
50　素材の共有に便利な「ライブラリ」機能を活用する
51　クラウドドキュメントを活用してチーム作業を円滑に
52　レイヤーパネルをわかりやすく整理する
53　デザイン要素のレイヤーは統合・結合しない
54　レイヤー効果やアピアランスの複数がけは避ける
55　PhotoshopのラスタライズとIllustratorのアウトライン化に注意
56　Photoshopでの画像書き出しを理解する
57　Illustratorでの画像書き出しを理解する

■CHAPTER5　Figmaを使ったデザイン
58　Figmaのファイル構成とインターフェースをおさえる
59　デザインの土台を作る「レイアウトグリッド」や「スタイル」を活用する
60　「コンポーネント」と「バリアント」で要素の修正と変化に対応する
61　「オートレイアウト」で余白や配置を指定する
62　Figmaでの動画・インタラクションの扱い方を理解する
63　デザインを共有して円滑なコミュニケーションを目指す
64　実装に必要なデータの取得方法と画像書き出しをおさえる

■CHAPTER6　コーディングに困るデザインデータ
65　Webデザイナーに必要なコーディング知識を身につける
66　バナーの線がにじんでいる……デザインデータの小数点に注意
67　背景として実装するなら「元素材」が必要
68　不揃いなグラデーションはコードを煩雑にする
69　どこに揃っているかわからない！　無駄なガイドは作らない
70　本文に「字切り」の改行は入れない
71　意味を持たない謎の余白がコーディングを複雑にする
72　必要か不必要かがわからないデータは存在させない
73　CMS＆ノーコードによる更新でデザインがどう変化するかを想定する
74　「動かしたい、でもどう動くかわからない」はNG！

■CHAPTER7　わかりやすい納品データの作り方
75　基準のサイズは最初に決める
76　修正点をはっきりさせて「間違い探し」をさせないデータに
77　デザインデータ以外のコミュニケーションも綿密に
78　font-familyでの指定を前提にデザインする
79　ファビコン、アプリアイコン、OGPなどを用意しておく
80　デザインのスタイルガイドを作る
81　コーディングを指示する場合のポイントをおさえる

INDEX

ダウンロードデータ

スマートWebデザイン　脱・自己流のデザイン＆データ作成術

チェックリストダウンロード

このたびは、「スマートWebデザイン　脱・自己流のデザイン＆データ作成術」をご購入いただきまして、誠にありがとうございます。
以下に本書の解説内容に基づいたチェックシートのデータをご用意しましたのでご利用ください。

・SWD_ChackSheet.zip（約120KB）
　〈内訳〉
　アクセシビリティガイドライン.xlsx（Excelファイル）
　Webデザインデータチェックシート.pdf（PDFファイル）

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

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

【使用上のご注意】
なお、アプリケーションのバージョン、OSの違いなどの使用環境等によっては、解説通りの結果が期待できない場合もありますので、あらかじめご了承ください。

【使用許諾範囲について】