デイトラWeb制作初級編『モデルを決めて、実在するお店のLPを作ってみよう DAY20~25』学習記録

WEB制作
うにょママ
うにょママ

復習をかねたプログラミング学習の記録と備忘録です。

スポンサーリンク

Day20~25で学んだこと「LP制作と営業方法」

知り合いのプライベートサロンのLPを制作

毎月通っているサロンにHPがなかったので制作することに決定。

canvasを購入。(2021/4/26購入時点で1000以上のテンプレートあり)

LPのトップ画像をスライド表示にさせたかったので、条件の合う「demo‐beauty」という美容室向けのテンプレートを選択。

テンプレートがありすぎて、どんなテンプレートがあるか全部見ていられませんでした。

スライド表示になっているのと、なんとなく自分の作りたいLPに近くなりそうなテンプレートを、深く考えずに選びました。

サイト制作時に調べたこと

<html dir=”ltr”>とは (左から右へ記述)

文字の記述方向を指定する

画像の比率をかえずにサイトの画面の大きさに合わせて縮小、拡大表示させる方法

object-fit:cover;を使う

Font Awesomeのカスタマイズ

▶favicon設定

上手く表示されずに対処したこと↓

  • キャッシュのクリア
  • Favicon画像をフォルダ直下(HTMLファイルと同階層)に設置

Googleフォームの使い方

Googleフォームの実装

上手く実装できたか何度もチェックするためには、設定の「回答を一回に制限する」のチェックをはずす

サイトのレビュー依頼

知人の経営するプライベートサロンのLPを制作しました。

毎月通っていて友人の様な関係なので、事前の許可なくサプライズプレゼント的にLPを制作しました。

パソコンを持ち込み、LPを見てもらいました。

HPが欲しかったそうで、とても喜んでもらえました。

知人はお金を払うから、制作&運営をお願いしたいと言ってくれました!

プライベートでもとてもお世話になっているし、良い練習になるのでLP制作はプレゼントの予定です^^

まとめ

プロの作ったテンプレートは初めて見るコードだらけで、HTMLファイルを開いた瞬間はうろたえました。

はじめはカスタマイズを頑張っていたのですが、どんどんグチャグチャになってきて、結局はじめから作り直したりしました。

カスタマイズは最小限にして、かなりテンプレートをいかす方向にしました。

JavaScriptもまだ勉強していないので、Googleフォームの実装も結構苦労しました。

説明の意味がわからない状態。。。

でも実際に誰かのために制作するのはやりがいがありました。

目の前で喜んでもらえた時は、達成感だけではなく、純粋に嬉しい!という気持ちが湧き上がってきました^^

コメント

タイトルとURLをコピーしました