みなさまこんにちは。Faber Company 新規開発ラボチームの末っ子、高田です。
前回書いたJavaとSQLの記事、まさかあんなに多くの方に読んでいただけるとは思っておりませんでした。読んでくださった皆さま、本当にありがとうございました。まだ読んでいない方は、ぜひこちらも読んでいただけると嬉しいです。自分で言うのもアレですが、読んでいて楽しいとご好評いただいております。
fabercompany-dev.hatenablog.com
というわけで今回は、私がまだ新卒入社前ーFaber Companyの長期インターン生として勤務していた頃に、HTMLとCSSを独学で身につけた方法についてお話します。この2つを覚えたことで、できることやチャレンジできることの幅が一気に広がりました。
この記事が、「HTMLとCSSに挑戦しようと思っているけれど、なかなか手が出ない、、、」と言う方の背中を、少しでも押すことができたらいいなと思っております。
それではLet's Go☆
ベトナムエンジニアに英語で要件を説明するのは至難の業だった
なぜ私がHTMLとCSSを勉強しようと思ったのか。
簡単に言えば、「ベトナムエンジニアに英語で要件を説明するのは至難の業だったから」です。
Faber Companyでは、ツールやサイトの実装を主にベトナム人エンジニアたちが担っています。
彼らとは、基本的に英語のコミュニケーションになるのですが、これがとっっっっっっても大変なのです。
ベトナムはベトナム語の国なので、英語が流暢でないメンバーもいます。
そして私自身、高校時代に英語の定期テストの点数が酷すぎて呼び出しされる寸前だったくらい英語が苦手なので、コミュニケーションコストがかかってしょうがなかったわけです。
そこで、どうにかならんかと考えた結果、一つの結論に至りました。
私がHTMLとCSSわかったら、「ここはこういうふうに実装して」って言えるから、めっちゃ楽になるんじゃない？？？
そんなわけで私は、HTMLとCSSに手を出すことにしたのです。今思えば、英語を勉強したくない人間が英語の勉強から逃げるために編み出した苦肉の策だったのですが（笑）
HTMLとCSSとお友達になる方法
HTMLとCSSを身につけるにあたって、プログラミングスクールや通信教育を利用する方も多いと思います。が、私はそこまでガチで実装できるようになる必要がなかったので、一旦独学で進めることにしました。
①「HTMLとCSS」の本を読む
私がHTMLとCSSを勉強する上で購入した本は、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」だけです。
※安心してください。決して回し者ではありません。お金もいただいていません。
この1冊を、まずはざっと読みます。絵が多くてわかりやすいので、多分1日で読み終わります。
Amazon等で購入できるので、ぜひポチッと購入して目を通してみてください。
②開発者ツールでひたすら遊ぶ
本を読んで、HTMLとCSSの雰囲気がわかったら、次は開発者ツールです。
適当なページを開いて、右クリックして、「検証」をクリックします。
ここで表示されるのがHTMLとCSSなのですが、ここをどんなにいじっても、他の人にはいじった内容は一切見えません。つまり、どんなにページが崩れても、どんなに酷いデザインになっても、全くお咎めなしなのです。
というわけで、ここをいじり倒します。
これだけです。
本当に、これだけです。
本をざっと読んで、HTMLとCSSの雰囲気を何となく身につけて、検証ツールを遊び倒した人間は、こういうことができるようになります。
「ミエルカSEOでできること」を....
「ミエルカSEOで成果を拡大させましょう」にしたり....
文字色を青から赤に変えたり.....
はたまた、ヘッダーに埋め込まれているミエルカSEOのロゴを.....
ミエルカヒートマップに差し替えたり....（他の人に見えてないのでこんなことができるのです。本当に実装したらタダでは済みません）
このほかにも、paddingやmargin等の余白を調整したり、ボタンにグラデーションをつけたり、角丸にしたり...とにかくあらゆる要素をいじくりまくっていました。
HTMLとCSSが読めるようになると、ある程度ページの構造を把握できるようになるので、
「ここのリンク、なんで押してもページ遷移しないんだろう」
「ここをこういうふうに変えたいのに、なんで難しいってエンジニアから言われちゃうんだろう」
といった課題に対して、どういった実装をすれば良いか、どのくらい大変なのかが何となくわかるようになります。
そこでエンジニアやデザイナー、あるいは依頼者に対して、
「ここ、こうなってるから結構めんどくさい修正になると思うんですけど1週間でいけますか？」
「ここを修正するためには、こういう画像が必要だと思うので、作ってもらえませんか？」
的なことが言えるようになるわけです。これだけでコミュニケーションコストはだいぶ減りますし、実装もスムーズに行くようになりました。
「こうしたらエンジニアも私も楽なんじゃない？」を探し続ける
私がHTMLとCSSを読めるようになってから、もうそろそろ2年になります。
まだまだ勉強することはたくさんありますし、できるようにならなければいけないことも多いのですが、ディレクターとして、あるいはジュニアPMとして、「こうしたらエンジニアも私も超楽なんじゃない？」と考えることは、どんなに忙しくてもやめないようにしています。（っていうようなことを以前何人かのエンジニアの先輩に言ったら、「PMの鏡」「素晴らしい」「大好き」とたくさん褒めてもらいました）
これからも、エンジニアと私がお互い楽になれるように私が取り組んできたことを、少しずつこのブログに書き起こしていくので、目に留まったときにはぜひ読んでいただければと思います。次回は「Figmaをどうやって独学で攻略したか」とか書いちゃうかもしれません。Figmaユーザーの皆さん、乞うご期待！
