【Vol.1】スマホ版オンラインセミナーLPをコーディングしてみよう！

こんにちは！　吉田です！

今日は
前回のメルマガで日南本先生が
実演デザイン制作していた
「女性向けオンラインLP」を
コーディングしていきたいと
思います！

ざーーーっとやってしまうと
めちゃめちゃ動画が
長くなってしまい…

ついでに吉田も集中して
だんだん静かになって
いきますので…（笑）

デザイン動画に引き続き、
コーディングも３回に分けて
お送りしていきます！

今回はVol.1ということで、
画像の切り出しと下準備から
ランディングページの大定番、
「チェックリスト」の実装までを
時間をかけてやっていきます！

ポイントは２つ。

１つ目は、
「アセットの書き出し」。

画像の切り出しを、
いつものスライスではなく
アドビCCからの便利機能、
「アセットの書き出し」で
行っていきます！

スライスは万能ですが、
ちょっと切り出しに
手間と時間がかかるのが
ネックですよね。。

そんなときに使ってほしいのが、
今回ご紹介していく
「アセットの書き出し」になります。

まずはスライスに慣れてほしいのですが、
「もうスライスにも結構慣れてきたなー」
という方は、ぜひ使ってみてください。

あまりのラクさに感動するはずです。

そして２つ目は、
チェックリストのコーディングです！

LPに関わる人は
避けて通れない必修科目になりますので
この機会にしっかり覚えてしまいましょう！

その他にも、
ランディングページを
スピーディーにコーディングするために
重要なポイントになる横幅の共通化、
デザインのブロック分けについても
お伝えしていきます。
（vol.1から盛りだくさんです。。すみません）

ぜひご参考ください。

元になっている
デザイン実演動画はこちら。
↓↓
https://salesdesign-school.jp/blog/kiji/lp-sp-design-woman-vol1/

僕はもともと
デザイナーになる前に
フロントエンジニアを
数年していたのですが、

実はコーディング技術において
htmlとcssの調整ができることは
さほど重要ではありません。
（やり方に慣れて、時間をかければ
誰でもできるからです）

webの現場は
現場は常にスピード勝負。

いかにスピーディーに、
効率的でムダの少ない
コーディングをするか。

これはデザイナーでも、
エンジニアでも全く同じです。

そのために
めちゃめちゃ大事なのは、
細かい下準備です。

今日のお伝えしている
・画像の切り出しをスピーディーにしていく
・画像に管理しやすい名前をつける
・デザインをセクションでブロック分けしていく
・cssで共通項目をまとめていく

こういった下準備が
実はスピーディーで
効率的なコーディングにとって
ものすごく重要になります。

細かいところですが、
むちゃくちゃ大事なので
身につけていきましょう！！

それでは今日はこの辺で！

よしだ

セールスデザイン講座では、
これからも実務ですぐに使える
デザイン技術・コーディング技術を
実演式で公開していきます！

ちなみにココだけの話、
かなり昔の動画でも
「え、これ有料級じゃん。。。」と
いうような動画も隠れていたりするので、
ぜひ探してみてくださいね。
（僕は以前めっちゃやりました笑）

↓↓
https://www.youtube.com/channel/UCa9hh8i5qQPcpI6kUfF8qWA

最新の動画が上がったとき
お見逃しのないように、
いいね、チャンネル登録をよろしくお願いします！

ではでは～！

投稿者プロフィール

吉田 祥太

フロントエンジニア出身の叩き上げセールスデザイナー
セールスデザイナーとしては５年目。

ノンデザイナー出身でめちゃめちゃ苦労した経験から、
感覚的になりやすいデザインの指導を
理論的かつ再現性ある形で伝えることをモットーにしている。

⇒ 詳しいプロフィールはこちら

最新の投稿

この著者の記事一覧

• 記事2023年12月25日【成果続々！】おめでとうございます！
• 記事2023年12月20日「強みがない」デザイナーの生存戦略
• 記事2023年12月4日ガクブルしながら選ばれるデザイナーになろう
• 記事2023年11月27日サービスや営業メールを強くする泥臭い秘訣