Shuffle：ウェブテンプレートを素早く構築するためのドラッグ＆ドロップ・エディター。

Shuffleは、プロフェッショナルなレスポンシブWebテンプレートを素早く構築することに特化した、開発者向けのオンラインWebエディタです。ドラッグ＆ドロップのインターフェースと、Tailwind CSS、Bootstrap、Bulma、Material-UIなどのフレームワークをサポートする13,200以上のUIコンポーネントを提供します。開発者はコンポーネントをキャンバスに直接ドラッグ＆ドロップし、スタイルやコンテンツを微調整して、外部依存やベンダーロックインのないクリーンなソースコードをエクスポートできます。ShuffleはAI支援設計にも対応しており、自然言語の記述からコンポーネントを生成したり、デザインをアップロードしてテンプレートを生成したりできます。多忙なフロントエンド開発者に最適で、手戻りを減らし、スタイルの微調整やバックエンド開発の時間を節約できる。公式ドキュメントとコミュニティサポートは、個人やチームのコラボレーションに最適です。

機能一覧

• ドラッグ＆ドロップ・エディター直感的なドラッグ＆ドロップのインターフェイスで、UIコンポーネントを素早く組み合わせ、ページレイアウトを構築できます。
• リッチUIコンポーネントライブラリ: ナビゲーションバー、ヘッダー、フォームなどのカテゴリをカバーする13,200以上のレスポンシブUIコンポーネント。
• マルチフレームワーク対応Tailwind CSS、Bootstrap、Bulma、Material-UI、shadcn/uiに対応しています。
• AI支援設計チャットやデザインのアップロードにより、AIがレスポンシブなUIコンポーネントを自動生成します。
• コード輸出依存性のないHTML、CSS、JavaScriptコードをワンクリックでエクスポートし、簡単に統合できます。
• カスタムUIライブラリTailwind UI、Flowbiteなどの外部UIライブラリのアップロード、または独自のUIライブラリの構築をサポート。
• プロジェクトの歴史プロジェクトバージョンの自動保存、履歴バージョンのプレビューと復元をサポート。
• CLIツールShuffle CLI経由でローカル開発環境にプロジェクトを同期し、Next.jsなどのフレームワークをサポートします。
• リアルタイムのプレビューとコラボレーション編集結果のリアルタイムプレビューをサポートし、チームで編集プロジェクトを共同作業できます。
• SVGとグラデーションジェネレーターSVG波形、グラデーション背景、その他のビジュアル要素を生成する内蔵ツール。

ヘルプの使用

インストールと使用プロセス

シャッフルは、ソフトウェアをインストールすることなく使用できるオンラインツールです。ユーザーは https://shuffle.dev/まずはアカウントを登録してください。詳しい使い方はこちら

1. 登録とログイン::
   • 見せる https://shuffle.dev/右上の "Sign Up "をクリックしてアカウントを登録してください。
   • 電子メールまたはGitHubアカウントでサインアップし、それを確認してログインします。
   • 無料トライアルアカウントでいくつかの機能を体験できますが、コア機能（コードエクスポートなど）は有料プランへの加入が必要です。
2. 新しいプロジェクトを作成する::
   • ログインしたら、"New Project "ボタンをクリックし、フレームワーク（Tailwind CSSやBootstrapなど）を選択します。
   • このシステムでは、テンプレートを選択することも、白紙のキャンバスから始めることもできる。
   • UIライブラリ（DarkPro、Solsticeなど）を選択するか、カスタムライブラリ（Tailwind UIなど）をアップロードします。
3. ドラッグ・アンド・ドロップ・エディターの使用::
   • コンポーネントの追加左側のパネルには、コンポーネントのカテゴリーが表示されます（例：ヘッダー、フッター）。目的のコンポーネントをキャンバスにドラッグします。
   • スタイルの調整コンポーネントをクリックすると、右側のプロパティパネルで色、フォント、間隔などを変更できます。
   • 編集内容テキストエリアをダブルクリックして内容を直接入力するか、画像をアップロードしてプレースホルダ画像を置き換えます。
   • リアルタイム・プレビュー上部の "プレビュー "ボタンは、現在のデザインが異なるデバイスでどのように見えるかを表示します。
4. AI支援設計::
   • チャットモード左下のAIアシスタントをクリックし、説明（例：「青いナビゲーションバーを作成する」）を入力すると、AIが自動的にコンポーネントを生成します。
   • デザインのアップロードPNG/JPG形式のデザインをアップロードすると、AIがそれを解析し、対応するコンポーネントを生成します。
   • 結果を出すためにAIを調整する生成されたコンポーネントはドラッグ＆ドロップで調整でき、スタイルはプロパティパネルで微調整できる。
5. エクスポートと同期::
   • 輸出コードHTML、CSS、JavaScriptを含むZIPファイルをダウンロードするには、"Export "ボタンをクリックしてください。
   • CLIとの同期Shuffle CLIをインストールし、コマンドを実行します：

     npx @shuffle-dev/cli get <project_id> .shuffle --rules=windsurf
     

     プロジェクトIDはエディターのURL（例えば shuffle.dev/editor?project=cd0f7e984aed20beb2406e59502e7d26c44bc15f).

   • 同期後、コードはNext.jsや他のフレームワークプロジェクトに統合できる。
6. プロジェクト履歴管理::
   • システムは数分ごとにプロジェクトのスナップショットを自動的に保存する。
   • ショートカットキーによる手動保存 Shift + Ctrl + S.
   • Project History "パネルで履歴を確認し、"Restore "をクリックして特定のバージョンに戻す。
7. 追加ツールの使用::
   • SVG波形ジェネレーターTools "メニューから "Wave Generator "を選択し、色と複雑さを調整し、SVGファイルをダウンロードする。
   • グラデーションジェネレーター色と方向を選択してプレビューし、CSSグラデーションコードをエクスポートします。
   • カスタムライブラリのアップロードUIライブラリは "Library "パネルにZIP形式でアップロードしてください。 https://shuffle.dev/docs).

注目の機能操作

• AIによるコンポーネント生成AI機能はShuffleのハイライトです。ユーザーが自然言語でニーズを記述すると（例：「ECサイトの商品カードをデザインする」）、AIがレスポンシブなコンポーネントを生成します。生成されたコンポーネントをキャンバスにドラッグし、TailwindのCSSクラスやコンテンツを調整することができる。デザインがアップロードされると、AIがレイアウトを解析し、元のイメージに近いコンポーネントを生成するため、デザインを素早くコード化するのに適している。
• マルチフレームワーク対応例えば、Bootstrapフレームワークを選択すると、コンポーネントはBootstrapクラスを使用し、Tailwind CSSに切り替えると、コンポーネントは自動的にTailwindクラスに適応します。例えば、Bootstrapフレームワークを選択すると、コンポーネントはBootstrapクラスを使用し、Tailwind CSSに切り替えると、コンポーネントは自動的にTailwindクラスに適応します。この柔軟性により、開発者はコードを書き直すことなくフレームワークを切り替えることができます。
• CLIの統合Shuffle CLI は上級者向けです。実行 npx @shuffle-dev/cli --help コマンドを表示する。プロジェクトをローカルで同期させた後、VS CodeなどのIDEでさらに開発することができる。これは、複雑なバックエンドロジックを必要とするプロジェクトに適している。

ほら

• 無料アカウントでは機能に制限があるため、トライアル後に有料プランに加入することをお勧めします（詳細をご覧ください）。 https://shuffle.dev/pricing).
• アップロードされたカスタムUIライブラリはShuffleフォーマットに準拠する必要がありますので、公式ドキュメントを参照することをお勧めします。 https://shuffle.dev/docs.
• プロジェクトは、外部依存のないコードをエクスポートしますが、ブラウザの互換性をチェックする必要があります（例えば、Tailwind CSSにはPostCSSの設定が必要です）。

アプリケーションシナリオ

1. ラピッドプロトタイピング
   開発者は、クライアントのためにウェブページのプロトタイプをすばやく作成する必要があります。Shuffleのドラッグ＆ドロップエディタと既製のUIコンポーネントのライブラリを組み合わせれば、レスポンシブなページを数分で構築し、コードをエクスポートしてデモを行うことができます。
2. Eコマース・ウェブ開発
   Eコマース開発者は、VendiaのようなUIライブラリを使用して、商品ショーケースページ、ショッピングカート、チェックアウトページを迅速に構築することができます。
3. ダッシュボードと管理パネル
   データアナリストや管理者は、TrizzleやArtemisライブラリを使用してデータプレゼンテーションダッシュボードを素早く構築することができ、CLIツールはデザインをNext.jsプロジェクトに同期することをサポートしているため、バックエンドAPIを簡単に追加することができます。
4. 個人ポートフォリオサイト
   フリーランサーはShuffleのグラデーションとSVGツールを使ってユニークなホームページをデザインできます。コードをエクスポートしてGitHub PagesやVercelにデプロイすれば、すぐに公開できます。
5. チームワーク・プロジェクト
   ライブプレビューとプロジェクト履歴機能により、チームでウェブテンプレートの編集を共同で行うことができます。デザイナーはモックアップをアップロードし、開発者はコードを微調整し、CLIはローカルの開発環境に同期します。

品質保証

1. シャッフルはどのようなフレームワークをサポートしていますか？
   Tailwind CSS、Bootstrap、Bulma、Material-UI、shadcn/uiをサポート。ユーザーはフレームワークを切り替えることができ、コンポーネントコードは自動的に適応されます。
2. カスタムUIライブラリのアップロード方法を教えてください。
   Library "パネルにZIP形式のUIライブラリをアップロードします。詳細は https://shuffle.dev/docs Tailwind UIまたはFlowbiteを設定する。
3. 無料アカウントにはどのような制限がありますか？
   無料アカウントでコンポーネントやAI機能の一部をお試しいただけますが、エクスポートコードやCLI同期には有料アカウントが必要です。詳しくは https://shuffle.dev/pricing.
4. AI機能はどのように機能するのか？
   エディターの左下にあるAIアシスタントを開き、説明を入力するか、デザインをアップロードすると、AIはドラッグ＆ドロップで調整できるコンポーネントを生成します。生成の精度を高めるために、特定の説明を使用することをお勧めします。
5. ローカル開発環境でShuffleプロジェクトを使用するにはどうすればよいですか？
   Shuffle CLIでの実行 npx @shuffle-dev/cli get <project_id> .shuffleまた、プロジェクトをローカルで同期したり、Next.jsや他のフレームワークと統合することもできます。