＼＼40,000部突破したベストセラーが4年半ぶりの大改訂！／／

Webデザインに関わる全ての人へ

想像力を高める最新の良質サイト429選！

優れた実例を見ることは新しい作品を生み出す力になる！！

・これからはじめる人に！

・打ち合わせのお供に！

・困った時のアイデア出しに！

オススメ！

見るだけでWebデザインのトレンドが自然とわかる！

ーーーーーーーーーー

デザインは見て学ぶ

ーーーーーーーーーー

本書は429点の厳選した良質なWebサイトを集めた見本集です。第2版ではほぼすべてのデザインを見直し全面的な改訂を行っています。今後も長く使える最新のデザインを取り揃えました。

レイアウト、配色、フォント、素材、動き、プログラムなど、ページを構成しているデザインパーツまで分解しているので、Webサイトを見るだけではわからなかった「デザインの魅力の理由」がわかり、サイトの制作にもすぐに活用できます。

「アイデアが見つからない」「イメージはあるけど、何が必要で、どう作ればいいかわからない」といった時に必見の価値あり。パラパラめくって好きなページを見つけ出し、デザイン制作に役立ててください。

ーーーーーーーーーー

本書の対象読者

ーーーーーーーーーー

・デザインのアイデアが見つからない方

・デザインの制作に自信が持てない方

・クライアントと打ち合わせする際に方向性となる見本が欲しい方

・ Webデザインの最新トレンドを知りたい方

PART 0 Webデザインの基礎知識

PART 1 印象から考えるデザイン

PART 2 配色から考えるデザイン

PART 3 業種・ジャンル別から考えるデザイン

PART 4 レイアウトや構図から考えるデザイン

PART 5 素材・フォント・プログラムを使ったデザイン

PART 6 トレンドのデザイン

PART 7 パーツ別デザイン

PART 0 Webデザインの基礎知識

PART 1 印象から考えるデザイン

PART 2 配色から考えるデザイン

PART 3 業種・ジャンル別から考えるデザイン

PART 4 レイアウトや構図から考えるデザイン

PART 5 素材・フォント・プログラムを使ったデザイン

PART 6 トレンドのデザイン

PART 7 パーツ別デザイン

11刷突破のベストセラーが最新情報にアップデート！

これからはじめる人、一気に学びたい人へ

一生使えるWebデザインのテクニック集！

絶対に外せない！ レイアウト4つの原則とレスポンシブWebデザイン

今日から使える！ 配色の基本と、実例デザインの配色見本集

ユーザーの心を動かす！ 写真と図版の使い方、タイポグラフィの選び方

フレックスボックス、CSSグリッド、インタラクション、マーケティングの知識まで

この一冊でWebデザイナーに必須の基礎知識が網羅できる！

＜本書の対象読者＞

●これからWebデザインを学びたい初心者の方

●Webサイト制作に自信が持てない方

●1冊でWebデザイナーの基礎知識を網羅して学びたい方

CONTENTS

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

Chapter 01 Webデザインの基本

Chapter 02 レイアウト

Chapter 03 配色

Chapter 04 写真と図版

Chapter 05 タイポグラフィ

Chapter 06 HTML5とCSS3

Chapter 07 インタラクション

Chapter 08 運用とマーケティング

■Adobe XDとは

Adobe XD（以下、XD）は「DESIGN AT THE SPEED OF THOUGHT（思考の速度でデザインする）」を開発理念に、2016年にベータ版、そして2017年に製品版がリリースされたデザインツールです。

シンプルなUIと軽快な操作性が特徴であり、WebやアプリUIのデザインに特化した機能とチームでの滑なコミュニケーションを可能にする共有機能を兼ね揃えており、大規模で長期的なプロジェクトにおいてもデザインの一貫性の保持を実現するための改良が重ねられています。

実際の制作現場では、Webサイトやアプリケーションのデザインはもちろん、ワイヤーフレーム制作や企画段階の資料など、幅広い用途で使用されており、いわば制作プロセスをつなぐツールとしても多くのユーザーに支持されています。

■本書の特徴

□特徴1：はじめてのXDでもこの1冊で使いこなせるようになります！

XDにはじめて触れる方だけでなく、Adobeツールにはじめて触れる方でも最後まで学習できるように、やさしく丁寧に解説してあります。

□特徴2：豊富な作例で手軽にUIパーツ作成方法が学べる！

すぐに役立つXDの使い方を、豊富な作例で手軽に学べます。実際にXDに触れて、軽快にデザインできることを体験できます。

□特徴3：すぐに使えるワイヤーフレーム！

業種別、業態別のWebサイト制作を、現場のプロが丁寧に解説しました。解説に使用したワイヤーフレームもダウンロード特典として配布するので、すぐに実務に役立てることができます。

■目次

第1章　Adobe XDの準備

第2章　Adobeツール初心者のための基本操作

第3章　XD初心者のための作例体験

第4章　デザインとコミュニケーション

第5章　業種別に作るWebサイト

第6章　思考の整理シーンでの活用方法

第7章　将来を見据えた機能

第1章　Adobe XDの準備

第2章　Adobeツール初心者のための基本操作

第3章　XD初心者のための作例体験

第4章　デザインとコミュニケーション

第5章　業種別に作るWebサイト

第6章　思考の整理シーンでの活用方法

第7章　将来を見据えた機能

Webデザインの作業フェーズ・業務シーンごとに、

「Adobe Photoshop」と「Adobe Illustrator」の

便利な使いこなし方やノウハウを解説する本です。

Webにまつわるビジュアルをより魅力的なものにするために、

あるいはWeb制作を効率的に行うために必要となるテクニックを

目的に沿って作例を用いながら解説します。

Webデザイン初心者、Webデザインに活動範囲を

広げたいと考えているグラフィックデザイナーはもちろん、

簡単な素材の制作や写真加工を行う必要があるプログラマーや

コーダーにとっても有益な内容です。

Adobe Creative Cloud 2020/2019対応。

※教材データはインターネットからダウンロードする必要があります。

【CONTENTS】

●CHAPTER 1 Webデザイン+Photoshop+Illustratorの基礎知識

印刷物のデザインとは違ったセオリーやルールなど、

Webデザインの基礎知識について解説!

●CHAPTER 2 ワイヤーフレーム制作で使えるテクニック

Webページに要素をどう配置するのかを表した大枠(ラフレイアウト)である

「ワイヤーフレーム」制作の際に役立つテクニックについて解説!

●CHAPTER 3 画像処理に使えるテクニック

印刷物のデザイン時にも活用できる基本的な画像の補正や加工から、

Webの機能を盛り込んだ表現まで幅広く解説!

●CHAPTER 4 パーツ制作で使えるテクニック

アイコンやロゴ、囲み罫、背景パターン、バナーといった

Webページを構成するパーツを効率よく制作する方法を解説!

●CHAPTER 5 カンプ制作で使えるテクニック

補正や加工を施した画像や、作成したパーツを組み合わせて

デザインカンプとして仕上げる際に必要なテクニックを解説!

●CHAPTER 6 コーディン向けに使えるテクニック

編集・作成した画像、パーツ、デザインカンプなどをWebページに適した形式や、

コーディングに適した状態で書き出す際のテクニックについて解説!

いま制作現場でＷｅｂデザイナーに求められる広範な知識とスキルを網羅した、これからプロになる人のために最適な入門書の決定版。

本書は、Webサイトのデザインを改善するために役立つ実際の改善事例やTipsなど、絶えずWebサイトを改善し続けるためのヒントを詰め込みました。

多くのウェブサイトを改善してきた著者たちが、実際のデザイン事例 Before&After、汎用的に使える改善Tipsやコンバージョンに貢献しやすい施策を解説しています。サイトの種類が異なっても再現できるようにポイントを解説するだけでなく、次の一手のアイデア集として長く活用していだけるように、汎用的な内容を数多く紹介しています。

最後の章ではプロが現場で行う改善のプロセスを解説し、次の一手を打ち続けていくために必要な考え方についてまとめてあります。

目次：

Chapter1　デザイン事例集

Chapter2　改善Tips

Chapter3　コンバージョンを上げるための改善を実行しよう

Chapter4　コンバージョンを上げるためのサイト改善のプロセス

はじめに

目次

本書の使い方

著者紹介

用語説明

Chapter1 デザイン事例集

1-1 掲載事例一覧

1-2 バニラエア

1-3 三井住友カード

1-4 UTグループ

1-5 マネックス証券

1-6 ロクシタンジャポン

1-7 トーセキ

1-8 車検の速太郎 足立店

1-9 ハルメクベンチャーズ

1-10 へノブファクトリー

1-11 シバ製靴

1-12 レザーハウス

1-13 御茶ノ水ソラシティカンファレンス

Chapter2 改善Tips

2-1 改善Tips一覧

2-2 改善Tips

Chapter3 コンバージョンを上げるための改善を実行しよう

3-1 初級編 〜まずは気になる箇所を変えて評価してみよう〜

3-2 中級編 〜ボトルネックになっているところから改善してみよう〜

3-3 上級編 〜確実に成果につなげるためのWebテストのススメ〜

3-4 チェックリスト 〜改善前に押さえておきたいWebサイト制作の基本〜

Chapter4 コンバージョンを上げるためのサイト改善のプロセス

4-1 コンバージョンを上げるために必要なこと

索引

Webサイトのデザイン・レイアウトのサンプルとして利用できる「見本帳」の最新版。レイアウト、タイポグラフィ、配色、グラフィック・写真、最新デザインの5章構成で、多岐に渡る実例サイト約290点を紹介しています。Webサイトの流行や最新スタイル、「Webのいま」を一望できる内容になっています。

書くのが面倒…。ゼロから書けない…。こんな悩みに応える！そのまま使えるＷｅｂデザインのソースコード集。

WordPressによるWebサイト制作のための、究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで、余すところなく集めました。テーマカスタマイズ／テーマ作成／投稿ページ・固定ページ／一覧ページ／ヘッダー・フッター／カスタム投稿タイプ／カスタムフィールドなど、目的別にレシピを整理。「あのしくみはどう作るんだろう？」が、スグにわかります。Webサイト運営者からWebプログラマーまで、WordPressを扱うすべての方にお届けします。WordPress 5.xに対応。