【もりけん塾18日目】エンジニア初心者がはじめてつくるLPの手順【4day】

もりけん塾生になって18日目のねこらのん（@nekoranon256）です。

LP制作中で今日したことをまとめていきます。

LP制作でやることリストを作成してゴールを決める

LP制作をしているとはじめて作成するにも関わらずゴールややるべきことが混乱すると感じ、上記の目次のようなものを作成。

現在はHTMLコードのベースは作成済。

画像やフォントに取り掛かっていますので、次はそちらについてまとめていきます。

画像・デザインについて

画像は用意されているものを使用し、フォントがユニバーサルデザインの書体を使用。

画像についてはcanvaで作成していきます。

affinityの悩みましたが慣れていて簡単に使えるcanvaで今回はやっていきます。

指定の画像を探してcanvaで作成

指定の画像がいくつかあったのですが…時間がかかるもんですね…！

ヒアリングの大切さを痛感しました…

今後は使用したい画像があればファイルで添付してもらい、必要枚数だけを送って貰うとスムーズに進むと感じました。

その後canvaで作成し、

HTMLに掲載しました。

ユニバーサルデザインについて

UDフォントはユニバーサルデザインの書体。

見やすい書体だそうですがMacには入ってなく、Windowsには入っているそうです。

ユニバーサルデザインは、「あらゆる人々にとって使いやすいデザイン」のための考え方です。

引用：MORISAWA FONT

UDフォントはMORISAWA　BIZ+からフォントをインストールすることが可能です。

『BIZ UD ゴシック/明朝』は無償提供があります。

こちらの記事を参考に私もインストールしました。

参考▶UDフォントで快適な生活を送ろう

CSSの順番

画像を入れ込み、著作権のcopyrightを加えHTMLはこれで今の所OKかな。

追加や修正があればその時に調べつつ変更する。

次はCSS。

CSSの手順にまず戸惑いながらしていき、良い手順がないかを探すことに。

あとから見てわかりやすい記述の順番じゃないと修正が難しそう…と思い以下の記事を参考にしました。

参考▶CSSプロパティ記述順序

またCSSについて理解ができていないと思ったので以下の本を片手に必要な箇所を読みつつ進めています。

divクラスの中にfooter、そして<p>で住所や名前を書き、copyrightも<p>で書く。

CSSでは、

でクラスの有無でCSSを書いているんだけど、なぜか両方ともに対応していしまう…

似ているから名前を変えたら良さそう。

おわりに

ProgateでサクサクすすめていたからHTML&CSSなんて簡単って思って実際にやってみたものの…

全然進まない。

今日はしっかり8時間とってLP作成に臨んだけど、画像探しも含めてCSSの手順に戸惑う…

効率の良い方法を探しながら、本を読みながらProgateを戻りながら作成しているよりもっと良い方法が今後でそう。

もりけん塾（@terrace_tech）

Thanks：もりけんさん

もりけんさんの『武骨日記』へ