WiX

クラウド型CMSの中で多くの人に利用されています。Googleサイトに比べ圧倒的に細やかな設定が出来、見栄えするサイトを作ることができます。 (2021年5月)

WIX

グルーグルサイト同様にクラウド型CMSサービスです。イスラエルの会社が開発し世界中1億人が利用していると言われています。グルーグルサイトより少し複雑ですが、より細やかに思いに近いホームページができます。また、ブログも同じように作成できるので、一体的に考えている人向きでもあります。

WiXを利用するには登録が必要です。(無料版で利用可能)

新規登録

WiXで検索するなどして、WiXのページにアクセスしてください。WiXのアドレスは、https://ja.wix.com/

右図の画面になります。「今すぐはじめる」か右上の「/新規登録」をクリックします。

右図の新規登録画面になります。

連絡先に使うメールアドレスを入力し、パスワードを設定して入力します。

連絡先メールアドレスに登録が届きますので、メール内の「今すぐはじめる」をクリックするか、新規登録の下にある「こちらからログイン」をクリックしてログインします。

GoogleかFaceBookのIDでも登録可能です。

WiXはテンプレートが豊富にあり、ログインすると右下の画面で、テンプレート選択画面が出ます。Googleサイト同様にどれかのテンプレートを選択してどのような構造か見ることも一つです。全てのテンプレートで編集前にプレビュー表示ができます。

右図の「その他」を選択します。

下図のテンプレート選択画面がでます。左メニューにジャンルが表示されます。

ジャンルのコミュニティにある非営利を選択します。約20のテンプレートがあります。

今回は、この中から「自然保護グループ」(2ページ目)をサンプルに利用していきます。

Googleサイトのように白紙のテンプレートで全くの白紙状態から作ることもできますが、タイトルやメニュー構成などのレイアウトを理解すること考えると、適当なテンプレートを活用することから始めると理解が早く進められます。

右図が「自然保護グループ」のテンプレートです。

上部にメニューがあり、タイトルとその下が画像がカルーセルになっています。4項目の概要枠があります。右下にはSNS連携ボタンも用意されています。

「自然保護グループ」のテンプレートの上にカーソルをあてると下左図の「編集」「表示」となります。編集ボタンをクリックして編集を開始します。

下右図が自然保護グループの編集画面です。(クリックすると拡大表示できます。)

①トップバー=編集画面に関わる設定

②左に並ぶボタン=サイト全体に関わる編集や設定の変更(主に利用するボタン)

③右のツールバー=セクションや追加したブロックのレイアウトに関わる設定

編集する画面構成は、上部はヘッダー(メニューやタイトルとメインの画像など=右上図の写真部分の上部)、中央がページ(コンテンツの中身=写真部分とその下4つの枠)、下部がフッター(連絡先や著作権情報など=右上図では表示されている4つの枠の下で見えていません)の3つの部分になり、ヘッダーとフッターは基本的に全てのページに反映されます。

ここまでで、一端保存終了します。①トップバーの右にある保存を押します。初回保存時には右図のようにサイト名を付けるように促されます。半角英数字4文字以上で入力します。

(URLは、https://ユーザー名.wixsite.com/サイトの名前

保存後、公開設定が出るようですが、編集を続けるので編集画面に戻り、ウィンドウを閉じます。(この時点で公開してもよければ、公開してください。)

保存については、基本は自動保存が有効です。(マウスを保存ボタン上にすると表示)通常はボタンを押さなくても大丈夫です。

本格的に編集開始

WIXへのログインURLは、https://users.wix.com/signin です。ログインすると下図のダッシュボードと呼ばれる画面になります。

アップグレードが眼につくように、また、メールでアップグレードのお知らせが届きますが、無視です。

赤丸の管理メニューをクリックすると右図のメニューがあり、「サイトの編集」を選択します。

これで、先程保存した編集画面になります。(少し時間がかかります。)

先ほど違うのが、②の編集・設定メニューです。右図奥のような名称頭にあるアイコンのみのモノクロ表示表示なります。上から順に、「メニュー&ページ」、「背景」、「追加」、「スタイルマネージャー」、「アプリ」、「メディア」、「ブログ」、「オンライン予約」、「ビジネスツール」になります。

編集のためよく使うのが、「メニュー&ページ」と「追加」です。「メニュー&ページ」は、ページの構成が表示され、ドラッグ操作でメニュー表示を調整します。編集するページへの移動もここで行います。「背景」は、新しいページを作成した時には必要になります。

「追加」が編集操作の基本です。

下図のようなメニューで、テキストや画像など様々なものをページに挿入する機能です。

主なものは、「テキスト」「画像」です。「ボタン」・「ギャラリー」・「ボックス」にも多彩なものが用意されています。ちょっとしたマーク、飾り罫線、矢印、ボタンがあり、そのままで活用できます。どのようなものがあるのかを、クリックして見ておきましょう!編集時に役立ちます。

このあたりが、Googleサイトとは大きく違点です。Googleサイトでは、分割線かボタンでこれも1種類しかない状態です。ちょっとした枠をテキストボックスに透過して入れることもできません。矢印などのマークやアクセントになる小物画像もありません。

「追加」では、動画や音楽も挿入できますが、サーバーの容量は速度を考えるとこれはお勧めしません。ユーチューブへリンクが簡単な方法です。

ログインし、編集した画面が右図です。

ヘッダー・フッター部分の境界が青い横線で示されています。

画面上でマウスを移動するとマウスが当たった場所でそこが何なのかが、左上に表示が現れます。テキスト、画像、ボックスなど「追加」から挿入されるメニュー項目名です。

表示されているところでクリックすると編集ができます。

「追加」メニュー項目で表示される主なものが右図です。上から「テキスト」、「画像」、「ボックス」です。3つ項目上にマウスがあたった状態を表示表示しています。

「テキスト」では、テキスト編集をクリックすると右奥図のメニューがあります。フォントや段落等の調整項目が表示されます。文字サイズは左右に動くバーをドラッグすることでポイントの大きさが変わりますが、操作が微妙で難しい。横の数字を変更するのが早道です。テキストボックスの大きさは上下左右に表示される印をドラッグで変更できます。

「画像」「ボックス」では、それぞれ変更のメニューが表示されます。「画像」には歯車マークから「調整」をクリックすると「フォトスタジオ」メニューが用意されています。明彩度など細かな画像編集が可能です。リンク設定もできます。

画面のそれぞれのところで右クリックメニューも用意されていますので、チェックしておきましょう。


テキスト

画像

ボックス

編集の小技

「テキスト編集」の段落は、「ヘッディング」6種(h1~h6タグ相当)と「段落」3種(pタグ)が用意されています。フォント・サイズ・色等が編集が可能なので、自分好みの設定をしておくと便利です。

「画像」編集では、画像変更ボタンの横にある「設定」(歯車マーク)で、クリック時の動作を「リンク」・「ポップアップで表示」・「部分拡大(虫眼鏡)」から選択できます。貼り付ける画像を小さくして、クリック時に見やすくする方法です。ポップアップや虫眼鏡は便利な機能です。

「ボックス」の利用では、「テキスト」・「画像」と一体化することができます。追加したボックスの枠内に「テキスト」・「画像」をドラッグし、ボックス内に収まる位置にくると「ボックス内に移動」と表示がでます。これで、一体化されます。一体化後は、ボックスをドラッグすることで移動できます。一体化しても、テキスト・画像は独自に移動ができます。これが一体化の解除です。

トップバー右のメニューにある「ズームアウト/並び替え」使うとコンテンツを行単位で移動でき、並び替えが容易にできます。

ページ背景を変更してみましょう。

左メニューの「背景」をクリックすると右図の左枠が表示されます。ここでは単色からカラーを変更しました。また、下にある「その他のページに適用」をクリックすると横にページ一覧が表示され、個別ページ設定や全てのページが選択可能です。Googleサイトでは個別設定ができませんが、WIXは可能です。


ここまで、一応編集が可能と思います。実際にテンプレートからの編集作業を行ってみてください。

この後は、もう少し詳細な編集のポイントなどを順次ご紹介していく予定です。