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

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

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

本の表紙

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

本のキャプチャ

いちばんよくわかる Webデザインの基本
[Amazonでみる]
[楽天でみる]

著:
伊藤 庄平、益子 貴寛、久保 知己、宮田 優希、伊藤 由暁
出版社:
SBクリエイティブ
発売日:
2017/2/25

楽天だと、なぜか表紙の色味が違う、、、
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プロジェクトに携わるすべての人に役立つ内容になっています。

本のキャプチャ

いちばんよくわかる Webデザインの基本
[Amazonでみる]
[楽天でみる]

著:
伊藤 庄平、益子 貴寛、久保 知己、宮田 優希、伊藤 由暁
出版社:
SBクリエイティブ
発売日:
2017/2/25

献本の御礼

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

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

top of page

©2017 coliss