Webデザインの知識と理論とテクニックをしっかり基礎から学べる、本気で学びたい人のための解説書

Webサイトやスマホアプリのレイアウト、配色、写真やイラスト、日本語書体について、デザインの基礎知識から実用的なテクニックだけでなく、企画や運用についてまで詳しく解説されたオススメの本を紹介します。

Webデザイナーが知りたい、必要とされる知識をしっかり学べます。

本書はWebデザインに必要なデザインの基礎知識をはじめ、注目されているデザインの作り方・使い方、そして企画や運用についてまで、しっかりと学ぶことができます。
デザインのスキルアップを考えてるWebデザイナーの人に、Webデザインをこれから真剣に学びたい人に、何度も繰り返し読みたくなる一冊です。

楽天だと、なぜか表紙の色味が違う、、、
Kindle版は、お値段が少しお得です。

• いちばんよくわかる Webデザインの基本（Kindle版）

そんな紙面をキャプチャで少しだけ紹介します。

本書は8章構成で、1章はWebデザインの基本としてコンセプトや目標の定め方、ワークフローについて解説されています。
付け焼き刃になるようなテクニックではなく、Webにおけるデザインについて本質からしっかり学ぶことができます。

2-5章は、デザインの実践的な解説です。
Webデザインのレイアウトは単に美しく配置するだけでなく、必要な情報を的確に配置する必要があります。

レイアウトの基本から学び、Webサイトで実際に使われているさまざまなレイアウトが分かります。

レイアウトを考える際、ナビゲーションは重要な存在ですよね。ナビゲーションの考え方や作り方も進化しています。

本書の大きな特徴の一つが、事例が豊富であることです。
2章のレイアウトでは、さまざまなレイアウトの種類とともに、Webサイトで実際に使われているレイアウトとその特徴がくわしく解説されています。

シングルカラム、マルチカラム、コンテンツを敷き詰めていくレイアウト、フルスクリーンなど、確かによく見かけます。

コンテンツにあったレイアウトの事例も豊富です。

事例は、まだまだ豊富に解説されています。
ぱらぱら眺めているだけでも勉強になり、アイデアを探す時にも役立ちます。

3章の配色では色の仕組みから、配色の決め方まで、しっかり学べます。

最近よく見かけるのは、同じ色相で明度や彩度を変化させたトーンを使った配色です。また、補色や類似色を効果的に使うことで、ユーザーに強いインパクトを与えることもできます。
もちろん、この配色でも事例は豊富に掲載されていますが、ここでは省略します。

4章は写真と図版、5章はタイポグラフィです。
写真やイラストの解説も非常に勉強になりましたが、私の特にオススメは5章です。

Webデザインにおいて、文字は非常に大切な要素です。書体に何を選ぶのか、どのくらいの大きさで、何色なのか、Webサイトの見た目に大きな影響を与えます。本文もサイズ・行間、そして余白の取り方で、読みやすさは大きく変わります。
書体の基礎知識から、Webデザインにおける文字の使い方が詳しく解説されています。

文字は画像化されるものだけでなく、ユーザーの環境にインストールされているフォントを利用する方が重要といっても過言ではありません。もちろん、Webフォントを使う、というのも一つの手ですが、Webフォントを利用せずに最適なfont-familyの指定も解説されています。

6章はHTML5とCSS3。とは言っても、コーダー向けのものではなく、デザイナー向けの内容となっています。例えば、CSSでレイアウトをする際、最近はflexboxが主流になってきました。flexboxでどういったことができるのか、理解しておきましょう。

flexboxの一番の特徴は、flex（収縮する）です。これは特に、レスポンシブWebデザインで、デスクトップやスマホでどのようにレイアウトを変化させるか定義することができます。

7章はインタラクションで、アニメーションを使ってユーザーを楽しませながら、次に起こる現象を分かりやすくすることができます。

最近では、細部の振る舞いや動きにインタラクションが取り入れられるように、ユーザーの興味をより引きつける効果があります。紙面での解説はテキストですが、どういったインタラクションなのか理解できます。頭に思い描きながら、実際のサイトでそのインタラクションを体験すると面白いです。

インタラクションも単に動きを学ぶだけでなく、仕組みを理解することで、新しいインタラクションを生み出すきっかけになります。

いちばんよくわかる Webデザインの基本の目次

1. Webデザインの基本

   デザインとは何か

   目的と目標を考える

   ターゲットを想定する

   コンセプトを決める

   ワイヤーフレームやプロトタイプをつくる

   70%の完成度を目指してから、細部にこだわる

   ワークフローの全体像

2. レイアウト

   レイアウトとは

   レイアウトの原則

   Webデザインにおけるレイアウト

   Webデザインにおけるナビゲーションのレイアウト

   レイアウトにおける視線誘導

   タッチデバイス向けのレイアウト

   レスポンシブWebデザイン

3. 配色

   色とは

   色の三属性

   トーン

   補色・類似色・配色の調和

   色の印象

   カラーモード

   利用者の視点に立った配色

   Webサイトの目的にあった配色と比率

   リンクの色の扱い

4. 写真と図版

   Webデザインにおける写真

   Webデザインにおける図版

   色調補正

   写真のトリミング

   解像度、ピクセルについて

   画像のファイル形式

5. タイポグラフィ

   書体とは

   欧文書体と和文書体

   書体ファミリー

   書体の選び方

   本文の組版

   文字コードとブラウザの表示

   最適なfont-family

   Webフォントについて

   Webフォントのサービスの紹介

   Webフォントの使い方

6. HTML5とCSS3

   HTML5の基礎

   CSS3の基礎

   CSSの作り方と管理

   CSSでレイアウトする

   メディアクエリで作るレスポンシブWebデザイン

7. インタラクション

   インタラクションデザインとは

   インタラクションデザインの基本

   マイクロインタラクションとは

   CSSを使ったインタラクション

   JavaScriptとは

   動きのあるサイトを作るときの注意点

   SVGやWebGLを使ったインタラクションデザイン

8. 運用とマーケティング

   テスト環境と本番環境

   公開前後のチェック作業

   Webマーケティングの全体像

   インターネット広告の種類

   リスティング広告

   ランディングページ最適化(LPO)

   検索エンジン最適化(SEO)

   ソーシャルメディアマーケティング

   Googleアナリティクス

   Google Search Consoleとタグマネージャ

   Webサイトの改善策

デザインの作業における前段となる企画やコンセプトから、デザインの本質的な基礎知識、Webに特化した知識、Webの新しいテクノロジーによる注目されているテクニックまで、広く深く学べる一冊です。
デザイナーだけでなく、ディレクターにも、そしてWebプロジェクトに携わるすべての人に役立つ内容になっています。

献本の御礼

最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス