こんにちは。ふみ（@tasuhiku_labo）です。
少し前のことになりますが、初めてのLP案件を納品しました！
ふみ途中で心折れそうになったけど、とっても楽しくて勉強になった！
今回は、案件を振り返って今後の制作に生かせるようにまとめていきます。
完全なる個人の備忘録ですが…。読んでいただけるとうれしいです！
今回の案件の概要
今回の案件はこんな感じ。
- ママスペースWebデザイン講座LP制作
- 既存のLPのリデザイン
- 最終的にはWordPress化する
デザインはデザイン講座の実績サポートとして受注。
「コーディングまでお願いできますか？」との依頼を受けて、二つ返事で引き受けました。
ふみまさかコーディングまで！人とのつながりって大切なんだなぁ。
くまほんと！縁を大事にしなくちゃ。
学んだ点と反省すべき点
案件を通して学んだ点、反省すべき点を挙げていきます。
ふみたくさんありすぎぃ…！
デザイン
今回は既存のLPのリデザインだったので、基本的には元のLPに寄せてデザインしました。
カラーは、ママ向けなので優しいピンク系。
「受講者の声」などの足りないコンテンツを追加し、CV（コンバージョン）エリアがあまり目立たなかったので、大きく目立つように。
- 余白をきちんと揃える
- ボタンなどのパーツのサイズ等を揃える
- CV率（成約率）を上げるためのコンテンツの順番
- 視線の動き→Z型・F型
余白やパーツをきちんと揃えることで、デザインのクオリティが上がるだけでなくコーディングもしやすいんだと感じました。
コンテンツの順番や視線の動きについては何度もググって参考になる記事を読んだり、Pinterestで参考デザインをたくさんpinしたり。
- フォントサイズをきちんと確認しておらず、大幅修正が発生
- スマホデザインのカンプも作るべきだった
今回のLPは20,000pxくらいの超大作になってしまったんですが、最後の方まで作ったあとにフォントサイズを一部間違えていることに気づき、全体を少しずつずらしていくという気の遠くなる作業に時間を費やしてしまいました。
16pxと18pxを見間違えたという痛恨のミスです…。
もう一点の反省はコーディングするときに気が付いたこと。PCのカンプしか作らなかったのでレスポンシブはカラム落ちで対応しようと思っていたのですが、これが後の自分の首を締めることとなります。
スマホ版のカンプの依頼は無くても、簡単なもので良いので作るとコーディングの時間を短縮できたのでは？と感じました。
コーディング〜サーバーアップ
デザインOKでた後はそのままコーディングへ突入。
この案件を受ける少し前に、某セミナーで「保守管理しやすいCSSのクラス名の付け方」について教わったので早速実践してみました。
- 全体の構成をまず書き出しておくと良い
- 上から順にCSSを書くのではなく、小さなパーツから書いていく
- Emmetはどんどん使うべし
- デベロッパーツールで見るのと実機で見るのは結構違う
HTMLは、まず全体の構成や使用するタグを紙にざっくり書き出してから取り掛かると後から修正が少なくなると感じました。いつも頭で考えているだけだったのですが、実際に紙に書く方がわかりやすかったです。
CSSでスタイルを当てていくとき、これまでは上から順に作っていたのですが、ボタンや枠などの全体でスタイルが共通のパーツから先に作ってから大枠を作ると手間も省けて時間短縮になると実感。これは某セミナーで教わりました。
レスポンシブのコーディングをする際はChromeのデベロッパーツールで表示を確認しながらコードを書きますが、
そのときはきれいに見えていても実機では見え方がかなり違っていることに驚きました。
私はMacユーザーなので「Xcode」で確認しましたが、全ての端末での見え方を確認できるわけではないんですよね。
ふみむ、むずかしいぞ…。
- 本番で慣れないことはしない
- レスポンシブはただコンテンツを縦に並べれば良いわけではない
- レスポンシブは自分のスマホでの見え方しか意識していなかった
コーディングでの反省点、一番実感したのは「本番で慣れないことはしない！」
この案件に取り掛かる直前に、某セミナーで「保守管理しやすいCSSクラス名の付け方」を教わったんです。
目からうろこの情報がたくさんで感銘を受け、この案件で早速試してみました。
が、慣れていなかったのでとっても時間がかかる！
ふみ案件でいきなり試さずに練習が必要ですね。本当に反省。
もう一点、レスポンシブでの反省点。
スマホのカンプは作らず、カラム落ちで対応すればいいか！と軽く考えていましたが、実際はスマホでもきれいに見せるためには余白やフォントサイズなど細かな調整が必要。
そのことに気づいたのはレスポンシブコーディングがあらかた終わって全体を確認したときです。
とても見づらいサイトになってしまって、何度も細かな修正を行いました。
やっと終わってサーバーアップしたものの、私のスマホではきれいに見えているけど別の機種では表示が崩れている事案が発生したり。
何度も修正のやり取りが発生し、とてもご迷惑をおかけしてしまいました。
くま実機確認めっちゃ大事！怠らないでね！
WordPress化
講座の募集期間が終わった後に、作ったLPをWordPressに組み込む作業を行いました。
「今後、別の講座開催の際に今回のLPを簡単に流用できるようにしたい」とのことです。
実はWordPressを自分のブログ以外で触ったのはこれが初めてのこと。
- 作ったLPを固定ページとして表示させる方法
- ローカル環境の構築方法
WordPress化するにあたり、全く知識がなかったのでひたすらググりながら進めていきました。
それでもわからないところがあればコーディングの講座でお世話になった講師の方に協力してもらい、なんとか無事に完成した、という感じです。
固定ページだけ特定のデザインを反映させるために「Multiple Themes」というプラグインを使用。
このサイトを参考に、作ったLPをテーマとしてインストールし、固定ページに適用させました。
最初、ローカル環境でサイトを作るということを知らずに都度サーバーにアップして見た目を確認していたポンコツな私。
ローカル環境の構築の仕方を教えてもらい、無知さに恥ずかしくなりつつもひとつ賢くなりました。
ちなみに最初MAMPでやっていたんですが上手くいかず、最終的に「local by flywheel」を使ってローカル環境を構築しました。
- 何がなんだかよく分かっていなかった
- そしていまだにきちんと理解できていない
LPのWordPress化についてまとめると、結局は何が何だかまだ分かっていないままなんですよね。
なので、ピンポイントでの反省点は無し。
もう少ししっかりと勉強しなければ…！
くまポンコツだな。
ふみポンコツだよね。動画と書籍で勉強して出直してきます…。
まとめ
今回、実案件を通して学んだことがたくさんありました。
つながりのある方からの依頼だったのでいろいろ融通していただけたけど、通常の案件ではそうもいきません。
学んだことや反省点を生かして、次につなげていきたいと思います！
作ったLPはこちら！
ふみ最後まで読んでくれてありがとうございます。すき！
コメント