ポートフォリオとして制作したカード案内サイトの制作過程をまとめました。
尚、ポートフォリオとGitHubは下記でございます。
ポートフォリオ「カード案内サイト(jQuery)」URL
https://takayuki007.github.io/cardGuide-jQuery-/index.html
GitHub
https://github.com/takayuki007/cardGuide-jQuery-
1、要件概要
導入
jQueryのDOM操作を通じてクレジットカードの案内サイトを作ってみます。クレジットカードは多種多様なカードが発行されており、どれを選んだら良いかわからない状態で案内サイトのようなものがあれば便利だと考えました。
そこで
Yes/No選択肢を用意し、選択肢によってカード選択ができるようなサービスを作ろうと思います。
同じようなところはあるか?
カテゴリー分けのサイト
https://kakaku.com/card/
ポイント羅列のサイト
https://hoken-all.co.jp/media/creditcard-ranking/
部門ごとに専門家が分析したサイト
https://diamond.jp/articles/-/189805
2、サービス概要
選択肢を選んでいくだけでピッタリのクレジットカードが表示される。そして、そのクレジットカードのポイントも少し解説されている。
要件定義(10分)
PCとスマホで見られるレスポンシブデザインにする。
1ページでの構成とし、jQueryで表示、非表示を切り替える。
2つの選択肢を進むと最終的におすすめのカードが提示される。
ページ構成(5分)
TOPページ
画面設計&デザイン作成
PC(65分)
スマホ(30分)
環境構築(15分)
node-sassを用いてsass環境を構築
cdnを用いてjQuery環境を構築
3、実装
まずはHTMLを作成。その後にCSSを当てていく。
HTML(30分)
意識したこと
jQueryのDOM操作で表示と非表示を切り替えるので、選択肢やカードの紹介をそれぞれ全てdiv要素で囲んでおかないとまとめて切り替えられないので、その部分は意識してコードを書きました。
CSS
PC画面用
header部分(10分)
presentation部分(10分)
question部分(25分)
answer部分(20分)
スマホ画面用
header部分(10分)
presentation部分(5分)
question部分(15分)
answer部分(10分)
参考URL:
https://wwg.co.jp/blog/3807
https://bbh.bz/2019/08/27/expansion-at-mouseover/
HTML/CSSが完了したので、jQueryの実装に入る。
処理としては、見えてほしくないところにはinvisibleのクラスをつけ、見せたいところはこのクラスを外す。このクラスの付け替えで見せる、見せないを対応する。
jQuery(40分)
クラスの付け替えで表示、非表示を切り替え。
アニメーションもなく切り替わると切り替わったかどうかわかりにくいので、表示される要素にはfadeInを使う。
参考URL:
https://qiita.com/dorara/items/82afce5109605767ca2a
4、テスト(ローカル)
表示崩れや見にくい部分がないかのチェックとjQueryがきちんと機能しているかを確かめる。
PC画面(5分)
スマホ画面(5分)
5、本番デプロイ
今回はGithub pagesを利用して公開することにする。
Github pagesにデプロイ(5分)
Githubにプッシュする。
Githubの設定からGithub pagesの設定をし、公開。
6、テスト(本番)
表示崩れや見にくい部分がないかのチェックとjQueryがきちんと機能しているかを確かめる。
PC画面(5分)
スマホ画面(5分)
スマホで見た際に、presentationクラスの箇所があるため、公式サイトのリンクが画面から見切れてしまう。カードの提案画面が出たら、このテキストは必要ないとも思うので、カードの提案画面になったらこのテキスト部分を非表示にし、リンクをスクーロールをしなくても表示されるようにした。
再度テスト
PC画面(5分)
スマホ画面(5分)
7、まとめ
全体として335分。1人にちを8時間とした場合は、0.6人日での完成でした。
イメージした通りにサイトができたので、非常に満足です。次は素のJavaScriptで書いてみたいです。
↧