このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

どもです。

いやぁ。前回も述べさせていただきましたが、ここ最近ずっと業務でRustを書いておりまして、TypeScriptはゲームのコア実装って言ったところですかね。

UI実装は暫く行っていないなぁと。

で、更に最近では、Git連携を行ったテクスチャ生成ツールをTauri用いて作成しているのですが、テクスチャ生成のコアモジュールなどは完成しており、あとはガワだけなのでTauriとGitHub連携させようと進めていますが、意外とぶつかる箇所も多く、更にインターネット上にも情報が多くないこともあって、一回素でGitGUIクライアントアプリを作成してみよう。

といった企画になっております。

でさらに、何かと話題の生成AIを用いて効率よく制作していこうと思っております。

ChatGPTに相談

すっかり悩み事は真っ先にChatGPTに聞くクセがついてしまいましたね。

まずはともあれ、アプリの名前から決めていきましょう。

「GitのGuiをRust（Tauri）で作成するのですが、 キャッチーなアプリ名考えてくれますか」

もちろん！Rust（Tauri）製のGit GUIアプリ、最高にイケてるネーミングを一緒に考えましょう。

まず、方向性をいくつか挙げますね：

🔧 技術っぽくてかっこいい系
GitForge（Git + Forge = 鍛冶場、ツール感あり）

RustyBranch（RustっぽさとGitのブランチをかけてる）

CommitCrafter（コミットを職人のように作る）

Grapher（Gitのgraph機能に特化してそうな名前）

🐦 軽くて親しみやすい系（Tauri感）
TauriTree（Tauri + Git tree）

GitSparrow（小さくてもパワフルな感じ）

Branchie（ブランチに愛着を込めた感じ）

Stagit（"Stage" + "Git" の造語）

🧠 シンプル・ミニマル系
gUItt（GUI + Git をしゃれっ気出して）

Graft（Gitの「graft」（接ぎ木）から取った言葉）

Delta（変更の象徴）

DotGit（.gitディレクトリにちなんで）

🔥 ちょっと遊び心あり系
Pushy（Pushする人）

Rebaser（Git強者感）

GitWiz（Gitの魔法使い）

Snaplog（スナップショット + ログ）

おお。やっぱ。いい感じで出してくれるすねー

ということで名前はこの中から選択し「Branchie」にしちゃいました！

ワイヤー（デザイン）作成

「実際にどういうレイアウトが良いかな」

いいねぇ、「Branchie」 の世界観でGit GUIをRust（Tauri）で作るなら、
「親しみやすく、でもちゃんとパワフル」なUIを目指したいところ！

以下に、レイアウトの案（画面構成）をざっくり出してみたよ👇

+--------------------------------------------------+
| 🔧 Top Bar（メイン操作 + リポジトリ名）         |
+--------------------------------------------------+
| 📁 Side Panel     |  🌳 Main Area (タブ切り替え) |
| （リポジトリ情報）|                             |
|                  |                             |
| - ブランチ一覧    |  [ コミット履歴 ]           |
| - ステージ状況    |  [ ファイル変更 ]           |
| - Remote情報など |  [ Graphビュー  ]           |
+------------------+-----------------------------+
| 📦 Bottom Bar（現在のブランチ・状態など）        |
+--------------------------------------------------+

🧩 各パーツの詳細
1. 🔧 Top Bar
左上に Branchie ロゴ 🐿️

現在開いているリポジトリ名

「+ Open Repo」「⚙ Settings」ボタン

2. 📁 Side Panel（左パネル）
リポジトリ情報（.git情報表示）

現在のブランチ と切り替え機能

ステージ/アンステージ済ファイルの一覧

Remote名とPush/Pullボタン

（将来的に：StashやTag一覧もここに？）

3. 🌳 Main Area（中央）
タブ切り替え式（VueやSvelte風に、Tabsでも良し）
[履歴]：ログ表示（git log）＋選択で差分確認

[変更ファイル]：git diff、ステージ/アンステージ操作

[Graph]：ブランチの構造（ascii graph風、もしくはビジュアル）

[コミット作成]：メッセージ入力、ボタンでコミット

[Remote]：Push/Pull/Fetch の操作

4. 📦 Bottom Bar
現在のブランチ名、HEADの位置

ステータス表示（例: "3 changes staged"）

操作中ならスピナー表示とかもあり

いいね。色々出ましたね。サンキュー。では、もうデザインしちゃいましょ。

ChatGPTではデザイン起こしてもらえないので、UI生成のAIツールの選択をと。

UI生成のAIツール

UI生成AIに関しては、最近の流行りなど掴みきれていない（シャ乱Qぽいな）ので、そちらもChatGPTに相談と。

「実際にデザインに起こしたいのだが、どのAIツールを用いてどの情報を渡せば良い？」

おお、いよいよデザインフェーズ！🔥
「Branchie」をビジュアルに起こすには、以下のAIデザインツール＋戦略でいけるよ👇

（なんか最近 ChatGPT軽くないですか？w）

提案されたのが以下。

🧰 おすすめAIツールと選び方

 

まずは、Uizardを利用してみることに。

登録を進めていくと、Describe the preferred style for your project と聞かれるところで、ChatGPTにプロンプトを作成依頼。

150文字入力に収めないといけない。色々提案された中、

シンプル & モダン重視 を選択

Minimal and clean desktop Git tool with tree-based layout, soft tones, modern UI, and intuitive interactions.

出力されたデザインがこちら。

ちょっと想定していたよりもガッツリワイヤーフレームだし、ウェブサイトベースだった。。

どうも期待してるGUIのデザインから程遠いので別のAIツールを模索することに。

そこで、Galileo AIを選択したのですが、どうやら無料プランが無いみたいなので断念。

どうせならFigmaと連携できるとありがたいので、そちらで存在しないかと質問。

 

Figma + Relume AI（超おすすめ）

• Relume はFigmaにUI構造を自動生成してくれるAI

• 特徴：

  • 英語プロンプトでUIを提案

  • コンポーネント化されたブロックが出る

  • Figmaでそのまま編集できる！

と、GPTさんにおすすめされたので使って見ることに。

「どうすれば良い？」

✅ ステップ1：Relumeにサインアップ
https://library.relume.io/ にアクセス

右上の「Sign Up」からアカウント作成（Google連携OK）

無料プランでOK（1日3プロンプトまで使える）

✅ ステップ2：プロンプトを入力する
ログイン後、上部の「AI Website Builder」へ

中央の入力欄にプロンプトを英語で入力

✅ 推奨プロンプト（Branchie用）

Design a desktop Git GUI app named Branchie. It should have a top bar with repository name and actions, a left sidebar with branches and file status, and a main area with tabs: Commit History, Diff View, and Graph. Use soft green tones, rounded UI, and a nature-inspired design.
「Generate Structure」をクリック！

✅ ステップ3：構造の確認・調整
Relumeがセクション（Header, Sidebar, Main Content...）を自動生成してくれる。

必要ないブロックは削除

名前変更もできる

Tabsやカードも組み合わせておくと◎

✅ ステップ4：Figmaに送る
左側の「Preview Design」→「Add to Figma」ボタンを押す

「Connect Figma」ボタンでFigma連携（初回のみ）

RelumeがFigma用ファイルを生成してくれる

※自分のFigmaにコピー可能（"Duplicate to Your Drafts"）

✅ ステップ5：Figmaで編集！
Figma内で：

色味やフォントを変更

アイコン追加（Lucide Iconsなど）

Branchieのロゴやマスコット挿入

とのこと。

とりあえず使ってみるか。

そこで、サイトマップとワイヤーフレームを出力。

あ。これもウェブサイトベースだ。。

しかもすぐに無料枠なくなる。。このように課金を促される。

うーん。。どうしよう。

そこで、Figmaで編集したいのでFigmaプラグインでUIをAIジェネレートできないかとGPTさんに相談しつつ探すことに。

如何にも存在しそうな名前のプラグインを提案されるけど、調べるとなかったりもしつつ、この２つに絞り込んだ。

Figmaプラグイン

Wireframe Designer

プラグインを導入後、起動すると上記の様にプロンプト入力を促されるので、こちらもChatGPTで生成。

Design a desktop Git GUI named Branchie. It includes a top bar with a logo, repository name, and buttons. A sidebar on the left shows branches and file changes. The main area has tabs for commit history, diff view, and graph. A bottom bar shows the current branch and status.

しかしながら、名前の通りワイヤーフレームかつどうしてもウェブ寄りになるので別のを探すことに。

UXPilot

最終的に決めたプラグインは「UxPilot」。

一番期待する出力に近かった。

諸々インストールの手続きを済ませ、

いつものように、ChatGPTにプロンプト生成してもらう。

Create a single screen desktop Git app named Branchie with a top bar, a left sidebar for branches, and a main content area with tabs: history, diff, and graph. Include a bottom status bar.

 

一画面のみ出力してもらいたかったのでそちらの命令も含め出力していただいた結果がこちら。

おぉ。一番イメージに近いぞ。

あ、やべダークモードの指定を忘れていたなと。色だけ変更することに

Change the current design to a dark theme using soft green and earthy tones. Keep the layout and structure the same. Use rounded and minimal UI components.

あれ、ダークモードにはなったが、レイアウト全く異なるし。

先程のデザインがまるっとなかった感じに。。

  

最初の指定も必要なのか。それも含め再度出力。

Design a desktop Git GUI application called Branchie. It should have a top bar with a logo, repository name, and two buttons. A left sidebar shows branches and file changes. The main area has three tabs: Commit History, Diff View, and Graph. Add a bottom bar showing the current branch and status. Use a modern dark theme with soft green accents and rounded UI components.

   おお！いい感じに出力されました。

なるほど、既存のデザインに関しては全く扱わず、指示出す度に新規で作成されてしまうようですね。

ついでに、IDとパスワードを登録する画面と、clone先のURLを入力する画面も生成。

IDとパスワードを入力する画面の作成指示

Design a login screen for a Git GUI app called Branchie. It should include fields for user ID and password, a "Register" and "Login" button, and a dark modern theme with soft green accents.

クローン先のURLを入力する画面の作成指示

Create a screen for cloning a Git repository in Branchie. It should have a text input for the repository URL, a "Clone" button, and an optional folder selector. Use a dark theme with green highlights.

いいよいいよ。最後の仕上げとして、

サイドバーにそのレポジトリのディレクトリも参照できるように指示を加えることによって、

最終的に欲しい要素とデザインを含んだプロンプトの指示

Design a desktop Git GUI application called Branchie. It should have a top bar with a logo, repository name, and two buttons. A left sidebar shows branches, file changes, and a file explorer with the repository directory tree. The main area has three tabs: Commit History, Diff View, and Graph. Add a bottom bar showing the current branch and status. Use a modern dark theme with soft green accents and rounded UI components.

キター！！なんとか、初期段階のイメージする画面が出力されました。

Figma上のcomponentなので、こちらを改修して作って行きたいと思います。

今回はここまでとし、次回は実際に組み込んでいきます。

ではではぁ。

またまたぁ。