きっかけ
久しぶりに歩くのもしんどいくらいの腰痛に襲われました。
気合と根性で動いています。
どうも、筆者です。
普段は東京のとある会社でエンジニアとして働いています。
元々は全く別の事業から始まった会社で、自分が働く事業部は今年から始まったものです。
一応新卒入社の自分を含めて、事業部のメンバーは4人。
社長の意向もあり、全員がほぼプログラミング初心者という状態でSwiftを用いてアプリ開発を始めました。
しかし、現在はそのうちの2名が諸事情で長期に渡ってお休み中。
地道に続けているものの、現在もアプリ開発が滞っている状態です。
単純にやばい。
さて、そんな状態の8月ももう終わろうとするある日、自分のところに「元々やっている事業のためのLPを作って欲しい」という依頼が社長からきます。
自分で多少は勉強していたものの、もっとフロントエンドの技術に触れたかった自分は快諾。
こうして1人でLP制作を始めることになりました。
（そして、アプリ開発はもっと滞る...）
作ったものを掲載する許可はもらっていない為、URLなどは載せていませんが過程を振り替えてみようと思います。
アイキャッチ画像は自分の趣味に関する作りかけのホームページのものなので、見られようが大した問題ではありません。
LP制作開始
①最初にしたこと
まずはヒヤリングからです。
社長や事業部の代表から話を聞いていきました。
ゴールを明確にして関わる全員が共通の認識を持てるよう、「どういった経緯で作成したいのか」、「ターゲットは誰なのか」を聞き出していきます。
また、自社に加えて同じような事業をもつ他社のホームページやSNSを参考に、その事業の特徴を把握することにも努めました。
そして、そこからターゲットを掘り下げたペルソナを作っていきました。
自分にはWEBデザインの経験がないため、この段階から今のトレンドなどを知るべく様々なサイトを見ていくことを心がけました。
LPということで特に以下の2つのサイトはほぼ毎日チェックを重ねました。
Web Design Clip [L] | LP・ランディングページのクリップ集
この段階から感じたことはターゲットなどをざっくりとさせてでも、とりあえず形になったものを求められているなということです。
要はなんでもいいから見える形になったものが欲しいということです。
WEBページの制作の手順に慣れていない人によくありがちなことなのかなと思います。
ですが、基本的なことを曖昧にしているとユーザーに届くページは作れないと考えたため、ペースに流されず慎重に作り上げていくことを心がげました。
②ワイヤーフレームの作成
ヒヤリング後2週間の期間が与えられ、ワイヤーフレームの作成に移りました。
どのような順番でどの情報を持ってくるかをよく考えました。
ファーストビューはもちろんですが、ペルソナをもとにどのような情報を求めてこのページを訪れるのかを意識しました。
打ち合わせの相手が実際のページのイメージをしやすいよう仮の画像や文を配置して軽くコーディングを行い、打ち合わせに臨みました。
③デザインとコピーライティング
打ち合わせの内容をもとにキャッチコピーやデザインを作り上げていきます。
ここでは余白の取り方に気を使いました。
集中すると要素を詰め込みがちになるので、一度落ち着いて見やすいデザインか気をつけることが大切です。
アイコンを使う必要が出てきたため、こちらのページを活用させていただきました。
商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』 | カラフルな商用利用可能なアイコン素材を無料でダウンロード!!
ファーストビューの画像はパソコン用とスマートフォン用で別の画像を用意しました。
こうすることで特にスマートフォンにおいて見やすい画像ができたと思います。
④コーディング
デザインしたものを実際に形にしていきます。
ページが重くなりすぎないよう画像の容量を落としたりするのもこの段階で行いました。
TinyPNG – Compress WebP, PNG and JPEG images intelligently
手っ取り早くということでレスポンシブデザインにBootstrap4を使用。
細かい調整は自分の手で行う方法を取り入れました。
その後もちょくちょく注文が入ったので細かい調整を続け、③のデザインと行ったり来たりしていました。
今回はそれまでWEBに全く関わっていない人もデータを見たり問い合わせに対応したりということを行うため、Googleフォームなどのツールを駆使しました。
Googleフォームから問い合わせるとメールで自動返信が行われ、こちらにはLINEで通知が行く（LINE Notify）ようにしました。
⑤公開
GoogleアナリティクスとGoogle広告の設定を済ませ、公開をしました。
Googleアナリティクスはこのブログでも使用しているため、設定しやすかったです。
最初の打ち合わせからここまでおよそ2ヶ月でした。
作ってみて
課題
作っていく過程でいくつか課題に当たったので書いていきます。
実力不足
今回作ったページをWEBデザイナーやコピーライターとして活躍されている方に見せるとおそらくボッコボコにされると思われます。
どういったものが人の心を掴むのかプログラミングと並行して勉強を続けていきたいです。
コーディングも綺麗と言えるものではないでしょう。
WEBページの読み込み速度も満足とは言えないと思います。
PageSpeed Insightsではパソコンでスコア90以上を出していますが、体感はそんなにない感じ。
サーバーの制約多すぎ
今回「使っていいよ」と社長から与えられたサーバーの制約が多すぎました。
具体的には「.htaccessに対応していない」、「独自SSLに対応していない」など。
問い合わせがゴールであった今回のLPにおいて独自SSL非対応は痛いところでした。
プレゼンをして別のレンタルサーバーを提案するなどの対応を積極的に行うべきでした。
自分が思う形で 問い合わせフォームを設置できなかった
今回はGoogleフォームを使用しましたが、自分で作るなりしたかったというのが正直なところです。
都道府県の選択や郵便番号から住所検索など使いやすくなる改善点がいくつも残ってしまいました。
それらに対応したサービスを利用することも検討していきたいです。
個人情報を扱うフォームということでやはりSSL化は必須なので、今後運用するにあたって一緒に改善していきたいポイントです。
材料不足
会社側からホームページ用としてたくさんの写真を提示されました。
ありがたいですね。
しかし、それらは普段の業務で使用していたものでユーザーに向けることを想定したものではありませんでした。
その中からかなり厳しい目でチェックをして選んだつもりですが、見やすいページの為にもユーザー向けの画像を用意したいところです。
自分で写真を撮りに動くことも提案しましたが、あまり良い反応は得られず...
また、お客様の声など具体的な成果をそれまで集めていなかったのもLPとしては決め手にかけると思います。
感想
ひとまず公開を済ませ一区切りついたわけですが、これからアクセス数などを見ながら調整・変更を繰り返す運用をしていかなくてはなりません。
その過程で先ほど挙げた課題をいくつかか帰結していけたらと考えています。
作っていく過程において苦労したなと感じる点はコミュニケーションです。
どこにどのような費用がかかってくるのかやどういう手順が必要なのかをWEB制作の知識がない相手をいかに納得させられるように伝えられるかがすごく大事になってくると感じました。
同じ社内でも苦労をするので、受託をやる場合はなおさらではないかと思います。
いくつか課題が残ってしまったものの、1つのものを作り上げる過程を全て経験できたのは良いことであったと思います。
この経験をもとにレベルアップをしていきたいです。
WEB制作は楽しい！！
