kiwinote

キウイノート：ライターきゅーいんがむが日々あったことを綴っていくブログ。

「わかばちゃんと学ぶWebサイト制作の基本」は、理由を教えてくれる本だった

本の感想

こんばんは！
webライティングのアルバイトをしながら、いっぱしのライターになるために修行をしています、きゅーいんがむ(id:Qingum)と申します。

今回は、

  • ライティングの仕事にも知ってると役立つhtmlを覚えたかった
  • 自分のwebサイトを作ることに興味があった


という二つの理由から、ほとんど知識のない状態で
「わかばちゃんと学ぶWebサイト制作の基本」という本を読んだところ
とても面白かったので紹介と感想を書きます！

わかばちゃんと学ぶ Webサイト制作の基本〈HTML5・CSS3〉

わかばちゃんと学ぶ Webサイト制作の基本〈HTML5・CSS3〉


※少し長い記事になってしまったので、あまり時間がない方や長文が苦手な方は
下記もくじより、読みたい項目の部分を拾って読んでいただければと思います。
よろしくお願いいたします。

もくじ


わたしとhtml（本を読むまでの経緯）

中学生のわたし

突然ですが、わたしには中学1年生のとき、同じクラスに、自分のwebサイトを持っている友達がいました。

どうやって作っていたのか、あるいはどこからかテンプレートを借りていたのかは知りませんでしたが、パソコンから見てもとてもおしゃれなデザインで（当時は携帯用のホームページなんかは簡単に作れて流行っていたのですが、パソコン用のホームページは珍しかったです）、

投稿されていたその子の書く詩が綺麗だったのもあって、「わたしもこんなサイトを作ってみたい！自分の詩もこんな形で公開してみたい！」と思いました。

でも、いざ作ってみよう！と思っても、

ん…？
html？？なにこれ？？
＜＞がいっぱいあって、英語だらけで、よくわかんないけど長くて…。

という壁にぶつかり、結局それ以上先には進めませんでした。

それ以降のわたし

中学以降も何度か自分のサイトを作ってみたい！と思うことはあったのですが、そのたびになんだかよくわからないhtmlというものを使わなくてはいけない、という壁にぶつかって、その度に諦めてきました。

それからしばらく経って、今はwebライターとしてがんばっていくことにしたのですが、
今度はwebライティングの仕事に数多く存在する、WordPressでの記事作成にも、htmlの知識が必要だという壁にぶつかりました。（必須というわけではありませんが、絶対にあった方が良いと感じました）

これはいよいよ、学ばなければならない…！
でも、難しい言葉がびっしり並んでいる本はつらい…！

そんなとき、4コマと図解でhtmlを含めたwebサイト制作の基本を学べる本が発売されたということで、これしかない！と思い読むことにしました。

本の目次と特徴

目次―Webサイト制作の基本、全部入り！

  • CHAPTER 1 企画～どんなサイトになるかは企画で決まる!～
  • CHAPTER 2 デザイン～企画に合ったデザインをしよう!～
  • CHAPTER 3 HTML～文章や画像を貼り付けて、Webサイトの中身を作ろう!～
  • CHAPTER 4 CSS～その見た目、華やかにしてあげる!～
  • CHAPTER 5 JavaScript～まるで魔法? 動きを付けるのじゃ～
  • CHAPTER 6 PHP～できることの幅がグーンと広がる言語～
  • CHAPTER 7 公開～ついにWeb上に公開だ!～
  • CHAPTER 8 運用～Webサイトは公開してからが本番

本書の目次は上記の通りで、
キャッチコピー「Webサイト制作の基本、全部入り！」通りの内容となっています。

2016y07m09d_004129448.jpg (41.3 kB)
http://webdesign-manga.com/web_script/

特徴―個性的で可愛いキャラクターの4コマで、企画から運用までをさらっと学ぶ

また、本書の主な特徴として、

  • あくまで全体をさらっと拾っている入門書とのことです。
    • といっても、わたしみたいな完全な初心者には、けっこうボリュームがあります。
  • 実際にサイトを作る（コーディング）部分だけでなく、企画や運用部分についても触れています。
    • 全体像と現在地が見えるので、今何をやっているのか初心者にもわかりやすいです。
  • 言語（htmlやcss等）の擬人化、萌えキャラクター化があります。また、本書全体の特徴として、web製作初心者の女の子と言語の女の子たちの会話による四コマと図解で構成されています。
    • 苦手な方は苦手かもしれませんが、逆に苦手じゃない方、可愛いキャラクターが好きな方には断然おすすめです。皆可愛く生き生きと動くので、癒されるし愛着がわきます。

2016y07m09d_005942540.jpg (29.3 kB)
http://webdesign-manga.com/css_basic2/

上記の特徴があるため、人によっては合わない可能性もありますが、
わたしのような、

  • 難しい文字の羅列はつらい
  • そもそもhtmlの基本的なところもよくわかってない
  • どうせ学ぶなら、可愛い絵で楽しく学びたい！

という初心者にはぜひぜひおすすめしたいです！

衝撃を受けたところ

2016y07m09d_010228649.jpg (40.6 kB)
http://webdesign-manga.com/twitterstamp/

続いて、本書を読んで衝撃を受けたところを紹介します。

まず、一番の衝撃だったのが、
技術書なのに、カラーマンガからスタートするところ。

カラー.jpg (128.8 kB)
https://twitter.com/webdesignManga/status/749124433147596800

そして、巻頭カラーマンガの次は、なんと言語キャラたちの立ち絵付きキャラクタープロフィールになっています！

このあたりでだいぶ、ゲームの説明書みたいでわくわくしていたのですが、
実は中身もゲームの説明書みたいになっていました。

キャラクターがいて、ストーリーがあって、タグなどの用語の説明があって、操作方法が書かれていて、攻略のためのヒントも書かれていて。

読み進めていくにつれて、キャラクター達もただ何となく可愛いから描かれているんじゃなくて、それぞれ意味や役割を持っているんだと気づく。

CSSちゃん.jpg (69.7 kB)
https://twitter.com/webdesignmanga/status/726231360654860289

こういう、まるでゲームのような読んでてわくわくする体験を、技術書から得られるのがとても衝撃で、楽しかったです。

コーディング部分を読んで

ここからは、完全に初心者から見た、コーディング部分の感想です。

2016y07m12d_200648751.jpg (32.0 kB)
http://webdesign-manga.com/twitterstamp/

リアルエクストリームビギナー、きゅーいんがむがお送りします。

覚えることは、いっぱいある

本書では、HTMLの基本構造を知るところからはじまり、見出しや段落、リンク、リスト…と、どうしたらいいのかを順番に丁寧に解説してくれています。
（CSS以降の章についても、基本構造からはじまり、やりたいことに沿って解説してくれています）

説明自体はわかりやすいのですが、それでも、使用するタグの数は多く、名称や使い方など、覚えることがいっぱいあって大変だな、と感じました。

わかったつもりで先に進んでも、あれ、さっきやったこのタグどういう意味だっけ…？？ とページを戻ることもしばしば。

初心者で、飽きっぽく、難しい文字の羅列が苦手なわたしは、
ここまでわかりやすくても、少し諦めかけてしまいました。

「理由」を教えてくれる本

でも、完全に諦めずに済んだのは、わたしが諦めかけたタイミングで、ひょこっと、HTMLちゃんが顔を出してくれたからでした。

HTMLちゃん.jpg (164.6 kB)
https://twitter.com/webdesignManga/status/722815348735479809

本書の各章の各セクションの最初には必ず可愛いキャラクター達の4コマがありますが、それ以外にも、解説部分でちょっと難しいな、と思ったタイミングでHTMLちゃん達の顔と吹き出しが現れて、会話をしてくれます。

わかばちゃんの「うーん、これってこうなの？」
に対し、
HTMLちゃんが「これはこういうことだよ！」
と答えてくれます。

リアルわかばちゃん（初心者）としては、ここがかなり嬉しかったです。

きゅーいんがむというリアルわかばちゃんが「もうわけわかんない！」って諦めかけるたびに、
彼女たちは顔を出して「こういうことだよ！」って理由を教えてくれる。

理由がわかると、興味がわく。
興味がわくと、けっこう理解できる。
理解できると、けっこう楽しくなる。
楽しくなると、また先に進みたくなる。

そうしているうちに、いつの間にかHTMLちゃんは、中学生のわたしの前にも現れていました。
楽しさと一緒に、「わたしもこんなサイトを作ってみたい！」という気持ちを、今のわたしのところに連れてきてくれました。

HTMLちゃんは、最初にわたしがWebサイトに興味を持った理由も、もう一度教えてくれました。


初心者で、飽きっぽくて、難しい文字の羅列は苦手。
そんなわたしでも、可愛いキャラクター達とわかりやすく「理由」を教えてくれる解説のおかげで、楽しく学ぶことができる本、
「わかばちゃんと学ぶWebサイト制作の基本」。おすすめです。

わかばちゃんと学ぶ Webサイト制作の基本〈HTML5・CSS3〉

わかばちゃんと学ぶ Webサイト制作の基本〈HTML5・CSS3〉



実践することにしました

本を読んで、色々学ぶことはできたのですが、
やっぱり本当に自分の身につけるためには、実際に手を動かしていくしかない！
とも思ったので、実際に手を動かして学んでいくことにしました。
そんなわけで、明日より #わかばちゃん実践日記 と題し 本書のコーディング部分を少しずつ実践して、
進捗を当ブログのTwitterアカウント@_kiwinote_にて画像付きでツイートします！

もし良ければ、ツイッターアカウントの方も覗いていただけると嬉しいです。


（2018.08.追記）Twitterでの実践の様子は以下にまとまっています。
最後まで楽しく学ぶことができました！
togetter.com


最後までお読みいただき、ありがとうございました！


※本記事にて使用している画像は、
「マンガでわかるWebデザイン」公式サイト http://webdesign-manga.com/
および「マンガでわかるWebデザイン」twitterアカウント https://twitter.com/webdesignManga
より、著者の湊川あいさんの許可を得て掲載させていただいています！
この場を借りて、改めて、許可いただきありがとうございました！