Wix エディタでWeb サイトを構築する方法

こんにちは Wix エディタの最初のレッスンへようこそ このレッスンでは Wix エディタの 初歩的な使い方を紹介します では始めましょう まずは Wix 付属の テンプレートを見てみましょう Wix には自由に選べる 数百のテンプレートがあります たとえばビジネスやサービスのテンプレート ショップやクリエイティブのテンプレートがあるほか コミュニティやブログ用のテンプレートもあります 空のテンプレートを選択して ゼロから始めることも可能です このレッスンではテンプレートを 選択して作業します 下へスクロールして探しましょう ご覧のように魅力的なものが いくつもあります 右側にある このテンプレートにしましょう プロっぽく見えて いいと思います 「編集」をクリックします これで テンプレートが開きました 準備完了です ではサイト編集中に使える 便利なボタンとツールを いくつか紹介しましょう まずはデスクトップアイコンです これはデスクトップ向けサイトを 編集中であることを示しています 横のここでモバイルに切り替えると モバイル版サイトを 編集できます ご安心ください モバイル版については 別のレッスンでご説明します ここには「保存」があります 作業したところまで 保存できるので 大切な内容を失わずに済みます 「プレビュー」はサイトの確認用です サイトを公開する前に 問題がないか確認できます 「公開」はここです 左側のパネルに目を移しましょう 一番上は「追加」パネルです ここからサイトに さまざまな要素を追加できます 追加できるのはストリップ テキスト 画像 ボタン ギャラリー 装飾要素とインタラクティブ要素をはじめ 他にもまだまだあります 次は「ページ」パネルです ここからサイトの 全ページを表示できます 次は「サイトデザイン」です ここでは選択した サイトのスタイルを確認できます クリック 1つで サイトの見た目と印象を一変させられます スタイルのカスタマイズも可能です 次は「Wix App Market」です ここでは数百のアプリから 好みのものを選んで 自分のサイトにリンクできます 次は「マイビジネス」です 追加したアプリは ここで管理できます 次は「メディアマネージャー」です 自前のメディアをアップロードしたり 過去にアップロードしたサイトファイルを 確認したりできます フォトスタジオや ビデオメーカー 使用可能な Wix フリー写真素材 Wix フリー動画素材もあります 最後のボタンは Ascend ツールです サイトへのトラフィックを 増やしたり サイトを宣伝したりするのに役立ちます 今度は右側に目を移しましょう ここには「元に戻す」ボタンと 「やり直す」ボタンがあります その横には「ズームアウト / 並び替え」があります 「ズームアウト / 並び替え」は便利です ズームアウトしてコンテンツの順番を 自由に入れ替えることができます その横に「ツール」があります ここには「ツールバー」 「レイヤー」パネル 「ルーラー」 「グリッド線」 「オブジェクトに合わせる」があります 「ツール」パネルは サイト編集時にとても重宝しています ここには「検索」があります エディタで必要なものは何でも ここで検索できます たとえばボックスを追加したいとします そこで「ボックス」と入力して 表示された「スタイル付きボックス」に マウスオーバーすると 左側にスタイル付きボックスが表示されます 「ボックススライドショー」 「マルチステートボックス」も同様です 検索パネルはとても便利です ひととおりツールを紹介したところで お待ちかねの エディタでの編集を 見てみましょう 現在表示されているセクションは 「ファーストビュー」と呼ばれ サイト訪問者が 最初に目にするセクションです そのため これは最も重要なセクションです ここでサイト訪問者の 心をつかみたいところです そのためにはどうすればよいか 自分たちが何者であり 何をしていて どこをクリックしてほしいかを伝える必要があります たとえば ショップを 運営しているのであれば ショップ名を伝え ショップで何を売っているのかを説明し ユーザーの誘導先として 「今すぐ購入」ボタンを 追加するなどします このことを念頭に 実際のページ構造を見ていきましょう Wix にはヘッダーと ページとフッターがあります ヘッダーとフッターはマスター要素です ヘッダーをクリックして見てみましょう 「ツール」パネルに移動して 「レイヤー」「ヘッダー」の順にクリックします これでヘッダーが開きます ご覧のようにヘッダー内の要素は すべてオレンジ色で表示されます これらの要素は すべてのページに表示されるからです オレンジ色の要素はすべて 全ページに適用されます 重要なので覚えておきましょう ご覧のように ここには 最も重要な要素がいくつかあります 会社名とロゴがあるほか メニューと行動喚起のボタンがあります メニューはヘッダーに 配置することが重要です すべてのページにメニューを表示して サイト訪問者がサイト内を 移動できるようにするためです 下へ移動すると ページ本体があります このページはほとんどストリップでできています こちらにはテキストボックスがあります テキストの編集方法を紹介します ダブルクリックして テキストの一部を削除します このように簡単です もう一度ダブルクリックして テキストを戻しておきましょう できました もっと下にスクロールして 残りの部分も見てみましょう 追加されたストリップと 追加された要素が あるのがわかります その下のフッターをクリックします フッター要素はヘッダーと同じくらい 重要です たとえばご覧のように Instagram Facebook Twitter TikTok YouTube を配置しています 利用規約 配送と返金 プライバシーポリシーもあります スクロールして戻って ヘッダースクロールを確認しましょう ここをクリックしてヘッダーを開き 設定アイコンをクリックします 現在ヘッダースクロールは 「固定」に設定されています プレビューに切り替えて どのように見えるか確認してみましょう プレビューで見てみると 下へスクロールしても ヘッダーは動きません 戻って別の種類の ヘッダースクロールを選んでみましょう ヘッダーをクリックして設定に移動し 今度は「隠す」を選びます プレビューにして見え方を確認します 今度はスクロールするとヘッダーが 完全に見えなくなるのがわかります 戻ります このサイトでは ヘッダーを固定することにします これでよし ここまで いくつかのツールと ボタンについて確認しました さらに ヘッダー ページ フッターなどの ページ構造についても 説明しました ここで とても便利な機能を紹介します 「追加」パネルに移動して 下にある「ソーシャル」を選択します ここでソーシャルバーを 1つ選択します このグレーのものを選択して ステージにドラッグします ご覧のようにストリップに添付されます 次にこれを 画面にピン留めします 右クリックして 「画面にピン留め」を選択します 要素をピン留めする場所は 細かく指定できます たとえば下部の左側などです ここでは右中央にしましょう いいですが 若干の違和感があるので もう少し工夫してみましょう 「レイアウト」に移動すると 横型から縦型に 変更できるので やってみましょう すばらしい ご覧のように スクロールしても付いてきます これはサイトの訪問者が サイトを見ている間 ずっと表示させていたい 要素にぴったりです もう 1つ別の小技を紹介します 右クリックして 「すべてのページに表示」をオンにします そうすると何が起こるでしょうか この要素を囲むボックスが青から オレンジ色に変わるのがわかります つまりこの要素は 全ページに表示されるようになります 他のマスター要素と同じ扱いです プレビューにして どうなるか見てみましょう 完璧ですご覧のとおり ソーシャルバーはスクロールしても動きません このレッスンでは 魅力的なサイトの作成に必要な ボタンとツールを ひととおり紹介しました それから ページの構造について 「ファーストビュー」セクションの重要性や ヘッダー ページ フッターについてお話しました また 要素を画面にピン留めして 全ページに表示されるよう設定しました このレッスンが参考になったら幸いです また レッスン 2 でお会いしましょう レッスン 2 ではレイアウトについて説明します また後でお会いしましょう