Wix Studio:Wix Studio エディタについて
読了時間:5分
プロがクライアントのサイトを簡単に制作できる究極のプラットフォームである、新しい Wix Studio エディタをご紹介します。直感的なインターフェースでシームレスな編集とフルピクセル制御を体験し、細部まであなたのビジョンに合ったサイトを作成することができます。
AI のレスポンシブ性を活用して、あらゆる画面やデバイスで魅力的なウェブサイトをデザインし、素晴らしいユーザーエクスペリエンスを提供しましょう。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2023/08/01/87b3cde8-2926-48bd-b9e6-287d3d225be1/5942a54d-db2b-4633-82b4-be1da61e3de4.png)
クライアント用にレスポンシブサイトを構築する
Wix Studio エディタには、ウェブサイトがすべての画面で美しく表示されるよう、実用的なツールが用意されています。つまり、デザインに集中することができ、すべての要素に適したサイズ単位を見つけるのに費やす時間を短縮することができます。
デスクトップで表示する要素をデザインし、ニーズに合ったレスポンシブ動作を選択します。レスポンシブ動作により、さまざまなブレイクポイントに自動的に調整されます。
![要素設定パネルの要素で利用可能なレスポンシブ動作の例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/02/5541dcee-6d20-4629-b879-c65fab191e5d/44d9f421-3330-4d89-9bb4-61ae1e127022.png)
![キャンバス上でグリッド線をドラッグして列または行を簡単に追加する方法を示した GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/845e0d91-be97-4254-ac13-8fff41653250/a93cecf3-f329-4204-b3a8-2e5d1349d73b.gif)
デザインを再利用して効率化:![デザイン済み要素をアセットとしてライブラリに保存する方法を示したスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/02/1039f19b-9c03-446e-931e-b4315bdff597/4e7a2b8d-5f7a-44ca-9964-a396e463592e.png)
デザイン済みセクションやサイトテンプレートなどの独自のカスタムアセットを作成し、保存や共有、他のサイトでの再利用が可能です。
![デザイン済み要素をアセットとしてライブラリに保存する方法を示したスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/02/1039f19b-9c03-446e-931e-b4315bdff597/4e7a2b8d-5f7a-44ca-9964-a396e463592e.png)
リアルタイムでサイトで共同作業する
Wix Studio エディタはチームが同じサイトで同時に作業できるリアルタイムの共同作業プラットフォームです。他のユーザーのアクションをオーバーライドすることなく、ページや要素のレイアウト、デザイン、コンテンツを編集できます。
![エディタの上部に 3名のアバターが表示されているスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/02/22b91f9a-a4d0-46e6-a02d-9e76046f304b/62e469cc-45a8-4bcd-8cc8-11cbc5591d69.png)
他のユーザーが行った変更は、数秒で自分のエディタに反映されます。これにより、競合を最小限に抑え、チームメンバーやクライアントと効率的に作業を行うことができます。
![別のチームメイトが要素を選択し、エディタでどのように表示されるかを示したスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/96536afd-e0a2-461e-a55d-7cea5a05c881/6bd46763-68b4-4027-b515-c19cdb569f9a.png)
クライアントやチームメイトがキャンバス上で直接提起した問題を解決することもできます。コメントパネルを使用すると、エディタを離れることなく、サイトに関するコミュニケーションを管理することができます。これは、チームとあなたのクライアントがフィードバックを共有し、一緒に問題に取り組むのに最適な場所です。
![クライアントがサイトチームにページの修正を依頼しているコメントの例。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/10/10/e1575a9c-49d0-468f-af47-4b3f7c1896a0/1bc2227c-be66-4fcf-bccb-40f370b499ca.png)
アニメーションで動きのあるデザインにする
Wix のアニメーションをデザインに取り入れることで、デザインをさらにレベルアップさせることができます。Wix Studio エディタでは、表示させたいタイミングに基づいて 5種類のアニメーションを提供しています。
訪問者が要素にマウスオーバーしたり、クリックしたり、スクロールしたりしたときにアニメーションを表示させることができます。また、要素が最初に読み込まれたときのエントランスアニメーションや、継続的にループするアニメーションなど、訪問者の操作が不要なアニメーションを追加することもできます。
![複数の要素にアニメーションを適用したライブサイトの例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/9b1bbc5c-c987-47e4-bc86-eb1efc5317f8/bdfb8ee0-bc3c-4bc7-b2cd-7fe0977b297d.gif)
AI を活用する
AI は単なる流行語ではありません。Wix Studio エディタには、サイト制作プロセスをより迅速にする AI を活用した一連の機能が搭載されています。
レスポンシブレイアウトを自動生成する
ボタンをクリックするだけで、ページやセクションをレスポンシブにすることができます。当社の AI ツールは現在のレイアウトを分析し、理想的な見た目になるレスポンシブ構造を配置します。つまり、自分ですべてのブレイクポイントを確認し、デザイン問題の解決に時間を費やす必要はないのです。
![レスポンシブ AI ツールがレイアウトを生成した後に表示されるプレビューの例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/19/f3b7db02-1465-41d3-9d20-0f4ef34c3e05/b0e47886-11b9-4536-957a-183928dc050d.png)
テキストを自動生成する
当社の AI テキスト生成ツールは、OpenAI のチャット GPT を直接エディタに取り込みます。いくつかの詳細を入力してプロンプトを作成し、プロジェクト用のカスタムコンテンツの提案を取得します。これにより、品質を損なうことなく執筆プロセスの時間を節約できます。
![キャンバス上の段落に AI テキスト候補を適用する方法を示したスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/02/069d30c5-9274-49ee-ac12-a6dfba5f2d75/62f822b6-95e2-4c44-83f8-237fc1c34f3c.png)
画像を自動生成する
他にはないユニークな画像が必要ですか?必要な画像を説明し、サイトで使用する複数の提案を取得できます。イラストレーション、3D、パックショット、写真など、多くのスタイルから選択できるため、探しているものと完全に一致する結果が得られます。
![AI 画像生成ツールのスクリーンショットと、プロンプトに基づいた 4つの画像バリエーション。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/02/23551a31-a095-48e7-8f40-5cc7731fad62/b08453ed-b58b-4982-bf3f-166d9b10a1d0.png)
コーディング不要の CMS で大量のコンテンツを管理する
当社の CMS(コンテンツ管理システム)を使用すると、大量のコンテンツを格納し、動的ページテンプレートを作成し、訪問者からのデータ入力を受け入れることができます。サイトを引き渡した後も、クライアントは CMS を使用して、デザインに影響を与えることなくコンテンツを更新および追加できます。
![リピーター内のデータセット接続を示すスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2023/07/18/c13a139a-35e2-4886-bb8a-06fa3e8730a5/96d62b0e-1410-44ed-9005-591a4d12e5bf.png)
独自の CSS コードを追加する
要素に CSS を追加することで、まったく新しいスタイルの可能性が広がります。レスポンシブ性を最大限に高めながら、ユニークなデザインやアニメーションを作成することができます。
キャンバス上の要素を選択し、グローバルクラスのいずれかを選択して開始します。お探しのものが見つからない場合、独自のカスタムクラスをコードに追加できます。
![エディタでグローバル CSS ページでボタンを選択し、利用可能な CSS クラスを表示している例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/02/7f5865d6-41bb-4f23-b65a-4a6b4060e961/644b1a32-4fb0-4bf0-92be-74e2972aa8b4.png)