新刊紹介「できるイラストで学ぶ 入社1年目からのHTML＆CSSとWebデザイン」

初の商業書籍を出版します。書き始めて約1年半、ようやく情報解禁！
Webサイトを作成しながら、HTMLとCSS基本の書き方から応用までを学習できる書籍を作りました。

見本誌が届いたので中身のパラパラ動画を撮りました。試し読み感覚でご覧ください！

どんな本か内容が気になる方へ、中身をチラ見せしつつ見どころを解説します。

書籍の特徴

Webサイトを自分で作ってみたい人や、Webサイトを作る仕事をしてみたい人へ、ゼロから制作について学べる初心者向けの本です。

プロの現場で使えるノウハウも各所に盛り込んでいるので、いずれは制作の現場に立ちたいという人にもおすすめです。

この本の主な特徴は、大きく分けて3つあります。

❶キャラクターの会話と豊富なイラスト図解でつまづきをフォロー

本書は、新人×先輩の会話形式で話が進んでいきます。
Webサイト制作が初めての新人「美咲」が、ベテランWebデザイナー「羊先輩」のレクチャーを受けながら、Webサイト制作の知識を身に付けていくというストーリー展開です。

初心者がつまずきやすい所を美咲が代弁し、それに対して羊先輩が回答していくので、読者も一緒になって制作の疑問を解決していきやすい内容となっています。

文章だけでは理解しにくい部分はイラスト図解を使用し、ビジュアルで分かりやすく解説しています。

またWebサイトを作るにはHTMLとCSSの学習だけでなく、デザインの知識も必要です。
スマートフォンやタブレットでアクセスしたり、ユーザーが操作する場面があるため、様々な状況を想定した設計が必要となってきます。このWebサイト制作特有のデザインのポイントについても本書で紹介しています。

本書には作例のWebデザインデータ（Figma）が付いているため、デザインを確認しながらコードを書けます。もちろん眺めてみるだけでも「Webデザインってこんな風に作るんだ」など色々発見がありますよ。

❷4つのWebサイト作成で実践力を養える

本書では1冊で4つのWebサイトを制作することができます。
様々なデザインのコードを書く練習をすると、コードの構成力や対応力が身に付きやすいので、このような構成にしました。

Webサイトの作例は次に紹介する4つです。後半になるにつれて、難易度が上がっていきます。

第2章 インテリアショップの告知ページ

難易度 ★☆☆☆

第3章　和風の定食屋Webサイト

難易度 ★★☆☆

第4章　IT企業のコーポレートサイト

難易度 ★★★☆

第5章　グランピングのサービスサイト

難易度 ★★★★

第4章、第5章の動画はPC版のみ紹介していますが、本書内ではスマートフォンとタブレット表示に対応するための解説もしています。

各章で作成するWebサイトで学べる技術は、下記のポスト画像に書き込んであるので合わせてご覧ください。

❸細かく分割したファイルでコードの理解が深められる

完成コードを見ても、どこのコードの話をしているのか分からない…ということがあるかもしれません。そこで付録のサンプルコードでは、各解説パートに合わせてコードのファイルを切り分けています。

例えば「sec1_background-color」ファイルを見ると、下の説明にあるキャプチャ部分のコードだけが書かれています。

「このコードってどんな効果があるんだっけ？」と思ったとき、そのコードのファイルを見れば、影響する範囲を確認できるのです。

本書にはビフォーアフターのキャプチャも掲載しているので、コードを入れるとどのように変化するのかも分かるようになっています。よくあるミスについてもコメントや図解でフォローがあります。

以上が「できるイラストで学ぶ 入社1年目からのHTML＆CSSとWebデザイン」書籍の特徴です。

書籍のもくじ

本書の目次です。クリックすると拡大します。

読んでみたい！こんなWebサイトを作ってみたい！と思った方は、お手に取っていただけると嬉しいです。

既に購入・予約された方へお願い

もしAmazonでご購入された方がいましたら、ぜひAmazonレビューを書いていただけると励みになります。
X（旧twitter）でも感想募集中です。 #できるHTMLとCSS というハッシュタグをつけてポストしていただけると、著者がコッソリ見に行かせていただきます。
投稿内容は、予約したよ！買ったよ！サンプルのコードを自分でも書いてみたよ！などなど、この本に関することならなんでもOKです。
ぜひお待ちしております！

出版記念ウェビナー開催しました

DTP Transit にて、本書の出版記念ウェビナーを開催していただきました。

このウェビナーは「Webサイト制作の基礎をしっかり身につけたい」という方に向けた入門講座です。
実際に手を動かしながら、HTMLとCSSを使ってシンプルなプロフィールページを作ります。私の作業画面を見ながら一緒に制作するので、実際の制作を見てみたい方はアーカイブをご覧ください。

ちなみに、このウェビナーで取り扱うプロフィールページのデザイン、コードサンプルはこのウェビナー限定オリジナルで、アーカイブ購入された方はコードサンプルをプレゼントしています。