新機能とは

ご要望いただいた機能を大量に出荷しました。最初のチーム機能、リファレンスの動作に関する更新、Banani をライトニング・マックィーンより速くする取り組みまで。

コードエクスポート

• ページのコードをコピーし、まずはプレーンHTML/CSS エクスポートから始めます。

• 選んだフレームワークにデザインを変換するために、バイブコーディングツールや開発者に依頼してください。

参照画像

• キャンバス内で画像の参照が利用可能です！

• 個々の画面で作業を行う際には、画像やスクリーンショットを追加してください。

• キーボードショートカットを使用してクリップボードから画像を貼り付けます。

チーム

• チームを作成し、メンバーを組織に招待しましょう。

• チームのプロジェクトを共有する作業スペースを持つことができます。

• 集中管理された請求書管理とチームメンバー管理を実現します。

• さらに多くのチーム機能がまもなく登場します！

瞬時のロード

• バックエンドとデータベースを根本から再構築しました。

• アプリのロード時間はほぼ瞬時に感じられることでしょう。

• 例えば、プロジェクトを開くのは1秒未満です。

• ホームページがスムーズに読み込まれ、レイアウトがずれることはありません。

キャンバスの刷新

• アクセスしやすさの向上のためにライトモードを提供。

• Banani を日常的に使いやすくするための全エレメントにわたる無数の調整。

生活の質

• プロジェクトの複製！

• 更新されたプロンプトの改善ステップ。

• テーマ用の新しいフォントがたくさん。

• 「次の画面を生成する」ためのプロンプトを追加。

• そして多くの小さな改良点。

丸みトークン

角の半径がテーマの一部になりました。デフォルトで4つの丸みレベルが表示され、小から超大まであります。手動で調整することができ、BananiのAIがあなたのデザイン全体に一貫して適用します。

フォントファミリートークン

フォントファミリーは、デザイン単位ではなくテーマレベルで管理されるようになりました。これにより、プロジェクト全体のフォントを一度に切り替えることができます。

今ではAIにフォントファミリーを変更させることも可能です！つまり、「フォントで遊んで」や「フォントをもっと面白くして」とお願いすることがついに可能です。

さらなる速度改善

デザイン生成を可能な限り迅速にする努力を続けており、速度向上のための新たな更新を行いました。

今回の改善は前回より小規模ですが、生成時間を3〜4秒短縮します。

品質/速度の選択

これからは、生成の最高品質と生成速度の間で選択できます。

どのプロジェクトでも、いつでも「最高品質」と「最速速度」のオプションを変更できます。

最高品質オプション

詳細で高精度なデザインに最適です。AIはスペースとギャップをより適切に処理し、レイアウトをより洗練されたものにするための多くの小さい改善を行います。

最速速度オプション

迅速な編集や低～中精度のプロトタイプに適しています。最終デザインまで細部に集中せずに、ほぼ瞬時に結果を見ることができます。

全体的な速度の更新

画像付きのページでは生成が最大2倍速くなり、さらに多くの速度「ブースト」が近日登場予定です。

キャンバスの更新

スクロール、パン、ズームは、MiroやFigmaのようなキャンバスを中心としたツールと似た感覚になりました。

テーマの紹介

テーマは、デザイン全体で再利用できるスタイルのコレクションです。手動で編集することも、BananiのAIでプロンプトを使って編集することもできます。

新しいプロジェクトを作成する際、新しいテーマを生成するか、以前に作成したテーマから選択することができます。

テーマのカスタマイズ

スタイルタブに移動すると、テーマとそのデザイントークンの詳細を見ることができます。デザイン内で使用されている各色がそこに表示されます。

AIにその色の変更を依頼することもできますし、任意の色をクリックして自分で調整することも可能です。

既存のスタイルをインポート

既存のカラーパレットやブランドスタイルのインポートも可能です。AIプロンプトにHEXカラーを貼り付けるか、参考画像を添付してBananiにその色をコピーするよう依頼してください。

Bananiはアルファ版を卒業しました！アイデアからUIまでのスピードを向上させる準備が整いました。あなたが求めた4つの大きな機能と多くの品質改善があります。

新しいUI-AI

• 以前は無駄だったプロンプトが、今では質の高い結果を生み出します

• 複雑なマルチカラムレイアウト、ランディングページ、何でも

• デザインはリアルタイムで、要素ごとに現れます

部分編集

• デザインの選択部分のAI編集

• 迅速で正確な調整に最適です

• 要素の削除、テキストの変更など

Figmaへのコピー-ペースト

• Bananiで画面を選択

• 「Figmaにコピー」をクリック

• Figmaに直接ペースト

注: 今月作成されたプロジェクトのみで動作しますので、新しいプロジェクトを生成してみてください!

画像リファレンス

• スクリーンショット、ワイヤーフレーム、スケッチ、実際のUIを添付

• Bananiはレイアウトとコンテンツをコピーします

• 既存製品UIのリデザインや編集に最適

他に何が新しいか？

この1ヶ月間で見逃したかもしれない複数の大きなアップデートを提供しました。いくつかのハイライトを紹介します：

• AI応答時間の短縮

• 画面＋スタイルパネルの改良

• 大規模プロジェクトでのナビゲーションが簡単に

• キャンバスの反応速度アップ

• スクリーンの複製

• その他多数…