![](https://sposai-trivia.com/wp-content/uploads/2024/05/23724370-1.jpg)
最近のホームページはスマホ対応が必須だって聞いたけど、Wixのレスポンシブデザインの使い勝手はどうなの?
そんな疑問におこたえします。
![](https://sposai-trivia.com/wp-content/uploads/2024/06/74dc1e57b951255721b38ef9d19ec5f4-375x375-1.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/06/74dc1e57b951255721b38ef9d19ec5f4-375x375-1.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/06/74dc1e57b951255721b38ef9d19ec5f4-375x375-1.png)
こんにちはろにぃです。サイト制作を始めてから10年
・月収100万円のサイトを作成、運営
・クライアントのサイトの作成、編集、管理
・SEO相談
などの経験を活かして、サイト制作やSEOについて情報発信をしております。
今回はこれから自分でサイトを作ろうという方向けにWixのスマホ表示、レスポンシブデザインについて解説します。
ハッキリ言って2023年春頃までWixのレスポンシブはダメダメでした。ところが2023年夏に『Wix studio』というサービスがスタートして激変。
この新サービスでサイト作成をしてみた結果、衝撃的な進化を遂げていました!
にも関わらず、公式の解説は相変わらず英文直訳、専門用語のオンパレードでわかりにくい。初心者の方なら最後まで読むことなく、そっとサイトを閉じると思います。
そこでぼくが今回のWixのレスポンシブについて、これから初めてWixを触るという人にもわかるよう、丁寧に解説します。
これからWixでサイト作成をスタートする方は、本記事内容を確認してからでないと後悔することになるかも。ぜひ最後までご覧ください!
![](https://d3vqou0viapnu1.cloudfront.net/185/wix2.png)
![](https://d3vqou0viapnu1.cloudfront.net/185/wix2.png)
これまでのWixレスポンシブは何がダメだったのか?
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23642863-edited-1024x576.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23642863-edited-1024x576.jpg)
Wix Studio登場前のWixレスポンシブデザインはどこに問題があったのか?ぼくがWixを使っていて特にイラッとした点を3つ紹介します。
- エディターの切り替えが重い
- デザインが崩れる
- テキスト設定が難しい
順に紹介します。
1.エディターの切り替えが重い
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23576772-1-edited-1024x576.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23576772-1-edited-1024x576.jpg)
以前、Wixのサイト作成は、
- PC用サイトデザイン
- モバイルサイトデザイン
と2段階に分けて編集しなければなりませんでした。その都度エディターを切り替えなければならず、この動作が重いためイラッとしたんです。
2.デザインが崩れる
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23537987-edited-1024x576.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23537987-edited-1024x576.jpg)
WixはPC用サイトデザインを終えた後、モバイル表示を確認すると各パーツのサイズ感がメチャクチャ。モバイル最適化という機能もありますが、使うとさらに崩れる地獄ループ。
何かパーツを追加したり、編集するたびに全体のデザイン修正が必要になることがあり、イラっとしました。
3.テキスト設定が難しい
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23576735-2-edited-1-1024x576.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23576735-2-edited-1-1024x576.jpg)
Wixのモバイルサイトデザイン編集ではテキストの改行ができません。調整が難しく、意図しないところで改行されイラッとします。
少し手間がかかりますか、一応対応策はありますので紹介しておきます。
▶ 【スマホでも美しく】Wixサイトのテキストを綺麗に整える方法
![](https://sposai-trivia.com/wp-content/uploads/2023/05/42cedcf3-5368-45a6-849e-2a50550be0d5-1-300x169.jpeg)
![](https://sposai-trivia.com/wp-content/uploads/2023/05/42cedcf3-5368-45a6-849e-2a50550be0d5-1-300x169.jpeg)
Wix studioのレスポンシブ対応はココが凄い
![](https://sposai-trivia.com/wp-content/uploads/2024/07/0d6674_0ad55add0b5747bb8558c7d33fc93e55mv2-edited-1024x576.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/0d6674_0ad55add0b5747bb8558c7d33fc93e55mv2-edited-1024x576.jpg)
Wix studioのレスポンシブ対応は以下の2点がとにかく凄い!
- マウス操作でレスポンシブ確認ができる
- ワンクリックでレイアウト整理ができる
順に詳しく解説します。
1.マウス操作でレスポンシブ確認ができる
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23047575-1-edited-1-1024x576.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23047575-1-edited-1-1024x576.jpg)
今回、最も『Wixがついにやってくれた!』と思ったのがコレ。
Wix studioではマウス操作だけで、画面サイズごとの表示状態を確認できます。テキストがどこで改行されるのかも確認しながら編集できる。
文章だとわかりにくいので動画で確認ください↓
※音声はないので電車内でも安心して御覧ください
後から『あっココなおさなきゃ』という手間を防げるんです。
しかもこのレスポンシブ設定、複雑な配置でもAIが全てやってくれる。もうあのわずらわしい作業から完全に開放されました!
2.ワンクリックでレイアウト整理ができる
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23025111-edited-1024x576.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/23025111-edited-1024x576.jpg)
Wix studioではワンクリックで素材を配置するセクションを分割できます。今までのWixにはこの分割に制限があり、アバウトに素材を配置していました。
出来上がったときはいいのですが、すぐに崩れてしまい、度々修正しなければならなかったんです。
今回このセクション分割ができるようになったことで、デザイン崩れは解消できそうです。
![](https://sposai-trivia.com/wp-content/uploads/2024/07/9ee9ac14a1c2facb94e3bc30b2a3e84c-1024x510.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/9ee9ac14a1c2facb94e3bc30b2a3e84c-1024x510.png)
レスポンシブと一緒に活躍してくれるので、どんな端末で閲覧しても違和感ないサイトができますね!
レスポンシブ以外のWix studioの凄いところ
![](https://sposai-trivia.com/wp-content/uploads/2024/07/22941261-edited-1024x576.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/22941261-edited-1024x576.jpg)
レスポンシブ以外にも進化した部分がたくさんあります。その中でも特にサイト作成に大きな影響を与える変化を5つ紹介します。
- AIコーディング
- AI文章生成
- 画像生成
- 背景の自動削除
- トレーラー動画の自動生成
1.AIコーディング
![](https://sposai-trivia.com/wp-content/uploads/2024/07/eb23646a10f06bf427725cbdd4ae75b7-1024x576.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/eb23646a10f06bf427725cbdd4ae75b7-1024x576.png)
Wixで簡単にデザインができるのは一定ラインまで。思い通りにデザインをしようとすればコード知識が必要でした。
Wix StudioではChatGPTのようにAIに指示をすればコードを作成してくれます。もうコードが書けなくても指示さえできれば思い通りにデザインできてしまうんです。
2.AI文章生成
![](https://sposai-trivia.com/wp-content/uploads/2024/07/8c58f602f1e0b031bd3e9742cea16339-1024x576.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/8c58f602f1e0b031bd3e9742cea16339-1024x576.png)
サイトに重要な要素の1つ文章。文章内容がわかりにくく、ユーザーの頭にハテナマークが浮かんでしまうようなものだと、当然見てもらえません。
でもWeb用のライティングって難しいんですよね。
Wix Studioでは文章を書くのが苦手な人でも悩まなくていいよう、AIが適切な文章を提案してくれます。もう「何を書いたらいいんだろう?」と悩む必要もなくなりますね!
3.AI画像生成
![](https://sposai-trivia.com/wp-content/uploads/2024/07/ad162ab4bdd4fdc641e90fa77e11fcac-1024x576.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/ad162ab4bdd4fdc641e90fa77e11fcac-1024x576.png)
Wix Studioは画像もAIで作成できます。素人でもプロ並みの画像が作れるMidjouneyと同じようなことがWix内でできてしまうんです。
サイトは画像が命。質の高い画像を入手しようとしたら有料サイトで購入する必要がありますが、サイトイメージに合った画像を探すのは大変。
Wix StudioのAI画像生成を使えば、あなたの指示に合わせて画像を作ってくれます。制作も編集も大幅に時間短縮ができますね!
4.背景の自動削除
![](https://sposai-trivia.com/wp-content/uploads/2024/07/f8439eab92994b4b7bbb12c37fd3461a-1024x576.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/f8439eab92994b4b7bbb12c37fd3461a-1024x576.png)
画像の背景を消すことだってWix内でできるようになりました。
これまではPhotoshopのような別ソフトで素材を用意してからWixにアップロードしていましたが、もうWix1本でできる。大幅な作業時間短縮ができますね!
5.トレーラー動画の自動生成
![](https://sposai-trivia.com/wp-content/uploads/2024/07/769bfd47259756bdf238e48ae6563f85-1024x576.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/769bfd47259756bdf238e48ae6563f85-1024x576.png)
動画素材を選択し、いくつかの設定を指定するだけでトレーラー動画を作ってくれます。
ぼくはWixに動画アップロードは反対派です。動作が重くなり、サイト表示速度がガクンと落ちるんです。
![](https://sposai-trivia.com/wp-content/uploads/2023/05/aa8011fa-066d-44ef-bde9-7862f6e8fed7-1-300x169.jpeg)
![](https://sposai-trivia.com/wp-content/uploads/2023/05/aa8011fa-066d-44ef-bde9-7862f6e8fed7-1-300x169.jpeg)
しかしこの機能を使えば、SNS用に作成しシェア、SNSからサイトへの流入を狙う使い方がWix1つでできます。動画編集ソフトを使っていない方には手軽でいいかもしれません。
まとめ
![](https://sposai-trivia.com/wp-content/uploads/2024/07/Frame-1000001756-edited.webp)
![](https://sposai-trivia.com/wp-content/uploads/2024/07/Frame-1000001756-edited.webp)
今回は2023年8月にリリースされたWixの凄さ、特にレスポンシブ機能の進化について紹介してきました。
これまで『Wixだとここまでしかいじれない』とあきらめていた部分が、今回のアップデートで全て吹き飛びました。よりオシャレなサイトを思い通りに作れるようになりましたね。
レスポンシブ以外にもWixサイトを運営する上で役立つ機能を紹介していますのでチェックしてみてください!
![](https://sposai-trivia.com/wp-content/uploads/2023/07/3f043af9-f912-47d9-950c-89599a39fb6e-1-300x169.jpeg)
![](https://sposai-trivia.com/wp-content/uploads/2023/07/3f043af9-f912-47d9-950c-89599a39fb6e-1-300x169.jpeg)
コメント