写真1枚からLPを錬成する

「ちょっと違う」は、口で直す

出てきたページは、だいたい形になっていても、見ていると「ここ詰まって見える」「この見出し、もう少し目立ってほしい」みたいな、ちょっと違う所が出てくると思います。ここは、思ったことをそのまま伝えて直してもらいます。

言い方は「喋れば創れる Vibe Coding」でやった、どこが・いまどうなっていて・本当はどうしたいか、の3つをそろえる形がそのまま使えます。AquaVoice を入れた人は、ここが声のいちばん活きるところです。

たとえば見出しが目立たない時は、「いちばん上の見出しと、その下の説明文の間が詰まっていて、見出しが目立っていません。本当は、見出しのまわりにもっと余白があって、ページを開いた瞬間に見出しが目に入るようにしたいです。そう直せますか」と、そのまま喋って送ります。1回に直すのは1か所だけにします。

余白とバランスは、1か所ずつ

1. 直したい所を、1か所だけ伝える
2. 終わったら、ブラウザで再読み込みして見る
3. よければ次の1か所へ進む。おかしくなったら「直す前に戻せますか」と聞く

まとめて5か所頼むと、どの直しで崩れたのかがわからなくなります。1か所ずつのほうが、遠回りに見えて早いです。

「レスポンシブ対応して」で、スマホに合う

パソコンで見て整ったら、次はスマホです。LPはスマホで開かれることが多いので、ここは外せません。

「レスポンシブ対応して」と伝えるだけです。

レスポンシブというのは、見ている画面の幅に合わせて、並びや文字の大きさを組み替えることです。これだけで、スマホで見た時の崩れがかなり直ります。

確かめ方は、ブラウザの窓の端をつかんで、幅を細くしていくだけ。スマホくらいの細さにしても、文字がはみ出したり、横にスクロールできてしまったりしなければ大丈夫です。崩れている所があれば、また1か所ずつ伝えます。

「スムーズスクロール」で、気持ちよくする

もう1つ、覚えておくと得な言葉があって、「スムーズスクロールにして」です。これを伝えると、メニューやボタンを押してページの下の方へ移る時に、パッと飛ばずになめらかに流れていくようになります。一言なのに、触った時の印象が結構変わるんですよね。言葉を1つ知っているだけで、頼めることが増えます。

自分のLPが、手元で動いている

最初は「デザインができないからLPは無理」だったのが、いまは見本の画像1枚から自分の目的に合わせたLPを作って、スマホの幅まで整えられています。自分のパソコンの中で、ちゃんと動いている状態で。実際にURLにして公開する方法は、上級編で話す予定です。

次は「名作の型でホームページを築く」。考え方はLPとほとんど同じで、ページが何枚かに増えます。