Webデザインとコーディングの実務レベルの知識を基礎から独学で身につけることができるオススメの本

表紙がかわいいので、中身もそんな感じかなと思ったら大間違いです!
デザインやコード、そしてその解説にも実務レベルのアイデアが数多く見られる、Webデザインの知識やテクニックが詳しく解説されたオススメの本を紹介します。

本のキャプチャ

デザイン論は、紙デザインがベースのものが多いですが、本書ではそれらがすべてWebデザインに落とし込まれています。また作者は日本人なので、タイポグラフィなども日本語が中心で、日本語ベースのWebデザインについて具体的な事例とともに徹底的に解説されています。

本のキャプチャ

Webデザインとコーディングのきほんのきほん
[Amazonでみる]
[楽天でみる]

著:
瀧上 園枝
監修:
浜 俊太朗
出版社:
マイナビ
発売日:
2016/8/19

版元様より誌面をいくつかお借りしました。
本書の中身を紙面のキャプチャで少しだけご紹介。

誌面のキャプチャ

本書は3章構成で、1章ではデザインのセオリーをWebサイトにどのように落とし込むのか、2章では制作の実務的な知識、3章では作業ベースで制作の流れを身につけることができます。

誌面のキャプチャ

デザインのセオリーと言えば、近接、整列、コントラスト、反復の4原則があります。多くの解説書では紙デザインがメインですが、本書ではこれをどのようにWebデザインに採用するのか、実例とともに紹介されています。

誌面のキャプチャ

空白スペースを効果的に使えるようになると、デザインの演出効果をアップさせることができます。要素の強調、グルーピング、視線の誘導のレイアウトや写真画像の余白を活かした使い方など、すぐにWebデザインで使えるテクニックです。

誌面のキャプチャ

そして、Webで大切なのは見た目だけでなく、クリックやタップやスクロールなどがしやすいか、使いやすさも考慮されたデザインが求められます。

誌面のキャプチャ

使いやすさというのはナビゲーションやボタンやリンクなどで、その要素が操作できることが分かること、また操作したことが分かり、期待を裏切らない反応を返すことが大切です。

誌面のキャプチャ

タイポグラフィやフォントの使い方も、Webと紙では異なります。
日本語ならではのWebで読みやすい文字レイアウト、フォントやサイズや行間や字間などデザインを効果的に見せるフォント設定はすぐに使える知識です。

誌面のキャプチャ

2章からはWebサイトがどのようなフローで作られるのか、制作の流れを実務的なレベルで学ぶことができます。

誌面のキャプチャ

ワイヤーフレームを元に、デザインカンプを作成し、ビジュアルを作り込みます。

誌面のキャプチャ

1章で学んだデザインのセオリーをWebデザインの実務にどのように取り込んでいくのか、豊富な画像と分かりやすいテキストで詳しく解説されています。

誌面のキャプチャ

PhotoshopやIllustratorの使い方も充実しており、Tipsも非常に充実しています。

誌面のキャプチャ

チュートリアルのファイルはステップごとにその完成データがダウンロードでき、途中経過も確認できるのは嬉しいですね。

誌面のキャプチャ

デザインができたら、テンプレートとして使えるとHTMLとCSSを用意し、実装していきます。

誌面のキャプチャ

フォルダを構成し、HTMLにテキストデータを流しこみ、画像を配置し、それぞれの要素に詳細なマークアップをしていきます。ここらへんの手順は、僕が実務でやっていた時とほぼ同じですね。

誌面のキャプチャ

ベースを用意し、コピペで利用できるものは利用し、カスタマイズやオリジナルのコードを加えて、仕上げていきます。
HTMLやCSSのデータもステップごとにダウンロードできます。

誌面のキャプチャ

実装のメインはHTMLとCSSで、JavaScriptでないとできないことだけJavaScriptで実装します。

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

  1. デザインの基本
    デザインとは
    デザインのベーシックセオリー
    Webサイトデザインのセオリー
  2. Webサイト制作の基本
    Webサイトを構成するデータ
    HTMLの基本
    CSSの役割
    JavaScriptの利用
  3. Webサイトを制作する
    Webサイト制作の準備
    Webサイトをデザインする
    Webサイトページのベースを作る
    ページコンテンツの詳細をレイアウトする
    Webサイトを公開する

目次にあるHTMLは「基本」、CSSは「役割」、JavaScriptは「利用」のように、本書では目次でさえも言葉使いが吟味されています。
書店で見かけたら、パラパラ見るだけでなく、気になった項目のテキストやグラフィックをしっかり見てみてください。

本のキャプチャ

Webデザインとコーディングのきほんのきほん
[Amazonでみる]
[楽天でみる]

著:
瀧上 園枝
監修:
浜 俊太朗
出版社:
マイナビ
発売日:
2016/8/19

献本の御礼

最後に、献本いただいたマイナビの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

top of page

©2017 coliss