高度な機能でウェブサイトをデザインする

こんにちは、ロビーです。Wixのデザイナーです。

このコースでは、エディターの機能を使って、サイトデザインを向上させる方法を学びます。

ユニークなスクロール・エフェクトやアニメーションも学ぶ。

インタラクティブな画像なども作るつもりだ。

準備はできているか？

始めよう。

このレッスンでは、あなたのウェブサイトに遊び心を加えるインタラクティブ・ギャラリーの使い方をお教えします。

では、さっそく見てみよう。

私のウェブサイトにはギャラリーがあります。

ステッカーのようなものをドラッグ＆ドロップできる。

回転もできるし、サイズも変えられる。

これは、あなたのウェブサイトを初めて訪問したときに、ヘッダーに表示され、訪問者が遊ぶことができるとても素敵なエフェクトです。

では、その方法を見てみよう。

よし。今、Wixのウェブサイトエディターにいます。

さて、これからやりたいことは、「追加」をクリックすることだ。

ここにはギャラリーというセクションがある。

そしてMore Galleriesがある。

つまり、この効果をもたらすギャラリーは、フリースタイル・ギャラリーと呼ばれている。

さっそくウェブサイトに追加してみよう。

これは単なる遊びのギャラリーなので、コンテンツのグリッドラインの外側に置いても問題ありません。

だから、左にも右にも伸ばして、できるだけ幅を広くしよう。

こうすることで、ユーザーが私のサイトを訪れ、私のギャラリーで遊んでくれたとき、サイト内でドラッグ＆ドロップできるスペースが増える。

よし、では画像を変えてみよう。

これらの一時的なものは削除しよう。

そして、自分の画像を追加するつもりだ。

だから、先に進んで、これらのすべてを選択する...

私のギャラリーに追加するつもりだ。

そして「完了」をクリックする。

よし、クールだ。

だから今、僕のギャラリーにあるすべてのステッカーがここにある。

ステッカーのように見えるように透過させる方法は、PNGファイルと呼ばれるものをインポートした。

ほとんどのデザインソフトで書き出すことができ、背景を透明にしてステッカーのように見せることができる。

そうすることで、より遊び心が増す。

Layoutの下に、Randomize Layoutを設定するオプションがある。

何回かクリックすると、誰かが私のウェブサイトを訪れたときに、ステッカーが始まる位置を教えてくれるんだ。

そうだな...

よし、これは良さそうだ。

さっそくチェックしてみよう。

プレスプレビュー

クールだ。

ステッカーをドラッグ＆ドロップで移動させたり、回転させたり、サイズを変更したりできる。

あとはウェブサイトを公開し、訪問者に遊んでもらうだけだ。

そこでこのレッスンでは、インタラクティブ・ギャラリーを使い、ウェブサイトに遊び心を演出する方法を伝授した。