スマホ最適化３つのコツ
スマホ最適化について
VCTは、PC向け、スマホ向けに最適なサイズで表示させることができます。
PC版では上手くできたけれど、スマホサイズにすると、文字サイズがうまく調整できない、そんな方もいらっしゃるかもしれません。
でもご安心ください。
ちょっとしたコツを掴むだけで、スマホ向けのデザインでもサクサク思い通りに作業が進むようになります。
この記事では、スマホ用の設定手順でつまずきやすい3つのポイントを、分かりやすく解説させていただきます。
＜動画版＞
＜WEBテキスト版＞
フォント設定のコツ
まず最初は、フォントの設定に関するコツからご紹介いたしましょう。
スマホ表示の操作画面でフォントの調整をしようと思っても、変更ができないということがあります。
（図1参照）
【図1】
しかし、これはVCTの仕様によるものです。
バグではないのでご安心を。
VCTでのフォント調整は、スマホ用・デスクトップ用の設定を問わず、「グローバルスタイリング」の中の「テキストスタイリング」から行っていただきます。
（図2参照）
【図2】
下図のウィンドウが開きましたら、「見出し1」、「見出し2」など、それぞれの見出しサイズごとにフォントの値をあらかじめ設定しておくのがポイントです。
（図3参照）
【図3】
「テキストスタイリング」にて、フォント仕様の設定が済んだら下準備は完了です！
次は、編集したいブロックのフォントを全選択して、ツールバー左端に現れる「スタイル」から希望の見出しサイズを選択してください。
（図4参照）
【図4】
ここまではデスクトップ用の操作画面でご説明させていただきましたが、もちろんスマホ用の操作画面でも同様です。
ツールバー左端の「スタイル」ボタンを押して、お好みの見出しサイズを選定してください。
（図5参照）
【図5】
もしこの操作でも意図しない結果になるようでしたら、対象のフォントを全選択したのち、ツールバーの一番右にある、「フォントスタイルの削除」を押してください。
（図6参照）
【図6】
これにより、選択されたフォントのこれまでの設定がリセットされ、まっさらな状態から設定をやり直すことができます。
このように、ビルダー上でフォント設定を行う際は、
個別のテキストブロック内で行わずに、グローバルスタイリング内のテキストスタイリングから設定する。これが基本となることを覚えておきましょう！
レイアウトのコツ
次に、スマホ表示ならではのレイアウトのコツをご紹介いたします。
まずは「図7」のデスクトップ用の画面をご覧ください。
【図7】
上段には、左側に画像のパーツ、右側にテキストのパーツを配置したコンテナがあります。
そのすぐ下には、左側にテキストのパーツ、右側に画像のパーツというような、先ほどとは配置が互い違いになったコンテナがあります。
この上下に連続した2つのコンテナを、スマホ用の操作画面で見てみましょう。
（図8参照）
【図8】
このように、デスクトップ用の画面では何の問題のないデザインですが、スマホ用の画面で見てみると、上から「画像⇒テキスト⇒テキスト⇒画像」というような、不規則な順番になってしまっています。
これでは閲覧者を困惑させてしまう原因になりかねません。
その場合、「図9」の黄色いハイライトの位置にある「カラムの順序の逆転」というボタンを押してください。
【図9】
すると「図10」のように、画像パーツとテキストパーツが上下入れ替わります。
【図10】
これにより、上下のコンテナの並びは「テキスト⇒画像⇒テキスト⇒画像」という順番になり、配列に規則性を持たせることができました。
（図11参照）
【図11】
このように「何か不自然」と感じたレイアウトになってしまった場合は、この「カラムの順序の逆転」を操作してみてください。
スマホ専用のデザインをつくるコツ
最後に、スマホ専用のデザインを設定する方法についてご案内いたします。
例えばこのように、オレンジのボタンの中に埋め込まれているテキストサイズが大きくなってしまい、見た目のバランスが悪かったとします。
（図12参照）
【図12】
しかし、ボタンの中に埋め込まれているテキストは、先ほど「図5」でお伝えした「見出し」でサイズ調整することができません。（VCTの仕様によるもの）
そこで、このようにオレンジボタンの中のフォントサイズを「編集タブ⇒ボタンの設定⇒テキストスタイル」にて小さくするとします。
（図13参照）
【図13】
たしかにボタンの中のフォントサイズは適正になりました。
しかしこれをデスクトップ用の画面で確認してみると…、
「図14」のように、今度はデスクトップ用のボタンのフォントサイズまで小さくなってしまうのです。
【図14】
それならばと、こちらのデスクトップ用の画面から、同じように編集タブを使ってテキストサイズを適当な大きさに拡大するとどうなるか？
（図15参照）
【図15】
ふたたびスマホ用画面で確認してみると、スマホ側のフォントサイズが大きくなってしまうのです。
（図16参照）
【図16】
これでは、イタチごっこですね…。
これはデスクトップ用の操作画面と、スマホ用の操作画面の修正コマンドが、関連付いていることで起こる現象です。
この現象を回避するには、デスクトップ用のデザインと、スマホ用のデザインを別設定する必要があるのです。
まずは、スマホ用画面の対象のコンテナ上でマウスオーバーして、「ウィジェットをコピー」ボタンを押します。
（図17参照）
【図17】
そして、左上の「保存されたブロックと要素」の中から、今コピーされたばかりの「一番上にあるコンテナ」をドラッグアンドドロップにて、対象コンテナの直下へ挿入します。
（図18参照）
【図18-1】
【図18-2】
すると新規で挿入したコンテナの右上に「モバイルのみ」という赤いマークを確認することができます。
（図19参照）
【図19】
これは文字通り、「このコンテナはモバイルのみでしか表示されません」という意味ですので、デスクトップ用の画面では表示されないコンテナということになります。
つまり、この「モバイルのみ」と表示されたコンテナが、スマホ専用のデザインブロックとなるわけです。
それではお待たせいたしました。
こちらの新しく追加された「モバイルのみ」のコンテナにて、テキストの大きさを調整してみてください。
（図20参照）
【図20】
スマホにぴったり合うような大きさに調整し終わったら、ここでデスクトップ用の画面に戻って確認してみましょう。
（図21参照）
【図21】
今度は大丈夫ですね。
デスクトップ用でも、ボタン内の文字が小さくなっていることはありません。
モバイル専用の画面でいくら設定を変更しても、デスクトップ用画面には影響を与えなくなりました。
スマホ専用の画面で独自の調整ができるのは、文字の大きさだけではありません。
例えば下のように、オレンジの上に配置してあったテキストを丸ごと消してしまっても、デスクトップ用のデザインには一切影響を与えることはありません。
（図22参照）
【図22】
最後に、重複表示となるコピー元のコンテナを、こちらの「スマホでこのコンテナを表示／隠す」ボタンで非表示にしておきましょう。
この操作を忘れてしまうと、デスクトップ／モバイル兼用版とスマホ専用版の、両方が表示されしまいますので注意してください。
（図23参照）
【図23】
まとめ
今回は、ユーザーがつまずきやすいスマホ設定における3つのポイントを解説させていただきました。
大きなデスクトップ画面よりも、小さなスマホ画面での閲覧数が多くなってきている近年。
不要な離脱を防ぐためにも、この記事を参考にモバイル画面での見え方もきちんと整えておきましょう！