ポートフォリオとして制作したゴルフレッスンの案内サイトの制作過程をまとめました。

尚、ポートフォリオとGitHubは下記でございます。

ポートフォリオ「Golf Champ」URL
https://takayuki007.github.io/golfChamp/index.html

GitHub
https://github.com/takayuki007/golfChamp

1、要件概要

導入

HTML、CSSを使って複数ページのサイトを作ってみます。1ページではなく複数ページを作ることによりCSSの設計だったり、作業をより楽にするための方法を研究したいと思います。

そこで

ゴルフレッスンのサイトを作ろうと思います。

同じようなところはあるか？

参考にしたサイトは下記です。

ZERO FUSION
https://www.zero-fusion.com/

2、サービス概要

ゴルフレッスンを受けるための方法、このサービスの特徴と受ける理由が書かれている。

要件定義(5分)

PC、タブレット、スマホでそれぞれ表示できるようにする。

機能一覧(5分)

• ヘッダーのナビメニューから各ページに遷移できるようにする。
• フッターのナビメニューから各ページに遷移できるようにする。

ページ構成(5分)

• TOPページ
• スクールの特徴ページ
• レッスン内容&料金ページ
• コーチ紹介ページ
• レッスン場所ページ
• スケジュールページ

画面設計&デザイン作成(708分)

PCデザイン

• TOP(210分)
• スクールの特徴(80分)
• レッスン内容&料金(50分)
• コーチ紹介(20分)
• レッスン場所(55分)
• スケジュール(90分)

タブレットデザイン

• TOP(30分)
• スクールの特徴(30分)
• レッスン内容&料金(15分)
• コーチ紹介(3分)
• レッスン場所(10分)
• スケジュール(10分)

スマホデザイン

• TOP(30分)
• スクールの特徴(30分)
• レッスン内容&料金(15分)
• コーチ紹介(10分)
• レッスン場所(10分)
• スケジュール(10分)

苦労したこと

スケジュールのテーブルデザインを作るのは苦労しました。特にスマホの表示部分。間隔が狭くなってしまい、見にくくなることが予想されました。これは後ほど実装する段階で問題になりそうなので、この段階でスケジュール部分のみ画像表示するなどの対策を想定しておいた方が良いだろうと思いました。

クラス設計(60分)

複数ページの作成のため、使い回しやすいようにFLOCCS設計を採用。

• 全体
  app

• Foundation部分
  reset、variable

• Layout部分
  l-header、l-main、l-footer、l-bg-white、l-bg-lightGreen

• Object部分

• Component部分
  c-about-area、c-about-img、c-btn、c-burger-line、c-burger-link、c-burger-ul、c-card-img、c-card-section、c-card、c-coach-area、c-coach-img、c-footer-imgArea、c-footer-li、c-footer-link、c-footer-logo、c-footer-ul、c-header-li、c-header-link、c-header-logo、c-header-ul、c-heading、c-img-area、c-introduction、c-lesson-area、c-lesson-img、c-link、c-location-area、c-location-img、c-main-pic、c-menu-cover、c-menu-torigger、c-reason-img、c-reason-section、c-reason、c-schedule-td、c-schedule-th、c-schedule-tr、c-scheduleText-area、c-school-area、c-shedule-table、c-text-area、c-text、c-textSection-area、c-title、c-topicPath-area、c-topicPath

• Project部分
  p-footer-underline、p-heading-square、p-text-square

• Utility部分
  u-blue、u-golf-ball、u-green、u-l-padding、u-link、u-margin-sp-top、u-margin-top、u-margin、u-red、u-schedule-text、u-sp-margin-bottom、u-sp-schedule-text-space、u-text-center、u-underline

苦労したこと

UtilityにしようかComponentにしようか迷いました。追加する際に汎用的に使われるかどうかのジャッジが苦労しました。

環境構築(15分)

• CSSはSASS(node-sassでコンパイル)を使用。
• ターミナルからnode-sassをインストールし、package.jsonに記載。
• watchコマンドでscssファイルに変化があった場合は勝手にコンパイルされるようにするため、package.jsonにコマンドを追加。

3、実装

まずはHTMLを作成。

• TOPページ(60分)
• スクールの特徴(30分)
• レッスン内容&料金(15分)
• コーチ紹介(10分)
• レッスン場所(15分)
• スケジュール(70分)

意識したこと

タブレットやスマホにも対応するので、あらゆるところにスタイルを当てられるようにclassを設定しました。また、余白は可読性にも影響するので、余白を当てやすいようにレイアウトの塊ごとにdivで囲いました。

次にCSSを作成。

PC画面

• TOPページ(180分)
• スクールの特徴ページ(105分)
• レッスン内容&料金(40分)
• コーチ紹介(30分)
• レッスン場所(30分)
• スケジュール(80分)

タブレット画面

• TOPページ(30分)＋ハンバーガーメニュー(230分)

ヘッダーメニューをハンバーガーメニューにする。そちらの方が可読性が上がると判断。

苦労したこと

ハンバーガーメニューは苦労しました。特に苦労したのが最初の画面でメニュー画面を表示しないように設置することです。試行錯誤して今の状態に落ち着きました。

参考URL：

• スクールの特徴ページ(30分)
• レッスン内容&料金(20分)
• コーチ紹介(10分)
• レッスン場所(15分)
• スケジュール(60分)

スマホ画面

• TOPページ(60分)
• スクールの特徴ページ(40分)

特徴のカード部分を縦に積むようにflexを変更。

意識したこと

HTMLの構造は変えたくなかったので、flexでorderを使用し画像とテキストの順番を調整しました。もしorderで順番を調整していなかったら、画像→見出し→テキストの順番が見出し→テキスト→画像の順番になっていました。

参考URL：
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
https://qiita.com/YJ2222/items/cd6eebba95350a3b64a5

• レッスン内容&料金ページ(40分)

意識したこと

HTMLの構造は変えたくなかったので、flexでorderを使用し画像とテキストの順番を調整しました。もしorderで順番を調整していなかったら、画像→見出し→テキストの順番が見出し→テキスト→画像の順番になっていました。

• コーチ紹介(5分)
• レッスン場所(5分)
• スケジュール(45分)

苦労したこと

テーブルをスマホサイズにしたらテキストや余白が小さすぎて見にくくなってしまった。予想通りこれは画像などで代用した方が良いと思いました。ただし、今回の場合は、「こういったテーブルもレスポンシブにできますよ」ということをアピールするためにこのままにしておこうと思います。

4、テスト

表示崩れや見にくい部分がないかのテストを行う。テスト値は、スマホがiPhone X(375px)の横幅を基準、タブレットはiPad(768px)の横幅を基準とする。

テスト(315分)
PC画面、タブレット画面、スマホ画面とそれぞれ確認を行う。

5、本番デプロイ

本来ならここで本番環境にデプロイをしますが、今回はGithub pagesを利用して公開することにしました。

Github pagesにデプロイ(10分)

• Githubにプッシュする。
• Githubの設定からGithub pagesの設定をし、公開。

6、まとめ

全体として3081分。1人日を8時間とした場合は、6.5人日での完成でした。

ハンバーガーメニューと画像のリサイズに時間がかかりました。ハンバーガーメニューはほとんどのサイトで採用されている標準的なスタイルなので、もっと早く実装できるように練習したいです。