🔎

# AIでデザインの壁を壊す：BulmaとGeminiで実践した爆速プロトタイピング

に公開
CSS
HTML
webアプリケーション
tech

はじめに

こんにちは。『PythonでつくるWebアプリのつくり方』の学習記録です。
前回のWebアプリのつくり方学習記録ポスト「Webアプリの構造とデザイン：HTML/CSSの役割とレスポンシブデザインの基礎」はありがたいことに好評をいただき、このブログ最大のヒットポストとなりました。
AIに何故好評だったんだろうか？と相談すると、『3.AIを活用したCSSマスターへの道が良かったのでは』とおだてられたのでAIを活用してCSSフレームワークに挑戦してみました。
今回は、Web開発におけるデザインの効率化に不可欠なCSSフレームワークについて学びました。

これまでCSSに不慣れでデザインに苦手意識がありましたが、AI（Gemini）との対話を通じて、CSSフレームワークのBulmaをローカル環境で実践し、リッチなWebページのたたき台をわずか数分で作成することに成功しました。

本記事では、CSSフレームワークの基礎知識と、AIを活用した**「爆速プロトタイピング」**の具体的なステップを共有します。

1. CSSフレームワークとは：デザインの障壁を下げるツール

Webサービス開発において、デザインの統一感と迅速なレイアウト構築は非常に重要です。しかし、プログラミング主体で開発する場合、デザインの細かな指定は大きな負担となります。

CSSフレームワークは、この課題を解決するためのツールです。

メリット

  • 迅速な構築: あらかじめスタイルが定義されているため、基礎的なデザインやレイアウトを迅速に構築できます 。
  • デザインの一貫性: スタイルを指定するだけで、統一されたデザインを実現できます。
  • レイアウトの簡素化: CSSでの複雑なレイアウト指定（特にレスポンシブデザイン）を手軽に行えるようになります。

主要なCSSフレームワーク

本書で紹介されていた主要なフレームワークには、以下のようなものがあります。

  • Bootstrap: X（元Twitter）が開発。豊富なUIコンポーネントとグリッドシステムを持つ、最も人気の高いフレームワークです。
  • Bulma: シンプルで直感的な設計が特徴。学習曲線が低く、モダンなデザインを素早く実現できます。
  • Tailwind CSS: ユーティリティファーストのアプローチを採用したモダンなフレームワーク。

2. 実践！AI駆動によるBulmaの爆速プロトタイピング

「CSSフレームワークとはなんぞや？」というレベルから、AI（Gemini）のサポートを受け、Bulmaを使ったプロトタイピングに挑戦しました。

ステップ1：開発環境の準備（サーバーレス）

驚いたことに、AIにBulmaの練習をしたいと伝えたところ、「Next.jsやPythonサーバーは不要。まずは静的HTMLで練習しましょう」と提案されました。

ローカルPCに空のbulma_test.htmlファイルを作成し、BulmaのCSSを読み込むスターターコードを貼り付けるだけで準備が完了しました。

ステップ2：AIへの対話とコードの生成

AIへの指示と、生成されたコードの確認を繰り返すだけで、わずか3ステップでリッチなWebページの「たたき台」が完成しました。

実行したステップ AIへの指示内容 結果
指示 (1) is-primaryの大きなヒーローセクションを中央に見出し付きで作成。
指示 (2) ヒーローセクションの下に、columnsを使って3つのcardコンポーネントを配置。 3枚のカードが横並びになったレイアウトが完成。
指示 (3) 1枚目のカードに画像、タイトル（「くまさんの輝き」）、説明文、ボタンを追加し、リッチなコンポーネントに仕上げる。

AIはBulmaのクラス名（例: is-primary, is-one-third）を完全に理解しており、コードの挿入位置からファイル操作の流れまで具体的に指示してくれるため、CSSの知識がほとんどなくても実践できました。

指示（１）

🤖 AIへの指示 (1)
「Bulmaを使って、is-primary（プライマリカラー、デフォルトだと緑がかった青色）で、is-large（大きめ）のヒーローセクションを作ってください。中央に見出し（title）と小見出し（subtitle）を入れてください。」
ｺｰﾄﾞの生成

<section class="hero is-primary is-large">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title">
        ようこそ！AIとBulmaのデモページへ
      </h1>
      <h2 class="subtitle">
        AIが生成したコードで爆速プロトタイピング
      </h2>
    </div>
  </div>
</section>

📝 あなたの作業

  1. bulma_test.html をテキストエディタで開いてください。
  2. <body> タグの中にある、既存の <section>...</section>（"My Bulma Test"と書かれた部分）を削除します。
  3. 削除した場所に、上記の新しい <section class="hero ...">...</section> コードを貼り付けます。

結果

ヒーローセクションの表示例

指示（２）

🤖 AIへの指示 (2)
「ヒーローセクションの下に、新しいsectionを追加してください。その中にcolumns（カラムレイアウト）を配置し、3つのカラム（column）を作成します。各カラムには、Bulmaのcardコンポーネントを配置してください。」

コードの生成


<section class="section">
  <div class="container">
    <div class="columns is-centered">
      
      <div class="column is-one-third">
        <div class="card">
          <div class="card-content">
            <p class="title">
              カード 1
            </p>
            <p class="subtitle">
              （ここに内容が入ります）
            </p>
          </div>
        </div>
      </div>
      
      <div class="column is-one-third">
        <div class="card">
          <div class="card-content">
            <p class="title">
              カード 2
            </p>
            <p class="subtitle">
              （ここに内容が入ります）
            </p>
          </div>
        </div>
      </div>
      
      <div class="column is-one-third">
        <div class="card">
          <div class="card-content">
            <p class="title">
              カード 3
            </p>
            <p class="subtitle">
              （ここに内容が入ります）
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

📝 あなたの作業

  1. bulma_test.html を開いてください。
  2. 既存のヒーローセクションの終了タグ (</section>) のすぐ下（</body> タグの直前）に、上記の新しい <section class="section">...</section> コードを丸ごと貼り付けます。
    結果

    3つのカードが横並びになったレイアウト例

指示（３）

🤖 AIへの指示 (3)
「ステップ2で作った1枚目のカード（カード 1）を修正します。Bulmaのcardコンポーネントの標準的なレイアウトを使って、以下の要素を追加してください」
• card-image: カード上部の画像（ダミーの画像でOK）
• card-content: カードの本文。タイトルを「くまさんの輝き」、本文を「熊本の自然が育んだ、ツヤと甘みが特徴のお米です」に変更。
• card-footer: カード下部のフッター。ここにis-primary色の「詳しく見る」というボタンを配置。
コードの生成

<div class="column is-one-third">
  <div class="card">
    
    <div class="card-image">
      <figure class="image is-4by3">
        <img src="https://bulma.io/images/placeholders/1280x960.png" alt="くまさんの輝き イメージ画像">
      </figure>
    </div>

    <div class="card-content">
      <div class="media">
        <div class="media-content">
          <p class="title is-4">くまさんの輝き</p>
          <p class="subtitle is-6">@your_farm_account</p>
        </div>
      </div>
      <div class="content">
        熊本の自然が育んだ、ツヤと甘みが特徴のお米です。
      </div>
    </div>

    <footer class="card-footer">
      <a href="#" class="card-footer-item button is-primary is-light">詳しく見る</a>
    </footer>

  </div>
</div>

📝 あなたの作業

  1. bulma_test.html を開いてください。
  2. ステップ2で追加した section の中にある、1つ目の <div class="column is-one-third"> ... </div> （「カード 1」と書かれているブロック全体）を見つけます。
  3. そのブロックを丸ごと削除し、上記の**新しいコード（差し替え用）**を貼り付けます。

結果

1枚目のカードをリッチにした表示例

ステップ3：気づきと解決

完成後、コンテンツの量が多い1枚目のカードだけが縦に長くなり、レイアウトが崩れる現象が発生しました。これはCSSの正常な動作でしたが、この「崩れ」をAIに質問し、「カードの高さを揃えたい」と依頼することで、BulmaのクラスやCSSで解決できることも学びました。

3. まとめ：学習への確信

今回の実践を通じて、以下の重要な確信を得ることができました。

  1. AIは優秀なデザインアシスタントである: CSSの記述はAIが得意とする領域であり、デザインをゼロから手書きする負担を劇的に軽減してくれます。
  2. 学習の順序の確信: 以前、Next.jsに取り組んで挫折した経験がありますが、先にCSSフレームワークやPython/Flaskの基礎を固めることで、段階的にWebアプリ開発を学べるという自信がつきました。

今後も、この「AI駆動プロトタイピング」の手法を活かし、PythonとFlaskを使ったバックエンド開発に集中しながら、効率的にスタイリッシュなWebアプリを構築するスキルを身につけていきたいと思います。

参考文献

「Pythonでつくる Webアプリのつくり方」　著）クジラ飛行机、 杉山 陽一、遠藤 俊輔
https://www.socym.co.jp/book/1496

Discussion