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

「お問い合わせフォームを設置したのに、送信してもお客様に自動返信が届かない」「そもそも、問い合わせが来たことに自社側で気づけない」という経験はありませんか？ Wixでサイトを作るとき、多くの方はフォームを設置した時点で「これでお問い合わせを受けられる」と考えてしまいます。 ですが、実はフォームを置いただけでは、送信してくれたお客様に自動返信メールは届きません。 ここに「オートメーション設定」というひと手間が必要になります。 この記事では、Wixのオートメーション設定とは何かをわかりやすく整理したうえで、フォーム送信をきっかけに自動返信メールが届くまでの設定方法を、実際の操作手順に沿ってご紹介します。 Wix StudioとWixエディターのどちらでも共通で使える内容です。 結論：Wixのオートメーション設定とは、フォーム送信をきっかけに自動返信メールを届ける「発火の仕組み」を作る作業 はじめに、この記事の結論からお伝えします。 Wixのオートメーション設定とは、「特定のできごと（トリガー）が起きたら、決めておいたアクションを自動で実行する」仕組み

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

「制作実績が70件あるから、70ページ手作りしないといけないのだろうか」「商品が増えるたびにページを複製していたら、いつまで経っても終わらない」。 Wixでこうした悩みにぶつかったことはありませんか？ 実は、Wixの動的ページを使えば、ページは1枚作るだけで済みます。 あとはデータを追加した分だけ、同じデザインのページが自動で増えていきます。 この記事では、対策キーワードである「Wix 動的ページ 作り方」に沿って、コレクションの作成からフィールドの設計、よくあるつまずきまでを、実際の制作実績ページを題材に順を追って解説します。 Wixの動的ページとは？1ページ作るだけで全アイテムに自動展開される仕組み 結論：Wixの動的ページとは、Wix CMSに登録したデータ（コレクション）をもとに、1ページのデザインを全アイテムぶんに自動で展開してくれる仕組みのことです。 作り方の核は「ページを何枚も作る」ことではなく「データを1か所にまとめ、そのデータに1つのページをつなぐ」ことにあります。 まずは言葉の整理をしておきます。 Wixの動的ページを理解する

制作実績や商品一覧をWix Studioで並べたいのに、コレクションにはデータが入っているのに画面には何も出てこない。 そんな「表示されない」に頭を抱えた経験はありませんか？ その多くは、リピーターとコレクションの「つなぎ込み（接続）」でつまずいています。 逆に言えば、接続の考え方と正しい順番さえ押さえれば、データはあっけないほどきれいに並びます。 この記事では、Wix Studioでリピーターをコレクションに接続する手順を、実際の制作実績ページ（会社名・ハッシュタグ・画像の3項目）を題材に、つまずきポイントごと解説します。 結論：Wixのリピーター接続は「親のリピーター→中の各パーツ」の順でデータセットをつなぐと表示される 先に、この記事のいちばん大事な答えをお伝えします。 Wixでリピーターがうまく表示されないとき、ほとんどの原因は次の2つに集約されます。 そもそもリピーターを使わず、パーツを個別に置いてしまっている 接続の順番（親のリピーター → 中の各パーツ）を踏んでいない Wixのリピーターは「1件分の見た目（アイテム）」を作り、それを

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

「お問い合わせフォームで、選んだ内容によって聞く質問を変えたい」。 そんなご相談をよくいただきます。 たとえば「サービスについて」を選んだ人には予算や希望時期を聞きたいけれど、「採用について」を選んだ人にそれを見せても意味がない、というケースです。 全員に同じ質問を並べると入力の負担が増え、途中で離脱されてしまうことも少なくありません。 Wix Studioには、ドロップダウンの選択肢に応じて質問項目を出し分ける「ルール（条件分岐）」という機能が用意されています。 この記事では、ドロップダウンの値を条件にして、選んだ内容ごとに質問項目を表示・非表示に切り替える方法を、つまずきやすいポイントも含めてお客様の視点で解説します。 選んだ内容で質問を出し分けたい、というフォームの困りごと 1つのお問い合わせフォームで複数の問い合わせ内容に対応しようとすると、どうしても質問項目が増えてしまいます。 サービスの相談、採用の応募、取材の依頼など、目的によって聞きたいことが違うのに、全部の項目を1画面に並べてしまうと、入力する側にとっては「自分に関係ない質問」ば

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

お問い合わせフォームを作っていると、こんな悩みにぶつかります。 「サービスの相談」「採用の応募」「取材の依頼」など、問い合わせの種類が複数あるのに、それを1つのフォームで受けようとすると、どうしても質問項目が多くなりすぎてしまう。 かといって用途ごとにフォームを分けると、今度は管理が煩雑になってしまう。 この「多すぎる項目」問題をきれいに解決してくれるのが、Wixフォームの条件分岐です。 ドロップダウンで選んだ内容に応じて、表示する質問を自動で切り替えられます。 相談を選んだ人には相談用の質問だけ、応募を選んだ人には応募用の質問だけを見せる、といった出し分けが1つのフォームで完結します。 この記事では、Wixフォームの条件分岐がそもそも何なのか、どこから設定するのか、条件とアクションをどう組み立てるのか、そして設定後の確認方法までを、実際の操作の順番どおりにゼロから解説します。 専門的なコードは一切不要です。 結論：Wixフォームの「条件分岐（ルール）」とは選んだ内容で質問を出し分ける設定 Wixフォームの条件分岐（ルール）は、選んだ内容に応じて

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

サイトのデザインにこだわると、どうしても凝った装飾文字を使いたくなります。 グラデーションがかかったキャッチコピー、質感のある大きな見出し、独特のフォントで作り込んだタイトル。 こうした装飾文字を、Figmaなどで作り込んで「画像として」サイトに貼っている方は少なくありません。 ところが、この「装飾文字の画像化」には見落とされがちな落とし穴があります。 画像にしてしまった文字には、見出しタグ（H1やH2）を設定できないのです。 見た目は美しくても、検索エンジンからは「ただの画像」としか認識されず、内部SEOの観点で不利になってしまいます。 このページでは、Wix Studioの見出しタグと装飾文字にまつわるこの問題を整理し、デザイン性を落とさずに文字をテキストのまま扱ってSEOと両立させる方法を解説します。 デザインは満点なのに検索に弱い？装飾文字を画像化するとSEOで損をする理由 まず押さえておきたいのが、なぜ画像化した装飾文字がSEOに不利になるのか、という点です。 理由はシンプルで、画像には見出しタグを設定できないからです。...

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で制作実績やお知らせ、社員インタビューといった「同じ形のページがいくつも並ぶコンテンツ」を作ろうとすると、必ず出てくるのが「リストページ」と「アイテムページ」という言葉です。 この2つの関係がつかめないまま作業を進めると、どこに何を置けばいいのか分からなくなり、途中で手が止まってしまいます。 逆に言えば、この2つの関係さえ腹落ちすれば、Wix StudioのCMS（コンテンツ管理）は驚くほど扱いやすくなります。 この記事では「Wix リストページ アイテムページ とは」という疑問に、初心者がつまずかない順序でお答えします。 結論：Wixのリストページは一覧、アイテムページは詳細1件 先に結論からお伝えします。 リストページは「一覧」、アイテムページは「詳細1件」です。 そして、アイテムを追加すれば詳細ページが自動で増えます。 この一文が、この記事でいちばん覚えていただきたいポイントです。 言葉を置き換えると、次のようになります。 種類 役割 イメージ リストページ 複数のアイテムが並ぶ一覧ページ 制作実績が一覧で並ぶトップ

「見出しの文字にグラデーションをかけたいのに、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の「遅延（ディレイ）」とは？アニメーション開始の待ち時間のこと 遅延（ディレイ）とは、アニメーションが「始まるまでの待ち時間」を秒数で指定する設定のこと