初心者の方必見！スマホ版ショートLPをコーディングしよう！
吉田 祥太
こんにちは、吉田です！
今日は、スマホ版として制作した
ランディングページのデザインを
超簡単な方法でコーディング
（webページへ反映）を、
実演形式でしていこうと思います。
めちゃめちゃ緊張したせいか、
１回目の収録は録画ボタン押し忘れて
録画せずに４０分喋り倒してました。。。
ということで
２回目のものを
お送りします。笑
（２回目でも緊張してますが。。）
コーディングのおおまかな流れは
①デザインデータから、素材を切り出し
②htmlでのコーディング
③cssで見栄えの調整
こんな流れで進んでいきます！
今回は初回ということで、
デザインデータ上で
画像の切り出しから、
webページへの反映までを
超簡単な方法、かつ
ステップバイステップで
行っていきます。
・コーディング初心者
・コーディングに苦手意識がある
・htmlやcssが呪文にしか見えない…
このような方には
コーディングの全体像を
ざっくりと掴んでいただける
内容になっています！
ぜひご覧ください＾＾
↓↓↓
（最後焦って、１つクラスを入れ忘れてました汗）
.container img{
width: 94%;
}
上記を動画内のcssに入れていただければ、
下記URLと同じものになります。
↓↓今回実際にコーディングしたLPはこちら
https://salesdesign-school.jp/sample/coding/
↓↓コーディング前のデザインデータはこちら
https://salesdesign-school.jp/sample/sample_design01.zip
動画を参考に是非コーディングにトライしてみましょう＾＾
※スマホ用LPですのでスマホにてご覧ください
それでは今日はこの辺で！
投稿者プロフィール
-
フロントエンジニア出身の叩き上げセールスデザイナー
セールスデザイナーとしては５年目。
ノンデザイナー出身でめちゃめちゃ苦労した経験から、
感覚的になりやすいデザインの指導を
理論的かつ再現性ある形で伝えることをモットーにしている。
⇒ 詳しいプロフィールはこちら
最新の投稿
記事2023年12月25日【成果続々！】おめでとうございます！- 記事2023年12月20日「強みがない」デザイナーの生存戦略
- 記事2023年12月4日ガクブルしながら選ばれるデザイナーになろう
- 記事2023年11月27日サービスや営業メールを強くする泥臭い秘訣
