【第12回 スクロールメニュー編】

 

おがちゃん：こんにちは、アプリデザインチームです！今回はスクロールメニュー機能のデザイン例を3つご紹介します。

 

ますこ：デザイン範囲としては狭い部分ですが、ここがアプリの印象と合っていないと違和感を感じますよね。

 

 

おがちゃん：デザイン調整前と後を比べると、見栄えが違うのがお分かりいただけると思います。

 

ますこ：調整後の方がアプリのスタイリッシュな雰囲気に合っています。少しの手間で印象がグッと良くなりますね！

スクロールメニュー機能について＞

 

 

 

デザイン設定方法

 

おがちゃん：実装例のご紹介の前に、まず編集画面について説明します。編集する画面は「メニュー設定」と「共通設定」の２つだけです！

 

 

【STEP１】編集画面に入る

 

 

 

【STEP2】「メニュー設定」でカラーの設定を行う

 

おがちゃん：「メニュー設定」ではスクロールメニュー機能内に設置した、コンテンツ（タブ）のカラー設定を行います。

 

 

① カラー設定を行う、スクロールメニュー内に設置されたコンテンツ（タブ）の選択

② 非選択時のコンテンツ（タブ）のカラー変更

③ 選択中のコンテンツ（タブ）のカラー変更

④ 全てのコンテンツ（タブ）に同じ設定を適用

　※本記事で紹介する実装例は全て「一括反映保存」で設定の適用を行っています

⑤ ①で選択したコンテンツ（タブ）のみ設定を適用

 

【STEP3】「共通設定」でメニュー・インジケーターの設定を行う

 

おがちゃん：「共通設定」ではスクロールメニュー機能全体のタブ形式を設定できます。

 

 

① メニューの高さ、パディング、文字サイズの設定

② インジケーター（選択中コンテンツに表示されるバー）の角の半径、マージン、位置の設定

③ スワイプ動作によるコンテンツ(タブ)の切り替えの無効・有効の設定

④ 設定の保存

 

 

おがちゃん：パディングやマージンについては以下の図を参照してください。

 

 

 

 

【デザイン例１】シンプルで汎用性の高いデザイン

 

 

おがちゃん：まずはシンプルなデザインのご紹介です！どんなアプリにも合わせやすく、デザイナーもよく使う設定です。

 

 

ますこ：インジケーターの位置を上ではなく下にしたい場合は「38 0 0 0」のように設定してみてくださいね！

 

 

 

【デザイン例２】 角丸インジケーター

 

 

おがちゃん：2つ目はインジケーターを太めの角丸に設定した、応用デザインです。

 

 

ますこ：インジケーターのカラーは、必ず不透明度を90％以下にしなければいけないんでしょうか？

 

おがちゃん：はい。インジケーターは、テキストやアイコンよりも前面の位置にあるため、不透明度を100％にすると、テキストやアイコンが隠れて見えなくなってしまうんです。そのため不透明度を下げて、テキストやアイコンを透かして見せています。

 

ますこ：なるほど！アプリによって数値の調整の手間は少しかかりますが、真似してみたいデザインです！

 

 

 

【デザイン例３】 カスタムアイコンでオリジナル度UP

 

 

おがちゃん：最後はカスタムアイコンを使用したスクロールメニュー機能のデザインです。

カスタムアイコンについて＞

 

 

ますこ：カスタムアイコンがあると、よりデザイン性が増しますね！

 

おがちゃん：その他にもタブ毎に別々のカラーを設定しカラフルにするなど、デザインの表現は様々です。ぜひ色々お試しくださいね！

※ご不明点は担当のカスタマーサクセスにお問い合わせください。

 

 

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