高度な機能を使って Web サイトをデザインする方法

こんにちは Robbie です Wix でデザイナーをしています このコースでは エディタの機能を使って ホームページのデザインを向上させる方法について 説明します スクロールエフェクトや アニメーションについても 取り上げます 今回はインタラクティブ画像などを作成しようと 思います 準備はよろしいですか？ では始めましょう このレッスンでは インタラクティブギャラリーを使って ホームページに遊び心を加える方法を紹介します 実際に見てみましょう 私が公開しているこのホームページには ギャラリーがあります ステッカーのようなものは いずれもドラッグ & ドロップできます 回転させたり サイズを変えたりすることもできます とても素敵なエフェクトです ホームページのヘッダーに表示すれば 初めて訪れてくれた人が 楽しい気分に なれるでしょう では どうやっているのかを見ていきましょう これは Wix ホームページエディタの画面です まず 「追加」をクリックします ここに「ギャラリー」というセクションがあります さらに「その他のギャラリー」があります このエフェクトは 「フリースタイルギャラリー」と呼ばれる ギャラリーに表示されます ホームページに追加してみましょう このギャラリーはただの遊び心なので コンテンツのグリッド線の外に置いても かまいません 左いっぱいに伸ばしたり 右いっぱいに伸ばしたりして 画面の幅全体に 広げることもできます そうすれば ユーザーがこのホームページを訪れ ギャラリーで遊ぼうとしたとき ホームページ内でドラッグ & ドロップできる スペースが増えるでしょう 今度は画像を 変更してみます これらのサンプルは削除しましょう そして独自の画像を追加します これらをすべて選択して ギャラリーに追加します そして「完了」をクリックします いいでしょう ギャラリーからのステッカーがすべて ここに表示されています ステッカーのように見せるために透明にしました PNG と呼ばれるファイルをインポートすると こうなります これらの画像は ほとんどのデザインソフトウェアでエクスポートできます 背景が透明になって ステッカーのように見えるのです 一層楽しい気分になります 「レイアウト」メニューに「レイアウトのランダム化」という オプションがあります 何度かクリックすると このホームページを訪れた人に最初に 表示されるステッカーの位置を 選ぶことができます そうですね この辺りでいいでしょう ではチェックしてみましょう 「プレビュー」を押します いいですね これでステッカーを あちこちドラッグ & ドロップしたり 回転させたり サイズを変えたりすることができます あとはホームページを公開すれば 訪問者を楽しませることができます このレッスンでは インタラクティブギャラリーを使って ホームページに遊び心を加える方法を紹介しました