試験公開中

このエントリーをはてなブックマークに追加

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

マイナビ出版

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
  • バージョン: 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 サーバを準備してデータを公開する
Home 書籍一覧 Webデザインとコーディングのきほんのきほん ▲ ページトップへ戻る