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

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

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

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

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

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

• Webデザイン基礎トレーニング（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アニメーションの表現

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

献本の御礼

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

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

• お問い合わせ｜コリス