Webデザインの入門書

HTML・CSSの基本から、画面幅に合わせたレイアウトまでを作例で学べます。練習問題や導入部分の動画もあり、読むだけで終わらせず手を動かして進められる構成です。

選ぶ前に確認：個々のタグを網羅した辞典ではありません。作例を離れて自由に組み立てたい段階では、詳しい仕様や別の教材も参照するとよいでしょう。

評価の理由：サイト制作の手順と練習を重視。タグの網羅性より、初めて完成まで進む目的に合います。

架空のカフェを題材に、コードを追加したときの画面の変化を確認しながら進めます。スマートフォン向けの表示や複数のレイアウトを、制作の流れの中で試せます。

選ぶ前に確認：文法を順番に網羅する構成ではありません。タグやCSSの意味を一つずつ詳しく知りたい人は、基礎解説を併用したほうが進めやすい内容です。

評価の理由：画面の変化を見ながら制作できる点を評価。文法を少し知っている人に向きます。

SNSリンク集やブログ、招待状、レストランのサイトを題材に、HTMLとCSSを練習します。図解と手順を見ながら、少しずつ作れる範囲を広げる構成です。

選ぶ前に確認：完成コードや公開方法の資料にはダウンロードが必要です。本だけで完成コードを見比べたい人や、パソコンと本の画面差に戸惑いやすい人は、付属データも用意して進めてください。

評価の理由：段階的な説明が初学者向け。完成コードの参照に付属データが必要な点を考慮しました。

業種別の見本に加え、見出し、ボタン、装飾などのパーツも扱います。自分の案のどこを直すか、具体例から考えるときに使える一冊です。

選ぶ前に確認：素材集として買う場合は、掲載作例とダウンロード素材の範囲を区別してください。付属素材をもっと増やしてほしいという読者の指摘があります。

評価の理由：バナーの構成例が具体的。素材集として使う場合は、ダウンロードできる素材の範囲に注意したい。

操作に迷う画面と改善案を見比べ、使う人の行動に沿ってデザインを考えます。制作担当だけでなく、画面の確認や発注をする人にも向く内容です。

選ぶ前に確認：基本的な使いやすさの改善が中心です。流行の見た目や高度な装飾のアイデア集を求める人には合いにくいでしょう。

評価の理由：使いやすさを具体例で学べる。基本の復習に向き、高度な装飾のアイデア集とは使い分けたい。

スマートフォン画面の制作から、オートレイアウト、部品の再利用、画面遷移へ進みます。機能を眺めるだけでなく、作例を完成させて覚えたい人向けです。

選ぶ前に確認：スマートフォンの作例が中心です。2025年後半以降の投稿には本と操作画面の違いへの指摘があり、ボタンの位置などは現在のFigmaの案内も確認しながら進める必要があります。

評価の理由：スマートフォンの画面を作る練習に向きます。操作画面の変更に対応する手間があります。

レイアウト、配色、タイポグラフィ、写真とイラストを広く扱います。制作の進め方や迷ったときの判断も学べるため、デザイン全体の入口として選べます。

選ぶ前に確認：広い分野の基礎をまとめた本です。文字組みや配色を専門的に掘り下げたい人は、その分野の本も合わせて読むとよいでしょう。

評価の理由：デザイン全体の入口として範囲が広い。文字組みや配色を専門的に掘り下げる用途には別の本も必要。