合同会社BPカンパニー
神奈川県横浜市｜中小企業のブランディングならBPカンパニー
中小企業の皆様のありたい姿の実現のためのサービスを提供いたします。
TOP > Wixかんたん更新講座
自分で手軽に編集・更新！
初心者のための
Ｗixかんたん更新講座
Wixのホームページを自分で更新しよう！
でも、いざ取り組んでみたら意外と難しくてどうしたらいいのかわからない……
そんな方のために、Wixのエディタ（編集）画面やその使い方についての解説を掲載いたします！
Wixで制作されたホームページを自分で更新しよう！
そう思って「Wix.com 使い方」などで検索すると、ホームページの作り方そのものをガッツリ専門的に説明してくれるサイトは多いのですが、更新する・編集することに重きを置いた解説ページはなかなか見当たらないのではないでしょうか？
制作後に自分でホームページを更新していくことに、不安を覚えている方もいらっしゃるかもしれません。
WixプランナーのRikoです！
このページでは、Wixでホームページを制作いただいた方を対象に
カンタンな編集・更新のやり方をレクチャーいたします！
このページを読むのに向いている人
・Wix.comを使ったホームページを制作依頼して、自分では初めて更新していく人
・まだWix.comエディターの操作に慣れていない人
このページを読むのに向いてない人
・自分でイチからWix.comでホームページを制作しようと思っている人
Ｗixかんたん更新講座 もくじ
１ Wixエディターの基本操作
２ ページの追加・削除をする
３ パーツの追加・削除をする
・ストリップ
・テキスト
・画像
４ リスト&グリッド（リピーター・メニュー）の使い方
５ モバイル版の調整
６ 編集を保存する、ページを公開する
★ 上級編ページ
１ コンテンツマネージャーの使い方
２ ブログの追加・記事の作成
・画面構成について
・ツールパネルの解説
１ Wixエディターの基本操作
まずはホームページの編集をするための画面（エディター）を見てみましょう。
Wix.comにログインすると、以下のようなマイサイトというページに移動します。
皆さんはご自身のホームページが表示されているはずです。
このページの説明では「雑貨店サイト（解説用）」を使います。
編集・更新をしたいサイトにカーソルを合わせると、写真のようにボタンが現れるので、右の鉛筆マークのボタンを押してください。エディター画面への入り口になっています。
画面構成について
上記のようにWixエディターが表示されます。
画面解説
上部ナビゲーション
各メニューにカーソルを合わせるとサイトの設定などができます。
編集中は左側のページ切り替えやPC版・モバイル版の切替、右側の作業をやり直す矢印ボタンや保存。プレビューなどのボタンを使用することが多いと思います。
左部ツールパネル
ページの追加、画像やパーツの追加など、ホームページを作っていくためのツールが並んでいます。
皆さんが編集・更新で使用するのは主にこちらになります。
右部レイアウトパネル
ページに配置したパーツについて細かく設定する機能があります。
各パーツを右クリックすることによって出てくるメニューでも可能な機能なので、ご自身が使いやすい方を選んで利用してください。（右上の×ボタンで画面から消すことができます）
Aの上部ナビゲーションも部分的に使いますが、編集や更新で主に使うのはBのツールパネルが多いです。
全部覚える必要はないので安心してくださいね！
２ ページの追加・削除をする
ページの追加をしたい場合は、左のツールパネルの一番上を選択します。
ページ一覧が出てくるので、一番下にある「＋ページを追加」というボタンをクリックしてください。
すると「新しいページ」としてページが追加されます。ページの名前を入力して完了のボタンをクリックしてください。また、自動的にメニューバーにも新しいページが追加される仕様になっています。
作ったページを削除したい場合も同じ画面から作業します。
ページを削除したい場合は、そのページの右側にカーソルを合わせてメニューを表示させてください。
一番下に「削除」の項目があるのでそちらをクリックすると、ページを削除することができます。
また、ページの順序を入れ替えたいときは、下図のように各ページ項目の左側のドットマークをドラッグしたまま動かすと、そのページを好きな順番に入れ替えることが出来ます。（メニューバーにも反映されます）
３ パーツの追加・削除をする
このページをご覧になる皆さんが主にご使用になることが多いツールかもしれません。
テキストや画像、写真のギャラリーなどページに追加したい要素がある場合はここから選択して使います。
画面幅いっぱいに自動で配置できる背景（画像、動画）の設定です。
文章を挿入します。好みのテキストスタイルを選んだり、フォントやスタイルの調整ができます。
自分で用意した画像をアップロードしたり、Wixの無料写真素材を選んでページに挿入します。
画像の大きさや明るさなどの項目を調整できる「フォトスタジオ」という機能もあります。
ボタン
クリックすると訪問者を設定したリンク先に飛ばすことができる機能です。
ホームページ内の別のページや外部のウェブアドレス、文書ファイルなどにリンクできます。
ギャラリー
写真を美しいデザインで配置することができます。画像だけでなく動画、テキストを活用することもでき、形式もスライドショーやグリッド表示など様々です。
装飾
ベクターアートやクリップアートと呼ばれるイラストや画像を挿入できます。
インタラクティブ
画面幅いっぱいに使ったスライドショーや、サイトに訪問者が来た時に機能するライトボックスなどを配置できます。
ボックス
文字通りパーツを整理する箱のようなもので、ボックスに写真やテキストなどの他のパーツを追加することで、それぞれのパーツをまとめることができます。
リピーター・メニューというパーツを追加することができます。
中身の異なるテキストや画像を、統一されたデザイン・レイアウトで表示させることができます。
動画・音楽
素材やオリジナル動画・音楽をページに追加することができます。
メニュー
メニューバーやアンカーと呼ばれるページの目印のようなものを追加できます。
ソーシャル
SNSへのリンクを貼れるボタンを設置できます。
フォーム
お申込みフォームなどを追加できます。既に設置している場合、デザインの変更なども可能です。
埋め込み
HTMLコードなどの埋め込みができます。上級者向け。
コンテンツマネージャー・ブログ・ショップ・サービス予約・イベント・サイト会員
新しくWixアプリをダウンロードして利用します。コンテンツマネージャーについてはこちら
マイデザイン
自分の作ったパーツを並べたデザインを保存することできます。
要素はとても多いですが、まずはよく使うテキストや画像の追加などで慣れていってください。段々使いこなせるようになりますよ！
ページ内のコンテンツを増やすために、ストリップを追加する機会があるかもしれません。
写真配置のみのもの、カラムが分かれていてテキスト等が配置されているものなどがありますので、自分が作りたいストリップのイメージに近いものを選択するとよいでしょう。
選んだストリップをドラッグして、ページ内の配置したい場所にドロップします。
ページ内に配置できたら上下のストリップや要素との位置関係を調節しましょう。
テンプレートのストリップに使用されている背景写真やテキストなどは自由に変更ができます。自分のページに合わせて編集していきましょう。
また、ストリップはページ内の要素の間に出てくる＋ボタンを押すことでも配置することが可能です。
では次に、頻繁に更新されることも多いテキストの追加と削除を行ってみましょう。
パーツを追加するには、ツールパネルの上から３つ目にある「＋」の追加アイコンをクリックします。
「テキストを編集」で自由に文字を編集してください。フォントの色や大きさなども編集できます。
削除したい場合は右クリックのメニューから削除を選ぶか、対象パーツを選択してDeleteキーを押しても消せます。
一覧から追加したいパーツを選択しクリックする、もしくは追加したい位置にドラッグすると画面に配置されます。（ドラッグして持っていくやり方の方が場所が定めやすいのでおすすめです）
４ リスト&グリッド（リピーター・テーブル）の使い方
「追加」の要素の中でも使い方にコツがいる「リスト&グリッド（リピーター）」についても解説していきましょう。使いこなせるとよりデザイン性を高めた編集を行うことができます。
リスト&グリッドには「リピーター」と「テーブル」の二種類があります。
リピーターは同じデザインを連続で使用したいときに便利な要素です。
メニューは表やリストを簡単に編集・挿入することができます。
ここではリピーターを挿入してみましょう。好きなデザインを選び、下記画像にあるようにパーツをドラッグして追加したい位置にドロップします。
ページ内にリピーターが設置されました。
リピーターを選択すると出てくるメニューの「アイテムを管理」では、リピーター内のアイテムの並び替えや削除、複製を行うことができます。
並び替え
削除・複製
その隣のレイアウトボタンでは、リピーターの細かなデザインを変更することができます。
特にこだわりがなければそのままにしておくのが良いと思います。
リピーターのアイテム内の画像やテキスト、ボックスなどの配置を自由に変更することができます。
ただし、リピーターの特徴として、すべてのアイテム内で要素の配置が揃います。
例えば一番左のアイテム内のテキストの位置を変更すると、残りのアイテム内の同じ位置のテキストも同様に位置が変わります。一番左のアイテムのテキストだけ消して、残りのアイテム内では残したい…といったこともできません。
一番左のテキストだけを選択して動かしても……
真ん中のも右のも一緒に移動してしまいます。
この特徴を生かして、デザインの揃ったきれいなコンテンツを挿入できるのがリピーターの特徴です。
不要な要素を削除、画像とテキスト・フォントを変更して、以下のように活用することもできます。
リピーターを上手に活用してページデザインに取り入れ、よりお洒落な印象のサイト作りを目指したいですね！
写真の大きさや位置を整えて配置します。
既存の画像を変更したい場合は、画像を選択すると出てくる上のメニューから「画像を変更」で行えます。
該当の画像を選んでから出てくるメニューの「画像を変更」をクリックすると、先ほどの画像選択画面が出てくるので、差し替えたい写真を選んで同じようにページに追加のボタンを押してください。
また、配置した画像を削除したい場合の操作はテキストと同様です。
右クリックのメニューから削除を選ぶか、対象パーツを選択してDeleteキーを押して削除してください。
また、画像の追加や削除もよく行う編集の一つです。
自分で撮った写真を利用したい場合には「画像をアップロード」でいったんWixの中に写真を取り込んでから使用します。その他の写真素材も豊富なのでイメージに合う写真を利用できます。
「＋アップロード」ボタンで写真をアップロードできます。
取り込んだ写真は左側メニューの「サイトファイル」に保存されます。使う写真を選んで右下の「ページに追加」ボタンを押します。
５ モバイル版の調整
パソコン画面の編集をしたら、モバイル版の調整も忘れずに行いましょう。
スマホからページを閲覧したときに、デザインがズレてしまっていたり、意図しない表示になってしまっていることもあります。
画面左上のページ切り替えの横に、パソコンマークとスマホマークがあります。
スマホマークをクリックすることで、モバイルエディタに切り替えることができます。
画像やテキストの差し替え程度であれば、モバイル版のデザインが大きく崩れていることはほとんどありません。ですが、もしも上図のように画像が意図した位置よりもズレていたりしたら、モバイルエディタ上で修正をしてください。
モバイルエディタでの編集は、パソコンエディタの画面に影響を与えることはありません。
写真の位置と大きさを整えて、パソコン画面と同じような配置にすることができましたね。
編集するときはここまでチェックできていれば完璧です！
６ 編集を保存する、ページを公開する
「テキストも画像も変更したから、編集内容を保存しておかないと……」
大丈夫です、Wixでは基本的に、編集内容が自動保存される設定になっています。
上部ナビゲーションの右側に「保存」ボタンがあります。カーソルを合わせると、上記のように自動保存がオンになっていることを教えてくれます。
もちろんボタンを押して保存することもできますので、心配な人はそのようにしてもよいでしょう。
また、その隣の「プレビュー」ボタンを押すと、作ったホームページが実際にどのような形で表示されるのかを試しに確認することができます。プレビュー画面で問題がなければエディタ画面に戻り、いよいよ編集したホームページを公開しましょう。
ページの公開ももちろん、クリック一つで。
「公開」ボタンを押せば完了です！
このようなポップアップが表示されれば公開完了です。
無事にホームページを更新することが出来ました。実際のページにアクセスして、編集内容が反映されていることを確認してみてください。
以上が簡単なWixホームページの更新の流れになります。
こまめに更新をして、たくさんのお客さんにアクセスしてもらえるようなホームページをめざしましょう！
なお、BPカンパニーにてホームページ制作をご依頼いただいたお客様限定の特典といたしまして、「Wix操作無料サポート」が納品後6ヵ月間無料でご利用いただけます！
ご契約者様はぜひそちらもご利用ください。
また、Wix.comが公式で運営しているブログもあります。
より専門的な知識を身につけてみたいという方は、こちらもぜひご参照ください。→★Wix公式ブログ
