※スマホ幅でのデザイントレースは不要です。 参考としてご確認ください。
スマホ向けのデザインについて
ランディングページのデザインを行う場合、PCモニターでの表示だけではなく、スマートフォン表示時のデザインもセットで求められることが多いです。
- PC（パソコンのモニター）
- TB（タブレット）
- SP（スマートフォン）
３つそれぞれの表示に最適化したデザインが1セット、ということもあります。
スマホ向けデザインの追加
クライアントから指定がない場合は、PC表示デザインを作ったアートボードの横に、スマホ表示向けデザインを作成するアートボード追加すると楽です。
アートボードの幅は375px~420px程度に設定されることが多いです。
もしくは更に小型のスマホでも、問題なく見られるように320pxを基準にする場合もあります。
制作方法
追加したアートボードに、作成したパーツをコピーして並べていきます。
横に並べていたアイテムを縦並びにしたり、画像やフォントのサイズ調整が主です。
ファーストビュー画像に関して
全体的な幅以外に、PCモニターは横長、スマホは縦長の画面になっています。
このためファーストビュー部分は、そのままだと使いにくいこともあります。
今回のように人物などが画像に入っている場合は特に、そのまま縮小すると変ですね。
ファーストビューはWebページの“顔”とも言える、大事な部分。
収まりが悪いときはファーストビュー（スマホ表示）用に画像から調整した方が綺麗にできます。
テキスト部分の調整
見出しなどをスマートフォンの幅に合わせようとすると、文字が歪んでしまったり、手動で改行しなければいけなくなったり、小数点以下がずらっと続く（コーディングに困る）サイズになってしまったりという状況になってしまうかもしれません。
ポイント文字からエリア内文字に切り替えると、こういった現象が起こりにくくなります。
変更したいテキストを選択した状態で、書式メニュー > エリア内文字に切り替えを使ってみてください。
エリア内文字の場合は、拡大縮小で文字エリアのサイズが変わります。
自動で折り返しも行われます。ポイント文字でテキスト入力をしていて、調整が大変という方は試してみてください。
アートボードが足りない?!
スマホ幅でのレイアウトに組み替えていると、PCよりも更に縦長になります。
アートボードを延長しようにも、下図のような表示が出て出来ないことがあります。
こういう場合は、もう一つアートボードを追加してください。
セクションの変わり目など、切りが良いところで隣のアートボードへ折り返す形で続けて制作していけばOKです。
制作イメージ
最後に
これでLPデザインは終了です。
今回の講座ではランディングページという形で制作を進めました。
しかし、LPに限らず、コーポレートサイトやポートフォリオのトップページなどでも使える考え方・デザイン方法が多く含まれています。
ご自身のサイト制作や、LPデザイン以外のお仕事にも活かせる部分があるでしょう。
ユーザーに訴えかけられるWebページをデザインしてくださいませ。
お疲れ様でした!