【第15回 ポップアップ機能の設定方法と実装例のご紹介】

 

あかちゃん：こんにちは、アプリデザインチームです！今回は【vol.4】リンク設定小ワザ集でも登場したポップアップ機能の設定方法と実装例をご紹介していきたいと思います〜！

 

ますこ：そもそもポップアップってどんな時に使用するものなんですか？

 

あかちゃん：簡易的なお知らせや案内ができる機能なのですが、アプリ内の各ボタンの表示や、コンテンツについての説明をしたい時などによく使います。

では、設定方法をおさらいしてから、どんな場面で使用されているのか見ていきましょ〜！

 

 

 

【おさらい】ポップアップ機能の設定方法

 

 

※一番上のブロックに設定した背景色が、ポップアップ全体の背景色として設定されます。

 

※第４回記事より引用

【vol.4】リンク設定小ワザ集  記事はこちら＞

 

 

 

ポップアップ機能の実装例

 

【リスト型ポップアップ】

 

 

【実装例】

 

※その他のカテゴリーは「アウター」を設定したブロックをコピーして作成してください。

フリーレイアウト機能の使い方はこちら＞

 

 

あかちゃん：大・中・小とカテゴリーが複数ある時によく使用されるのがこのリスト型の表示です。実装例のように大カテゴリーはボタン表示、中カテゴリーはポップアップ表示にしています。

 

ますこ：カテゴリーの見せ方を段階的に分けることで、シンプルにまとまりますね！

 

あかちゃん：そうなんです！ユーザーが探してるものにもより的確にたどり着けますし、リスト型なら画像が無くてもフリーレイアウト機能上で簡単に作成可能です！

 

 

 

【案内型ポップアップ その１】

 

 

【実装例】

 

 

あかちゃん：こちらはボタンやバナーをタップした時に、詳細が表示される案内型の実装例です。

 

ますこ：バナーに余計なテキストが無いからページがシンプルにまとまりますし、ユーザーの目を引くので大事なご案内をする時などに効果がありそうです！

 

 

 

【案内型ポップアップ その2】

 

 

【実装例】

 

 

あかちゃん：同じくこちらも案内型のポップアップですが、アプリ限定施策の簡易的な説明を表示している例です。

 

ますこ：施策などの案内や説明はフリーレイアウト機能でLPを一枚挟んでご案内する方法もありますが、ポップアップ表示にすると端的にまとめられていいですね！

 

あかちゃん：第4回記事で上級編として紹介されてたポップアップ機能ですが、フリーレイアウト機能で作成するので自由度の高いデザインが実現できます！

 

ますこ：設定方法も簡単なので是非活用してみてくださいね！

ポップアップ機能の使い方の詳細はこちら＞

 

 

それでは次回の更新もお楽しみに！