以前 2018年を振り返ってウェブディレクターが勉強してメチャよかったツールや技術 という記事内に「効率良く再現性の高いコーディングを実現するCSSフレームワーク」というのを少し書きました。
「HTMLでコーポレートサイトの構築だけど、フレームワーク導入した方がいいか？」
「WordPressで作るウェブサイトにはフレームワークを導入できるのか？」
「ウェブサービスを構築するにあたって、フレームワークを導入するか悩んでいる」
フレームワーク導入のメリット・デメリット、そもそも導入が可能なのか、導入するにあたっての学習コストなど、上記のケースを考えるのに参考になるかもしれません。
目次
フレームワークとは
CSSフレームワークやフロントエンドフレームワークと呼ばれる、ウェブサイトやアプリ等で使われる要素（パーツ）ごとにCSSが定義されており、簡単に利用できるようになっているツールのことです。Twitterが提供しているBootstrapが有名なところですね。
他にはBulma, UIkit, Foundationなど、たくさんのフレームワークがあります。常に「今流行りのフレームワーク」というような記事が出現し、新しいフレームワークが消えては現れ、これから始める場合は「どれを選択すればいいか」というところから悩むことになります。
ちなみに、highfivecreateではBootstrap, UIkit, Foundationを試した結果、現在Foundationをよく利用するようになりました。
フレームワーク導入のメリット・デメリット
フレームワーク導入すれば万事解決！というのは全然なく、導入にあたりメリットとデメリットはもちろんあります。よく理解した上で選択しないと、あとで大きな過ちにつながることもありますので気をつけましょう。
メリット
安全でメンテナンス性の高いコード
テンプレートを使わずにオリジナルのデザインによるウェブサイトを制作する場合、PhotoshopやIllustrator等のデザインデータを元にHTML, CSS, JSを使ってページを構築していく流れが基本になります。
その場合、制作者個人のHTMLやCSS記法に左右されます。制作者が一人でその後のメンテナンスも同一人物が行うことが確定している場合はいいですが、複数人で行う場合や制作と運用が分かれる場合はルールに則ったコーディングが望ましいです。
また、デスクトップ / タブレット / モバイルへの各対応をゼロから設計するとなるとそれなりに工数がかかります。これを怠ると特定のデバイスで崩れが起きたりする可能性があります。
フレームワークを利用すると、厳格でわかりやすく設計されたCSSルールが設定されています。それを元に、デザインに合わせてブレイクポイントを変えたり、ベースとなっている色、フォントサイズ、margin/paddingの幅、tableなどの基本設定の値を変えるだけで済むことが多くなり、安全な構築かつ工数の低下にも繋がります。
よく使う動きやアニメーション等を備えている
サイト制作する上で、よく使うような要素として例えば以下のようなものがあります。
- トップページメインビジュアルに利用するスライダー（スライドショー）
- ヘッダーナビゲーションメニューにマウスオーバーすると表示される子メニューのドロップダウン
- ページ内でリンクするときにスムースに移動するスクロール
- ヘッダーメニューを固定するスティッキーヘッダー（フッターメニューも可）
- クリックで開閉するアコーディオン
- クリックで表示されるモーダルウィンドウ（いわゆるライトボックス）
- 複数要素を表示し切り替えができるタブメニュー
サイト制作する上で一通りの動きが揃っているため新しく定義する必要がありません。フレームワークが公開しているブラウザ対応の前提にはなりますが、「デスクトップで動くのにモバイルで不具合がある」ようなこともありません。
デザイナー不在でもある程度形にしたものを作れる
フレームワークがここまで普及した要因として、デザイナーがいない環境でもある程度形にしたものが作れるようになったことが大きいじゃないかと考えています。いままではデザインを起こして、それをもとにコーディングして…という流れでサービスを作っていきましたが、フレームワークができたことでデザイン作業を飛ばしてエンジニアがモックアップを作れてしまいます。
これにより先に動くものが作れるようになったので、まずは動くモックアップを作り、手にとってフィードバック対応し、動きが確定したあとでデザイン対応する…というような制作フローがとれるようになりました。よって制作スピードが早まり、初期から触ってフィードバックを得られているので、最後に仕様が大幅に変わるようなリスクも少なく劇的な制作フロー改善となります。
実際にこの制作フローを取り入れてウェブサービスを開発していますし、WordPressテンプレートを用いたサイト制作でも同じフローで構築しています。
デメリット
学習コスト
これはどうしてもつきまといますが、最初にある程度の学習するコストはかかります。
例えばjQueryを使ったことがあるとわかると思いますが、jQueryのようにCDNから必要なCSSやJSを読み込んで、という形で使えなくもないですが、本来の利用方法としてはテンプレートをインストールし、目的に応じてカスタマイズしていく方が、結果的に柔軟性のあって強力なフレームワークを利用できます。
そのためにはいわゆる「黒い画面」と呼ばれるツールを利用してインストールや設定、処理を自動実行するためにコマンドを叩く必要があります。「コマンドなんて叩いたこと無い」という場合は基本的な使い方を知る必要がありますが、コードを書いている方はもとより今はデザイナーでもわかっている方が断然いいですので、この機会に使い始めてはいかがでしょうか。
また、CSSはより便利に書ける記法であるSassを使って書くことをおすすめします。Sass自体は全く新しい言語というのではなく、CSSをさらに拡張した書き方というだけですので、CSSが書ければそれほど難しくはありませんし、CSSがそのまま書けるためまずはCSSだけを書いて初めても問題ありません。
ただ、Sassの便利さを知ってしまった場合、もうCSSには戻れないと思いますよ・・・とにかくメチャ便利です。
公式ドキュメントが英語
フレームワークは基本ワールドワイドで展開しているため、どうしても公式サイトは英語になります。日本語で解説してくれている有志ページもありますが、どうしても情報の鮮度が落ちますし、情報量が違います。英語がわからなくても、結局コードはアルファベットなので、サンプルをもとに触っていくのでも意外とできてしまうものです。
説明がわからなければその部分だけGoogle翻訳に入れればいいので、「英語だからわからない」として諦めるのではなく、トライしてみてはいかがでしょうか。
フレームワークを導入するといいケース
導入前に今回のプロジェクトにフレームワークを導入したほうがいいかどうかを検討しましょう。以下、今までの経験による個人的な考えですが、フレームワークを導入した方がいい場合とそうでない場合の一例です。
導入した方がいいケース例：
- 会社や店舗等の一般的なコーポレートサイトやブランドサイト
- WordPressで制作するサイト（オリジナルデザイン・既成テーマ）
- ウェブサービスやアプリのモックアップ制作
導入しないほうがいいかもしれない、導入してもメリットが大きくないケース例：
- 各ページのデザイン一貫性がないサイトや1px単位でデザインをこだわるケース
- デスクトップ・タブレット・スマホのデザインが全部別等のフレームワークが適用しづらいデザイン
- 1枚もので画像がメインのランディングページ
- デスクトップだけのウェブサイト
- 表示スピードを早くしたいため余計なものを読み込みたくない場合
一般的なサイトであればトップページ＋下層ページという構造にわかれることが多いため、必要なテンプレートは2つやおおくても4,5個と限られると思います。また、見出しや本文、リストやテーブルといった要素も限られるため、予め要素を定義していれば大抵の表現は可能です。
WordPressで構築する場合も同様で、オリジナルデザインだからフレームワークを使えないというのは全くないです。同様に、WordPressやサードパーティが用意している既成テーマを使ったり、有料テーマを利用する場合でもテーマ側で設定しているCSSを調整する必要はありますが、フレームワークを利用することが可能です。
例えば以下のサイトはフレームワークを利用して制作したサイト一例です。
- 昭和ルーフリモ株式会社 – 有料WordPressテーマ+Foundation
- 世田谷コミュニティ財団 – サードパーティWordPressテーマ+Foundation
- フクフクプラス – WooCommerce公式テーマ+UIkit
- 株式会社オン･ザ･プラネット – WordPress公式テーマ+Foundation
あまりないかもしれませんが、各デバイスごとのデザインが大きく異なるケースでは使いにくいかもしれません。例えばデスクトップでは5カラム表示、モバイルでは2カラム表示にするといった、「要素は同じだが表示方法が変わるケース」であればレスポンシブウェブデザインとしてフレームワーク側に便利な設定がありますが、そもそものデザインが異なる場合などは同じHTMLを利用できないため、別のHTMLやCSSを書くことになるため、フレームワークの恩恵をあまり受けられません。
細かい範囲で1px単位でデザインをこだわって見た目の調整をしたい場合も、フレームワークで設定されたCSS設計を各ブレイクポイントごとに上書き設定する必要があったりと同様です。
また、フレームワークは多少なりともJavaScriptやCSSの読み込みがあるため、圧縮して軽くなっているとはいえ、貧弱なサーバー環境しか使えないという場合は表示スピードに影響がある場合があります。（実際にそういうケースがありました）
そのときは画像をすべて軽くし、cssやjsもすべて圧縮して軽くする、Sassのマッピングデータを削除するなどして対処しましたが、そういったサイトを運用していく場合は都度対応が必要となるため結構手間になります。
フレームワークを採用するサイトのデザイン時に気をつける事
フレームワークを採用するサイトのデザインを行う場合は、全ページのデザインの一貫性があって、各デバイスの各要素デザインをしっかりと定義されていれば大きな問題はありません。
- 見出しやボタン、強調する要素など、ページごとに別々にするのではなくサイト全体で利用するよう定義する
- 各デバイス毎の要素間の余白を一定にするとコーディングしやすい。例えばページAではデスクトップの上下が40pxでスマホが20pxだが、同じ要素でページBの場合はデスクトップの上下が70pxでスマホが35pxなどの場合はCSS定義が必要のため、意味がなければ同じに設定する
- 工数上、デスクトップとスマホしかデザインを用意できない場合のタブレットの扱いをどうするのか決めておく。例えばグローバルメニューはスマホと同様だが、その他は基本的にデスクトップと同様にし、レイアウトが崩れる部分はスマホに合わせる、など
デザイン段階からコーディング担当者とこのあたりを話し合っておくと安心です。あとから問題が出現すると関係者全員にとってよくないですからね・・・
フレームワークは強力な武器になります。しかし、便利なものはときに想定外の結果も生み出しますので、どのようなメリットとデメリットがあって、影響がありそうか理解した上で使用すると、安心して利用でき、結果的に安全でメンテナンス性の高い構築に繋がります。
