モバイル版LPの作り方を習いました
こんにちは、ソラです✨
DLLで、モバイル版のLPの制作の講義を受けました。
今回の授業を簡単に説明すると、PC画面とスマホ画面で画面の大きさが違うので、最初にPC版を作ってからスマホ用（モバイル版）は作り替えましょうという内容です。
バナーをモバイル版にリサイズした時は、ただ大きさを小さくするから要素を省いたって感じでした。
でも今回のLPはサイズを小さくするだけじゃないんですよね。
パソコンの画面は横長なのに対してスマホって縦長だし難しくないか😱
と怯えつつモバイル版LPを作っていきます！
まずモバイル版LPのサイズを設定する
PC版のLPのデータを改変するのではなく、モバイル版は新規データとして作っていきます。設定は幅750px、高さ1334pxです。ここはもう何も考えず講師のF先生に言われた通りにやります😂
モバイル版を作る際には新しいアートボードの隣にPC版のLPを出しておいて、要素をコピペして配置していきます。
言葉で説明するとめっちゃ簡単ですね…！
実際やると、どこに配置していいかわからなくて迷子になります。。
先生曰く「まず手描きで配置を決めるのも良いですよ〜」とのことです。
講義でF先生が作っているモバイル版のLPの配置と同じにしておいたのですが、仕事で作るとなったらお手本がないから自分でレイアウトを決めないといけませんね…！
そこはワークブックで鍛えます🔥
コツはコピーを目立たせること
モバイル版はPC版より小さくなりますが、とにかくコピーが読めないと意味がない！！
全部を小さくして配置するのではなく、コピーは「さすがに絶対読めるだろ」ってくらい大きめにしておくのが良いみたいです。
LPではヘッドラインのメインビジュアルとキャッチコピーが大事ですが、特に文字って読めないとなにも伝わらないのでコピーの視認性、可読性は超大事ですね。
ちゃんと読めるかは、自分のスマホで表示させてちゃんとチェックします！
モバイル版のLP、長くね？
モバイル版のPC版のデザインをキュッと縦長にしていくので、同じ情報を入れようとすると長さが伸びます。
どんどん作っていくと「長くね？本当にここまで見てもらえるかな？」と不安になってきました😂
流通してるモバイル版LPってこんなに長いの？と思ってとりあえず手元のスマホでLPと検索。
1番上に出てきたのが「クラウドワークスのLP制作依頼」のLPでした。
どんなLPかはこちら（全部だと長いので一部だけスクショしました）
↓
（引用元：クラウドワークス）
めっちゃ長い！！！
モバイル用のLP、めっちゃ長くていいみたいです！！！
見やすくてしっかり情報が伝わるように作ることが第一優先ですね。
講義が終了しました！！！
そしてそして、モバイル版の講義を最後に動画での講義は終了しました！！
ここまで講義を受けてたくさん成長してきたね😉
お疲れ様、私っ！！！！！
偉い〜〜〜！！！
ビックリマークの数も増えちゃう！！！
まだ卒業はしていませんが、とりあえずここでちょっとは自分を褒めてあげたい気持ちになってます😂
WEBデザイナーとしてはまだスタートラインにも立ってないんですけどね💦
これからが勝負だ💪