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

こんにちは! 吉田です!

 

 

今日は

前回のメルマガで日南本先生が

実演デザイン制作していた

「女性向けオンラインLP」を

コーディングしていきたいと

思います!

 

 

ざーーーっとやってしまうと

めちゃめちゃ動画が

長くなってしまい…

 

 

ついでに吉田も集中して

だんだん静かになって

いきますので…(笑)

 

 

デザイン動画に引き続き、

コーディングも3回に分けて

お送りしていきます!

 

 

今回はVol.1ということで、

画像の切り出しと下準備から

ランディングページの大定番、

「チェックリスト」の実装までを

時間をかけてやっていきます!

 

 

ポイントは2つ。

 

 

1つ目は、

「アセットの書き出し」。

 

画像の切り出しを、

いつものスライスではなく

アドビCCからの便利機能、

「アセットの書き出し」で

行っていきます!

 

 

スライスは万能ですが、

ちょっと切り出しに

手間と時間がかかるのが

ネックですよね。。

 

そんなときに使ってほしいのが、

今回ご紹介していく

「アセットの書き出し」になります。

 

まずはスライスに慣れてほしいのですが、

「もうスライスにも結構慣れてきたなー」

という方は、ぜひ使ってみてください。

 

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

 

 

そして2つ目は、

チェックリストのコーディングです!

 

LPに関わる人は

避けて通れない必修科目になりますので

この機会にしっかり覚えてしまいましょう!

 

 

 

その他にも、

ランディングページを

スピーディーにコーディングするために

重要なポイントになる横幅の共通化、

デザインのブロック分けについても

お伝えしていきます。

(vol.1から盛りだくさんです。。すみません)

 

 

ぜひご参考ください。

 

 

元になっている

デザイン実演動画はこちら。

↓↓

https://salesdesign-school.jp/blog/kiji/lp-sp-design-woman-vol1/

 

 

 

 

僕はもともと

デザイナーになる前に

フロントエンジニアを

数年していたのですが、

 

 

実はコーディング技術において

htmlとcssの調整ができることは

さほど重要ではありません。

(やり方に慣れて、時間をかければ

誰でもできるからです)

 

 

webの現場は

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

 

 

いかにスピーディーに、

効率的でムダの少ない

コーディングをするか。

 

 

これはデザイナーでも、

エンジニアでも全く同じです。

 

 

 

そのために

めちゃめちゃ大事なのは、

細かい下準備です。

 

 

今日のお伝えしている

・画像の切り出しをスピーディーにしていく

・画像に管理しやすい名前をつける

・デザインをセクションでブロック分けしていく

・cssで共通項目をまとめていく

 

 

こういった下準備が

実はスピーディーで

効率的なコーディングにとって

ものすごく重要になります。

 

 

細かいところですが、

むちゃくちゃ大事なので

身につけていきましょう!!

 

 

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

 

 

 

よしだ

 

 

セールスデザイン講座では、

これからも実務ですぐに使える

デザイン技術・コーディング技術を

実演式で公開していきます!

 

 

ちなみにココだけの話、

かなり昔の動画でも

「え、これ有料級じゃん。。。」と

いうような動画も隠れていたりするので、

ぜひ探してみてくださいね。

(僕は以前めっちゃやりました笑)

 

↓↓

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

 

 

最新の動画が上がったとき

お見逃しのないように、

いいね、チャンネル登録をよろしくお願いします!

 

ではでは~!

 

 

↓感想・質問はこちら↓

https://salesdesign-lab.jp/p/r/oIA6aeRR

率直な感想や質問など大歓迎です! 励みになります!

投稿者プロフィール

上野 健二
上野 健二セールスデザイン講座 代表講師
中小・個人事業企業の業績アップをデザインでサポートする売れるLP制作所・株式会社ガツンで代表取締役を務める。
年間100本以上ランディングページを制作に携わる現役のセールスデザイナー兼ディレクター。
詳しいプロフィールはこちら