たまちゃんHTMLのおうち たまちゃんHTMLのおうち

たまちゃんのつぶやき   パワーアップしたWixでホームページ作成

ホーム> たまちゃんのつぶやき>  2015/12/05 パワーアップしたWixでホームページ作成

メニュー

パワーアップしたホームページ作成オンラインツールWixの新機能を使ってみた

前回紹介したホームページ作成のオンラインツールWix、新機能を追加してパワーアップしたようなので使ってみました。
前回の記事は、こちら。 無料でホームページを制作できるオンラインツール

■2015/12/05 パワーアップしたWixでホームページ作成

新たに追加された新機能については、Wixのプログ「 ついに新しいWixエディタをご紹介! 」でも紹介されています。

◆追加された新機能

今回追加された主な新しい機能は、3つです。
@ホームページの背景に動画を指定できるようになった
Aサイトへのアイテムの追加がより直感的操作で行えるようになった
Bパララックススクロールが追加追加された

◆前回作成したホームページを編集する

今回は、前回作成したものを編集してみることにします。
最初からを知りたい方は、 前回の記事をご覧ください。

登録時に設定した自分のメールアドレスとパスワードを入力して、ログインします。
すると、「Wixエディタが新しくなりました」のポップアップが表示されました。
ユーチューブの動画画面(https://youtu.be/40bXyxG6quI)と
「より直観的な操作で、素敵なアイデアをそのままデザインに。Wixの新エディタは、今まで以上に簡単にホームページを作成できる、 進化したWeb制作ツールです。動画背景やパララックス・スクロール、ストリップなど、便利な新機能をぜひお試しください!」
の説明と、
[以前のエディタに戻す]と[今すぐ始める]のボタンが表示されています。
[以前のエディタに戻す]を選択しても、エディタ上に[新エディタをお試しください]のボタンが表示されます。 ここで[X]してしまうと新エディタには行けないようです。開きなおしてください。
[新エディタをお試しください]から「今すぐ始める>>」をクリックっすると、 [再読み取りに関する確認]ボックスが開きますので[このページを再読み込み]をクリックします。

【注意】 一度新エディタにした場合は、基本的には旧エディタに戻せないようです。
参考:旧エディタに戻す

◆背景を動画にする

左の[ページ背景]から[おすすめ背景]のビデオマークの付いている画像を選択すると、その選んだ動画が背景となります。
[動画]ボタンをクリックすると、さらに多くの中から動画を選択することができます。マウスオンで動画のプレビューも見られます。
また、自分の動画を使用したい場合、動画をアップロードすることもできます。
[設定]ボタンからは、透明度や再生速度も変えられます。
サンプルでは、トップページの背景に動画を入れてみました。

Wix 背景の選択

このページのトップ

◆直感的操作

新しいエディタは、「操作に慣れること」を必要とせず、直感的にすぐ操作できるユーザーフレンドリーなプラットフォーム と説明されています。
日ごろ使用していればどこが新しくなったのかすぐにわかるはずなんでしょうが、そうでないので... 最初に目についたのは、[エディタツールバー]。モードレスのツールバーで、すでに張り付けてあるパーツの編集ができる。
このツールバーの位置はドラッグで変えられるし、邪魔くさかったら非表示にもできる。 消したツールバーは、また必要になれば[ツール]メニューから再び表示できます。
バーツも種類や内容も充実した感じがする。しかし、初心者の場合はこの種類や内容の多さに対して戸惑うかもしれない。
そしてやはり、上級者にとってはコードによるカスタマイズができないのが壁になるかも。

このページのトップ

◆パララックススクロール

パララックススクロールとは、 『「視差効果」。遠くのものが、近くのものよりゆっくり動いているように感じさせることで、サイトに奥行きや遠近感を与えることができます。』 と説明されているが、なんだかよくわからなかった。
実際に見てみると、上下スクロールしたときに背景画像も移動するが、その画像の移動がスクロール量より少ない。
そのため、その背景画像が視覚的に遠方にあるように感じさせるものだ。
で、そのパララックススクロールの画像を追加するにはどうすればいいのかというと、『ストリップ』なるものを追加しなければならない。
ストリップと言うと「脱ぐ」、「裸」しか思い浮かばなかったが(笑)、調べてみるとここでは「画面横幅いっぱいに表示される領域」のことらしい。
ストリップ(画像)を追加して、このストリップにパララックスの設定をするとパララックススクロールの効果が得られる。
固定画像だけでなく動画も使えますので、インパクトをつけるにはいいかも。ただ、「ストリップ」追加の時にどのパーツが動画なのかはわかりませんでした。
サンプルでは、「会社概要」のページに動画でパララックススを入れてみました。

実際の手順はこうです。
  1. エディタ左側の「追加」 をクリックします。
  2. 「ストリップ」をクリックします。
  3. お好きなストリップをクリックするか、サイトの設置したい位置にストリップをドラッグします。
  4. エディタ内に追加したストリップをクリックします。
  5. 「ストリップ背景を変更」をクリックします。
  6. ストリップ、もしくは動画プレビューの「設定」 をクリックします。
  7. 「パララックス(視差効果)」横のトグルスイッチをクリックし、パララックス効果を有効にします。

このページのトップ

Wixを使って作ってみたサイトのサンプル

◆所感

「ストリップ」って言葉には、参りました。「パララックス」もそうですけれど、もっと直感的にわかる日本語をあてはめたほうがいいと思いました。 小生、語学が苦手なんで(笑)、適当な言葉が見つかりませんが、自分流で言うとそれぞれ「ワイドビューエリア」とか 「3Dスクロール」なんてのはどうなんだろう。もっと日本語らしく言えば「広幅視野領域」とか「遠景画面」なんていかが? 言葉は、置いておいて、やっぱり画像とか、特に動画はインパクトがありますから、この使い方によりホームページのイメージがガラッと変わります。 そういう意味で、この機能はとても評価できると思います。設定も比較的簡単なのでよろしいのではないのでしょうか。 ただ、何回も言いますが、「ストリップ」、「パララックス」は使ってみるまでなんだかよくわかりませんでした。
あと、Wixにはネットショップ開設ツールも搭載されていいます。 これらの機能と兼用することで他とは違う印象的なネットショップを作ることも可能かと思います。

このページのトップ

関連記事