Webデザインシステムはじめの一歩

CSS フレームワーク活用のタイミング

Bootstrap、Foundation をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex のように Flexbox を活用したグリッドシステムだけといった UI の特定要素のみを提供しているツールもあります。

CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。

プロトタイプ作成

Photoshop や Sketch のようなグラフィックツールで Web サイトをデザインしても、Web ブラウザで見るまで実際どうなるか分からないことがたくさんあります。例えばテキストの描画ひとつとっても、グラフィックツールと Web ブラウザでは異なります。少しでも早く Web ブラウザでデザインを検証したい場合、CSS フレームワークは非常に便利です。UI コンポーネントも豊富に揃っているので、ほとんどのサイトは CSS フレームワークのほうで用意されているもので作れます。

また、Jetstrap や Bootstrap Studio のようにコードを一切書かずに Bootstrap サイトを作るサービスもあります。HTML ベースのプロトタイプを作成することは数年前では困難でしたが、今は随分敷居が下がってきました。

デザイナーがいない場合

社内にデザイナーが在中していることが理想的ですが、場合によってはそれが無理なことがあります。ある程度の見た目を保証してくれる CSS フレームワークは、デザイナーなしでも形にすることができる便利なツールです。

デザインを外注するという手段もありますが、その方と中長期的な関係が築くことができない場合は CSS フレームワークにしておいたほうが良い場合があります。運用を通して新しい UI コンポーネントが必要になったときに早急に対応できるデザイナーがいないのであれば、使えそうな要素があらかじめ揃ってるフレームワークを利用したほうが良いでしょう。

Webサイトの優先順位が低い場合

良い Web サイトを制作することが必ずしも最も重要であるとは限りません。アプリをはじめとした製品を開発・運用する企業であれば、Web サイトより製品そのもののに力を入れるべきです。Web サイトを含めて、すべてを高品質にしたくても、リソースが限られていることがあります。そうした場合、CSS フレームワークを活用して素早く Web サイトを立ち上げるのも手段のひとつ。特に Bootstrap や Foundation のような CSS フレームワークは、テストもしっかりされているので思いがけない大きなバグに遭遇することは少ないです。

デザインとしてのCSSフレームワーク

CSS フレームワークを活用するメリットはありますが、自社のデザインガイドラインを他社がつくったフレークワークに任せるのは理想的ではありません。ありものの CSS フレームワークを利用する懸念点は 2 つあります。

全部入りの危険性

Bootstrap 3.3.6 は 432 kb、Foundation 6 は 336 kb あります。レイアウト要素（画像は含まれない）だけで、これは大きなファイルサイズです。Bootstrap も Foundation も機能を絞り込んでダウンロードできますが、必要な要素を選んでいるうちにファイルは肥大化していきます。また、バージョンが上がる度にどの機能をどう使っているのか判別しておく必要があります。様々な UI コンポーネントがあらかじめ揃っている分、ファイルサイズという負債がついてきます。

Web サイトやアプリケーションの種類によって、CSS フレームワークで用意されているコンポーネントを必要としない場合があります。また、CSS フレームワークの枠組みで UI を考えてしまう可能性も少なからずでてきます。自分たちが本当に必要としているコンポーネントは何かを整理するためにも、コンテンツタイプや機能を洗い出しから始めたほうが良いでしょう。

チームに合う考え方を導入する

似たようなコンポーネントでも CSS フレームワークによって呼び名が異なります。例えば Bootstrap では Navbar と呼んでいるものは、Foundation では Top Bar と呼びます。また、同じ呼び名でも混乱を招くケースもあります。Bootstrap でも Foundation でも同じように「label」と呼んでいる UI 要素がありますが、HTML 要素の <label> と名前が同じなので使い方に困ることがあります。

クラス名や UI の名称をみるだけでも、作り手の Web サイトやアプリへの取り組み方が少し分かります。UI だけでなく、コンテンツブロックや、画面遷移など、チームメンバーで共有している独自の言葉使いや組み合わせ方があります。自分たちが開発しているサイトを CSS フレームワークの言い回しに合わせるという選択肢はありますが、そこからチームで共有している言葉に直すという手間が発生します。

自社CSSフレームワーク制作のヒント

自社で CSS フレームを開発するのであれば、Bootstrap や Foundation のような汎用性の高いものではなく、企業が公開しているものが参考になります。どのようなクラス名を付けているのか、なぜそのような UI コンポーネントを必要としているのかを調べるだけでも学びはたくさんあります。例えば以下の CSS フレームワークは一見の価値があります。

• Salesforce Lightening Design System
• Primer – GitHub
• MailChimp Patterns
• Ubuntu Web Style Guide

他社の CSS フレームワークを見ると、非常に敷居の高いもののように見えますが、最初からすべてが揃った完璧なフレームワークは必要ありません。まず色を合わせるだけでも大きなステップアップになります。Web サイトだけでなくアプリや印刷物など多方面で一貫性のある見た目を提供しなければならないことがあるので、そのなかで合わせることができる要素（例えば色）から始めるのは得策でしょう。

現行サイトであれば、UI 要素をすべて洗い出すことから始めるのも手段です。コンテンツの現状を知るためにコンテンツ・インベントリーを作るように、UI も似たように現状を知るプロセスが必要です。全体を見渡すことで分類の仕方のヒントが見えてくることがあります。

まとめ

Web サイトは、様々な種類のコンテンツと機能によって構成されています。パソコン以外からも Web サイトへアクセスすることが当たり前になった現在、レイアウトという大きな枠組みを主軸にしたデザインでは弱く壊れやすいです。サイトを構成している様々な要素に注目し、それらが柔軟に組み合わすことができるデザインシステムは今後ますます重要になります。

そうしたなか Bootstrap や Foundation は小さくデザインを分解をして考えるためのヒントを与えてくれますが、成果物として利用するかは注意が必要です。CSS フレームワークを使うことのデメリットを理解し、少しずつ自社のデザインシステムの構築ができるように働きかけたほうが良いでしょう。