header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix でレスポンシブサイトを作成する

6分
Wix エディタおよび Wix Studio エディタでは、レスポンシブサイトの作成に役立つさまざまなツールや機能を使用して、あらゆる画面サイズに対応した美しいサイトを構築することができます。
Wix エディタでは、訪問者の画面サイズに応じて自動的にサイズが調整される全幅のセクション、スライドショー、ギャラリーなどを使用することができます。Wix Studio エディタでは、サイトをブレイクポイントごとにカスタマイズしたり、画面サイズに比例して要素がスケーリングされるようにしたり、AI でセクションをレスポンシブに変更したりして、クライアントにプロフェッショナルなサイトを制作することができます。
この記事では、Wix エディタおよび Wix Studio エディタのツールや機能を使用して、レスポンシブなサイトを作成する方法について説明します。

Wix エディタでレスポンシブ機能を使用する

Wix エディタには、さまざまな新機能が追加され、よりレスポンシブなサイトを構築できるようになりました。

モバイルエディタ

Wix エディタでデスクトップ用のサイトを作成すると、モバイル用のサイトが自動的に作成されます。モバイルエディタを使用すると、モバイル用のサイトのデザインやコンテンツをさらにカスタマイズして、モバイルユーザーのエクスペリエンスをより向上させることができます。
モバイルエディタで、モバイル用のサイトをスクロールダウンしている様子を示した GIF。
備考:
デスクトップ用のサイトとモバイル用のサイトは、同じサイトの異なる表示モードであり、別々のサイトではありません。デスクトップサイトへの変更はモバイルサイトに影響しますが、モバイルサイトへの変更はデスクトップサイトには影響しません。

全幅パーツ

Wix エディタには、全幅に引き延ばしたり、訪問者の画面サイズ(デスクトップ)に合わせて調整できる、さまざまなパーツが用意されています。
以下のパーツは、全幅に引き延ばしてレスポンシブにすることができます:
ストレッチ」アイコン が表示されるパーツは、全幅に引き延ばしてレスポンシブにすることができます。
Wix エディタでページに全幅スライドショーを追加し、プレビュー画面でウィンドウサイズを変更して、すべてのパーツがレスポンシブになっていることを確認している様子を示したスクリーンショット。
注意:
全幅に引き延ばすことができないパーツを使用する場合(例:テキストボックス、画像など)は、ほとんどの画面サイズでパーツが正しく表示されるように、縦のグリッド線の内側に収まるようにしてください。

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

Wix Studio エディタでは、レスポンシブに完全対応した、美しいデザインのサイトを構築することができます。最先端の機能を備えたこのプラットフォームでは、クライアントにレスポンシブなサイトを素早く制作することができます。
エディタには、デザインプロセスを合理化するために厳選されたさまざまなツールが搭載されており、プロジェクトを簡単かつ効率的に進め、優れた成果を上げることができます。
これらのツールや機能に関する詳細については、以下をクリックしてご覧ください。
Wix Studio エディタの上部で異なるブレイクポイントをクリックし、それぞれのデザインを確認している様子を示したスクリーンショット。