• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / CSSフレームワークを採用するべきかしないべきか、メリットやデメリット等の考察

CSSフレームワークを採用するべきかしないべきか、メリットやデメリット等の考察

池田祐太郎 | 2020年3月23日 更新 | 2019年5月11日 公開 コメントを書く

以前 2018年を振り返ってウェブディレクターが勉強してメチャよかったツールや技術 という記事内に「効率良く再現性の高いコーディングを実現するCSSフレームワーク」というのを少し書きました。

「HTMLでコーポレートサイトの構築だけど、フレームワーク導入した方がいいか?」
「WordPressで作るウェブサイトにはフレームワークを導入できるのか?」
「ウェブサービスを構築するにあたって、フレームワークを導入するか悩んでいる」

フレームワーク導入のメリット・デメリット、そもそも導入が可能なのか、導入するにあたっての学習コストなど、上記のケースを考えるのに参考になるかもしれません。

目次

  • 1 フレームワークとは
  • 2 フレームワーク導入のメリット・デメリット
    • 2.1 メリット
      • 2.1.1 安全でメンテナンス性の高いコード
      • 2.1.2 よく使う動きやアニメーション等を備えている
      • 2.1.3 デザイナー不在でもある程度形にしたものを作れる
    • 2.2 デメリット
      • 2.2.1 学習コスト
      • 2.2.2 公式ドキュメントが英語
  • 3 フレームワークを導入するといいケース
  • 4 フレームワークを採用するサイトのデザイン時に気をつける事

フレームワークとは

CSSフレームワークやフロントエンドフレームワークと呼ばれる、ウェブサイトやアプリ等で使われる要素(パーツ)ごとにCSSが定義されており、簡単に利用できるようになっているツールのことです。Twitterが提供しているBootstrapが有名なところですね。

現在のVerはBootstrap 4となり、利用者が多いのが特徴

他にはBulma, UIkit, Foundationなど、たくさんのフレームワークがあります。常に「今流行りのフレームワーク」というような記事が出現し、新しいフレームワークが消えては現れ、これから始める場合は「どれを選択すればいいか」というところから悩むことになります。

ちなみに、highfivecreateではBootstrap, UIkit, Foundationを試した結果、現在Foundationをよく利用するようになりました。

モバイル端末に最適化する設計のFoundation。現在のVerは6。

フレームワーク導入のメリット・デメリット

フレームワーク導入すれば万事解決!というのは全然なく、導入にあたりメリットとデメリットはもちろんあります。よく理解した上で選択しないと、あとで大きな過ちにつながることもありますので気をつけましょう。

メリット

安全でメンテナンス性の高いコード

テンプレートを使わずにオリジナルのデザインによるウェブサイトを制作する場合、PhotoshopやIllustrator等のデザインデータを元にHTML, CSS, JSを使ってページを構築していく流れが基本になります。

その場合、制作者個人のHTMLやCSS記法に左右されます。制作者が一人でその後のメンテナンスも同一人物が行うことが確定している場合はいいですが、複数人で行う場合や制作と運用が分かれる場合はルールに則ったコーディングが望ましいです。

また、デスクトップ / タブレット / モバイルへの各対応をゼロから設計するとなるとそれなりに工数がかかります。これを怠ると特定のデバイスで崩れが起きたりする可能性があります。

フレームワークを利用すると、厳格でわかりやすく設計されたCSSルールが設定されています。それを元に、デザインに合わせてブレイクポイントを変えたり、ベースとなっている色、フォントサイズ、margin/paddingの幅、tableなどの基本設定の値を変えるだけで済むことが多くなり、安全な構築かつ工数の低下にも繋がります。

よく使う動きやアニメーション等を備えている

サイト制作する上で、よく使うような要素として例えば以下のようなものがあります。

  • トップページメインビジュアルに利用するスライダー(スライドショー)
  • ヘッダーナビゲーションメニューにマウスオーバーすると表示される子メニューのドロップダウン
  • ページ内でリンクするときにスムースに移動するスクロール
  • ヘッダーメニューを固定するスティッキーヘッダー(フッターメニューも可)
  • クリックで開閉するアコーディオン
  • クリックで表示されるモーダルウィンドウ(いわゆるライトボックス)
  • 複数要素を表示し切り替えができるタブメニュー

サイト制作する上で一通りの動きが揃っているため新しく定義する必要がありません。フレームワークが公開しているブラウザ対応の前提にはなりますが、「デスクトップで動くのにモバイルで不具合がある」ようなこともありません。

デザイナー不在でもある程度形にしたものを作れる

フレームワークがここまで普及した要因として、デザイナーがいない環境でもある程度形にしたものが作れるようになったことが大きいじゃないかと考えています。いままではデザインを起こして、それをもとにコーディングして…という流れでサービスを作っていきましたが、フレームワークができたことでデザイン作業を飛ばしてエンジニアがモックアップを作れてしまいます。

これにより先に動くものが作れるようになったので、まずは動くモックアップを作り、手にとってフィードバック対応し、動きが確定したあとでデザイン対応する…というような制作フローがとれるようになりました。よって制作スピードが早まり、初期から触ってフィードバックを得られているので、最後に仕様が大幅に変わるようなリスクも少なく劇的な制作フロー改善となります。

実際にこの制作フローを取り入れてウェブサービスを開発していますし、WordPressテンプレートを用いたサイト制作でも同じフローで構築しています。

デメリット

学習コスト

これはどうしてもつきまといますが、最初にある程度の学習するコストはかかります。

例えばjQueryを使ったことがあるとわかると思いますが、jQueryのようにCDNから必要なCSSやJSを読み込んで、という形で使えなくもないですが、本来の利用方法としてはテンプレートをインストールし、目的に応じてカスタマイズしていく方が、結果的に柔軟性のあって強力なフレームワークを利用できます。

そのためにはいわゆる「黒い画面」と呼ばれるツールを利用してインストールや設定、処理を自動実行するためにコマンドを叩く必要があります。「コマンドなんて叩いたこと無い」という場合は基本的な使い方を知る必要がありますが、コードを書いている方はもとより今はデザイナーでもわかっている方が断然いいですので、この機会に使い始めてはいかがでしょうか。

黒い画面。画像はMacのターミナル。

また、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定義が必要のため、意味がなければ同じに設定する
  • 工数上、デスクトップとスマホしかデザインを用意できない場合のタブレットの扱いをどうするのか決めておく。例えばグローバルメニューはスマホと同様だが、その他は基本的にデスクトップと同様にし、レイアウトが崩れる部分はスマホに合わせる、など

デザイン段階からコーディング担当者とこのあたりを話し合っておくと安心です。あとから問題が出現すると関係者全員にとってよくないですからね・・・

フレームワークは強力な武器になります。しかし、便利なものはときに想定外の結果も生み出しますので、どのようなメリットとデメリットがあって、影響がありそうか理解した上で使用すると、安心して利用でき、結果的に安全でメンテナンス性の高い構築に繋がります。

メールコンサルティング
WordPress保守管理サービス

Filed Under: WordPress, 仕事のこと 関連タグ:ツール

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

MAMP の更新でパスワードを設定しているときに変更しないといけない箇所
2022年9月21日
タグ: MAMP, ツール
カテゴリー: TIPS
クラウドの検索順位チェックツール、Nobilistaを使ってみた感想(おすすめ)
2022年6月7日
タグ: SEO, ツール
カテゴリー: 仕事のこと
Foundation CLIのwatchで発生したエラーをnpm startで回避する方法
2022年3月24日
タグ: ツール
カテゴリー: TIPS

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.