MdNCORPORATION

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

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

錦織 幸知 著/原 一宣。 著/矢野 みち子 著/高橋 としゆき 著/大野 謙介 著/北川 貴清 著/佐藤 とも子 著/境 祐司 監修
定価 2,530円
(本体 2,300円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2016-03-25
仕様 B5変形判/224P
ISBN 978-4-8443-6572-3
幅広いジャンルのWebサイトや多くの制作現場で必ずと言ってよいほど使われる基礎的・汎用的なテクニックを集め、初級者の方にもわかりやすく解説した書籍です。レイアウト、インターフェース、タイポグラフィーなど5章構成で、完成作例(サンプルとなるWebページ)をもとにしたステップバイステップ形式で説明しています。解説本文ではコーディング上のつまずきやすいポイントや、間違いやすい点への補足を随所に織り込みながらていねいに解説しました(解説で使用している作例はダウンロードして学習用にご利用いただけます)。 また本書では、初級者の方がこれらのテクニックが必要とされる背景を理解できるよう、Webサイト・デザインのトレンドの変遷や、HTML・CSS、タイポグラフィー、グラフィック(画像)などに関する基本解説を設けました。現在注目されるキーワードやトレンドの背景についての知識を深めながら、多岐に渡って活用できるテクニックが身につきます。


■ページ見本










目次

■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アニメーションの表現

用語索引

ダウンロードデータ

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


サンプルデータダウンロード



このたびは、『Webデザイン基礎トレーニング 現場で使うテクニックをひとつずつ、しっかり。』をご購入いただきまして、誠にありがとうございます。以下に、本書の解説で使用したサンプルデータを用意しましたのでご利用ください。


6572_sample.zip(約11.1MB)



【ダウンロードにあたってのご注意】


ダウンロードファイルは、ZIP形式で圧縮されています。

Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。解凍したフォルダ内には、本書のChapter1~5の解説で使用したサンプルの完成データが、各記事番号のフォルダに分かれて収録されています。
(サンプルデータにはHTMLファイル、CSSファイル、JSファイル、JPGファイルなどが含まれていますが、細かなファイル構成は各記事によって異なります)

フォルダ内に「readme.txt」が同梱されていますので、ご使用の前に必ずお読みください。




【ダウンロードファイル解凍時のご注意】


Windowsをご利用の場合は、ダブルクリックしてもダウンロードファイルを正しく解凍できない場合があります。
リンク画像が表示されないなど、サンプルファイルの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される


※弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただしサンプルデータ中に含まれるJavaScriptのプラグインなどの一般に公開されているライブラリ類については、各ライブラリのライセンス条件に従います。

※弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。

※弊社Webサイトからダウンロードできるサンプルデータを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※本書に掲載されているHTML、CSS、JavaScriptなどのコメントや改行位置などは、紙面掲載用として加工していることがあります。ダウンロードしたサンプルデータとは異なる場合がありますので、あらかじめご了承ください。

※サンプルのなかには、Webサーバーの機能を利用しているなどの理由から、ローカル環境上では正しく動作しないものがあります。このようなサンプルの場合は、Webサーバー上に設置したうえで機能をお試しください。




制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊