2021年6月5日 記事

【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

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

 

今なら無料でデザインが学べます


 

デザイン未経験でも
フリーランス・副業で
しっかり稼ぎたい方

 

デザイン未経験でも
amazonカタログや楽天LPを
自分で作りたい方

 

講座をご検討の方へ


 

デザイン独学方・未経験から
在宅WEBデザイナーとして
収入の柱を作りたい方はこちら

 

自社デザインをご自身で作る起業家、
スタッフをデザイナーに
育成したい経営者の方はこちら

スキルアップコンテンツのご紹介

スキルアップコンテンツ
のご紹介

初心者のための無料のデザインコンテンツ集

初心者のための
無料のデザインコンテンツ集

デザインのまとめをご紹介

デザインの作り方をピンポイントで解消

お申込みをご検討される方へ

お申込みをご検討される方へ

説明会や個別相談で直接お伺いいただけます。

説明会や個別相談で
直接お伺いいただけます。