Studio

条件付きスタイルは、閲覧者の操作やページの状態に応じて、ボックスの見た目やレイアウト（スタイル）を切り替える機能です。指定できる発生条件の種類と、基本的な設定方法を説明します。

条件付きスタイル

パララックスやスクロール連動など、ページのスクロール位置や要素が画面内に入るタイミングに応じて、要素を動かしたりフェードさせたりする動きのある演出を設定できます。条件付きスタイルのスクロール（Scroll Effect）を使用します。

条件付きスタイル：スクロールエフェクトを設定する（Scroll Effect）

Studioでは、ボックスに移動や回転などのアニメーションを設定できます。アニメーションは、通常時のスタイルと条件付きスタイルの差分で表現します。イージング・時間・遅延を組み合わせて、変化の速度・緩急や開始タイミングを細かく調整できます。

アニメーション（イージング・時間・遅延）を設定する

条件付きスタイルのホバーと（in）ホバーを使って、ボタンにカーソルを乗せたときに色が変わるアニメーションを設定します。

ボタンにカーソルを乗せると色が変わるアニメーションの作成方法

通常時の画像を上に重ね、ホバーの条件付きスタイルで不透明度を変えると、画像が切り替わるような表現を作成できます。

ホバー時に画像を切り替える

ボタンにカーソルを乗せたときに端から色が広がる表現を設定する手順を説明します。「ホバー」と「（in）ホバー」の条件付きスタイルを指定し、アニメーションで動きの調整をします。

ホバー時に端から色が変わるボタンを作成する

画像やテキストが下からふわっと現れるアニメーションは、条件付きスタイルの出現時とアニメーション設定を組み合わせて作成します。基本の設定は、アニメーションテンプレートを使用すると簡単に設定できます。

出現時に下からフェードインするアニメーションを作成する

出現時に文字が一文字ずつ表示されるアニメーションを設定する方法を紹介します。各文字を別のテキストボックスに分けて、それぞれに「出現時」の条件付きスタイルで不透明度と遅延を段階的に設定します。

タイピング風テキストのアニメーションを作成する

条件付きスタイルを使って、画面表示時に重なるスプラッシュスクリーン風のアニメーションを作る手順を説明します。表示順や重ね順、確認方法もあわせて紹介します。

ローディング風アニメーションを作成する

ページのスクロールに合わせて、画像がゆっくり移動する表現を設定する方法を解説します。条件付きスタイルのスクロールを使用し、バナー内で画像が上方向へ動く設定手順を紹介します。

スクロールに連動して画像がゆっくりスライドする表現（パララックス）を設定する

リンクやホバーアニメーションが動作しないときに確認したいポイントをまとめました。リンク設定、ボックスの重なり、アニメーション用ボックスの重ね順の3つを順番に確認して解消します。

リンクやホバーアニメーションが動作しない時の修正方法

条件付きスタイル「出現時」を使いアニメーションを設定したボックスが表示されない場合、ボックスがその親ボックスまたは画面からはみ出ていることが主な原因です。レスポンシブ設定時のモバイル画面幅でよく発生します。

「出現時」のアニメーションが表示されない原因と対処法

エフェクトとアニメーション

Create a custom design with text, images, and links

Studio.Design

Studio.Blog

Studio.Showcase

What's New

Updates

公式サイト

公式ブログ

事例集

セミナー動画

YouTube

コミュニティで知見を深める

Intercom のサポートやコミュニティのエキスパートに質問し、答えてもらいましょう。

このサイトでは、当社および当社の第三者ベンダーが、当社のクッキーポリシーに記載された目的のために、お客様とサイトでのやりとり（閲覧したコンテンツ、カーソルの動き、画面の記録、チャット内容を含む）に関する個人情報を監視および記録するために、クッキーやその他の技術を使用しています。当サイトを引き続きご利用いただくことで、{websiteTermsLink}、{privacyPolicyLink}および{cookiePolicyLink}に同意したことになります。

このサイトでは、サイトの運営に必要不可欠なCookieおよび類似のテクノロジー（以下「Cookie」）を使用します。また、当社とパートナーは、サイトのパフォーマンス分析、機能、広告、ソーシャルメディア機能を有効にするために、追加のクッキーを設定したいと考えています。詳細については、{cookiePolicyLink}をご覧ください。クッキーの設定は、[クッキー設定] で変更することができます。

当社では、ウェブサイトの機能維持、分析、そして広告表示のためにクッキーを使用しています。オプションで必要に応じて希望するクッキーを有効または無効にできます。詳細については、{cookiePolicyLink}をご覧ください。

広告クッキーは、さまざまなブラウザやデバイスで利用されているサイト、コミュニケーション、その他のオンラインサービスの利用状況に関する情報を長期にわたって収集するために、広告パートナーによって設定されます。ここでの情報を使用して、利用者が興味を持つと思われるオンライン広告を表示し、広告のパフォーマンスを測定します。ソーシャルメディアクッキーは、ソーシャルメディアプラットフォームでコンテンツを共有するために当該のソーシャルメディアプラットフォームによって設定されます。また、他のオンラインサービスでの活動情報を追跡し、プライバシーポリシーに記載されている目的で使用することができます。

これらのクッキーにより、ウェブサイトは強化された機能とパーソナライズを提供できるようになります。当社または当社のページにサービスを追加したサードパーティプロバイダーによって設定される場合があり、許可しない場合、これらのサービスの一部またはすべてが正常に機能しない可能性があります。

ウェブサイトが機能するために不可欠なクッキーであり、当社のシステムで無効にすることはできません。

これらのクッキーを使用することで、訪問数やトラフィックソースをカウントし、サイトのパフォーマンスを測定および改善できます。これにより、どのページが最も人気があり、どのページが最も人気がないかを把握し、訪問者がサイト内をどのように移動しているかを確認できます。

お客様には、個人情報の販売をオプトアウトする権利があります。お客様のデータの使用方法について詳しくは、{cookiePolicyLink}をご覧ください。

お客様のプライバシーに関する選択

当社では、お客様の体験を向上させるためにクッキーを使用しています。クッキーの設定は以下でカスタマイズすることができます。詳細については、{cookiePolicyLink}をご覧ください。

クッキー設定

ヘルプセンターは空です

エラーが発生しました。そのページは存在しません。

ホーム

検索

がっかり

無表情

笑顔

考えています...

ソースを検索しています...

分析しています...

メッセンジャー経由で送信されたチケット、または会話内でサポートエージェントによって送信されたチケットがここに表示されます。

お客様が作成したチケットはありません

別のキーワードを使用するか、入力ミスがないか確認してみてください。

別のキーワードやフィルタを使用してみてください。

チケットが見つかりませんでした

タイトル

御社に関連するすべてのチケットの進捗状況を追跡

チケットポータル。

{assigneeName}さんがこちらに対応中です！

{assigneeName}さんがチケットを完了しました

{assigneeName}さんが近日中に対応する予定です

{assigneeName}さんが詳細情報を必要としています

あなたのチケットは完了しました