読者です 読者をやめる 読者になる 読者になる

大阪でベンチャーやってます

ベンチャー/スタートアップ(と時々趣味)に関する記事を書くブログ

1からのCSSフレームワーク

ベンチャー ビジネス 起業日記 デザイン

f:id:ktadaki:20150807174559j:plain


WordPressでWebサイト構築しようと様々なテーマを探していたのだが、どれもしっくり来ない。マガジンタイプのテーマを購入してみたが、やはり既存のテーマである。カラム数であったり、表示するコンテンツであったり、コンテンツ間のスペースであったり、様々な制約がある。『内容をテーマの設計に合わせてしまおう』となればよいが、新しいサービスを始めるからには、ああしたいこうしたい、という思いが出てくるものだ。


WordPressのテーマはカスタマイズ可能だ。改変が許されているテーマであれば、デザインが崩れないようにカスタマイズすればよい。


とはいえ、カスタマイズするにはゴリゴリとCSSをいじらなければならない。WordPressウィジェットをはめ込むだけの作業から、CSSのコーディングとなれば、一気に難度が上がる。


教本をチラチラと眺めるが、うーん…。


こんなに頑張ってコーディングするんだったら、既存テーマを使わなくても良いんじゃない? むしろ、自分でCSS書いたほうが早くない?


というわけで、WordPressのテーマを使うのは止めて、代替案を探していたところ、たどり着いたのがCSSフレームワークである。

CSSフレームワークって?


端的に言えば、ナビバーやボタンといったWebの基本的なコンポーネントに予めデザインが施されたCSSファイルとJavaScriptファイルの一式である。 "navbar"だとか、"jumbotron"とか名前のついたclassを指定してタグで囲んでいけば、あっというまに素敵にデザインされたWebサイトが出来上がる。


Twitter社が提供しているBootstrapが最も有名で、日本語サイトも充実している。他にもFoundationMaterial Design LiteなんていうCSSフレームワークもある。モノが違えど、考え方は一緒だ。どのCSSフレームワークにも素敵なデザインのクラスが沢山用意されているので、htmlファイルから呼び出すだけで、統一されたデザインのWebサイトを構築できる。


筆者は現在構築中のサイトでBootstrapを用いることにした。流行りのCSSフレームワークなので、『Bootstrap臭がする』などと書かれることもあるが、そこはカスタマイズするなりして、デザインをいじっていけばよいだろう。以下のような教本が出ているのも嬉しい。


CSSフレームワークを使う利点


CSSフレームワークを使う利点の一つは、これらのクラスが予めレスポンシブにデザインされていることだ。スマホ画面サイズ、通常PC画面サイズ、大PC画面サイズの横幅に合わせて、異なるスタイルが適用するように予め設計されている。CSSフレームワークを用いてhtmlファイルを書けば、自動的にレスポンシブ対応できる。


サイト閲覧時にPCよりもスマホを利用する人が大半だ。CSSフレームワークのクラスを使えば、画面サイズ毎に1からスタイルを仕上げていく手間が省ける。


もう一つの利点はグリッドシステムだ。


Webサイトはコンテンツをページに配置することで作り上げていく。一番上にはナビバーがあって、その下にスライダーがあって、その下にお知らせがあって、という具合だ。


綺麗なデザインは、コンテンツが秩序に従って配置されている。コンテンツの端が綺麗にそろっていて、見やすいように余白が一定量確保されている。


CSSフレームワークのグリッドシステムを使えば、簡単にコンテンツを配置できる。ページ横幅が12分割されていて、『このコンテンツは7マス、次のコンテンツに5マス使ってください』と指定すれば、7:5の比率の2カラムのデザインが簡単にできる。また、rowという行指定用のクラスを用いれば、『このコンテンツには7マス使って、次のコンテンツ3個を5マスの横幅で縦に並べてください』という指定もできる。


MediaWiki Bootstrap Skin - Grid Systemflic.krphoto by Aaron Parecki


とはいえ、コンテンツの位置を調整するためのmargin、paddingといったCSSの基本が分からない初心者にはちょっと難しい。クラス指定が重複してしまって、スタイルがうまく適用されないなんてことも茶飯事だ。筆者は以下の本のグリッドシステムの説明を手元におきながら、ゴリゴリとコーディングしている。


Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Webサイト構築のハードルは低くなっている


カスタマイズとか大変そうだな、CSSを勉強するのに時間がかかるな、とか思っていたのだが、CSSフレームワークは非常にとっつきやすい。面倒くさがりの人は、Bootstrapのページからファイル一式をダウンロードして、index.htmlファイルを作って、head情報を全部コピペして、body情報もコンポーネントのソースをコピペして作れば、あっという間にWebサイトが出来上がる。


ブログの普及に伴って、個人のWebページの数が莫大に増えたが、WordPressをはじめとするCMS、BootstrapをはじめとするCSSフレームワークが出てきたことで、ある程度カスタマイズされたWebページを作る人も増えてきている。


CMSCSSフレームワークの普及は、若しくは紙粘土で全てのパーツを作っていたのが、レゴのパーツを組み合わせて作れるようになった、そんなイメージである。0から全てを作れ、と言われると途方に暮れてしまうが、ある程度出来上がったものを組み合わせるのであれば、とっつきやすいし、どんどんイメージも湧いてくる。


とにかく、超初心者の筆者はBootstrapでデザインに励む毎日である。喫緊の課題は、いかに『Bootstrap臭』を無くすかだ。


でも、いわゆるフラットデザインって、そんなにバリエーションが無いんである。


ちなみに、筆者のデザインのテーマは"ロシアン・アヴァンギャルド"である。『え、何それ…』という人は、前田敦子のシングルCDのジャケ写を参照するように。


セブンスコード Type-A(多売特典付き:生写真予定)