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 運用とマーケティング

Webデザイナーとしてやっていくのに必要なすべてを網羅！

Webデザイナーを目指すなら、HTML／CSSの知識とスキルは不可欠です。でも、それだけではありません！ デザインするだけで仕事になるのは、Webデザイナーの中でもほんのひと握り。「Webサイトを作りたいんだけど……」とクライアントに言われて引き受けた案件を無事に納品するには、Webページをデザインする以外にもたくさんの仕事があります。

それを、仕事をしながらひとつずつ調べていくのは負担でしかありません。だから、仕事のすべてを先に学んでおきませんか？ 勉強するのがHTML／CSSだけでは足りません。Webデザイナーで食っていきたいなら、そのすべて学んでおきましょう！

本書で学ぶのは、案件を引き受けた直後から、納品できる状態のWebサイトを構築するまで。最も最初の段階は、クライアントにヒアリングして要件を定義するところからです。クライアントが作りたいのはコーポレートサイトなのか、ランディングページなのか、オウンドメディアなのか、あるいは別のWebサイトか？正しくクライアントの意図を聞き出して要件を定義するのに、適切な方法を紹介します。

最も重要なのがプロトタイピング。ここでは業界標準のツールである「Figma」の使いこなしが必要です。要件に基づき、クライアントの要望を取り入れながら、Webサイト全体の構成を固めながら、個々のページの動作や遷移を決めていきます。

プロトタイプがきちんと作れれば、HTML／CSSで実装します。デザインの基本は重要ですが、独創性のあるデザインが求められているわけではありません。クライアントが要望するWebサイトやWebページを作るのが重要です。そのために必要な知識と、要望を形にするための最短距離を指南します。仕事ですから、時間は重要。最速で正解に到達するための手法を紹介します。

多くの案件では、デザインして終わりでは済みません。Webサイトとして公開するまでがお仕事です。ただ、Webデザイナーがインフラにもくわしくなれというのは困難です。そこで、WordPressでのサイト構築を武器にしましょう。これなら、専任の管理者がいないクライアントでも運用が可能です。

本書では単なる仕事の紹介ではなく、仕事の進め方だけでもなく、実際に仕事を進めていくうえでの技術的な知識とスキルも身に付けられるよう構成しました。「Figma」「WordPress」といった無料で使えるツールだけでなく、「Illustrator」「Photoshop」にも精通できるよう、また「PHP」「jQuery」など、いずれ知っておくと武器になるWebプログラミングも簡単に紹介しています。

プロのWebデザイナーを目指す人なら、ぜひ本書でその第一歩を踏み出してみませんか。

＜コンセプト＞PC＆モバイルサイトデザインの基礎力とHTML・CSSコーディングの知識が1冊で同時に身につく！

ウェブ制作を仕事にするならHTMLとCSSを学ぶことから始めますが、本書は体系立てた文法学習よりも、まずは「コーディングとはどのような作業なのか」を理解できる初学者向け入門書です。架空のカフェのショップ紹介＆ネットショップサイトをチュートリアル形式で作成しながら、基本的なHTML要素／CSSの基本構造（セレクタ、プロパティ、値）を学ぶことができ、レイアウトのテクニックやデザイン（Webデザイン＆レスポンシブデザイン）の基本も身につきます。

＜本書のポイント＞

・チュートリアル学習では、PC版だけでなくウェブ制作の現場でニーズの高いモバイルサイトのデザインがしっかり学べます

・定番となったflexbox、displayを使ったレイアウト手法の基礎から実践まで丁寧に解説します

・「フルスクリーン」「フレックスボックス」「シングルカラム」「2カラム」「グリッド」の5種類のレイアウトパターンを学習できます

・横スクロールするレイアウト、アニメーションで拡大するボタンなど動きのあるサイトづくりも体験できます

・「動画コンテンツページ」「ネットショップページ」も制作します

＜綴じ込み特典つき＞

付録1デザインのバリエーションが学べる！「レスポンシブデザインのネタ帖」

付録2インターン、就転職に役立つ！「ポートフォリオ用アレンジのネタ帖」

よく見かけるこの表現はどうやってつくっているのだろう？──そんな疑問を解決する、Webデザインの“いま”の定番＆頻出の手法を集めた総合テクニック集です。「デザイン＆レイアウト」、「ナビゲーション」、「エフェクト＆インタラクション」、「ユーザビリティ」のカテゴリ別に、実際に現場でよく使われるスタンダードな手法を厳選して紹介。HTML5・CSS3・jQueryの各技術と効果的な組み合わせ方も身につきます。

現場のプロがとことん教える実務で使えるマルチデバイス対応サイトの作り方。１ソースであらゆるデバイスに対応する最新のＷｅｂ制作技術を確実に身につけよう。

ＦｉｒｅｗｏｒｋｓとＤｒｅａｍｗｅａｖｅｒを使ってデザインからコーディングまで１冊でマスター。画面の設計からパーツ制作、マークアップ、ＣＳＳコーディングまでＷｅｂデザインのワークフローを全部学べる。