webコーダーとしてCSSフレームワークを利用します。一時リセットCSSを使って一から作っていましたが、どう考えてもCSSフレームワークを使った方が早い！

かなり多くのCSSフレームワークを使ってきましたが、UIKIT3に落ち着いた理由を書きます。

今まで使ってみたCSSフレームワーク

1. Bootstrap
   • 確実にレスポンシブサイトを早く作るならこれ一択。けれどもDTPデザイナーがデザインしたwebデザインを表現するには向かなかった
   • CSSフレームワークを勉強にするには日本語のドキュメント情報がwebに多いため、勉強するのに役立った
2. Foundation
   • Sassを使いこなしていない人にはハードルが高い。情報量の多さ、レスポンシブのブレークポイントの調整が難しかった
   • アクセシビリティに強い、企業サイトに適している
3. Bulma
   • 初期によく使っていたが、当初はWordPressとの相性が悪く、WordPressが自動で書き出すCSSを上書きできないなど面倒が多かったので、静的HTMLの時に使っていた
   • 組み込みのJSコンポーネント無しなのも魅力の１つ
4. Pure CSS
   • WordPressのテーマ開発にとっても向いている軽量でシンプルなCSS。その昔、Yahoo！のサイトはこれで作られていたので安心して使えた。今は個人でアップデートされているのかな？
   • フレームワークというよりは、スタイルの補助ツールみたいなもの
5. UIkit
   • 行きついたCSSフレームワーク。適度なJSとアニメーション、ブレークポイントで一番カスタマイズしやすい

UIkit3とは？

軽量であることとモダンデザインであること、レスポンシブデザイン対応、多様なUIコンポーネント、モバイルフレンドリー、カスタマイズ性が高くデザインの拡張性に優れているCSSフレームワークです。

ドイツのYOOthemeがWebサイトやアプリ開発に作ったフレームワークで主にWebブラウザで使われます。YOOthemeのwordpress用のテーマを購入したことがありますが、サポートが早く、的確で、英語が全くできなく翻訳ツールを使ったやり取りでも十分、最後まで親身にサポートしてくれました。

UIkit3と他のCSSフレームワークの比較表

2024.06.01時点

UIkitの特徴

• 軽量 & 高速
  • Bootstrapなどと比べるとファイルサイズが小さく、動作が軽快。
    依存関係が少なく、純粋なCSSとJavaScriptで動作するため、読み込み速度が速い。
• 直感的なグリッドシステム
  • フレックスボックスベースの強力なグリッドレイアウトを採用。
    モバイルファーストで、簡単にレスポンシブ対応が可能。
• リッチなUIコンポーネント
  • ナビゲーション、モーダル、スライダー、アコーディオンなど、多彩な組み込みコンポーネントが用意されている。
  • 追加のJavaScriptライブラリを必要とせず、軽量なアニメーションや動的なUIを簡単に実装可能。
• カスタマイズ性の高さ
  • SCSSベースで設計されており、変数の上書きでデザインを簡単にカスタマイズ可能。
    クラスの命名規則がシンプルで、冗長なクラス指定が不要。
• Vanilla JavaScriptで動作
  • jQueryに依存せず、ピュアJavaScriptで開発されているため、最新のWeb開発環境に適応しやすい。

実際のプロジェクト事例

スタートアップ企業の公式WebサイトをUIkit3で開発。洗練されたデザインと軽量な構造により、高速なページ読み込みとモダンな見た目を実現。

実際のコードの内容はこんな感じです。

コードスニペット（Heroセクション）

<div class="uk-section uk-section-primary uk-light">
  <div class="uk-container">
    <h1 class="uk-heading-medium uk-text-center">次世代のデジタルソリューション</h1>
    <p class="uk-text-lead uk-text-center">最先端の技術であなたのビジネスを加速</p>
    <div class="uk-flex uk-flex-center">
      <a class="uk-button uk-button-default uk-margin-small-right" href="#">サービスを見る</a>
      <a class="uk-button uk-button-secondary" href="#">お問い合わせ</a>
    </div>
  </div>
</div>

コードスニペット（ダッシュボードカード）

<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">売上</h3>
            <p>¥1,200,000</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-primary uk-card-body uk-light">
            <h3 class="uk-card-title">ユーザー数</h3>
            <p>2,300</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-secondary uk-card-body uk-light">
            <h3 class="uk-card-title">新規登録</h3>
            <p>150</p>
        </div>
    </div>
</div>

コードスニペット（カウントダウンタイマー）

<div class="uk-section uk-section-muted uk-text-center">
    <h2>イベント開始まで</h2>
    <div uk-countdown="date: 2025-05-01T09:00:00+00:00">
        <div class="uk-grid-small uk-child-width-auto" uk-grid>
            <div>
                <div class="uk-countdown-number uk-countdown-days"></div>
                <div class="uk-countdown-label">日</div>
            </div>
            <div>
                <div class="uk-countdown-number uk-countdown-hours"></div>
                <div class="uk-countdown-label">時間</div>
            </div>
            <div>
                <div class="uk-countdown-number uk-countdown-minutes"></div>
                <div class="uk-countdown-label">分</div>
            </div>
            <div>
                <div class="uk-countdown-number uk-countdown-seconds"></div>
                <div class="uk-countdown-label">秒</div>
            </div>
        </div>
    </div>
</div>

コードスニペット（商品一覧）

<div class="uk-child-width-1-3@m uk-grid-small" uk-grid>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="product1.jpg" alt="商品1">
            </div>
            <div class="uk-card-body">
                <h3 class="uk-card-title">商品名</h3>
                <p>¥5,000</p>
                <button class="uk-button uk-button-primary">カートに追加</button>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="product2.jpg" alt="商品2">
            </div>
            <div class="uk-card-body">
                <h3 class="uk-card-title">商品名</h3>
                <p>¥3,000</p>
                <button class="uk-button uk-button-primary">カートに追加</button>
            </div>
        </div>
    </div>
</div>

実際に、UIkit3のドキュメンテーションを見たほうが早いので参考にしてください。

UIkit3の開発先であるYOOthemeは主にJoomla、WordPressのテーマを作れるPageBuilderを販売しています。WordPressで実際にPageBuilderを購入して使ってみましたが、他のビルダーよりも軽快に動くところが気に入っています。

日本でも有名なとあるビルダーは、最近あちこちで「ページが表示されないときがある」という声を聞きますが、このビルダーではそんな問題が起きたことがないのも、気に入っている理由の一つです。

最後に

私はWebディレクター＆コーダーとして多くのCSSフレームワークを試してきましたが、最終的にUIkit3に落ち着きました。UIkit3は軽量でモダンなデザイン、レスポンシブ対応、多様なUIコンポーネント、そして高いカスタマイズ性が魅力です。特に、柔軟なグリッドシステムや直感的なUIコンポーネントが使いやすく、モバイルフレンドリーな設計が気に入っています。

他のフレームワークと比較しても、UIKit3はファイルサイズが小さく、動作が軽快で、依存関係が少ないため、読み込み速度が速いです。また、SCSSベースで設計されており、デザインのカスタマイズが簡単です。さらに、jQueryに依存せず、ピュアJavaScriptで動作するため、最新のWeb開発環境に適応しやすい点も優れています。

実際のプロジェクトでも、UIkit3を使って洗練されたデザインと高速なページ読み込みを実現できました。

WordPressのWeb制作案件は、ビルダーを使った方が早いのですが、ユーザー視点で考えるとテーマを手作りしたほうがユーザーメリットが大きいです。

また、ビルダーでは「グローバルな左メニュー」の実装が非常に難しいのも問題点の1つです。

ユーザー自身でも自由にレイアウトを変更したいというのであれば、ビルダーで提案し、ニュース更新だけで良い、またはビルダーの使い方を覚えるのが大変というユーザーの場合には、UIKit3を使って制作をしていきます。