Wix Studio エディタ:レスポンシブサイトを構築する
読了時間:3分
新しい Wix Studio エディタは、あらゆる画面やデバイスで美しく表示されるレスポンシブなサイトを作成するための究極のツールです。最先端の機能を備えたこのプラットフォームでは、レスポンシブなサイトを迅速かつ正確に作成することができます。
Wix Studio エディタには、デザインプロセスを合理化するために厳選されたさまざまなツールが搭載され、プロジェクトを簡単かつ効率的に進め、優れた成果を上げることができます。
ブレイクポイントごとにデザインをカスタマイズ
Wix Studio エディタでは、ブレイクポイントごとにサイトをカスタマイズできるため、常に綺麗なサイトを作成できます。ブレイクポイントとは画面サイズの範囲のことで、訪問者が使用する傾向のある画面とデバイス(例:タブレット、モバイルなど)を表します。
Wix Studio エディタでは、ブレイクポイントをまたいでデザインする場合、カスケードの概念が使用されます。大きなブレイクポイントに加えた変更は、小さなブレイクポイントにまで及びますが、小さなブレイクポイントでの変更は大きなブレイクポイントには影響しません。
![上部の異なるブレイクポイントをクリックしたときにサイトデザインがどのように変化するかを示した GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/13/afa4d605-cabe-42c6-bdce-0da623a09f3b/d5956f5e-c41d-4f76-8cae-db8b8ff5b0b7.gif)
AI によるセクションのレスポンシブ化
AI を活用して、ワンクリックですべての画面サイズでレスポンシブなセクションを作成しましょう。レスポンシブ AI ツールは、関連する要素のグループを識別し、各グループに最適なレイアウトツール(例:スタック、グリッド)を適用します。
ブレイクポイント間での自動サイズ変更
サイトをデザインする際、どの画面サイズでも要素が綺麗に見えるようにしたいものです。要素のサイズをピクセル単位で編集し、レスポンシブ動作を選択すれば、あとは自動で調整されます。
px* とは?
![ドラッグハンドルを使用してキャンバス上の要素のサイズを変更する方法を示した GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/63fcd577-933e-4cff-b83c-453fdf264a6e/a4e5b5c4-dd66-4050-b719-0316c82c3400.gif)
すべての要素には、デフォルトのレスポンシブ動作(例:比例してスケーリング)が付属しており、異なる画面でのサイズ変更方法を制御します。これにより、各ブレイクポイントでサイズを設定する必要がないため、デザインプロセスがより加速します。
要素設定パネルから、要素のレスポンシブ動作をニーズに合ったものに変更できます。
![「レスポンシブ動作」ドロップダウンが開いた状態と利用可能なオプションのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/1192b20d-03af-439d-8f96-61925d89e6f3/167db4a9-0775-446e-a930-b68a02da9faf.png)
要素のデザインをどの画面にも一致させる
要素を比例してスケーリングするように設定すると、どの画面でもデザインが理想的に見えます。要素設定パネルで「プロパティをスケーリング」トグルを有効にして、自動的に調整します。
![レスポンシブ動作を比例してスケーリングするように設定した場合にのみ表示される、「プロパティをスケーリング」トグルのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/014dda12-2933-4444-b54d-a7883c3e4710/61517def-cb26-4834-b64e-534a7c7fbd97.jpg)
これは、たとえば、要素に定義された枠線がある場合に便利です。小さな画面では枠線が太すぎて威圧的に見える場合や、大きな画面では枠線が表示されない場合があります。トグルを有効にすると、あとはデスクトップで希望のデザインを設定するだけです。
自動および手動のテキストスケーリング
Wix Studio エディタでは、画面サイズに比例して文字が自動的にスケーリングされるように設定されます。デスクトップで希望のフォントサイズを選択するだけです。最小値と最大値を設定して、デザインに対してテキストが小さすぎたり大きすぎたりしないようにすることができます。
テキストのスケーリングをより正確に制御する必要がある場合は、代わりに「カスタム」を選択します。これにより、個別のブレイクポイントごとにサイズ範囲を設定できます。
![要素設定パネルの「テキストのスケーリング」オプションのスクリーンショット。ブレイクポイントの範囲を設定する場所が表示されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/baefb701-d5c7-4068-8fbf-c93bd0258de4/b4c8928b-b2d6-43b1-ae3a-2b5945badf35.jpg)
お役に立ちましたか?
|