header-logo
はじめましょう!Wix でサイトやビジネスを構築する方法をご紹介します。テンプレートを使用してサイトをカスタマイズしたり、パートナーに依頼してウェブプレゼンスを確立しましょう。
サイトの作成Wix エディタの使い方とサイトコンテンツの管理方法について学びましょう。訪問者のプライバシーを保護し、サイトをよりアクセシブルにします。
アカウント・お支払いアカウント設定を確認し、定期購入とプレミアムプランを管理、請求内容を把握しましょう。
Wix モバイルアプリの使用Wix Owner アプリを使用してビジネスを効率的に運営し、訪問者と関わり、コミュニティを構築しましょう。
ドメインの接続ドメインの購入・接続・移管方法と、サイトデータを安全に保つ方法について理解しましょう。
ビジネスの管理支払いの受け付け、分析、訪問者とのつながりなど、ビジネスを構築し成長させるための適切なツールを見つけましょう。
サイトの宣伝検索エンジンでサイトを宣伝し、メルマガを送信し、有料広告を掲載する方法を学びましょう。
Wix Studio・パートナー・エンタープライズWix Studio、パートナー、エンタープライズアカウントを最大限に活用し、ビジネスを拡大しましょう。
ヘルプサイトのパフォーマンスや技術的な問題を解決するための情報を入手しましょう。製品ロードマップでは今後の機能について確認できます。
placeholder-preview-image
Wix Learnコースとチュートリアルでスキルを習得する。
Wix ブログウェブデザインやマーケティングなどのヒントを得る。
SEO ラーニングハブ検索エンジンからのトラフィックを増やす方法について学ぶ。
Website developmentフルスタックプラットフォームでカスタムサイトを構築する。
Wix パートナーに依頼あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image
この記事では下記を説明します:
  • ブレイクポイントごとにデザインをカスタマイズ
  • AI によるセクションのレスポンシブ化
  • ブレイクポイント間での自動サイズ変更
  • 要素のデザインをどの画面にも一致させる
  • 自動および手動のテキストスケーリング

Wix Studio エディタ:レスポンシブサイトを構築する

この記事内
  • ブレイクポイントごとにデザインをカスタマイズ
  • AI によるセクションのレスポンシブ化
  • ブレイクポイント間での自動サイズ変更
  • 要素のデザインをどの画面にも一致させる
  • 自動および手動のテキストスケーリング

新しい Wix Studio エディタは、あらゆる画面やデバイスで美しく表示されるレスポンシブなサイトを作成するための究極のツールです。最先端の機能を備えたこのプラットフォームでは、レスポンシブなサイトを迅速かつ正確に作成することができます。

Wix Studio エディタには、デザインプロセスを合理化するために厳選されたさまざまなツールが搭載され、プロジェクトを簡単かつ効率的に進め、優れた成果を上げることができます。
Wix Studio アカデミーにアクセスして、その他の Wix Studio ウェビナー、チュートリアル、コースをご覧ください。

ブレイクポイントごとにデザインをカスタマイズ

Wix Studio エディタでは、ブレイクポイントごとにサイトをカスタマイズできるため、常に綺麗なサイトを作成できます。ブレイクポイントとは画面サイズの範囲のことで、訪問者が使用する傾向のある画面とデバイス(例:タブレット、モバイルなど)を表します。
Wix Studio エディタでは、ブレイクポイントをまたいでデザインする場合、カスケードの概念が使用されます。大きなブレイクポイントに加えた変更は、小さなブレイクポイントにまで及びますが、小さなブレイクポイントでの変更は大きなブレイクポイントには影響しません。
上部の異なるブレイクポイントをクリックしたときにサイトデザインがどのように変化するかを示した GIF

AI によるセクションのレスポンシブ化

AI を活用して、ワンクリックですべての画面サイズでレスポンシブなセクションを作成しましょう。レスポンシブ AI ツールは、関連する要素のグループを識別し、各グループに最適なレイアウトツール(例:スタック、グリッド)を適用します。
レスポンシブ AI ツールによって生成されたプレビューのスクリーンショットで、変更内容を適用または破棄するオプションがハイライトされています。

ブレイクポイント間での自動サイズ変更

サイトをデザインする際、どの画面サイズでも要素が綺麗に見えるようにしたいものです。要素のサイズをピクセル単位で編集し、レスポンシブ動作を選択すれば、あとは自動で調整されます。
ドラッグハンドルを使用してキャンバス上の要素のサイズを変更する方法を示した GIF
すべての要素には、デフォルトのレスポンシブ動作(例:比例してスケーリング)が付属しており、異なる画面でのサイズ変更方法を制御します。これにより、各ブレイクポイントでサイズを設定する必要がないため、デザインプロセスがより加速します。
要素設定パネルから、要素のレスポンシブ動作をニーズに合ったものに変更できます。
「レスポンシブ動作」ドロップダウンが開いた状態と利用可能なオプションのスクリーンショット

要素のデザインをどの画面にも一致させる

要素を比例してスケーリングするように設定すると、どの画面でもデザインが理想的に見えます。要素設定パネルで「プロパティをスケーリング」トグルを有効にして、自動的に調整します。
レスポンシブ動作を比例してスケーリングするように設定した場合にのみ表示される、「プロパティをスケーリング」トグルのスクリーンショット。
これは、たとえば、要素に定義された枠線がある場合に便利です。小さな画面では枠線が太すぎて威圧的に見える場合や、大きな画面では枠線が表示されない場合があります。トグルを有効にすると、あとはデスクトップで希望のデザインを設定するだけです。

自動および手動のテキストスケーリング

Wix Studio エディタでは、画面サイズに比例して文字が自動的にスケーリングされるように設定されます。デスクトップで希望のフォントサイズを選択するだけです。最小値と最大値を設定して、デザインに対してテキストが小さすぎたり大きすぎたりしないようにすることができます。
テキストのスケーリングをより正確に制御する必要がある場合は、代わりに「カスタム」を選択します。これにより、個別のブレイクポイントごとにサイズ範囲を設定できます。
要素設定パネルの「テキストのスケーリング」オプションのスクリーンショット。ブレイクポイントの範囲を設定する場所が表示されています。

Helpmate

こんにちは、さん

さらにヘルプが必要ですか?
Unlock personalized helpLog in to get the most out of Helpmate.