MdNの本

Webデザイン基礎トレーニング 現場で使うテクニックをひとつずつ、しっかり。

Webデザイン基礎トレーニング 現場で使うテクニックをひとつずつ、しっかり。

Webデザイン基礎トレーニング 現場で使うテクニックをひとつずつ、しっかり。

どんな制作現場でも絶対に活きる基本のノウハウが身につく

境 祐司 監修/大野 謙介 著/北川 貴清 著/佐藤 とも子 著/高橋 としゆき 著/錦織 幸知 著/原 一宣。 著/矢野 みち子 著
B5変形判 / 224P
ISBN978-4-8443-6572-3 / 価格(本体2,300円+税)※電子版の価格は販売ストアにて
2016年03月25日発売

幅広いジャンルのWebサイトや多くの制作現場で必ずと言ってよいほど使われる基礎的・汎用的なテクニックを集め、初級者の方にもわかりやすく解説した書籍です。レイアウト、インターフェース、タイポグラフィーなど5章構成で、完成作例(サンプルとなるWebページ)をもとにしたステップバイステップ形式で説明しています。解説本文ではコーディング上のつまずきやすいポイントや、間違いやすい点への補足を随所に織り込みながらていねいに解説しました(解説で使用している作例はダウンロードして学習用にご利用いただけます)。 また本書では、初級者の方がこれらのテクニックが必要とされる背景を理解できるよう、Webサイト・デザインのトレンドの変遷や、HTML・CSS、タイポグラフィー、グラフィック(画像)などに関する基本解説を設けました。現在注目されるキーワードやトレンドの背景についての知識を深めながら、多岐に渡って活用できるテクニックが身につきます。

→サンプルデータはこちら



twitter facebook google+ このエントリーをはてなブックマークに追加 RSS

ページイメージ

クリックすると折りたためます
■ページ見本
















目次

クリックすると開きます

【目次】
■Introduction Webデザインの基礎知識とトレンド
HTMLとCSSの基礎知識
Webデザインのトレンドの変遷

■Chapter 1 ページレイアウト
Webレイアウトの種類や特性
Webレイアウトとモバイルデザインの動向
001 シンプルなシングルカラム・レイアウト
002 カードを敷き詰めたようなタイル・レイアウト
003 ページを2分割するスプリット・レイアウト
004 イメージビジュAアルで魅せるフルスクリーン・レイアウト

■Chapter 2 インターフェース
Webサイトのインターフェースの種類
001 CSS、画像、SVGで表現するボタンのデザイン
002 水平方向のナビゲーションメニュー
003 マウスオーバーで使うドロップダウンメニュー
004 垂直方向のナビゲーションメニュー
005 クリックで開閉するアコーディオンメニュー
006 ビジュアルでも訴求するメガドロップダウンメニュー
007 CSSで表現する背景透明のゴーストボタン

■Chapter 3 タイポグラフィー
Webページのテキストについての基礎知識
Webフォントについての概要と基礎知識
001 和文Webフォントのサービスを使う
002 Font Awesomeを利用したアイコンフォントの使い方
003 丸ゴシックを取り入れた温かみのある文字組み
004 ゴシック体と明朝体を効果的に使い分ける
005 テキストを敷き詰めた個性的なインデックスの表現
006 SVGを使った解像度に依存しないタイトルの表現
007 DropCapsを用いたテキストの装飾
008 大きな日本語タイトルをセンスよく用いる

■Chapter 4 ビジュアルデザイン
画像の種類と特性についての基礎知識
HTMLの画像とCSSで指定する背景画像の使い分け
001 インパクトのあるヒーローヘッダー
002 グラフィカルな囲み枠や罫線の表現方法
003 写真を目立たせるフレームの表現方法
004 映像を埋め込むビデオバックグラウンド

■Chapter 5 コンテンツデザイン
最低限知っておくべきWebのユーザビリティについて
Webアクセシビリティの基礎知識
001 モバイルでも見やすい「表組み」のデザイン
002 入力しやすい「フォーム」のデザイン
003 ユーザビリティを考慮した「検索フォーム」のデザイン
004 レスポンシブに対応したYouTube動画を埋め込む
005 フェードイン効果で表示されるページトップに戻るボタン
006 SNSに誘導するソーシャルボタンの設置
007 スマートフォン表示にも対応したGoogleマップ
008 jQueryプラグインで実装するスライドショー
009 楽しさを演出するGIFアニメーションの表現

用語索引