目次
中間課題のコーディング編
中間課題のデザインを終わらせ、やり切った感が強くてここからコーディングやるの？まじ？？？て感じでした。夏の暑さも相まってやる気スイッチゼロ。
今までずっとFigmaやIllustrator、Photoshopを開いてたのに、Visual Studio Codeとか…！！お久しぶりすぎてまずお辞儀。
どうやってコーディングと戦ったのか、備忘録です。
PC版のコーディング
もう暑くて暑くてやる気ゼロでしたが、5月生のママさんと話したり手を動かすだけ動かしてたら意外とすぐにやる気スイッチ自体は入りました。
ただ最初の決まりコーディングとか、レギュレーションとか大体忘れていて、プロフィール制作時のhtmlとcssファイルを引っ張り出し、ざーと読んで流れを確認してから作業開始しました！！
HTMLと簡単なCSSはばーっと書いて形をある程度整えるところまで持っていったら、やる気ないーとか言ってた頃の自分なんて忘れてのめり込んでました。なんだったんだろう、あの虚無感・・・。
今回はHTMLを書き終わったら、上から順番にCSSをつけていく。javascript稼働が必要な部分はjsも同時並行して書いていくスタイルでほぼやりました。
javascriptが必要だった部分は「よくあるご質問」のアコーディオンと、「インスタ風レビュー」のカルーセルでした。
授業で習ったことだけでは解決できないコンテンツがいーっぱい
動画授業では基礎中の基礎だけだったんでしょう。メインイメージからどうコーディングすればいいか悩み爆発でした。笑
「画像の上に画像を置いてその中にメインタイトルだからh1タグとsvgと。。。それらが中央に来るようにするにはどうしたらいい？」とAIとの会話合戦が始ります。
AI様様ですが、AIのやり方でもうまくいかないなーとかなんでこんなやり方するのかなーてことがザラにあって結局他のブログ記事とかも探したりしていい勉強になりました。
AI様は何度聞き返しても怒ったりせず褒めてくれるのでいいですよね笑
大体のコンテンツは悩んでも数時間あれば悩み自体は解消していました。やはりすぐにうまくいかなかったのはjavascriptコンテンツです。
javascriptとの闘い。。。
javascriptが絡んでくると、CSSで設定した挙動とは違うスタイルになっちゃったり、ボタンが反応しなかったり、余白が効かなかったり、、、、CSSかつjavascriptの挙動が思った通りに行くのが難しかった。。。
その中でもカルーセル。今回Swiper.jsライブラリを使って作ったけど、いきなりAIがこれのコードを出してきて、まずSwiper.jsってなんだ？てところからなのに、とりあえずコピペして使ってみようーと事前準備もなしに自分のファイルにコードを入れ込んだら、CSS構造も理解できず、本当に時間がかかった😭。
やっと完成したのがこちら↓↓
カルーセルの外に「次へ/前へ」ボタンとナビゲーションを出したり、ナビゲーションの今見えてるところが3個分緑色になるようにしたりするのに、とっても苦労した〜〜〜！！ここだけで丸一日使ってます笑。カルーセルなんて1サイト1回くらいは簡単に出てくるから、さくっとできるだろうと思ったら大間違いだった。大尊敬。
でも今回の学びは、
全く知らないライブラリを使う時は、いきなり自分のデザインに落とし込むのではなく、他の人のリンクをいくつか読んで簡単に動かせるコードで試してから、自分のデザインに落とし込む。。。方が早く理解できる！
参考にしたリンクはこちら。ありがとうございます。
あと意外と計算する。command+スペースキー大活躍でした。
あともう一つ。AI画面開きながらVS Code見て、コーディングした画面見るために初めてiPadをMac画面にミラーリングして使ってみた。使えなくないけどやっぱり重たい。けど生産性は上がった。
レスポンシブ対応
レスポンシブ対応は、背景に散らした野菜たちがレスポンシブで思った通りの挙動にならなかったり、メインイメージのタブレット時の雰囲気がイマイチだったりで、768px以外にもメディアクエリを入れたりして対応しました。
ただ割と出来上がってるところからの改善だからjavascript周りのコーディングで悩んだりとかはなくPC版でどんなコードかを簡単に理解していたことがここで影響してきたかなと思います。
とはいえ、スマホ版で対応したらPC版がぐちゃぐちゃになっちゃわないか、とても不安でした。特にjavascript関連。私はルービックキューブが1面揃っても次の面が揃う頃には他が揃わなくなるタイプなのです。
どこが自分一人でできなかったのかを忘れないようにするために
記憶力が悪いので自分一人で作成できなかった部分はNotionにまとめました。
どんなことで悩んでAIやググったのかわかるように、どのコンテンツで聞いたのか、とどんな質問をしたのか、そしてどんな返答があったのかを記録しました。
↓こんな感じ。
完成しました！
1ヶ月ちょっと、悩みに悩んでやっと出来上がり！野菜を散りばめられたり、javascriptを使えたりと私の中でのミッションはコンプリートできたものの、LPとしてはもっと目立たせなきゃなあとか、他のママさんのLP、とっても素敵✨と思ってしまったり。大大大満足かと言われたら何とも言えない。けど今の私の精一杯。まだまだ課題は山積みだなあと感じてます。とはいえCTAボタンとかは割とお気に入りです。
中間課題 スグ食べですが、実際制作した作品がこちら↓
制作実績としてもまとめました！
まとめ
私はメインページをテキストと画像でコーディングしましたが、他のママさんたちに聞くと画像として埋め込んだみたい。トレーナーさんも画像で埋め込んで問題ないよ、という感じで。テキストはできるだけ文字化した方がいいと思ってたから目から鱗でした。
確かにWebサイトなど見に行くとタイトルの部分が全部画像で入ってたりする…！！衝撃でした笑
いろんなサイトを見ることで学べることがたくさんありますよね。
次は卒業制作です！人よりコンテンツ多めかつWordPress化、多言語化をご希望されているお客様なのでしっかり準備していかなくては…！！！