【書評】ゼロからはじめてプロになる HTML／CSS＆伝わるWebデザイン【著/HIROCODE.】

この記事では現役Webデザイナーである「HIROCODE.」さんが執筆されたWebデザイナー入門者向け書籍

ゼロからはじめてプロになる HTML／CSS＆伝わるWebデザイン

について正直なレビューをお伝えいたします。

著者の「HIROCODE.」さんはYoutube でWebデザインやコーディングなど、Web制作に関するお役立ち知識・情報を発信されています。

その内容がとても分かりやすく非常に参考になるものばかりなので、僕も普段からYoutube動画をチェックさせていただいています。

Webデザイナーに興味を持たれている方など、購入するか迷われている方にとっての判断材料となるような感想をお伝えできればと思っています。

誤解の無いように念のためお伝えすると、当記事は決して案件ではありません。HIROCODE.さんのいちファンとしてレビュー記事を書きたいと思い、投稿させていただいております。

【書籍の構成】ゼロからはじめてプロになる HTML／CSS＆伝わるWebデザイン

ゼロからはじめてプロになる HTML／CSS＆伝わるWebデザインの構成は以下のとおりです。

書籍全体の大きな流れとして

• デザインの基礎知識　→　デザインツール（Figma）による実践
• HTML／CSSの基礎知識　→　コーディングの実践

このような２部構成といったイメージでした。

実際の目次をご覧になりたい場合は、Amazonの商品ページでプレビューが掲載されていますのでそちらをご覧ください。

学べる内容

ゼロからはじめてプロになる HTML／CSS＆伝わるWebデザインを通じて学べる内容はザックリ以下とおりです。

全体的に、それぞれのカテゴリーについてかなり網羅的に情報が記述されている印象でした。

ページ数自体は280ページほどで、技術書としては多すぎず少なすぎない程度の量だとは思います。

しかし、見やすさを担保しつつも網羅的に内容が記述されているため、

入門書としては中々の情報量で良かったです。

良かったところ

僕はHIROCODE.さんのYoutube動画の内容のわかりやすさだけでなく、雰囲気からにじみ出ている人柄も含めた上でファンになりました。

しかし、今回はひいき目なしで、良かったところ、悪かったところを正直にお伝えします！

まずは良かったところから。

順番にご紹介していきます。

プロと同じWebデザインの制作フローが体験できる

書籍の主旨にもなっていますが、プロと同じWebデザイン制作フローを体験できます。

具体的には、Figmaによるデザインのワイヤーフレーム作成・カンプ作成、そしてHTML／CSSによるコーディングです。

こちらの書籍に興味を持たれている方は、これからWebデザインを学んでみたい方が多いかと思います。

仕事のイメージを掴めるという点で、とても参考になるのではないでしょうか。

イラストや画像を豊富に使用しておりとても見やすい

HIROCODE.さん自身が9年ほどWebデザインに携わっていることもあり、本のデザインが非常によく、とても見やすいです。

イラストや画像も豊富に使用しており、また配色も良いため読み進める上でハードルが低く感じました。

入門書とは思えない情報量（良い意味で）

先ほども触れましたが、入門書としては情報量が多いです。

まずはとりあえず一読してWebデザインの全体像を理解し、折に触れて読み返してみると

「そっか、こんなやり方があったんだ！」

と再発見が多々あるかと思います。

初心者の方は一気に理解しようとせず、コツコツと少しずつ習得するつもりで手元に置いておくのが◎です。

※特にコーディング部分はprogateを１～２周してからの方がスムーズかもしれません。

「ワンポイントアドバイス」が本当に有益

要所要所でHIROCODE.さんからのワンポイントアドバイス（吹き出しイラスト）が用意されています。

僕は現時点でWebコーディングのお仕事をさせていただているのもあり、個人的にこのワンポイントアドバイスがある意味一番うれしかったです。

また、デザインやFigmaの使い方などで、「こんなパターンがある」、「こんなやり方がある」と網羅的に提示した上で

「こんな場合はこういう風にするのがオススメです」としっかり方針を示してくださっていたのも良いと思いました。

僕もコーディングはそれなりに経験してきたつもりではいたのですが、非常に参考になるコーディング方法やテクニックもさりげなく登場していて早速取り入れさせていただきました。

中級者以上の方が読んでも得られるものがあるのではないかと思います。

「レッスン動画」が用意されている

特にFigmaの操作フェーズあたりから登場してきますが、テキストベースではどうしてもわかりづらかったり、手順が複雑な内容には「レッスン動画」が用意されています。

「メインビジュアル20種類」のデザインテンプレートデータがもらえる

期間限定ではありますが、Amazonで購入すると、特典として

デザインテンプレート集「メインビジュアル20種類」のデザインデータ（PDF）

をもらえます。

特典対象となる購入期限：2025/02/28 (金)23:59
得点のダウンロード期限：2025/05/29 (木)23:59

特典が欲しい方は買い忘れないよう早めの購入をオススメします！

悪いところ

書籍全体を通して、個人的には非常に完成度が高いと思っています。

見やすさ、わかりやすさ、情報量の充実などなど、買って良かったと本当に思っています。

とはいえ、悪いところがまったくないかというと、そうではないので、そこも正直レビューさせていただきます。

ページ数は280ほどと決して多すぎるわけではないのですが、１ページごとの厚みとカラー印刷ということもあるためか、本自体の重さがそこそこあります。

そのため、電車など、外での隙間時間に勉強したいという方にとっては少々扱いずらさがあるかもしれません。

＼ Amazonで見てみる ／

また、先ほどもお伝えしたように「ゼロからはじめてプロになる　HTML／CSS＆伝わるWebデザイン」は、網羅性が高く、デザインやFigma、コーディング関係の基礎知識について幅広く触れられています。

本のとおりに進めていくことで必要な知識をかなり補完できる一方、完全な初心者の方にとっては

「こんなの覚えきれない……」

と、あまりの情報量に圧倒されてしまう可能性があります。

一度で理解しようとせず、少しずつコツコツ習得していくつもりで手元に置いておくと、とても心強い味方になると思います。

【まとめ】こんな人にオススメ！

最後に、「ゼロからはじめてプロになる　HTML／CSS＆伝わるWebデザイン」の購入がオススメの方をご紹介して、当記事を締めくくりたいと思います。

書籍の主旨にもありますが、Webデザイナーに興味をお持ちの方へ、とてもオススメできる一冊です。

また、僕のように、用意されたデザインカンプを元にコーディングすることはできるけど、これまでWebデザインを行った経験が無いという方にもオススメできます。

プロのWebデザイナーの制作フローが体験できる点がとてもグッドです。

また、僕の場合は書籍内のコーディングセクションだけでもかなり発見があったので、「コーディングに慣れてきた」という方が読むことで、スキルの総まとめ＆底上げにつながるかもしれません。

ちなみにですが、Figmaは現在のWebデザインツールの主流となっているので、これからWebデザインをしたい！という方は習得必須です。

これからWebデザインの世界を足を踏み入れたいと思っている方にとって、書籍選びの参考になれば幸いです。

それでは、最後までご覧いただきありがとうございました！

最後に改めて念押しさせていただきますが、当記事は本当に案件記事ではなく、いちファンとして書きたかったから書いただけの記事です。