Smart Sliderで利用出来る『レスポンシブ設定』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。
また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。
本記事は、パソコンの画面から見ていただくことを推奨します。
レスポンシブ設定とは
レスポンシブ設定とは、パソコンで表示しても、スマホやタブレットで表示しても、デザインやレイアウトが破綻しないようにする設定のことです。
Smart Sliderは、基本的にレスポンシブ対応になっているので、作成したスライダーやWebページが、スマホなどの小さなデバイスで表示されても、なるべく支障が出ないように設計されています。
しかし、長めのテキストや、画像やボタンなど多くのレイヤーが贅沢に配置された、情報が盛りだくさんなスライドの場合はどうでしょう。
パソコン画面ではきれいに表示できても、スマホ表示にした途端、レイアウトが破綻してしまう可能性が高くなります。
本記事では、いくつかのケースを想定して「スライドエディター」上の「レイヤーウィンドウ」から行えるレスポンシブ設定を中心に解説していきます。
デバイスセレクターで常に確認
まず大事なこととして、「スライドエディター」で作業する際は、必ず上部トップメニューの「デバイスセレクター」で、「デスクトップ ↔︎ モバイル」の表示を切り替えて、確認しながら作業を進めましょう。
デスクトップ表示の画面サイズだけ見ながら作業するのではなく、モバイル表示の時にはどういう見え方になるかを常に確認しつつ、頭でも意識しながら進めることが大事です。
テキストのサイズ・長さ
ここでは、以下のようなスライドを例にして、基本的なレスポンシブ設定の流れを見ていきます。
こちらは『行』レイヤーの中に、２列の『列』レイヤーがあり、左の列に『見出し』『テキスト』『ボタン』レイヤー。右の列に『画像』レイヤーが配置されています。
こちらを、トップメニューの『デバイスセレクター』でモバイル表示に切り替えてみると、以下のようなレイアウト表示になりました。『列』は自動的に縦並びに切り替わります。
Text Scaleでサイズを調整
もし、『見出し』のフォントサイズを調整したい場合は、「デバイスセレクター」でモバイル表示にした上で、「スタイル」タブから「Text Scale」の値を変更します。
ここでは「Text Scale」を75%に調整してみます。
これで、デスクトップ表示=100%、モバイル表示=75% と、『見出し』のフォントサイズが切り替わるよう設定されました。
レイヤーの最大幅を調整
あるいは、フォントサイズは変更せずに、折り返し位置を変更するという選択肢もあります。
ここでは「サイズ」→「最大幅」にて、レイヤーの横幅を限定して、希望の位置で折り返しが来るように調整しています。(あくまでひとつの方法です)
テキストの量・長さを調整
続いて『見出し』の下の『テキスト』ですが、もし、モバイル表示では全文を表示させる必要がないという場合、表示デバイスごとに、テキストの内容を個別に設定することが出来ます。
「コンテンツ」タブから、「タブレット」と「モバイル」のスイッチをオンにすると、それぞれのデバイス用に個別のテキスト内容を設定することが出来ます。
ここでは「モバイル」をオンにして、モバイル表示用のテキストを設定してみます。
文字数が半分になり、だいぶスッキリしました。
「行と列」の表示のしかた
デスクトップ表示の際、左右に横並びになっていった２列ですが、モバイル表示では、自動的に縦並びで表示されています。
通常は、左の列が先頭で、右の列が後ろに続きます。しかし、この順番をモバイル表示の際は逆にするということが出来ます。
「デバイスセレクター」でモバイル表示にした上で、『行』レイヤーを選択し「レイヤーウィンドウ」から、列の順番を入れ替えるだけです。
列の順番が入れ替わりました。
これで、デスクトップとモバイルで、列の並び順を個別に設定することが出来ました。
余白の切り替え
「列」の間隔を調整する
現状、ふたつの列の間には 30pxの間隔があいています。これはデスクトップ表示の際は適正だったのですが、モバイル表示では少し広過ぎる印象です。
こちらも「デバイスセレクター」でモバイル表示にした上で、『Gutter』の値を調整します。
ふたつの「列」の間隔が狭まりました。
これで「列」の間隔が、デスクトップ時は30px、モバイル時は0px となるよう個別に設定することが出来ました。
レイヤーの余白を調整する
各レイヤー間の余白も、デスクトップ表示の際は適正であっても、モバイル時には余白が広過ぎるという場合もあります。
レイヤー間の余白は、『マージン(外側の余白)』あるいは『パディング(内側の余白)』を変更することで、レイアウトが適正になるように調整します。
各レイヤーの余白(マージン、パディング)を諸々調整しました。
また『テキスト』レイヤーの横幅が上の『画像』と同じになるように「最大幅」を指定しています。
表示・非表示の切り替え
今度は別の例として、以下のようなレイアウトがあったとします。下に『列』が４つ横に並び、ひとつの『列』には、『画像』『見出し』『テキスト』が配置されています。
モバイル表示にすると、以下のように、４列から２列に切り替わります。
『列』の中の、『見出し』の下で補助的に使われているグレーの『テキスト』ですが、スマホの小さい画面では、文字が小さ過ぎて視認性があまり良くない印象を受けます。
その場合は、グレーの『テキスト』を選択して、『スタイル』タブの「Hide On」でモバイルのアイコンを押して有効にします。
これで、モバイル表示の時だけグレーの『テキスト』は非表示とすることが出来ます。
「Hide On」でモバイルを有効
まとめ
今回は、Smart Slider3 Proの『レスポンシブ設定』について解説いたしました。
何も考えずに、デスクトップ表示だけで作業を進めてしまうと、いざ完成した時に、スマホで表示したらレイアウトが崩れまくっていた、ということにもなり兼ねません。
慣れてくると、「モバイルでは多分こういう表示になるだろう」「ではこういう対策をしておこう」と、的確なレスポンシブ設定が自然に出来るようになっていくはずです。
どのデバイスから見ても、破綻のないレイアウトを是非目指してみて下さい。
Pro版を使ってみる
本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀
Pro版の機能を含めた使い方については、詳しく解説した記事を少しずつ追加しておりますので、こちらもぜひご覧ください👇👇👇
コメント