誰かに見てもらうための、簡単なデザイン

《読んだ本》現場のプロが本気で教えるHTML/CSSデザイン講義

ヤフー株式会社の方々が書いた、HTML/CSSを使った本格的なサイト制作の本「現場のプロが本気で教えるHTML/CSSデザイン講義」を読みましたのでレビューです。

IMG_4533_top

内容としては、入門書…なのですがほんとの初心者さんにはちょっと敷居が高いかもしれません。
JavaScriptやPHPを書くことはないのですが、CSSはSassを利用して書いていき、この辺がしっかり解説してあるので、サイト制作経験者で特にSassを使ったことがない…といった方にぴったりな本だと思います。

HTML/CSSでサイト制作をしたことがある人向け

この本は、デザイン講義というタイトルがついていますが、Photoshopなどを利用してデザインカンプを作るという内容ではなく、がっつりコーディングです。コードを書く量は結構多いと思います。
写真メインのおしゃれなカフェサイトを作っていくのですが、デザインカンプ自体はすでにあって、それを元にコーディングしていく様子が解説されています。

HTML/CSSは勉強したけど、1本まるまるサイト制作を実践したことがない…という方には少し掴みにくい内容かもしれません。
とりあえずサイトがほしい、すぐに作りたい、なるべく簡単なコードで、と思っている方にも不向きです。
コードサンプルなどダウンロードできますし、Sassの導入の仕方や基本について詳しく書かれているので、サイト制作を1本まるまるやったことがない方が全く分からないことはないと思いますが…こう…なんというか…専門用語の解説等はありませんし、コードも長くがっつりコーディングするので、ある程度コーディングに慣れていて、サイト制作の勘みたいなものがあった方が理解しやすいと思います。
Sassを使うことを想定し、また変更に強くメンテナンスもしやすいホームページのコーディングをすることをテーマにHTMLやCSS(scss)は書かれています。
ですので、とりあえずホームページ作ってみたい!というよりはもう一歩先に踏み込んだ内容で、ただ頭からコードを書いていくのではなく、変更があったり他でも使えそうなパーツを作って、色々なページで応用したり、また手間をかけずに変更していく…というプロの手法が解説されています。
趣味で作るというよりは、がっつり商用で効率アップを目的としたような内容なので、これからWebデザイナーやコーダーで食べていきたい人(?)のステップアップに役立ちそうな内容です。
ちなみにレスポンシブ対応でスマホサイトも一緒にコーディングしていきます。

SassとBEMがこの本の重要な要素

この本で重要なのは「Sass」と「BEM」で、最初から最後までこの2つを使って進めていくので、これを理解しないと進めにくいです。
解説自体はしっかりしてあるので、分からないことはないと思います。
SassはCSSを便利に書くための記法で、利用するためには使っているパソコンの環境を整えなければなりませんが、整え方についてもちゃんと解説されています。ちなみに黒い画面(コマンドプロンプト/ターミナル)で設定していきます。くろいがめんはこわいですが、手順はしっかり解説されてあるので多分大丈夫です。

BEMですが、これは私は使ったことがなかったのですが(類似する考え方のSMACSSは聞いたことくらいはある)これはCSSの設計手法らしいです。
個人で自由にやっていると、CSSのidやclass名などを思いついたままにつけてしまいがちですが、BEMという手法(命名規則)に則ってidやclass名をつけることによってメンテナンスしやすく、また他の人にも分かりやすいようなコードを書くということです。
これに合わせて「コーディング規約」もあり、この規約に沿ってコーディングしていきます。インデントは半角スペース4つとか、シングルクォートは使わないとか、そういったコードの書き方の規約です。
BEMも、コーディングの考え方と規約みたいなものなので、そのルールに則ることで誰が見ても分かりやすいコードを書いていきます。
こういったものは特にチームで作業する時に有効なので、個人でやる時も決めておくと後々楽ですが、将来チームで制作をする予定がある方などは特にしっかりと勉強しておいて損はないと思います。
こうやって書いていると、やっぱりこの本はがっつり商用サイト向けだなー…と思います。

頭からコーディングするのではなく、パーツ分けをする

HTML/CSSの書き方の本は沢山ありますが、大体は頭から、もしくは大枠を作ってから中身を書いていくタイプのものが多いかな?と思います。
この本は、まずデザインカンプを見てそれぞれ大まかなパーツに分け、そのパーツ(Block)にclass名を振り、その中に入る要素(Element)を分けてclass名を振り、振ったclassもしくはid名を使ってコーディングしていく…という、まずは細かな部分の設計とclass名(命名規則)を考えてからの作業となります。つまりは設計とコーディング法を先に考えることになります。
すぐに物が欲しい人でしたらこの辺は面倒に感じる部分かもしれませんが、先に設計しておくことで後々メンテナンスに強いサイトが出来上がります。
かといって部分部分を見て全体が分かりづらいのかと言えばそうでもなく、この辺を考えてからはHeaderからコーディングしていくので、作業的には分かりにくいことはないと思います。
最初に分けたBlockとElementは、後々別のページなどでそのまま使ったりもしますので、ここさえしっかり考えていれば後はコーディングしやすい感じになっています。

floatではなくflexレイアウト

この本の特徴、もう1つ。それはサイドバーとか要素を寄せる時にCSSのfloatを使わないってことです。
メニューでリストタグでマークアップしたものを横並びにしたい時とかfloat使ったりするのが主流(だったと思う)でしたが、その辺も全部flex boxという概念で作られています。
flex boxはCSS3が出た当初からあった概念らしいですが、CSS3で書かれている技術書とかにも出てきてる様子はあんまり見たことなかったです、私は…。
flex boxの主な使い方や概念は図解されていて、非常に分かりやすいです。flexプロパティを使うことによって、要素を簡単に均等に並べたりすることができ、レスポンシブなサイトが作りやすくなります。
これに加えて、CSS(scss)で割合を使って幅指定をしたり、加減乗除を利用したりすることで、スマホで見てもパソコンで見ても自動的に幅を割り出して表示してくれる便利なCSSが出来上がったります。
この辺は実際何度かやってみないと感覚が掴めなさそうですが、入門としては十分なくらい解説されています。
floatはほぼ使いません。

この他にもアイコンフォントの導入の仕方やメディアクエリの効率的な書き方なども書いてあって、パソコンだけではなくスマホサイトのことも十分に考えられた、今の時代に即したサイト制作ができる本です。
Sassを使ったり、コーディング規約を考えたりなど下準備や確認事項が多い分、この本は読むのも実践するのも時間がかかると思います…。そして途中でこんがらがって挫折もしてしまうかもしれません。
しかしなんとなくサイトを作ってるという状況から脱却し、大きなチームに属した時にでも通用しそうな手法を身につけられそうです。
ヤフーの中の人はこうやってサイト作ってるんだな…と、第一線のプロの手法を垣間見られる貴重な機会でもありました。

最近WordPressの便利な機能ばかりにお世話になってて、がっつりコーディングしてない私でも読めて勉強になります…というか、ステップアップにぴったりでした。

それでは!Have a nice design!!


  • アシベ

    こんにちは、私もSassのコーディングなどについてはピンク本などでメリットなどはなんとなく理解していましたが、実際にさぁやってみようとなるとパーツわけがめんどくさいとなり結局直打ちでした。でもこの本をみながら実際にやってみると慣れてしまえばかなり便利なんだと少しはわかってきました。

    flexに関しては横並びとかは便利だけどブロックの高さが同じになってやりにくいと感じてましたが、BEMのようにしっかりと分けていればそんな心配はなさそうだと実感、これを読むまで(display:table)で横並びをしてたりしました(笑い)

    まだ本は半分くらい読んだ程度ですけど、引っかかるポイントなどを適切に説明してくれているのでとても勉強になりますね!

    ※数年前から貴サイトを訪問させていただいてます。デザインに関してのノウハウが学べて便利です。これからも頑張ってください