top of page

人気のページ

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

Wix エディタの高度な機能を使って、デザイン性に優れたサイト…

Wix Eコマース入門

Wix Eコマースは業界をリードするマーケティングツール、アプ…

CMS(コンテンツマネージャー)入門

コンテンツマネージャーを使用すれば、サイトのデザインを変更せず…

顧客エンゲージメントを高めて売上アップにつなげる方法

このコースではブランドの信頼性を強化し、ロイヤルティを築き、ネ…

Looking for Studio resources?

Head over to the Wix Studio Academy to learn all things Studio.

9 レッスン   |   28分

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

Sign in to view all course videos.
Let's go

 →

Congratulations on finishing this course—keep up that momentum

09 Lesson icons/Replay/05 RePlay full

02:59

09 Lesson icons/Replay/05 RePlay full

03:40

09 Lesson icons/Replay/05 RePlay full

02:43

09 Lesson icons/Replay/05 RePlay full

02:34

09 Lesson icons/Replay/05 RePlay full

02:18

09 Lesson icons/Replay/05 RePlay full

01:54

09 Lesson icons/Replay/05 RePlay full

03:00

09 Lesson icons/Replay/05 RePlay full

02:59

09 Lesson icons/Replay/05 RePlay full

06:12

このコースについて

Wix エディタの高度な機能を使って、デザイン性に優れたサイトを作成しましょう。カスタムアニメーション、インタラクティブギャラリー、スティッキー(位置固定)動画、サイトフレーム、スマホ向けのようこそ画面など、サイト訪問者を魅了する印象的なパーツを追加する方法を解説します。さらに、画像ベースのナビゲーションメニューや、ユーザーがページをスクロールするとイラスト・画像・折りたたみアニメーションが表示される仕掛けなど、サイトにさらなる驚きをプラスするテクニックもご紹介します。

コースの内容

  • ロゴ、折りたたみ表示、ギャラリーのインタラクションや画像ベースのナビゲーションメニューまで、アニメーションのカスタマイズとタイミング設定についての詳細なガイダンス

  • サイトフレーム、スマホ向けのようこそ画面などのカスタムパーツをデザインする方法

  • ギャラリー、ロゴ、イラスト、ページの折りたたみ、ナビゲーションメニューにアニメーションを追加する際のヒント

  • 訪問者にサイトをよりインタラクティブに操作してもらうための機能の紹介

Still frame from the course: Robbie Sims, Wix UX Designer

大学では建築学を専攻し、デザインの本質を学んだ正統派の UX デザイナー。Wix エディタのプラットフォーム向けのプロダクト開発に関わって10年になるベテラン。

Wix UX デザイナー

講師プロフィール

Robbie Sims

こんな人におすすめ

  • 所有する Web サイトのデザインと機能を向上させたいと考えている方

  • デザインの基本を理解し、インタラクティブなアニメーション機能を Web サイトに組み込みたいと考えている新進気鋭のクリエイターの方

  • 高度な機能を備えた印象的な Web サイトを構築したいと考えているデザイナーの方

インタラクティブ形式のギャラリーを構築する

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

気になる知識をさらに深めよう

新しいスキルをビジネスに活かしましょう

その他のおすすめコース

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

New

コース

...

本格的なホームページを作成・カスタマイズして思い通りのデザインに仕上げましょう。このコースでは、Wix エディ…

13 レッスン | 77分

コースを開始 →
美しくデザインされたハンドソープの商品ページ。販売価格は18ドルで、「カートに追加」ボタンが表示されている。

New

コース

...

Wix Eコマースは業界をリードするマーケティングツール、アプリ、マルチチャンネル統合機能など、必要な機能をす…

7 レッスン | 33分

コースを開始 →
紫の背景上に配置された白のタイトルカードとプロフィール写真。カードには「タイトルを追加」と表示されている。

New

コース

...

コンテンツマネージャーを使用すれば、サイトのデザインを変更せずに動的コンテンツを何度でも管理・変更することがで…

8 レッスン | 30分

コースを開始 →
Sign in to view all course videos.
Let's go

 →

Congratulations on finishing this course— Keep up that momentum
bottom of page

We use cookies and similar technologies. You can opt-out by clicking 'Do Not Sell or Share My Personal Information' at the bottom of the page.