スマホ用スライドの作成方法 – Slideflowヘルプ

こちらの記事では、
「パソコン用のページは変換できたけど、スマホ用のページってどうやって作るの？」
という方に向けて、スマートフォン用のGoogleスライドの作成方法について解説していきます。

「　なぜスマートフォン用スライドが必要なの？　」
→Slideflowでは、パワポ(スライド)を変換してWebサイトにするという特性から、
PC向けのレイアウトとスマートフォン向けのレイアウトを別々に作成する必要があります。

PCとスマートフォンは画面サイズが違うので、PC向けのレイアウトだけだと
スマートフォンで見ると、文字や画像が小さくなってしまい大変見づらくなってしまい
サイトからの離脱率が高くなってしまいます。(そのサイトに訪れる人が減ります)

Slideflowでは、
PC向けとスマートフォン向けのレイアウトを別々に作成することで、
ユーザーがPCからアクセスする場合はPC用スライドが表示され
スマートフォンからのアクセスならスマートフォン用のデザインが表示されます。

作成手順

まずパソコン用スライドを用意する
スマホ用スライドを新規作成し、ページ設定をする
作成したパソコン用スライドから素材をコピぺする
スマホ閲覧用に適したサイズ・レイアウトに調整する

作成のポイントまとめ
こんな時どうする？ ~スライドのタテ幅が長く、余白ができてしまう~

1. まずパソコン用スライドを用意する

はじめに、スマホ用デザインを作る前のベースとなるパソコン用のスライドを作成します。
ページの新規作成方法はこちらをご参照ください。

Slideflowには、色・画像・テキスト等を変更するだけで簡単にWebサイトができるテンプレートもご用意しておりますので、是非ご活用ください！ →テンプレートの使い方はこちら

パソコン用の画面サイズに設定する方法 (スマホ用も手順は同じです)

画面サイズの設定方法

①Googleスライドを新規作成して白紙のページを用意する
②デザインを始める前に、「ファイル」→「ページ設定」をクリック
③プルダウンから「カスタム」を選択し、単位を「ピクセル」に設定する
④PC用の画面サイズをお好みで設定(ヨコ1000px前後、タテ550px以上)

※小型のPCだとヨコ幅960px(ピクセル)前後〜なので、1000px前後で設定してください。
オススメのサイズは、ヨコ幅1280px または 1440px です。
※タテ幅は一般的にWebサイトの場合、メインビジュアルを配置するため、
メインビジュアル()のタテ幅(一般的に550px〜)に合わせて設定するか、
構成の中で1番縦幅が長いコンテンツの大きさに合わせて設定します。

ご参考までに、弊社のデザイナーは1280px × 750px でよく設定します。

パソコン用のスライドを作成→変換して、パソコン向けのWebサイトが完成しました！

2. スマホ用スライドを新規作成し、ページ設定をする

パソコン用のスライドが完成したら、スマホ用のスライドを用意します。
Googleスライドで「新規作成」して白紙のページを作成し、
1. のパソコン用の画面サイズに設定する方法と同じ方法でページ設定をします。

スマホでの閲覧に適した画面サイズは、ヨコ幅375px × タテ幅667px以上 です。

日本で使われているスマートフォンのモニターサイズのシェア率から、
ヨコ幅は 375px または 428px で設定することを推奨しています。

※タテ幅は667px以上が理想です。
PC用からスマホ用へのレイアウト変更に伴い、タテ幅が長くなる場合が多いので
コンテンツに合わせてお好みの高さを設定してください。

弊社のデザイナーは428px × 850pxくらいで設定することが多いです。

3.作成したパソコン用スライドから素材・テキストをスマホ用スライドへコピぺする

ここからいよいよ本題のスマホ用スライドをデザインしていきます。
作業を効率化するため、すでに作成したパソコン用スライドからコピー＆ぺーストをします。

作業効率upアドバイス💡
パソコン用のGoogleスライドのタブと、スマホ用のページ設定をしたGoogleスライドのタブを
2つとも開いておくと作業がスムーズです。

パソコン用スライドの素材・テキストをまるっとコピーする
(コピーのショートカットキー: 「Ctrl (Command)」＋「C」)
スマホ用スライドにペーストする
(ペーストのショートカットキー: 「Ctrl (Command)」＋「V」)

こんな感じでコピペします。

4. スマホ閲覧用に適したサイズ・レイアウトに調整する

PC向けのデザインはヨコ幅が広いので、横並びのレイアウトでデザインされていることが多いです。
しかし、そのままのデザインをスマホで見ると、画面サイズが小さくなるので文字や画像も小さくなってしまい、見づらいサイトになってしまいます。

そのためスマホ向けのデザインは、基本的にタテ並びにして画像や文字のサイズも適切に調整し、置き換える必要があります。(ヨコ並びを使う場合は、多くても2〜3列まで)

下記のようなPC用デザインで、横に2〜3つ要素が並ぶ場合は、スマホ用スライドでは上下に分けて配置しましょう。

↓↓↓ スマホ用レイアウトにするとこんな感じです。

必要に応じて画像をトリミングして小さくしたり、形を変えて配置してください。

パソコン用のレイアウトと同じように横並びでスマホ用スライドに配置してしまうと、ヨコ幅が窮屈になりユーザーに読みづらいサイトと印象つけてしまう原因になりますので、適宜サイズを変更してタテ並びに配置するのがポイントです。

テキストを調整する
スマホ用スライドにコピペしたPC用デザインから、テキストを選択してスライドの横幅に収まるように配置していきます。
(今回は文字が白色なので、わかりやすくするためスライドの背景色をグレーにしています。)

キャッチ部分(One Click Innovation)は改行してフォントサイズを小さく、
説明部分はフォントサイズを少し小さく行高も狭くしてみました。
画像のサイズを調整する
次に画像サイズを変更します。
今回はページ設定で【ヨコ375px × タテ667px】に設定したので、スライド1ページ全てを使ってメインビジュアルとして配置します。

まず、スライドと画像の高さを合わせます。
次にダブルクリックで画像を選択し、スマホ用スライドの横幅にトリミングします。今回は画像上に黒色透過の図形を置いていたので、それも画像と同じ大きさに合わせます。

PC用デザインにあったヘッダーメニュー部分は、スマホ用に配置するとごちゃついてしまうので、スマホ用デザインでは削除してスッキリさせました。

完成したメインビジュアルがこちらです。

上記手順で、

「3.作成したパソコン用スライドから素材・テキストをスマホ用スライドへコピぺする」と
「4. スマホ閲覧用に適したサイズ・レイアウトに調整する」の作業を繰り返して配置していきます。

最後に、すべてのスライドのデザインが完了したら、
Slideflowでスマホサイト用のGoogleスライドURLを設定し、「サイトに変換する」をクリックして完了です。

スマホレイアウトのヒント💡
●メインビジュアルは、スマホ用スライドの1画面に収まるサイズに設定するのがおすすめ！
(ヨコ375px × タテ667pxに設定した場合)
●画像はダブルクリックでトリミングが可能！
●テキストは必要に応じて改行 ＆ フォントサイズを小さくする
●ヘッダーメニューなど、スマホ用に配置すると見栄えが悪くなるものは削除してしまう
●スライドのタテ幅が長く、中途半端にページ下部の余白が余る場合は、{empty} を入力した図形を使って余白を削る
　　　→{empty}については、こちらで詳しく説明しています。

ポイントまとめ💡

PCは【1000px前後】でスライドをつくる
(1024px,1280px,1440px あたりからお好みで)
スマートフォンは【428px】でスライドをつくる
(最小でも375pxで設定する)
スマホ用のレイアウトはスライドの横幅に収まるようにタテ並びに配置する
画像は適宜トリミングして調整する
テキストはフォントサイズや行高を小さくしたり、必要に応じて改行する
必要に応じて{empty}を使って余白を消す →こちらで詳しく説明

🚨こんな時どうする？

★スライドのタテ幅を長めに設定すると、ページ下部に中途半端に余白ができる場合

→ 図形 + {empty} で余白を削る！

手順

メニューバーの「図形」から「長方形」を選択
削りたい部分に図形を作る
作った図形をダブルクリックしてテキスト「 {empty} 」を入力するだけ！
変換すると、{empty}図形を設置した部分の余白が削られて、次のスライドが表示される

※上記動画では、わかりやすいようテキストを左右中央揃えにしていますが、中央揃えにしなくても図形に{empty}がテキスト入力されていれば反映されます！

デザイン編集時の注意点について
※『フォームの編集』をした際は、必ずサイト変換を行ってください。
※デザイン編集で『オプション変更』をした際は、必ずサイト変換を行ってください。

いかがでしたか？
上手にスマホ用のデザインができましたか？

レイアウトに悩む場合は、スマホで企業サイトやサービスサイトを参考にするのもオススメです。