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マークアップ 現場で使える最短攻略ガイド』（アスキー・メディアワークス）などがある。

目次

Part 1 デザインの基本

Chapter 1 デザインとは

• Section 01 デザインする目的
• Section 02 伝えたい相手に合わせたデザイン
• Section 03 「体験」をデザインする

Chapter 2 デザインのベーシックセオリー

• 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 サーバを準備してデータを公開する