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

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

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

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

本書は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は「利用」のように、本書では目次でさえも言葉使いが吟味されています。
書店で見かけたら、パラパラ見るだけでなく、気になった項目のテキストやグラフィックをしっかり見てみてください。

献本の御礼

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

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

• お問い合わせ｜コリス