WEB制作の勉強でタメになった本まとめ

Web制作を独学で学んで、案件獲得まで実現した「なよ」です。
プログラミングは自分で分からないことがあったら調べることが大切です。
とりわけ、新しい技術やツールを一から始める時には、その知識が体系的に学ぶことができる「本」が役立ちます。

今回は私が実際にWeb制作を独学するにあたって、役立った本をまとめておきます。
独学で本選びに迷ったら参考にしてください。

豊富な作例で学ぶ Adobe XD Webデザイン入門

Webのワイヤーフレーム、デザイン、プロトタイプ作成で今や必須ソフトになったAdobeのXDの使い方が体系的に学べる本「豊富な作例で学ぶ Adobe XD Webデザイン入門」。

誰でも直感的に使うことができるソフトなので、基礎的な使い方はソフトを適当に触っていれば”それなりに使える”XDですが、やはり細かい使い方や効率的な作業方法は本で学んでおいた方が良いでしょう。

本書はXDの基本的な使い方はもちろん、プロトタイプモードを使ったアニメーションやページの遷移も学ぶことができます。
特にアニメーションでは、Web制作で使う機会の多いパーツ

  • フォーム
  • ローディングアクション
  • ハンバーガーメニュー
  • アコーディオンパネル
  • カルーセル

などをXDだけで再現する方法が学べます。
これらのパーツは流用できるので、コピペして使えば時短にもなるでしょう。

XDだけでアニメーション付きのパーツが作れるのに感動!
デザイン提案時の表現の幅が広がるね!

ワイヤーフレームが学べる

本書の良かったのはサイトのワイヤーフレームの作り方も学べるという点です。
ワイヤーフレームとは、ページごとに含まれるコンテンツや大まかなレイアウトを確認するためのWebサイトの設計図。
そんなワイヤーフレームは作成するWebサイトによってパターンがあります。

本書では

  • コーポレートサイト
  • リクルートサイト
  • ECサイト
  • サービス紹介サイト
  • キャンペーンサイト(LP)
  • メディア・ブログサイト

上記6種類の流用OKなワイヤーフレームのテンプレートが特典で付いています。
テンプレートを参考に提案すれば、それぞれのサイトに絶対に必要なページや項目の抜けがなくなりますし、時短にもなります。

Webデザイン初心者のうちは基本に忠実に作ることが何より大切ですので、テンプレートは非常に心強い味方になります。

テンプレート通りに忠実に丁寧に提案するだけで十分に通用するよ!

本書が向いている人

本書を買うべき人は以下の通り。

  • XDの基本的な使い方が知りたい
  • XDの少し踏み込んだアニメーション、ページの遷移を学びたい
  • Webデザイン初心者で使えるワイヤーフレームのテンプレートが欲しい
  • XDの作業を効率的に行って時短するためのUIパーツが欲しい