初心者の方必見!スマホ版ショートLPをコーディングしよう!

こんにちは、吉田です!

 

 

今日は、スマホ版として制作した

ランディングページのデザインを

超簡単な方法でコーディング

(webページへ反映)を、

実演形式でしていこうと思います。

 

 

めちゃめちゃ緊張したせいか、

1回目の収録は録画ボタン押し忘れて

録画せずに40分喋り倒してました。。。

 

 

ということで

2回目のものを

お送りします。笑

(2回目でも緊張してますが。。)

 

 

コーディングのおおまかな流れは

 

①デザインデータから、素材を切り出し

②htmlでのコーディング

③cssで見栄えの調整

 

こんな流れで進んでいきます!

 

 

今回は初回ということで、

デザインデータ上で

画像の切り出しから、

 

webページへの反映までを

超簡単な方法、かつ

ステップバイステップで

行っていきます。

 

 

・コーディング初心者

・コーディングに苦手意識がある

・htmlやcssが呪文にしか見えない…

 

このような方には

コーディングの全体像を

ざっくりと掴んでいただける

内容になっています!

 

 

ぜひご覧ください^^

 

↓↓↓

 

 

(最後焦って、1つクラスを入れ忘れてました汗)

――-

 

.container img{

           width: 94%;

}

 

―――

上記を動画内のcssに入れていただければ、

下記URLと同じものになります。

↓↓今回実際にコーディングしたLPはこちら

https://salesdesign-school.jp/sample/coding/

 

↓↓コーディング前のデザインデータはこちら
https://salesdesign-school.jp/sample/sample_design01.zip

動画を参考に是非コーディングにトライしてみましょう^^

--
※スマホ用LPですのでスマホにてご覧ください

 

 

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

投稿者プロフィール

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