※ 毎朝、5分以内で読める書籍の紹介記事を公開します。
※そのままの文章ではありませんが、試し読みする感覚でお楽しみください。
目次
書籍情報
スマートWebデザイン
脱・自己流のデザイン＆データ作成術
発刊 2024年2月1日
ISBN 978-4-295-20509-8
総ページ数 223p
浅野桜
株式会社タガス 代表取締役。
印刷物やWebサイトに関するデザインや運用のほか、書籍執筆や講師を勤める
北村崇
株式会社FOLIO フリーランスデザイナー
事業会社のマネージャーとしてサービスのデザインに携わる。フリーランスとしてグラフィックデザインやWeb制作、IoT等のUI/UXデザインも請け負っている
エムディエヌコーポレーション
- CHAPTER1 Web制作のトレンド
- Web制作におけるトレンドをおさえる
- Web制作のワークフローを理解する
- マークアップとデザインツールを把握する
- アクセンシビリティに配慮する
- CHAPTER2 Webデザインのトレンドと基礎知識
- Webサイトとアプリの違いを知る
- ニーズと技術で読み解くトレンド3選をおさえる
- 印刷物とWebデザインの違いを理解する
- Web制作に必要なツールを準備する
- デザインアプリの得意分野と選び方を理解する
- 一般的なWebサイトの特性を知る
- ランディングページ（LP）の特性を理解する
- 現在はマルチデバイス対応が前提
- メディアクエリ、2つのピクセル、ビューポートを理解する
- 画像のライセンスに注意する
- CHAPTER3 Webデザインの基本的なルール
- 基本の文章構造にあわせた設計をする
- ランドスケープモードの挙動に注意する
- 対象の端末・OS・ブラウザを決めておく
- タップを含めたタッチ対応は必須項目
- Webサイトの拡大操作に注意
- Webデザインの単位を理解する
- Webの色表現① RGBと色の指定の仕組みを理解する
- Webの色表現② カラープロファイルを適切に選ぶ
- 指で操作するためのサイズを考慮する
- リキッドレイアウトでは画像サイズが変わる
- Webサイトをデザインする際の推奨サイズを理解する
- PCやスマホの解像度対応を把握する
- レスポンシブウェブデザインを理解する
- グリッドシステムを理解する
- Webデザインで明朝体を使用するのNG？
- Webサイトのフォントは環境で変化する
- テキストの太字や車体指定には書式設定を使わない
- 特定のフォントを使いたいときはWebフォントを利用する
- 簡単なアイコンにはWebアイコンフォントが使える
- Webで使える最小文字サイズを知っておく
- タイポグラフィへのこだわりはどこまでできる？
- CSSで表現できる範囲を踏まえてデザインする
- SNSアイコンの使用方法を知っておく
- アクセス解析、title要素、meta要素、alt属性を検討する
- CHAPTER4 LP・バナー・パーツのデザイン
- PhotoshopをWeb向けに初期設定する
- lllustratorをWeb向けに初期設定する
- サイズがあわない「線」の設定に注意
- オブジェクトがボケる理由を把握する
- Photoshopのスマートオブジェクトで修正に強いデータを作る
- バナーやサムネイル制作には「アートボード」を活用する
- Photoshopで図形を書くなら「シェイプ」を基本に
- 角丸には半径が数値でわかる機能を利用する
- 欧文フォントと和文フォントを合成フォントで組み合わせる
- スマートオブジェクトとシンボルで素材を使い回す
- 色はスウォッチで管理する
- 素材の共有に便利な「ライブラリ」機能を活用する
- クラウドドキュメントを活用してチーム作業を円滑に
- レイヤーパネルをわかりやすく整理する
- デザイン要素のレイヤーは統合・結合しない
- レイヤー効果やアピアランスの複数がけは避ける
- PhotoshopのラスタライズとIIIustratorのアウトライン化に注意
- Photoshopでの画像書き出しを理解する
- IIIustratorでの画像書き出しを理解する
- CHAPTER5 Figmaを使ったデザイン
- Figmaのファイル構成とインターフェースをおさえる
- デザインの土台を作る「レイアウトグリッド」や「スタイル」を活用する
- 「コンポーネント」と「バリアント」で要素の修正と変化に対応する
- 「オートレイアウト」で余白や配置を指定する
- Figmaでの動画・インタラクションの使い方を理解する
- デザインを共有して円滑なコミュニケーションを目指す
- 実装に必要なデータの取得方法と画像書き出しをおさえる
- CHAPTER6 コーディングに困るデザインデータ
- Webデザイナーに必要なコーディング知識を身につける
- バナーの線がにじんでいる…デザインデータの小数点に注意
- 背景として実装するなら「元素材」が必要
- 不揃いなグラデーションはコードを煩雑にする
- どこに揃っているかわからない！無駄なガイドが作らない
- 本文に「字切り」の改行は入れない
- 意味を持たない謎の余白がコーディングを複雑にする
- 必要が不必要かがわからないデータは存在させない
- CMS＆ノーコードによる更新でデザインがどう変化するかを想定する
- 「動かしたい、でもどう動くかわからない」はNG！
- CHAPTER7 わかりやすい納品データの作り方
- 基準のサイズは最初に決める
- 修正点をはっきりさせて「間違い探し」をさせないデータに
- デザインデータ以外のコミュニケーションも綿密に
- font-familyでの指定を前提にデザインする
- ファビコン、アプリアイコン、OGPなどを用意しておく
- デザインのスタイルガイドを作る
- コーディングを指示する場合のポイントをおさえる
はじめに
SNSやオンラインスクールで時代にそぐわない技術を解説し続けるものが多くみられ、初学者にとってWebデザインを学ぶのに必要な知識や技術は何なのかを考えさせられることが増えてきました。
Webデザインを取り巻く現状を踏まえ、改めて考えなおしてまとめたものとなっています。
ランディングページ（LP）の特性
広告やメルマガなどからの流入の着地点として作成するランディングページ（LP）は、一般なWebサイトとは目的が異なるのです。デザインの性質も違います。
LPは、資料請求や問い合わせ、商品の購入、イベントの来場などを最終的なゴールや指標にします。パッと見て視認してもらえることを重要視しているのです。
派手な印象付けをしている、チラシやポスターなどと近い性質を持ちます。
メッセージ完結に伝えるために、ナビゲーションがないページを多く存在します。その代わり、お申込みボタンがわかりやすいところに複数個所配置されているのが特徴です。
また、サイトの寿命が短い場合が多く、制作リソースが限られていることも珍しくありません。予算とスケジュールを考慮して計画作業することが問われます。
申し込みボタンの下に、テキストや画像を追加する更新や、内容を差し替えて色やボタンのアクションを変えた修正作業が多いでしょう。
PhotoshopをWeb向けに初期設定する
Photoshopは守備範囲が非常に広いアプリです。Webを中心としたデジタルメディアのデザインはもちろん、写真の補正や加工が得意なアプリとなっています。万能選手のPhotoshopだからこそ、最初に「Web用の設定」が必要です。
Photoshopではmmやcmなどの単位も扱えます。しかし、Webデザインの基本単位はピクセル（px）なので、まずはここを揃えましょう。
[イメージ]メニューから[画像解像度]を開いて、単位がピクセルになっているかどうかを確認できます。設定し直してから素材のサイズを修正してください。
また、WebデザインをPhotoshopde制作する場合、コーディングを伴うWebサイトや、ある程度ルールが決まっているバナー・サムネイルを製作する場合が多いでしょう。その場合に「グリッド」を使うと、素早く正確にオブジェクトを配置できます。
[表示]メニューの[グリッド]を選択すると、細い格子状のグリッドラインが表示できます。ガイドを多用しなくてもキリのよい数値でのWebデザインが作成できるでしょう。
コミュニケーションも綿密に
コーディング担当者がひとめで理解できるデザインが理想です。しかし、デザインデータだけでは伝わらないのが現実でしょう。デザインといっしょに、テキストなどの説明があると親切です。
共通の情報や処理（テキストの説明①）
色やフォントなど、ページのバリエーションが多い場合はスタイルガイドを用意しましょう。
イレギュラーの処理（テキストの説明②）
見出しのテキストが2行以上になったらどうなるのか、データ以上のウィンドウサイズになったらどうなるのか、レスポンシブウェブデザインでスマホを横にしたときにはどうなるのかなど、ファイルでは伝えにくいことを記述しましょう。
動きをともなう処理（テキストの説明③）
スライドなどのアクションが入る場合、どのように表示されるのか、どのくらいで切り替わるのかなどの情報はデザインデータからは得にくい情報です。
自分がマークアップを依頼される立場を想像し、どんな補足情報があると助かるかを考えましょう。
購入リンク
紙
電子
