わかばちゃんと学ぶ Webサイト制作の基本 PDF版 湊川あい (著)
気になったところ、重要だと思ったところを書いていきます！
SECTION 02 ターゲットは誰？ 仮説を立てよう
この表、うっすら「こういうのが重要なんだろうな」とは思っていても、ちゃんと埋めるのは難しい。わかばちゃんは埋められてすごいなー
| 6W1H | 意味 | 想定 |
|---|---|---|
| Who | 誰のためのWebサイトか | |
| When | いつWebサイトを使うのか | |
| Where | どこでWebサイトを使うのか | |
| What | 何を提供するか | |
| Whom | 誰が提供するか | |
| Why | なぜWebサイトを使うのか | |
| How | どのようにWebサイトを使うのか |
自分の分については、ゆっくり考えていく
SECTION 06 画像編集ソフトでデザインを作ろう
ポイントは
- 商品の特徴を洗い出す
- 想起されるトーンを挙げていく
１の段階では「普段使いか特別な物か」「Web系の仕事の人向け、営業職向け、全くの別業者向けなど」「性別や年齢別」などの特徴を、
２の段階ではその特徴に合わせてデザインを考える。気取るか気取らないか、デザインは今風か、有名サイトのコピーっぽいか、性別で色のテーマも考える
こういう、難しいけど大切なことをちゃんと扱うのっていいね。
自分の分については、ゆっくり考えていく
SECTION 08 HTMLってなに？
最初のページに、まず歴史的な経緯の4コマがあるのいい。
この4コマ的に言えば、HTMLは書類の被検索のためにあるのであって、情報の構築のためにあるのではない、か？HTMLで整理するより、DBとかに入れた方が情報としてはいい、ということに最初からなっていた？
休憩
お、サクラエディタ勧めてる。ええやん（今使ってないけど
SECTION 15 エリア分けしよう
<body>の中身、初心者向けサイトでは、フローとさせるレイアウトをすべて<div>にして、クラス分けでヘッダーメインフッターを振り分けるのが多い（混乱を避ける目的？
でも、『わかばちゃん』は媒体自身が分かりやすいから、<main>,<header>,<footer>,<nav>,<article>,<section>までちゃんと説明の上で、<div>が出てくるのすごくいい。
SECTION 17 票の作り方
これ！これ私も思ってた！ごめん<tr>！！！嫌悪感が払しょくされたわ。こういう無味乾燥だったものにわかばちゃんが色と親近感を与えてくれるの、この本の最大の効果だと思う。
SECTION 25 セレクタの詳細度 CSSには上下関係がある？
これもだ！！！ずっと嫌いなイメージしかなかった優先度設定、なんか面白く感じさせる力がキャラクタ付けにはあるな。すごいな。
拡張機能StylusとかでCSS必要とされたとき、ずっと!importantしか使ってこなかったヤーツは私です
SECTION 26 パディングとマージンの違い
そうなのか。パディングはわかばちゃんのおなか脂肪なのね。これは絶対混乱しなくなるわ。背景色がつくのも、つまんで伸ばしても肌色が消えるわけないもんね。わっかりやす！*1
SECTION 27 フロートで要素を回り込ませよう
前のところで、IEの使用率とか、2016年時点データだったけど、このころはまだGridとかは隆盛じゃなかったのかな？フロートのみでのデザイン。 フロート自体がすごくわかりにくいと思ってるけど、わかばちゃんの扱う範囲ではすっごくわかりやすい。でも自分で使おうと思とわからなくなっていくんだよな…
SECTION 29 Javascriptってなに？
歴史の紹介いいねー
そうなんだよなー。私なんて、多感な時期を「ブラウザはまずJavascriptをOFF！」で過ごしたから、JSへの忌避感が結構ある。意識改革しなきゃ！！
休憩
ライセンスの説明はわかばちゃん読んでもよくわからんな。
SECTION 38 検索結果の上位に表示するには？～正攻法のSEO
SEO対策！と銘打った結論が「コンテンツの内容を優良で充実したものにしよう」というのは、すっごく誠実で好感が持てる。いろいろとGoogleでの騒動あったしね。
おまけコンテンツ HTML5_要素一覧.pdf
これ白黒印刷しちゃったわ。
知らないタグに出会ったらMDNへ！とか薦める人もいるけどあれって日本語学習者に広辞苑勧めるようなもんだと思う。こういう一言コメントでタグを「理解したことにしておいて次に進むためのリファレンス」って意外と役に立つと思う。特に初心者には。上級者は深い知識の思い出すキーとして使えるし、長く参照しそうな7枚。
白黒なのはべつにピンクが恥ずかしいとかじゃなくて、うちのプリンタが白黒専用プリンタだからじゃぞ
感想
たとえば、
マーケティングからPDCAまで説明すんのすごい。浅く広く、とはいえ、広さが広い！
自ら「おわりに」で、
この本の立ち位置は、Webデザインの入園ゲートだと思っています。Webデザインというテーマパークの入り口です。
と謙遜されているが、この本、HTML＆CSSという無味無臭なものをテーマパーク化するある種の変身魔法書のように思えた。私がそもそも想像力が少ないだけかもしれんけど。
いやー擬人化っていいね。しってたけど、いいね。
*1:わかばちゃんの名誉と引き換えの理解おいしいぞ