ギフトで購入

Webデザインとコーディングのきほんのきほん

瀧上園枝(著), 浜俊太朗(監修)

マイナビ出版

2,948円 (2,680円+税)

デザインからコーディングまで、“現在の”Webサイト制作全体を学ぶ一冊。Webサイトのデザインからコーディングまでを広く扱うことで、点ではなくつながった線として、Webサイト制作を学べるように構成されています。

内容紹介

「コーディングしやすいデザインってどう作ればいいんだろう？」と思っているWebデザイナーさん。

「デザイナーにお願いするとき、どんな風に伝えればスムーズにいくんだろう？」と思っているマークアップエンジニアさん。

「とりあえず、Webサイトってどうやって作ればいいのか知りたい」と思っている勉強を始めたばかりの方。

本書はそんなみなさんの役に立つ一冊です。

昨今のWebサイト制作は、だんだんと複雑化してきています。Webサイトを1つ作ろうと思ったら、デザイン、HTML、CSSなど、たくさんのことを勉強しなくてはいけません。本書は、そのようなWeb制作に関する知識を横断的にまとめました。

Webデザインだけ、またはHTMLとCSSだけを学ぶ書籍はありますが、その部分だけの理解だと、困ることもあります。デザインを納品したけれど、コーダーさんにデータが使いにくいと言われてしまったり、逆にどんなデザインが欲しいのかを、うまくデザイナーさんに伝えられなかったり･･･。そのような「困る」を体験したことはないでしょうか。

本書は、Webサイトのデザインからコーディングまでを広く扱うことで、点ではなくつながった線として、Webサイト制作を学べるように構成されています。

具体的には、Part1「デザインの基本」では、一般的な「デザイン」の基本を学んだ上で、Webならではの特性をふまえて「Webデザイン」のセオリーを学びます。

Part2「Webサイト制作の基本」では、Webサイトを制作する際の実務的な知識を学びます。まず、Webサイトがどのようなフローで作られるのか、どのようなデータで構成されているのかなどを理解します。続いて、Webサイト制作の上で欠かせないHTMLとCSSについて、概要から具体的な書き方までを学びます。そして、JavaScriptについても概要を学びます。

Part3「Webサイトを制作する」では、、Part 1、Part 2までの内容をもとに、ひととおりのWebサイト制作の流れを学びます。Webサイトの目的を整理するところから設計、ワイヤーフレームの作成、デザインカンプの作成、マークアップとコーディングを行い、1つのWebサイトを作る作業を追っていくことができます。

コンテンツの企画からページを公開するまでのデザイン～コーディング過程を実践することで、デザイン担当にとってはコーディング工程を、コーディング担当にとってはデザインのセオリーや意図を理解することができるでしょう。異なる工程の作業内容に関する理解は、自身が担当するデータ制作の効率化にもつながります。Web制作の現場での作業がよりスムーズに効率よく進むようになることが、本書の目的です。

書誌情報

著者: 瀧上園枝(著), 浜俊太朗(監修)
発行日: 2016-08-19 (紙書籍版発行日: 2016-08-19)
最終更新日: 2016-08-19
バージョン: 1.0.0
ページ数: 308ページ(PDF版換算)
対応フォーマット: PDF
出版社: マイナビ出版

対象読者

著者について

瀧上園枝

グラフィックデザイナー。有限会社シアン代表取締役。印刷物やウェブサイト、アプリなどデザインワーク全般を担当。主な著書に『現場でなければ学べない! クライアントの難題に応えるデザインテクニック』『Illustratorデザインの教科書』『Illustrator 魅せるデザインテクニック事典』『サンプルで学ぶ魅せるスマートフォンサイト・デザイン』（以上、マイナビ出版）『やさしいデザインの教科書』（エムディエヌコーポレーション）など。

浜俊太朗

Webのサービスやスマホアプリを作っている会社で働く、元マークアップエンジニアのWebディレクター。趣味は写真撮影。著書に『一週間でマスターするXHTML & CSS for Windows』（マイナビ出版）、『HTML5マークアップ現場で使える最短攻略ガイド』（アスキー・メディアワークス）などがある。

Section 01 要素を揃える・均等に配置する
Section 02 要素の差別化とグルーピング
Section 03 色の基本
Section 04 色が持つ基本的なイメージ
Section 05 色の組み合わせ
Section 06 フォントの基本
Section 07 読みやすい文字レイアウト
Section 08 効果的な文字レイアウト
Section 09 余白でイメージを表現する

Chapter 3 Webサイトデザインのセオリー

Section 01 Webサイトをデザインするとは
Section 02 「使う」ことを意識したデザイン
Section 03 ユーザーの経験値を利用した構成
Section 04 操作するためのデザイン
Section 05 Webサイトの配色
Section 06 フォントの実際
Section 07 操作環境の多様化に対応する

Part 2 Webサイト制作の基本

Chapter 1 Webサイトを構成するデータ

Section 01 Web制作のフローと制作のための準備
Section 02 ページを構成する要素
Section 03 ページを構成するデータ
Section 04 Web制作のためのツール

Chapter 2 HTMLの基本

Section 01 HTMLとは
Section 02 要素の活用 103
Section 03 ページに関する情報を記述する
Section 04 HTMLのベーシックな記述例

Chapter 3 CSSの役割

Section 01 CSSとは
Section 02 CSSの記述方法
Section 03 CSSセレクタとプロパティの種類
Section 04 CSSの応用

Chapter 4 JavaScriptの利用

Section 01 JavaScriptとは
Section 02 JavaScriptの利用例
Section 03 jQueryの活用

Part 3 Webサイトを制作する

Chapter 1 Webサイト制作の準備

Secti on 01 サイトに関する情報の整理
Section 02 ページの設計

Chapter 2 Webサイトをデザインする

Section 01 トップページをデザインする
Section 02 ページの細部を調整する
Section 03 メインビジュアルを制作する
Section 04 タブレット用／スマートフォン用に展開する
Section 05 画像をパーツとして抽出する
Column　Photoshopの基本

Chapter 3 Webサイトページのベースを構築する

Section 01 サイトのベースを用意する
Section 02 HTMLでコンテンツを流し込む
Section 03 HTMLで詳細なマークアップをする
Section 04 CSSファイルを準備する
Section 05 CSSでページのベースを設定する

Chapter 4 ページコンテンツの詳細をレイアウトする

Section 01 ヘッダーエリアのレイアウトを指定する
Section 02 メインビジュアルのレイアウトを指定する
Section 03 3カラム構成のコンテンツエリアをレイアウトする
Section 04 新着情報テキストをレイアウトする
Section 05 フッターエリアのレイアウトを指定する
Section 06 JavaScriptを利用する
Section 07 ウィンドウサイズに合わせてコンテンツの表示をコントロールする
Section 08 モバイルデバイス用のメニューを追加する
Section 09 モバイルデバイス用に表示を整える

Chapter 5 Webサイトを公開する

Section 01 サイト表示を最終確認する
Section 02 サーバを準備してデータを公開する

Home 〉書籍一覧〉 Webデザインとコーディングのきほんのきほん ▲ ページトップへ戻る