Wixの最新情報を届けるメディア

Wix Studioで作ったサイトのテキストを少し書き換えただけなのに、文字が枠からはみ出したり、下の要素とくっついてレイアウトが崩れてしまった、という経験はありませんか？公開後にお客様側で原稿を差し替えたら、見出しと本文が重なってしまった、というご相談も少なくありません。 実はこの「文字の突き抜け」、多くの場合は原因がはっきりしていて、直し方もシンプルです。 この記事では、Wix Studioで文字が突き抜ける・要素がくっつく原因と、パディング不足を直して二度と崩れにくいレイアウトにする方法を、お客様目線で順番に解説します。 更新するたびに文字が突き抜け・要素がくっつくのはパディング不足が原因 更新すると文字が突き抜けたり要素同士がくっついたりする最大の原因は、要素やコンテナの内側に余白（パディング）が設定されていないことです。 パディングが無い状態では、テキストがコンテナのふちギリギリまで広がります。 短い文章のうちは問題なく見えますが、更新で文章が長くなった瞬間に、文字が枠の外へあふれたり、下の要素とぶつかったりします。...

「アニメーションが動くかっこいいサイトを作りたいけれど、動きを一から設定するのは大変そう」。 Wix Studioでサイトを作っていると、そう感じる場面は少なくありません。 スクロールに合わせて要素がふわっと現れる、そんな動きを自分で組もうとすると、位置や再生タイミングの調整に手間取ってしまいます。 そこで頼りになるのが「デザインキット」です。 この記事では、Wix Studioのデザインキットの使い方を、どこにあるのかという入口から、アニメーション付きパーツの配置、プレビューでの動きの確認、文言の差し替えまで順番に解説します。 動きのあるサイトを短時間で形にしたい方は、ぜひ最後までご覧ください。 結論：Wix Studioのデザインキットとは？どこにある？（要素を追加の場所） 結論から言うと、Wix Studioのデザインキットは、アニメーションがあらかじめ付いた完成済みのセクションを置いて、あとは文言を差し替えるだけでデザインを時短できる機能です。 動きを一から自作する必要がなく、テンプレートのように使えるのが最大の魅力です。...

「参考サイトで見たようなスクロールに合わせてスッと文字が現れる動き、Wixでも作れるのだろうか？」とお考えではないでしょうか。 実際にWixのアニメーションをやってみたものの、スクロールしても要素がピクリとも動かず、設定が合っているのか分からないまま止まってしまった、という経験はありませんか？ Wix Studioでは、こうしたスクロール連動の演出をコードを書かずに設定できます。 この記事では、スクロールアニメーションの仕組みから、動かないときのチェックポイント、実際にプリセットを選んで仕上げる手順まで、実例をもとに順を追ってご紹介します。 結論：Wixのスクロールアニメーションの付け方は、要素を選んでプリセットから動きを選ぶだけ 先に結論からお伝えします。 Wix Studioでスクロールアニメーションを付ける手順は、コードを一切書きません。 動かしたい要素を選び、アニメーションのプリセット一覧から動きを選んで、あとは試行錯誤しながら微調整するだけです。 かつて「Wixはダサい」「プロの制作には向かない」と言われた時代がありました。 これはWi

Wix Studioでサイトを作っていると、「パディング」「マージン」という言葉が出てきて、どちらが何の余白なのか混乱してしまう。 そんな経験はありませんか？ 見た目はきれいに整っていたのに、あとから文章を差し替えたら要素同士がくっついてしまった。 中央がなんとなくズレていて「Wixっぽい素人感」が抜けない。 こうした悩みの多くは、余白を手で揃えてしまっていることが原因です。 パディングとマージンは、名前が似ているうえに設定パネルの近い場所に並んでいるため、初心者がつまずきやすいポイントです。 ただ、違いさえ一度つかんでしまえば難しいものではありません。 この記事では、内側の余白と外側の余白という考え方で、両者の使い分けをやさしく解説します。 パディングとは？要素の「内側」の余白のこと パディングは、要素の「内側」にできる余白のことです。 もう少しかみ砕くと、コンテナ（枠）と、その中に入っているコンテンツ（テキストや画像）との間にできる空間を指します。 イメージしやすいのは、額縁の中に写真を入れたときの、写真と額縁のフチの間のスペースです。...

スマホでサイトを見たとき、「PCではきれいだったのに、実機だと文字が切れている」「ボタンが画面からはみ出している」といった崩れに気づいた経験はありませんか？Web制作では、PCの画面上でどれだけ丁寧に整えても、実際にスマホで開いてみて初めて見えてくる問題が少なくありません。 Wix Studioには、その実機確認を驚くほど手軽にしてくれる機能があります。 それが「QRコードによるスマホプレビュー」です。 エディタに表示されるQRコードをスマホのカメラで読み取るだけで、いま作っているサイトをそのまま自分のスマホで確認できます。 この記事では、Wix Studioのスマホプレビューの基本から、QRコードでの実機チェックの手順、そして実機確認で見つかりやすいレイアウト崩れの対処法まで、お客様の目線でわかりやすくご紹介します。 Wix Studioのスマホプレビューとは？PC上でスマホ表示を確かめる仕組み Wix Studioのスマホプレビューとは、制作中のサイトがスマートフォンでどう表示されるかを、公開前に確認するための仕組みです。 Wix...

サイトのファーストビューで、大きな見出しの文字そのものが写真や動画で埋め尽くされているデザインを見たことはないでしょうか。 文字の輪郭の内側だけに映像がのぞく、あの印象的な表現です。 以前のWixでこれをやろうとすると、デザインした文字を画像として書き出して貼り付けるしかありませんでした。 ところがWix Studioには、文字をテキストのまま残したまま同じ表現ができる「テキストマスク」という機能が用意されています。 この記事では、Wix Studioのテキストマスクとは何か、どこから追加するのか、そして文字の中に画像・グラデーション・動画を流し込む具体的な設定方法まで、順を追ってご紹介します。 結論：Wix Studioのテキストマスクとは、文字を「窓」にして中に画像・動画・グラデーションを流し込んで見せる機能 まず結論からお伝えします。 Wix Studioのテキストマスクとは、文字の形そのものを「窓」として使い、その窓の内側に画像・動画・グラデーションを流し込んで見せる機能です。 文字の外側は透明になり、文字の輪郭の内側だけに素材が現れます

Wix Studioでテキストや画像を置こうとして、「あれ、好きな場所にドラッグできない」「左・中央・右の3つしか選べない」と手が止まった経験はありませんか。 以前のWix（クラシックエディター）なら、パーツを掴んで画面のどこにでも自由に落とせました。 ところがWix Studioでは同じ感覚で操作しても要素が思った場所に動いてくれません。 これは不具合ではなく、Wix Studioの設計思想そのものです。 この記事では、なぜWix Studioで要素が自由に配置できないのか、そして狙った位置に置くための正しい手順を、実際の操作の流れに沿って解説します。 Wix Studioで要素が「左・中央・右」しか動かせない理由 Wix Studioを触り始めた方がまず戸惑うのが、要素の配置の自由度です。 従来のWixは、上部のメニューからタイトルや画像などのパーツをドラッグして、画面の好きな座標にそのまま置ける「ドラッグ&ドロップ型」でした。 感覚的で分かりやすい反面、レイアウトが崩れやすいという側面もあります。 一方のWix Studioは、コーディング

BtoBのサイトで問い合わせにつながるコンテンツといえば、やはり「導入事例」や「制作実績」のページです。 取引先の名前や成果が並んでいると、初めて訪れた見込み客も安心して検討を進められます。 ところが、この事例ページは案件が増えるたびに追加していくものなので、作り方を間違えると更新のたびに膨大な手間がかかってしまいます。 この記事では、Wix StudioのCMSを使って導入事例ページ（制作実績ページ）を作る方法を、コレクションの作成からリストページ・アイテムページの構築、公開後の運用まで、最初から最後まで順を追って解説します。 「Wix Studio 導入事例ページ 作り方」を調べている方が、この1本で全体像をつかめる内容を目指します。 結論：導入事例ページはCMSで作れば「複製ゼロ・追加するだけ」で量産できる 先に結論をお伝えします。 Wix Studioで導入事例ページを作るなら、ページを1枚ずつ複製するのではなく、CMS（コンテンツ管理システム）で作るのが正解です。 CMSで作っておけば、事例が増えても新しいページを作る必要はありません。

Wix Studioで作ったサイトに動きをつけたい。 文字がふわっと出てきたり、画像がスライドして入ってきたり、そんな演出を加えるだけで、ページの完成度は一気に上がります。 実際、アニメーションがあるかないかだけで体感の完成度は約30%変わるとも言われるほど、印象を左右する要素です。 ところが、いざ設定しようとすると「アニメーションの入口がどこにあるのか分からない」「パーツを選んだのに稲妻マークが出てこない」とつまずく方が少なくありません。 しかも、コードを書かないといけないのではと身構えてしまう方もいます。 結論から言うと、Wix Studioのアニメーションはコーディング一切なしで、ボタン操作だけで付けられます。 この記事では、稲妻マークの場所から種類の選び方、実際の付け方、そしてプレビューで仕上げるコツまで、順を追って解説します。 結論：Wix Studioのアニメーションは「稲妻マーク」から付ける Wix Studioのアニメーションは、パーツを選ぶと出る「稲妻マーク」から、コーディングなしで付けられます。 これがこの記事で一番お伝えした

「Wixでサイトを作った経験があるから、Wix Studioも同じ感覚で編集できるだろう」 そう考えて実際にWix Studioを触ってみたら、テキスト一つを思った場所に置けずに戸惑った。 そんな声をよく聞きます。 実は、WixのクラシックエディタとWix Studioは、見た目こそ同じ「Wix」でも、編集の考え方そのものが根本的に違います。 この違いを知らないまま作業を始めると、「なぜ動かないのか」「どこをいじれば直るのか」がわからず、時間だけが過ぎてしまいます。 この記事では、Wix Studioとクラシックエディタの編集方法の違いを、要素の配置・ボックスの概念・カスタムコード対応といった実務の観点から整理します。 そのうえで、あなたのサイト要件にはどちらのツールが向いているのか、判断のポイントまでお伝えします。 そもそもWix Studioとクラシックのエディタは編集方法が何が違うのか 同じ「Wix」というブランドの中に、大きく分けて2つの編集環境があります。 一つは以前から親しまれてきたクラシックエディタ（一般に「Wixエディタ」と呼ばれ

「見出しの文字にグラデーションをかけたいのに、Wix Studioでやり方が見つからない」。 そんな相談をよくいただきます。 デザインカンプではきれいにグラデーションがかかっているのに、いざWixで再現しようとすると通常の文字設定にはグラデーションの項目がなく、結局「文字を画像として書き出して貼り付ける」しかない、と諦めてしまうケースです。 実はWix Studioには、文字を画像化せずにグラデーションを流し込める「テキストマスク」という機能が用意されています。 この記事では、なぜ普通の設定ではグラデーションがかけられないのかという原因から、テキストマスクを使った具体的な手順、そして画像化しないことで得られるメリットまで、お客様の視点で順を追って解説します。 Wix Studioで文字にグラデーションがかけられない原因とは まず知っておきたいのは、Wix Studioの「通常の文字設定」にはグラデーションを直接指定する項目が用意されていない、という点です。 タイトルや段落を「クイック追加」から置いて文字色を変えようとしても、選べるのは基本的に単色

Wix Studioでサイトを作っていて、PC表示ではきれいに見えるのに、タブレットに切り替えた途端に文字が読めないほど小さくなっていた、という経験はありませんか。 実際に「タブレット表示だと本文が9pxくらいになってしまう」というつまずきは、Wix Studioを使い始めた方からよく聞く悩みです。 この記事では、Wix Studioのタブレット文字サイズがなぜ極端に小さくなるのか、その原因から、見やすい推奨サイズ、そしてPC・タブレット・スマホをまたいだデバイス別のフォントサイズの決め方までを、実際の制作現場の考え方にそって整理します。 数値の目安がわかれば、どのデバイスで見ても読みやすいサイトに近づけられます。 Wix Studioでタブレット表示の文字が9pxなど極端に小さくなる原因 まず押さえておきたいのは、Wix Studioのタブレットで文字が小さくなるのは不具合ではなく、レスポンシブデザインの仕組みが働いた結果だということです。 Wix Studioはレスポンシブデザイン、つまりPC・タブレット・スマホという画面サイズの違いに合わせ

Wix Studioでアニメーションを設定したのに、なぜか安っぽく見える。 プレビューを再生すると、画像もタイトルも文章もボタンも、全部が同じ瞬間にドンと出てくる。 動いているのに、なぜか野暮ったい。 そんな経験はありませんか。 その正体は、多くの場合「遅延（ディレイ）」を使えていないことにあります。 アニメーションの種類を選ぶだけで満足してしまい、表示するタイミングまで作り込めていない状態です。 実は、Wix Studioには各パーツの表示開始時間を秒単位でずらせる「遅延」という設定があり、ここを整えるだけで、同じアニメーションでも印象がまるで変わります。 この記事では、Wix Studio アニメーション 遅延 設定の考え方と具体的な手順を、画像とタイトルを時間差で見せる例を軸に解説します。 コーディングは一切不要で、ボタン操作だけで洗練された時間差演出が作れます。 結論：Wix Studioの「遅延（ディレイ）」とは？アニメーション開始の待ち時間のこと 遅延（ディレイ）とは、アニメーションが「始まるまでの待ち時間」を秒数で指定する設定のこと

PCで見たときはきれいに整っているのに、スマホで開いた瞬間に文字がはみ出したり、ボタンが画面からずれたりしていた。 そんな経験はありませんか。 これはWix Studioのレスポンシブ設定がまだうまく効いていないサインです。 この記事では、Wix Studioのレスポンシブ設定方法を、要素をスタックでまとめる下準備から、デバイス表示の切り替え、崩れの直し方、文字サイズと横幅の個別調整まで、初心者の方でも順番どおりに進められるよう解説します。 専門用語はそのつど噛み砕いて説明するので、はじめてWix Studioを触る方も安心して読み進めてください。 Wix Studioのレスポンシブ設定とは？PC・タブレット・スマホで自動で変わる仕組み Wix Studioのレスポンシブ設定とは、PC・タブレット・スマホという画面サイズの違うデバイスごとに、レイアウトや文字の大きさを画面幅に合わせて自動で調整する仕組みのことです。 同じページでも、大きなモニターでは横に広く、スマホでは縦にすっきりと並ぶよう、表示が切り替わります。 この切り替わりの境目になるのが

「実績ページやスタッフ紹介を追加するたびに、いちいち編集画面を開いてレイアウトを組み直すのが大変」。 ホームページを運用していると、こうした更新作業の負担に悩む場面は少なくありません。 ページが増えるほど、1件の追加や修正にかかる手間はふくらんでいきます。 この悩みを根本から解決するのが、Wixの「CMS」という仕組みです。 名前だけ聞くと難しそうに感じるかもしれませんが、考え方はとてもシンプルで、一度理解すれば「なぜもっと早く使わなかったのか」と感じる方が多い機能です。 この記事では、WixのCMSとは何かを、専門用語をかみくだきながら初心者の方にもわかるように解説します。 WixのCMSとは、編集画面に入らずページの内容を一括更新できる仕組み 先に結論からお伝えします。 WixのCMSとは、「コレクション」というデータの入れ物を使い、編集画面に入らずページの内容を一括で更新できる仕組みのことです。 もう少しかみくだくと、CMSは「データ」と「デザイン」を切り離して管理する考え方です。 ページのデザイン（見た目）はあらかじめ1つだけ作っておき、

Wix Studioでサイトを編集していると、レスポンシブ動作の設定欄に出てくる「ハグ」という言葉。 なんとなく設定したまま放置している方も多いのではないでしょうか。 実はこの「ハグ」、使いどころを押さえると非常に便利な一方、知らずに使うと「文字が枠から突き抜ける」といったトラブルの原因にもなります。 この記事では、Wix Studioの「ハグ」とは何かをやさしく解説したうえで、便利に効くシーン、似た設定「比例してスケーリング」との違い、そして文字が突き抜けるときの直し方までを、操作手順ベースでまとめます。 Wix Studioに不慣れな方でも、読み終わるころには「ハグ」を自信を持って使い分けられるようになります。 結論：Wix Studioの「ハグ」とは、枠が中身に合わせて自動で伸縮するレスポンシブ動作のこと Wix Studioの「ハグ」とは、要素の枠（ボックス）が中に入っているコンテンツのサイズに合わせて自動的に伸縮するレスポンシブ動作の設定です。 テキストや画像など中身の大きさが変わると、枠もそれに寄り添うように調節されます。 Wix..