HTML/CSS最短勉強法！素人が5日でWebサイトをデザインするためにやったこと

まのじろう　a.k.a　むぜった



はじめに
こんにちは。前々回「Webサイトを作りたい人へ。一歩踏み出すために知りたい3つのこと」の記事にて、Webサイトを作る前提のようなお話をしました。 そこで今回は具体的にHTML/CSSとサイトデザインに関する勉強法を書きたいと思います。

Webサイトを作る上で、デザインはどうしても避けては通れません。 HTML/CSSはプログラミングとして語られることが多いです。 僕がそうだったように、デザインセンスもないし、プログラミングもわからない、となるとハードルが高く感じてしまいますね。

しかし、実際は僕ら素人が0からWebサイトをデザインする必要はないですし、HTML/CSSはアルゴリズムを組むこともないので、プログラミングというほどの物ではありません。 始めてしまえば意外とあっさりとできてしまいます。

今回は僕が5日でこのサイトのデザインを作った際の勉強法を紹介します。 基本的には未経験でこの道のプロを目指すわけではない方に向けて、HTML/CSSの勉強法を書いていきます。

もくじ
参考書について
お手本となるサイトを選ぶ
デザイナーさんのスライドを選ぶ
SassとCompassの導入
IE対応
便利なChromeエクステンション
参考書について
いきなりですが、HTML/CSSの勉強に当たって参考書は必須ではありません。

はじめに述べたように、HTML/CSSはアルゴリズムを組んだりするわけではなく、タグなどを「記述」していくだけです。 実現したいものに則したHTMLタグやCSSプロバティを知っているかどうかの世界です。 なので、参考書に従って体系的に学ぶよりかは、その都度Google先生に聞くのが最短ルートだと思います。

とは言え、HTML/CSSのイメージもなしに始めるには難しいと思うので、僕の読んだ参考書を挙げます。 よくわかるHTML5＋CSS3の教科書

この本を半日ほどで全部読み流します。 この時手を動かして一々試す必要はありません。 HTML/CSSがどんなものか、簡単そうだというイメージができればOKです。

お手本となるサイトを選ぶ
参考書を必要としないなら、何を参考とするのか？
それはすでに出来上がっているWebサイトです。 まずはあまり深く考えずに、参考サイトのトップページを模写して構成だけでも再現してみましょう。 そうするだけである程度HTML/CSSが書けるようになります。

僕はChromeのデベロッパーツールでElementsタブを見ながら、各要素で使われているHTMLタグやCSSプロバティを確認し、知らないものは都度調べ、自分のサイトでも使ってみるということを繰り返して覚えました。 最初はCSSの挙動が思い通りにならずに苦戦しましたが、トップページを作り終えることには慣れることができました。 とにかく1ページ作ってみることをオススメします。

また、UXに精通していない人が一から構成を作るとなると、多くの場合ユーザビリティを損なってしまうでしょう。 そういう観点からも、うまくいっている既存のWebサイトを参考にすることは初学者には最適な方法だと思います。

お手本とするサイトを選ぶ際は、自分の作っているサイトと同じ分野のサイトを選ぶと良いでしょう。 例えばMonosyの場合は、ショッピングサイトや価格比較サイトから選ぶのが良いですね。 この手のサイトは、トップページ‐検索結果ページ‐商品ページといった構成で、検索結果の左サイドメニューで条件に応じた絞り込み検索ができるといった王道パターンが存在します。 素人はまずは王道パターンを模倣し、アレンジした場合はアクセス解析で数値をチェックして改善か改悪かを見極めていくのが良いと思います。

もしお手本とするサイトが決まっていない場合は、以下のサイトなどから探すと良いと思います。 こちらはカテゴリでわかれているので、自分のサイトと同じカテゴリの王道パターンがないか探してみましょう。 ikesai.com

僕がつまずいた部分で、「CSSリセット」というものがあります。 これはブラウザごとにデフォルトのCSSがあって、デザインが一貫しないという問題に対処するために、ブラウザのデフォルト値を無効化するCSSを最初に書くことです。 僕はこれを知らずに始めたので、お手本サイトと同じCSSを書いているのにデザインが合わないという事態にハマりました。

また、最近ではリセットではなく、「Normalize」というものもあります。 TwitterBootstrapなどはこれです。 もしリセットで合わない場合は調べてみてください。

デザイナーさんのスライドを選ぶ
続いて参考にするデザイナーさんのスライドを決めましょう。 お手本サイトの丸パクリというわけにもいきませんし、配色などはアレンジしたい場合もあるでしょう。 ここでは僕が参考にしたスライドを紹介します。

僕が参考にしたのはこちらのスライドのみです。 タイトルからズルいです。少ない手間でズルしたいですね、はい。


デザインに関するスライドはたくさんあって、センスのない僕からするとすべて輝いて見えるのですが、あえて一人の方のものだけに絞りました。 これは僕の憶測なのですが、デザイナーの方々は基本理論にそれぞれアレンジを加えた、独自の体系を持っているのではないかと思います。 その体系を壊し、いいとこ取りしてより良いものを作るのは、素人には無理だろうと思って絞りました。

ただし、上のスライドと配色などは合わせ技だと思うので、以下の有名なスライドなどを参考にすると良いでしょう。


ノンデザイナーのための配色理論 from tsukasa obara
SassとCompassの導入
先のスライドでも出て来ますが、CSSを書く上でSassとCompassはオススメです。 書くのが楽・管理が楽・表示速度アップにつながる、と至れり尽くせりですので、是非導入しましょう。

管理が楽・表示速度アップにつながる、という点に少し補足します。 商用サイトでは各ページのコンポーネント単位でCSSファイルを分けている状況を良く目にします。 コンポーネント単位で分けるとファイルが巨大化しないため、修正・追加がしやすくミスが減るのですね。 しかし、Webページを表示する際に読み込むファイル数が多くなってしまい、表示が遅くなってしまいます。

そこでSassでは、コンポーネントごとにファイルを管理しつつも、CSSファイルを作成するタイミングでひとまとめにしてくれる機能があります。 またCompassの設定では、CSSファイルを改行等の無駄をなくした形にしてくれるなど、ファイルサイズの削減も手伝ってくれます。 そのため、SassとCompassを使うことで、速度を犠牲にせず、楽にCSSを管理できるのです。

SassとCompassの学習コストは極めて低いです。 CSSとほとんど変わらないと思って差し支えないでしょう（ここではSassは厳密にはSCSSという記法）。 導入と学習にはドットインストールだけで十分です。 Sass/SCSS入門 Compass入門

これからCSSを始めるという人は、SassとCompassも必需品だと思って取り組むと良いでしょう。 また、Compassには前述したCSSリセットを追加する機能もありますので、既存サイトをお手本にする場合にも便利です。

IE対応
Webサイトデザインで頭を悩ます問題はブラウザ間のCSS対応状況の違いです。 特に旧式のIEではCSS3に対応しておらず、CSSだけでモダンなデザインをするのは困難です。 ここではCSSのブラウザ対応のためにやったことを紹介します。

IEに限らず、CSS3の一部に未対応なブラウザやベンダプレフィックスをつける必要のあるブラウザがあります。 ベンダプレフィックスとは、CSSで今後採用される予定の機能を先取りして使うためのもので、ブラウザごとに記法が決まっているので覚えておきましょう。 この対応状況を調べるのには「caniuse.com」を使いました。

続いて旧式のIEへの対応ですが、まずは旧式のIEで表示確認をする必要があります。 色々なツールがあるようですが、WindowsPCをお持ちの方はIEの開発者ツールを開き、ブラウザモードを変更するだけで、IE7~IE9まで（筆者使用時点）の確認ができるのでオススメです。

IE対応するについては以下の記事が参考になります。 外部ライブラリを使う・独自のプロパティを使う・CSSハックを使う、という3つの方法があると覚えておけば良いでしょう。 いざ使うときにはそれぞれの手法を調べてみてください。 CSS3を使うにあたって知っておきたいIE対策のまとめ

また、CSSだけでなくHTML5にも旧式IEは対応していません。 HTML5のタグを旧式IEでも対応させるのには、「html5shiv」を使いました。 JSファイルをダウンロードして、サーバにアップするだけで簡単です。

便利なChromeエクステンション
最後にサイトのデザインを作る上で、僕が使用したChromeエクステンションを3つ紹介します。

colorZilla
colorZillaを使うとWebサイトで使われているカラー情報を取得することができます。 お手本サイトなどで使われている色を、一々CSSやデベロッパーツールで探すのは面倒というときに重宝します。 スポイトでピンポイントで取得することができます。 colorZilla

MeasureIt
MeasureItはWeb上の定規ですね。 colorZillaと同様、お手本サイトなどでサイドカラムやマージン幅を知りたいときに、エクステンションからささっと調べられます。 マウス操作なので正確な値を取得するのは難しいですが、どのサイトもキリの良い数字を使うので、このくらいで十分でしょう。 MeasureIt

Window Resizer
Window Resizerはその名の通りブラウザの画面サイズを、iPhoneやラップトップ、デスクトップの解像度にぴったり合わせてくれるエクステンションです。 それぞれの解像度のガジェットで、ブラウザを最大表示にした場合にどのように見えるかを確認できるので、よりユーザ視点でデザインを確認できます。 またレスポンシブデザインを作る際にもiPhoneサイズは重宝すると思いますが、iPadなどのタブレットサイズはないのがちょっと残念。 Window Resizer

おわりに
最後までお読み頂きありがとうございました。 デザインを本気で取り組むとなると職人技ですが、それなりのデザインのサイトを作るためのHTML/CSSを習得するのは簡単です。 今回の記事で参考になる部分があれば、是非お試しください。

また前回の「【SEO対策】リリース後2週間で10万PV突破！サイト製作段階で絶対に行いたい2つの施策」では、HTML/CSSに関わる施策を1つ紹介しています。 SEOも意識してサイトを作るようでしたら、是非ご覧ください。 次回はPHPの最短勉強法を書こうと思います。

今後ともどうぞ宜しくお願い致します。


この記事が気に入ったらサポートをしてみませんか？