ハッカソンの技術選定 [デザイン・フロントエンド編]

Author: Takashi

はじめに

• 前回、『ハッカソンの技術選定 [サーバサイド編]』でサーバサイドの技術選定について共有された
• 今回はデザイン・フロントエンドの技術選定について共有する
• ※ ここで言う「フロントエンド」は、いわゆる Web フロントエンドだけでなく、アプリやサービスの UI 全般を作るための技術やツールも含めて広く扱う

これまでの反省

• デザインに時間をかけすぎてしまうことがある
  • 前年度のハートフルランナー聖(コウキ)は画面数が多く、デザインに時間をかけすぎてしまった
  • その結果、実装でのバグ解決に時間が避けなかった
• デザインとフロントエンドを同じ担当者が行うことが多く、負荷が高い
  • そもそも Figma の操作に慣れていないメンバーが多い
• Figma についての説明や共有の機会を設けていなかった
  • フロントエンドの技術に関する説明や情報共有が中心で、デザインに関する説明やサポートが少なかった
• 準備不足で、ハッカソン当日に QR コードやジャイロセンサーなどの技術調査や導入を行うことが多い
  • 事前に環境を整えておくことで、調査等の時間を避けることができる

求められる要件

• 誰でも簡単にデザインツールの利用ができる
  • 作業の負荷を軽減する
• 生成 AI を活用して、デザインの作成ができる
  • デザインの作業時間を短縮する
  • 実装により集中できる
• ハッカソン期間を無料枠で賄える
• フロントエンドは可能な限り、 Web やモバイルで共通のコードを使用する

デザインツールの選定

• Figma
  • デザインツールの中で最もポピュラー
  • Figma Make を使用することで、プロンプトからコードの生成と実際の成果物を閲覧できる
    • 現時点では Figma Make は無料プランでも利用可能
  • Dev Mode MCP Server を使用し、デザインからコードを生成することができる
    • Dev Mode が有料プランのみで利用可能
• Layermate
  • Figma のプラグインで、生成 AI を活用したデザインが可能
    • ただし、無料プランでできることは少ない
• v0
  • デザインツールとは毛色は違うが、プロンプトからコードの生成と実際の成果物を閲覧できる
  • Vercel 社が提供するため、 Next.js が利用される
  • 無料プランは月額 5 ドルのクレジットが付与される
• Replit
  • v0 と同様に、プロンプトからコードの生成と実際の成果物を閲覧できる
  • 以下の生成が可能
    • React + Express
    • Streamlit (Python)
    • JavaScript with Three.js (3D ゲーム)
  • 無料プランでも、基本的な AI 機能の利用は可能で、プロジェクトを 10 個まで作成可能
    • ただし replit.dev ドメインに公開されることになる
      • 非公開にするには有料プランへの課金が必要
    • 試しに作成した TODO リストは以下で、プロンプト入力 1 回でエージェント利用率 19% となったため、あまり利用できない感じはする
      • TODO リスト
• 補足
  • Figma Make や v0 、 Replit で生成されたコードは html.to.design を使用することで、 Figma のデザインに変換することも可能
• 1 つのサービスでデザインからコードまで生成でき、かつデザインデータは直接手直しできる利点もあるため、 Figma を選定する

フロントエンドの選定

• Flutter
  • 普段フロントエンドをメインで担当する筆者が 1 番扱いやすいフレームワーク
    • クロスプラットフォーム開発ができる
  • 各メンバーが開発環境を整えるのが難しい
    • スマホアプリの開発を行う場合、 Android Studio や Xcode を使用する必要があるため
  • ネイティブコードの拡張がしやすい
• Expo
  • React Native のフレームワーク
    • React ベースでクロスプラットフォーム開発ができる
  • 各メンバーが開発環境を整えるのが Flutter に比べて楽
    • スマホアプリの開発を行う場合、 Expo Go を使用すると Node.js の導入だけでデバッグが可能なため
    • ただし、 Android Studio や Xcode が必要になることもある
  • Flutter に比べてネイティブコードの拡張がしづらい
    • 拡張すると Expo Go が使用できない
    • 純正の React Native だと拡張性は上がるが、 Flutter と同様に開発環境を整えるのが難しくなる
• Tauri
  • Web 技術（HTML/CSS/JavaScript）で開発できるフルスタックフレームワーク
    • Rust が使用されている
  • 各メンバーが開発環境を整えるのが Flutter 同様に難しい
    • Rust の導入も必要になる
  • フロントエンドのフレームワーク (React、Vue、Svelte など) が利用できる
• ハッカソンではネイティブの機能を触る必要が出てくることが多く、そうなると Expo でやる旨味があまりないため、 Flutter を選定する
• ただし、状況に応じて、別の選択肢もある

さいごに

• デザインの作成は生成 AI の活用により、より簡単に行えるようになった
• このことで、デザインに時間をかけすぎず、実装に集中できるようになった
  • ただし、重要なデザイン（アプリの個性を出すためのデザインなど）については時間をかける必要はある
• Flutter は Expo と比べて、最初の環境構築は難しいが、その分ネイティブコードの拡張がしやすいなどの利点が多い
• ハッカソンで利用する Flutter プロジェクトの構成については別で共有する