Webの新しいテクニックやデザイン表現の仕組みと実装方法がよく分かるオススメの本 -Webデザイン基礎トレーニング
Post on:2016年4月22日
Web制作で必ずと言ってよいほど使われてる汎用的なテクニックをはじめ、新しいテクニックやデザイン表現をひとつずつしっかりと学べる解説書を紹介します。
ページレイアウト、UIコンポーネント、ビジュアルやコンテンツのデザイン、日本語デバイスフォントの指定方法など、基本から注目のトレンドまで仕組みと実装方法がよく分かるオススメの本です。


それらの実装方法がメインですが、Webデザインのトレンドの変遷やページレイアウト、インターフェイス、タイポグラフィ、ビジュアルデザイン、コンテンツデザインの知識や仕組みも解説されており、コーダーさんだけでなく、デザイナーやディレクターさんにもオススメです。
デザインのアイデアや仕掛けのネタ帳としてもかなり使えます。
Kindle版は、お値段が少しお得です。
本書はオールカラーで、32個のデザインの表現方法やテクニックが紹介されています。版元様から誌面をいくつかお借りしました。




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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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