【Progateの次にどうぞ。】『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』レビューしました。

https://www.sbcr.jp/product/4797398892/ Web design

Webデザインに興味を持つ人のほとんどが

見たことがあるであろう、この表紙。

 

HTML &CSSの基礎に特化しつつ、

トレンド感のあるWebデザインを学び・実践までできる書籍

『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』

Webデザインを勉強する上で

必ずチェックするべき」と挙げられるほど有名な

Webクリエイターボックス を運営する Manaさん の著書本です。

Manaさんについて ▽

Webデザイナーになろう!と思ったきっかけのお話

勉強を始める前から知っていて

この書籍を購入するか結構な間、迷っていました。

何回、書店で「買おうかどうしようか…」と手に取ったことか。

結論として「購入してよかった」です。

これまでに “何回言うの?”というレベルで

わかりやすい」と呟きまくってます。心の中でも

書籍名について、

以下では『1冊ですべて身につく』と省略して記載させていただきます。

私自身の体験を踏まえて、書籍のレビューを書かせていただきました。

『1冊ですべて身につく』が気になっている・購入検討中の方はもちろん

制作でつまづいてしまっている方が完成に近づくためのTipsも書いています。

最後の まとめの中で「webデザインについて詳しく学びたい方」を対象にした

『Webデザイン良質見本帳』の詳細・レビューを少しだけ書かせていただいています。

目次でジャンプしていただいたりと、合わせてご活用ください。

説得力増す!書籍をおすすめしている方々

『1冊ですべて身につく』購入した決めてとしては、

  • おすすめしている方が多いから。
  • 初め書籍ベースで学習したほうがいいから。
  • 後々の振り返りに重宝するから。

しょーごログさんのロードマップ

web制作でProgateから実務までにやるべきこと【具体的なロードマップ付き 】

Web制作を勉強していると自然と、このロードマップ通りになってきています。

就職者・フリーランスどちらでも web制作の独学者の方は

一度、視聴してみることをオススメします。わかりやすさ説得力があります。

> YouTubeにてHTML&CSSの解説動画をUPしている Webの神様さん

ちなみに、『書籍ベース』というワードに

納得させられたのはWebの神様さんの動画でした。

どの動画でおっしゃってたかわからなくなりました💦

代わりに、模写コーディングのわかりやすいと感じた動画を掲載します。

【超入門】初心者向け 模写コーディング!オススメのやり方とポイント【HTML・CSS コーディング】

その他にも、

くりnote 製作者の くりのすけさん

HTML・CSSの勉強にオススメの本|くりのすけ|note
今回は、HTML・CSSの勉強にオススメの本を初級者から中、上級者別に紹介します。 ■ 初級者向け ■ HTML5&CSS3デザインブック チャプター1の「WEBページにおける段組み」がとても勉強になります。WEBサイトのレイアウトについての理解が増しました。レスポンシブについても...

バナーお題で有名な こばやすさん

デザイン超初心者におすすめする本5選|こばやす.HOME
独学でデザインを始めたいけど何から手を付けて分からない方でも読みやすい書籍を5冊に厳選して紹介。Webデザイナーを目指す方にも分かりやすく優しいコーディングの参考書もPickupしました。

などなど…

Twitterでも『1冊ですべて身につく』など と検索すると

実際の購入者さんたちが褒めているツイートを多く見受けることができます。

なぜ皆さんが良いと言われるのか

  • 解説が丁寧
  • flexboxを使用したコーディング
  • トレンドを取り入れたレイアウト

といった感じですね。

これで説得力が増しましたね。😊笑

制作物完成までの詳細

【制作したもの】

レスポンシブ時の動画

【実施期間】

2020.07.29 – 08.15

制作物については3度のチャレンジを行っています。

各詳細は

通し読み 7/29

1回目 – 7/30, 8/5, 8/6, 8/7

1日1セクションペースで進める。

何も考えずにコードの打ち込みのみ。

1日ごとに順調だったものの

Google mapを入れた途端に、すべてが崩壊する。


Chapter6 タイル型(menu)

2回目 – 8/8

半日かけてやり直す。

知らないのはMDNディファレンスで所々調べながら。

お問い合わせが反映しなかったりレスポンシブ対応がおかしい。

どうにもならず、見本のコードを見ながら

並び順も変えながらやるも同じなのに…とわけわからなくなる。


Chapter7 お問い合わせフォーム(contact)

3回目 8/15 完成。✨

また、8/21にゼロから読み返しています。

【使用ソフト】

VScord (※書籍は Atomです)

「なぜVscordの使用を決めたか」についてはUdemyのレビュー記事に記載しています。

【活用方法】

Kindle(電子書籍 版)で購入。

以前のUdemyデメリット・メリットの記事で紹介した時と同様に

Mac Book の Kindleアプリと書籍データをDLして進めました。

(Chrome も開くので、上手いこと、こんな感じではやっていませんが。。↓)

制作物の制作を進める際に、少し不便がありましたが、

それ以降は特に問題はありませんでした。

内容・目次

【基礎 編】

Chapter1 Webデザインとは

【マークアップ 編】※素材ファイルあり。

Chapter2 HTMLの基本

Chapter3 CSSの基本

【実践・制作 編】WCB cafe の コーポレートサイト。

Chapter4 フルスクリーン(TOP)

Chapter5 2カラム(NEWS)

Chapter6 タイル型(menu)

Chapter7 お問い合わせフォーム(contact)

実際にやってみた感想

◎ 解説が丁寧。丁寧すぎる…!!

  • 質問しにくいような初めの一歩を基礎の基礎まで丁寧にわかりやすく書かれている!
  • 忘れがちな根本的なところを思い出させてくれる!
  • 再度見直しても丁寧で1番わかりやすい・納得する

色んなサイトを見て回りましたが、

戻ってきて1番わかりやすいと改めて感じました。

初学者にとっては「ググろう!」という思考にならない

些細なTipsが必要に応じて、しかも良いタイミングで書いてある。

言い換えれば、無駄な情報が書かれていない!

HTML&CSSの基本(Chapter2、3)でも

図や表、イラストが使われているので読みやすく・取っ付きやすい解説です。

◎ カスタマイズまで学べる

用意されているもの(※自主的なDLが必要)


  • 架空サイト用の素材
  • 架空サイトの見本(index.html、style.css)
  • 架空サイト全体のイメージ画像
  • 架空サイト カスタマイズ用の素材・サイト見本
  • HTML&CSSの基本(Chapter2、3)の練習素材

当たり前に思ってしまいがちですが、かなり親切でボリューミーな提供です。

カスタマイズ用の素材・見本サイトまで用意されているのが嬉しい!

女性ならではのカスタマイズ、細かい見せ方

関連性のある発展的な内容まで書いてあるので「目から鱗」といった感じですし

架空サイト自体がトレンドを抑えていて尚且つ、お洒落なので

「なんとしてでも創り切る…!」というモチベーションが続きやすかったです。

しかも『1冊ですべて身につく』がより凄いのが、

制作物だけでなくHTML&CSSの基本(Chapter2、3)まで

素材やコードの答え合わせまで用意されていることです。

(私はやっていないですが)一度やっておいたほうが

オリジナルを制作する際に瞬発的な発想幅が広がりそうですよね。

◎ レベルアップを体感することができた。

『1冊ですべて身につく』を終えた後に挑戦した、

エビスコムさんの『コーディング・プラクティス1』を完成させた時の感想です。

✔️ Udemy の頃から比較して、【学べた。】

頻出が高いセレクター、ナビゲーションメニュー、ボタン、hover、2カラム、3カラム、ID属性、

タイル型、グラデーション、お問い合わせフォーム、SNSの埋め込み、コードエディタの書き方

個人的には、コードエディタの書き方が最も苦しみ、模索した期間でした。

3回チャレンジの事態になってしまったのも「書き方」の面で苦労したためです。

【苦しんだ点】


  • 半角スペースは英数(かな では反映されない)
  • カンマ(, )あり or なし
  • ID属性の表記(# [英字半角] . タグ名)
  • つづり間違え
  •  } や </> の終了タグの位置       など

ググったというよりは、YouTubeで色んな人のコーディング解説動画を見て察していきました。

1番参考にしたのは、自分ではCSSやレスポンシブでつまづいていると感じていたので、しまぶーIT大学さんの『CSS講座』を中心に見返しました。(既に5回くらいは見てるかも)

【CSS #1】基礎からちゃんと学ぶ CSS 入門!基本構文を抑えよう!【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

【改善方法】


  • コメントアウト(⌘+/ )を書きながら制作。
  • 調べたことや理解が緩いものは全てコメントアウトで記載。
  • 高頻度に更新をかけ、見本と見比べる
  • 修正の後回しをやめた

ガンガン コードを書き写すことはせず、見本が用意されているので比較する。

意識的にコードエディタに慣れていく。

【苦しんだ点】や【書き方】を認識した上で発生した原因として


  • コンマ漏れ・ミス
  • ダブルクォーテーション(” ”)
  • つづりミス
  • 終了タグの位置

でした。

コメントアウト(⌘+/ )を書いていけばだいたい解決しました。

また、可読性も高くなる ので解説だけでなく

項目名も随時書くことはオススメです。

✔️ Udemy講座の完成時から比較して、【感想。】


  • HTML &CSSに特化して学ぶことができた。
  • Udemyより圧倒的にコーディングの内容が発展的・濃かった
  • より実践と現実味を持って取り組むことができた。

内容が発展的と言っても、

Udemyがレベル1 なら『1冊ですべて身につく』でレベル2くらいかな。。(個人的意見)

あと、ランディングページのほうが簡単と言われる理由がわかったような気もします。

まとめ

まとめると、

  • トレンドを抑えたお洒落なコーポレートサイトが制作できる。
  • さらに、女性らしい細かいカスタマイズを体験できる。
  • 再度見直しても丁寧で1番わかりやすい・納得する。

でした。

オススメの対象者としては

  • HTML / CSS の初学習者
  • HTML / CSSの基礎を書籍で学び直したい方
  • 丁寧な解説を手元に残しておきたい方

どの方にもお勧めできる書籍だと感じました。

※ 擬似要素(:: after / before)など はカバーできないのでご注意ください。

2019年3月の発売なので1年は過ぎてはいるものの

トレンドは移り変わりが早いですが、まだまだ信用できるものかと思います。

約1ヶ月かけて自力で察していったことが Chapter1 に書かれていました。

初学者が「情報に対して模索すること」は時間消耗が大きすぎます。

”時間をお金で買う”ということを考えれば、

『1冊ですべて身につく』の¥2400は安いと感じました。

さらに、基礎を書籍で固めておくことはググる際にネット上の情報に踊らされにくくなります。

私と同じように遠回りしないようにしましょう。笑

Progateで学習中の購入検討者の方へ

この記事を読んでくださっている方はおそらく

  • この書籍が気になっている
  • 買おうか迷っている。
  • 「Progateの次は何をするか」で悩んでいる。

だと思うので、

Webデザイナー志望の方は早めにProgateから卒業して

  • 今回紹介している『1冊ですべて身につく』
  • 前回レビューしたUdemyの講座『オールインワン講座』 など

「実際にWebサイトを作ることができる教材に移った方が良いんじゃないかな〜」と思います。

過去の自分に言うなら「迷ってないで さっさと買いな!!」です。笑

【前編】Udemyで購入した講座が良すぎたのでレビューしました。
UdemyがWebデザインの勉強に良いってのは知ってるけど「どの講座がいいかわからない!」実際受けてみないことにはわかりません。私自身も購入前にたくさんの講座レビューをしているブログ見てみたけど、”...
  • 「コードエディタやheadタグ内の環境構築」の壁
  • 「書いても直しても反映されない!なぜ!」の壁
  • 「検証モード(⌘+option+I)?、意味わからん!」の壁

が待ち受けていますので

1日でも早く“コードエディタで書いてみる” 挑戦をしてみることを強くお勧めしたいです。

Web制作における必要な言語スキルは(※筆者調べ 保証なし)

HTML

CSS


↓ できると良い

SASS ※CSS記述を楽にする言語

Java Script(jQuery)

Word Press(PHP)

私は最近まで何を学べばいいのかあやふやで、

皆さん意見も違うので思考が行ったり来たりしていました。

Progate課金中の方は、これらの言語を一通り 触り程度 でトライしてみてください。

(私はHTML / CSS / Java Script しかやってません。)

言語について概要の解説は

サムライエンジニア塾さんのYouTube動画が簡潔でわかりやすかったです。

【初心者必見】jQueryとは?特徴や将来性を初心者向けにわかりやすく解説

最近は、WebクリエイターボックスさんのYouTubeアカウントで講座が始まっているので

つまづいてしまった項目丁寧に理解を深めるため 合わせて試聴するのもいいかもしれないですね。

とても優しく心地の良いお声です!(動画は声が重要)

Webクリエイターボックスの【Webサイト制作 動画講座】始まります!

Webデザインについて詳しく知りたい方へ

さらにWebデザインの ”デザイン” について詳しく知りたい方へ

オススメなのは『Webデザイン良質見本帳』です。

※ツイート内の「半額」は Kindle(電子書籍版)のセールのことです。

この本も『1冊ですべて身につく』と合わせて

webデザインを学習する上でオススメ・絶賛されている書籍です。

webデザインを学ぶ最高の勉強法は「見て学ぶ」です。

オリジナルサイトを制作する上で参考・分析するサイト数は

なんと、20~30個なんだそうです。(引用:Udemy NEST ONLINE : 400レッスン以上のマスターコース

『1冊ですべて身につく』でも、

Webサイトにおける色彩の解説、実際に存在するWebサイトを紹介

をするページがありますが

  • Webデザインについて より一層詳しく
  • webサイトの具体例が豊富
  • カテゴリー分けが豊富。
  • イメージごとの装飾を切り取った解説

がされているので

  • webデザインの理解を深めることができる。
  • 振り返り、アイデア出しに活用できる。
  • クライアントと共有もできたり、、という使い方にも!

私自身、1日1サイトレビューを7/2から(現在34個)レビューをおこなってきましたが20個目くらいの時点で詰まってしまって、一旦ストップしようかなと思っていました。『Webデザイン良質見本帳』読んでから「まだまだ認識している世界は狭かった」「まだまだイケる」と痛感させられました。

なので、1日1サイトレビューをおこなっている方にもぜひお勧めしたいです!

デザインの言語化・サイトレビューをする意味に疑問に感じている方

”デザインを言語化する意義” について解説をされている下の動画 お勧めです。

サイトレビューをしている身として元気をもらいました。↓

なんとなく…から卒業して、デザインを伝えられるようになろう

『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』

『Webデザイン良質見本帳』共にレビューは以上になります。

ここまでご覧いただきありがとうございました!

少しでも、お読みいただいた あなたの お役に立てたならば幸いに思います。😊

今回の記事で登場した書籍

ー 後書き ー

ツイッターにて

「ブログを読んでUdemyの講座 買いました。」

「mikiさんの影響で気になって デザインのドリル買いました、始めました。」

と沢山の方にご報告いただきまして

本当に嬉しい気持ちと、

何か締結してレビューしてるわけでないし、私が作った教材ではないので

欲という名の、ちょっと複雑な気持ちがあるのは事実です。笑

それでも、何も音沙汰ないよりは

報告してもえたら、「またレビュー書こうかな〜」という

私のモチベーションに代るので嬉しいです!

後書き まで読んでくださり、ありがとうございました!

コメント

タイトルとURLをコピーしました