Webの新しいテクニックやデザイン表現の仕組みと実装方法がよく分かるオススメの本 -Webデザイン基礎トレーニング

Web制作で必ずと言ってよいほど使われてる汎用的なテクニックをはじめ、新しいテクニックやデザイン表現をひとつずつしっかりと学べる解説書を紹介します。

ページレイアウト、UIコンポーネント、ビジュアルやコンテンツのデザイン、日本語デバイスフォントの指定方法など、基本から注目のトレンドまで仕組みと実装方法がよく分かるオススメの本です。

誌面のキャプチャ本の表紙

それらの実装方法がメインですが、Webデザインのトレンドの変遷やページレイアウト、インターフェイス、タイポグラフィ、ビジュアルデザイン、コンテンツデザインの知識や仕組みも解説されており、コーダーさんだけでなく、デザイナーやディレクターさんにもオススメです。

デザインのアイデアや仕掛けのネタ帳としてもかなり使えます。

本の表紙

Webデザイン基礎トレーニング
[Amazonでみる]
[楽天でみる]

著:
大野 謙介、北川 貴清、佐藤 とも子、高橋 としゆき、錦織 幸知、原 一宜。 矢野 みち子
出版社:
MdNコーポレーション
発売日:
2016/4/1

Kindle版は、お値段が少しお得です。

本書はオールカラーで、32個のデザインの表現方法やテクニックが紹介されています。版元様から誌面をいくつかお借りしました。

誌面のキャプチャ
誌面のキャプチャ
誌面のキャプチャ
誌面のキャプチャ

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。
これこれ!と、すぐに実践してみたいことばかりです。

誌面のキャプチャ

本書はテクニックだけではありません、そのベースとなる知識もしっかり学ぶことができます。

誌面のキャプチャ

Webのデザインも技術もここ数年で、飛躍的に進化してきました。表現方法や作業フローなどにも大きな影響を与えているので、しっかりチェックしておきたいですね。

誌面のキャプチャ

ベースとなる知識を押さえたら、実践です。

誌面のキャプチャ

ステップごとの丁寧な解説は分かりやすく、汎用性の高い実装方法で紹介されています。

誌面のキャプチャ

1章のページレイアウトでは、最近人気のさまざまなレイアウトのテクニックを学ぶことができます。

誌面のキャプチャ

2分割のスプリット レイアウトも増えてきましたね。

誌面のキャプチャ

2章はインターフェイス。
ナビゲーションやボタンやアコーディオンなど、さまざまなUIの作り方です。

誌面のキャプチャ

ボタンもここ数年で大きく変わったエレメントの一つです。以前はテキストリンクや画像でしたが、CSSやSVGを使ったものが主流になってきました。

誌面のキャプチャ

3章はテキストやタイポグラフィ。日本語のfont-familyの指定方法や文字サイズ、Webフォントなどテキストの表現方法も幅が広がりました。

誌面のキャプチャ

4章はビジュアルデザイン。写真画像をつかった表現方法や背景画像・装飾画像をつかったテクニックがたくさん紹介されています。

誌面のキャプチャ

大きな画像をつかったヒーローヘッダはランディングページなどでよく見かけます。

誌面のキャプチャ

サムネイル画像は囲み枠や罫線など、シンプルなものからグラフィカルなものまでさまざまなテクニックがあります。

誌面のキャプチャ

動画を背景につかったページは実装のポイントを知っておくと、便利です。

誌面のキャプチャ

最後の5章はコンテンツデザイン。ここではユーザビリティ・アクセシビリティを考慮したテクニックです。

誌面のキャプチャ

特にデスクトップとスマホでは表示する幅が異なるため、同じデザインでは見やすいとは言えません。

誌面のキャプチャ

入力フォームや検索フォームなどもスマホで利用しやすくするには、知識とテクニックが必要です。

Webデザイン基礎トレーニングの目次

  1. Webデザインの基礎知識とトレンド
    HTMLとCSSの基礎知識
    Webデザインのトレンドの変遷
  2. ページレイアウト
    Webレイアウトの種類や特性
    Webレイアウトとモバイルデザインの動向
    001 シンプルなシングルカラム・レイアウト
    002 カードを敷き詰めたようなタイル・レイアウト
    003 ページを2分割するスプリット・レイアウト
    004 イメージビジュAアルで魅せるフルスクリーン・レイアウト
  3. インターフェース
    Webサイトのインターフェースの種類
    001 CSS、画像、SVGで表現するボタンのデザイン
    002 水平方向のナビゲーションメニュー
    003 マウスオーバーで使うドロップダウンメニュー
    004 垂直方向のナビゲーションメニュー
    005 クリックで開閉するアコーディオンメニュー
    006 ビジュアルでも訴求するメガドロップダウンメニュー
    007 CSSで表現する背景透明のゴーストボタン
  4. タイポグラフィ
    Webページのテキストについての基礎知識
    Webフォントについての概要と基礎知識
    001 和文Webフォントのサービスを使う
    002 Font Awesomeを利用したアイコンフォントの使い方
    003 丸ゴシックを取り入れた温かみのある文字組み
    004 ゴシック体と明朝体を効果的に使い分ける
    005 テキストを敷き詰めた個性的なインデックスの表現
    006 SVGを使った解像度に依存しないタイトルの表現
    007 DropCapsを用いたテキストの装飾
    008 大きな日本語タイトルをセンスよく用いる
  5. ビジュアルデザイン
    画像の種類と特性についての基礎知識
    HTMLの画像とCSSで指定する背景画像の使い分け
    001 インパクトのあるヒーローヘッダ
    002 グラフィカルな囲み枠や罫線の表現方法
    003 写真を目立たせるフレームの表現方法
    004 映像を埋め込むビデオバックグラウンド
  6. コンテンツデザイン
    最低限知っておくべきWebのユーザビリティについて
    Webアクセシビリティの基礎知識
    001 モバイルでも見やすい「表組み」のデザイン
    002 入力しやすい「フォーム」のデザイン
    003 ユーザビリティを考慮した「検索フォーム」のデザイン
    004 レスポンシブに対応したYouTube動画を埋め込む
    005 フェードイン効果で表示されるページトップに戻るボタン
    006 SNSに誘導するソーシャルボタンの設置
    007 スマートホン表示にも対応したGoogleマップ
    008 jQueryプラグインで実装するスライドショー
    009 楽しさを演出するGIFアニメーションの表現

サンプルデータはすべて専用サイトからダウンロードが可能です。
新しいテクニックやデザイン表現を身につけ、すぐに活用することができると思います。

本の表紙

Webデザイン基礎トレーニング
[Amazonでみる]
[楽天でみる]

著:
大野 謙介、北川 貴清、佐藤 とも子、高橋 としゆき、錦織 幸知、原 一宜。 矢野 みち子
出版社:
MdNコーポレーション
発売日:
2016/4/1

献本の御礼

最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。

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

top of page

©2018 coliss