ポートフォリオとして制作したカード会社のLPの制作過程をまとめました。
尚、ポートフォリオとGitHubは下記でございます。
ポートフォリオ「Roman Card」URL
https://takayuki007.github.io/RomanCard/
GitHub
https://github.com/takayuki007/RomanCard
1、要件定義
導入
プログラミングの基礎であるHTML、CSS、jQueryを用いて販売のための1ページサイトであるLPを作成します。
そこで
紹介する商品は私が興味のあるクレジットカードにします。私はクレジットカードの特典やポイントの還元率などの違いを比較しながら紹介するサイトやYoutubeを見るのが好きなので、それを形にしようと思います。
同じようなところはあるか？
今回作成するLPは高級感のあるクレジットカードをイメージしています。したがってライバル商品となるカードのイメージは、アメリカンエクスプレスのプラチナカードやマスターカードブランドのラグジュアリーカードとします。
-
アメリカンエクスプレスプラチナカード
https://www.americanexpress.com/jp/credit-cards/platinum-card/ -
ラグジュアリーカード
https://www.luxurycard.co.jp/blackcard
2、サービス概要
高級感を感じさせるイメージで顧客メリットもしっかり追求しているものを作りたい。
要件定義(5分)
- PC、タブレット、スマホのサイズでレスポンシブとする。
ページ構成(5分)
- TOPページ
画面設計&デザイン作成(310分)
デザインはPCとタブレット、スマホの3つを用意しました。
- PCデザインに240分
- タブレットデザインに30分
- スマホデザインに40分
かかりました。
意識したこと
高級感を出すために白と黒を基調とし、フォントを明朝とした。高級感のあるデザインは色とフォントが白と黒と明朝が使われていることが多いので(時計がデザインされたポスターなど)、取り入れました。
苦労したこと
レイアウトを整理しユーザーに見やすくなるような配置には苦労しました。PCだけでなく、今ではスマホでも見るので、その部分を意識した配置は特に難しかったです。そのため、自分のイメージだけでなくピンタレストなどを参考に多くのLPやサイトを見て良い部分は取り入れました。特に参考にしたのが下記のLPです。
ReaderStore
https://ebookstore.sony.jp/introduction/
環境構築(15分)
CSSはSASS(node-sassでコンパイル)を使用し、JavaScriptはjQuery(CDNを利用)を使用しました。
ターミナルからnode-sassをインストールし、package.jsonに記載されるようにしました。
watchコマンドでscssファイルに変化があった場合は勝手にコンパイルされるようにするため、package.jsonにコマンドを追加しました。
3、実装
まずはHTMLのみ実装。CSSはHTMLが全て書き終わってから実装することにしました。理由は、CSSで1番時間を取るのが余白の調整、つまり見え方の調整です。これは全体が完成しないと調整できないことなので、最後にCSSを実装した方が効率が良いことが多いです。そのため、CSSは最後としました。
HTML(80分)
- ヘッダーからフッターまでHTMLを実装。
意識したこと
手直しをするのが1番時間がかかってしまうので、あらかじめデザインからCSSを当てるべきところ、flexを使ってレイアウトを並列にするところには細かくclassを設定し、自在にスタイルを当てられるようにしました。また、余白や行間などの部分が見やすさに直結するため、ある程度のまとまりをdivで囲うなどして、レイアウトを整えやすいようにしました。
CSS(385分)
- PCのスタイルを当てるのに195分
- タブレットのスタイルを当てるのに90分
- スマホのスタイルを当てるのに60分
それぞれかかりました。
苦労したこと
見出しとボタンの位置をデバイスにあわせて中央に配置するようにしたことが苦労しました。今ではタブレットやスマホのサイズはたくさんあり全てのデバイスで綺麗に見られるようにするのは、物理的に不可能です。そのため、もしこれがクライアントワークなら必ず標準デバイスや対応デバイスの範囲を決めるようにリードし、クライアントに納得してもらうことが重要だと感じました。ここを蔑ろにすると必ずトラブルになることが予想されました。
参考URL：
jQuery(40分)
動きのあるサイトにもしたかったので、ここでは他のLPやホームページによく見られるスクロールすると表示部分がフェードインしてくる動きを追加しました。
この動きはViewの階層で区切られているところをまとめて表示させるようにしました。
タブレットとスマホでは、mainView以外表示されないようになってしまうので、不良サイトと判断されかねないようにこのフェードインの動きは行わないようにしました。
4、テスト
表示崩れや見にくい部分がないかのテストを行いました。そしてPCの画面のみjQueryが正しく動作しているかもチェックしました。テスト値は、スマホがiPhone X(375px)の横幅を基準、タブレットはiPad(768px)の横幅を基準としました。
テスト(45分)
- PC画面
PC画面を中心にHTMLを組んだり、CSSを当てたので崩れているところはなし。また、jQueryも正しく動作していた。ここは修正の必要がありませんでした。
- タブレット画面
「空港ラウンジへのアクセス」の見出しがカードの横幅いっぱいに広がり少し窮屈感があったので、これをゆとりを持たせるためにタブレットの画面の時だけこのテキストを改行しました。
上記の改行により下のテキスト部分が他のカードのテキスト部分と平行に揃わなくなってしまったので、このカードの見出し部分の下の余白を狭くすることによって、平行に揃えました。
特典部分の4つのテキストの行間が狭く窮屈に感じるので、line-height:1.5emを設定し行間を広げました。
参考URL：
- スマホ画面
メインコピーの「非日常をあなたへ」とボタンが中心からずれていたので、中央に寄せました。
firstViewのタイトルである「全ての支払いをこの1枚で」というテキストが左寄せだったものが不自然に感じるので、スマホでの表示の際は中央に寄せるようにしました。
5、本番デプロイ
本来ならここで本番環境にデプロイをしますが、今回はGithub pagesを利用して公開することにしました。
Github pagesにデプロイ(10分)
- Githubにプッシュする。
- Githubの設定からGithub pagesの設定をし、公開。
6、まとめ
全体として895分。1人日を8時間とした場合は、2人日での完成でした。
画面設計とデザインは設計の部分なので時間がかかるのはしょうがないが、実装の部分ではもう少し、スピーディにできるようになりたいと思いました。目標は1人日で作業できるようになりたいです。