【初案件!】デザイン講座LP-リデザインからWordPress化まで

こんにちは。ふみ(@tasuhiku_labo)です。

少し前のことになりますが、初めてのLP案件を納品しました!

ふみのアイコン画像ふみ

途中で心折れそうになったけど、とっても楽しくて勉強になった!

今回は、案件を振り返って今後の制作に生かせるようにまとめていきます。
完全なる個人の備忘録ですが…。読んでいただけるとうれしいです!

目次

今回の案件の概要

今回の案件はこんな感じ。

デザインはデザイン講座の実績サポートとして受注。
「コーディングまでお願いできますか?」との依頼を受けて、二つ返事で引き受けました。

ふみのアイコン画像ふみ

まさかコーディングまで!人とのつながりって大切なんだなぁ。

くまのアイコン画像くま

ほんと!縁を大事にしなくちゃ。

学んだ点と反省すべき点

案件を通して学んだ点、反省すべき点を挙げていきます。

ふみのアイコン画像ふみ

たくさんありすぎぃ…!

デザイン

今回は既存のLPのリデザインだったので、基本的には元のLPに寄せてデザインしました。

カラーは、ママ向けなので優しいピンク系。
「受講者の声」などの足りないコンテンツを追加し、CV(コンバージョン)エリアがあまり目立たなかったので、大きく目立つように。

学んだこと
  • 余白をきちんと揃える
  • ボタンなどのパーツのサイズ等を揃える
  • CV率(成約率)を上げるためのコンテンツの順番
  • 視線の動き→Z型・F型

余白やパーツをきちんと揃えることで、デザインのクオリティが上がるだけでなくコーディングもしやすいんだと感じました。

コンテンツの順番や視線の動きについては何度もググって参考になる記事を読んだり、Pinterestで参考デザインをたくさんpinしたり。

Web集客の開花塾
ランディングページの作り方、7つの超重要ポイント。 | Web集客の開花塾
ランディングページの作り方、7つの超重要ポイント。 | Web集客の開花塾ランディングページ(LP)の作り方を、超重要ポイント7つに絞って説明します。対象読者は、これからLPを作成する方です。初心者だけでなく、制作会社さんが読んでも役...
あわせて読みたい
5年間のランディングページ制作で行き着いた鉄板の構成と7つのポイント
5年間のランディングページ制作で行き着いた鉄板の構成と7つのポイントこんにちは。株式会社FREE WEB HOPEの代表取締役社長 相原 祐樹です。Webマーケティングって、やるべき事や覚えなきゃならないことが沢山ありますよね。何か調べ物をしよ...
反省すべきこと
  • フォントサイズをきちんと確認しておらず、大幅修正が発生
  • スマホデザインのカンプも作るべきだった

今回の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をテーマとしてインストールし、固定ページに適用させました。

ワードプレスプラグインの使い方ならWPホームページ研究所へ
特定ページにインストール済みの違うテーマを適用できる便利プラグインMultiple Themes
特定ページにインストール済みの違うテーマを適用できる便利プラグインMultiple Themes本日は柔軟なテーマ運用を可能とするユニークなプラグインをご紹介いたします。 ワードプレスでデザインを変更したい際に通常は「外観 > テーマ」から見た目の切り替えを行...

最初、ローカル環境でサイトを作るということを知らずに都度サーバーにアップして見た目を確認していたポンコツな私。
ローカル環境の構築の仕方を教えてもらい、無知さに恥ずかしくなりつつもひとつ賢くなりました。

ちなみに最初MAMPでやっていたんですが上手くいかず、最終的に「local by flywheel」を使ってローカル環境を構築しました。

バズ部
超簡単にローカル環境が構築できるLocalbyFlywheelの使い方
超簡単にローカル環境が構築できるLocalbyFlywheelの使い方Local by Flywheel(ローカルバイフライホイール)とは、簡単にWorpdressサイトを構築できる、ローカル環境構築ツールである。 プログラムのコードが書けない人や、コマン...
反省すべきこと
  • 何がなんだかよく分かっていなかった
  • そしていまだにきちんと理解できていない

LPのWordPress化についてまとめると、結局は何が何だかまだ分かっていないままなんですよね。
なので、ピンポイントでの反省点は無し。

もう少ししっかりと勉強しなければ…!

くまのアイコン画像くま

ポンコツだな。

ふみのアイコン画像ふみ

ポンコツだよね。動画と書籍で勉強して出直してきます…。

まとめ

今回、実案件を通して学んだことがたくさんありました。

つながりのある方からの依頼だったのでいろいろ融通していただけたけど、通常の案件ではそうもいきません。
学んだことや反省点を生かして、次につなげていきたいと思います!

作ったLPはこちら!

プレママ・ママ専用Webデザイン講座|ママスペ
プレママ・ママ専用Webデザイン講座
プレママ・ママ専用Webデザイン講座在宅1ヶ月でWebデザイナーに必要なスキルが身につくプレママ・ママ専用WebデザにはWebデザイナーとしてスカウトされた方も!初心者でもセンスがなくてもOK。オンライン開催...
ふみのアイコン画像ふみ

最後まで読んでくれてありがとうございます。すき!

コメント

コメントする

CAPTCHA


目次
閉じる