【Webデザインスクール体験談#14】はじめての下層ページ！クリエイターズファクトリー（CF）

今回の授業は下層ページ作成。
下層ページ用にディレクトリを作成したり、共通のCSSでまとめたりとやることが増えてきました。
でも前職のおかげで免疫があるのでまだついていけそうです。

14回目の授業までにやったこと

バナートレース1本と個人制作を進めました。
先週個人制作のスケジュールを作成しましたが大幅遅延です。リスケの嵐。
それでも、30本耐久バナートレースは最低週1はやっておきたい。

バナートレース

※背景はイラストAC

個人制作（要件定義）

今回は下記を考えていきます。

・競合調査
・カスタマージャーニー
・ページ構成

とりあえず要件定義は上記で終了。

競合調査

東京でおすすめのアクアリウムショップを競合にしてみました。
長いので詳細は隠しています。

カスタマージャーニー

カスタマージャーニーなるものを考えてみました。

ページ構成

これまで考えた内容を踏まえてページ構成を考えてみます。

各ページについて紹介していきます。

TOP

「TOP」ページのコンテンツはこちら。

・熱帯魚、水草、水草水槽のギャラリー
・初めての方へ
・サービス
・お客様のレビュー
・よくある質問
・SNS（X、Instagram）
・店舗情報
・お問い合わせ

こんな流れを想像して上記コンテンツの設置してみました。

1.熱帯魚、水草、水草水槽の写真を見てもらってアクアリウムに興味を持ってもらう

2.自分でもできるかな、やってみたいなと興味がある段階で初心者向けのページへ誘導

3.興味があるけど忙しい方向けにこんなサービスあるよと伝えてみる

4.お客様のレビューで安心・信頼を与えてみる

5.少しでも不安を取り除くため、よくある質問を見てもらう

6.SNSもやってるんだと認識してもらう
　フォローするために離脱してもらってもOK

7.ここまで読んでもらったら店舗に来てもらえる可能性が高そうなので最後に店舗情報を設置

8.店舗まで行くのがめんどくさい人用にお問い合わせを設置

Gallery

「Gallery」ページのコンテンツはこちら。

・熱帯魚
・水草
・水草水槽

上記の一覧を写真と名前のみで表示しようと考えています。
値段を入れると生々しさが強いかなと思ったり思わなかったり。

初めての方へ

「初めての方へ」ページのコンテンツはこちら。

・場所を取らずインテリアにもなる小型水槽
・水草だけの水槽で癒やされる
・私たちがサポートします
・お問い合わせ

こんな流れを想像して上記コンテンツの設置してみました。

1.自分の部屋にも置けそう、自分でも飼えそうと思ってもらえるように小さい水槽を推してみる

2.餌が必要ないので毎日のお世話がラクそうと思ってもらえるように生体がない水草だけの水槽を推してみる

3.それでもめんどくさい人向けにこんなサービスありますよと提案してみる

サービス

「サービス」ページのコンテンツはこちら。

・プロが水槽のレイアウトをご提案
・お客様の声
・納品までの流れ
・レイアウト料金
・お問い合わせ
・毎日のお世話がラクになる
・メンテンス料金
・お問い合わせ

こんな流れを想像して上記コンテンツの設置してみました。

1.水槽のレイアウトサービスを説明

2.離脱される前にお客様の声で引き止める

3.興味を持ってもらったところで納品について具体的な話をしてみる

4.興味が薄れないうちにお問い合わせを見てもらう

よくある質問

「よくある質問」ページのコンテンツは、下記のような初心者が知りたい内容を中心に記載していこうかと思っています。

・水槽のランニングコスト
・水槽のイニシャルコスト
・どのくらいお世話が必要か

店舗情報

「店舗情報」ページのコンテンツはこちら。

・店舗情報
・アクセス
・SNS
・お問い合わせ

ここは特になし。

お問い合わせ

「お問い合わせ」に記載する項目はこちら。

・メールアドレス（必須）
・年齢（必須）
・性別（必須）
・名前
・住所
・電話番号
・お問い合せ内容（必須）
・プライバシー
・送信ボタン

どんな人が問い合わせてくるのかを把握するために年齢と性別を必須にしてみました。
名前と住所と電話番号は入力するハードルが高いので任意。

これで要件定義は終了にして、ワイヤーフレームの作成に進んでいきます。

下層ページのコーディング

本日の授業は下層ページのコーディング。
今回は下記のコーディングをやっていきます。

・メインビジュアル配置
・店舗情報の作成
・GoogleMapの設置

作成対象は四角で囲われた箇所です。
ヘッダーとフッターはTOPページから拝借しています。

メインビジュアル配置

メインビジュアルを設置していきます。

htmlで下記を記載。

<div class="page_mv"> <h1 class="page_mv_title section_title wrapper">Shop<span>店舗一覧</span></h1>
</div>

文字が追加されました。
TOPのメインビジュアルはHTMLで対応しましたが、今回はCSSで対応していきます。

.page_mv { background-image: url(../../img/shop_mv.jpg);
}
.page_mv { display: flex; align-items: center; width: 100%; height: 200px; background-color: #eee; background-repeat: no-repeat; background-position: center; background-size: cover;
}
.page_mv_title { display: flex; flex-direction: column;
}
.page_mv_title span { margin-left: 0;
}

「.page_mv」で背景に画像を設定（background-image）します。

「.page_mv」で下記を調整します。

・「Shop　店舗一覧」を中央揃え（display,align-items）
・メインビジュアルの横幅（width）
・メインビジュアルの高さ（height）
・背景色（background-color）
・背景画像の繰り返しを無効化（background-repeat）
・背景画像を中央揃え（background-position）
・背景画像を横幅いっぱいに拡大（background-size）

「.page_mv_title」で「Shop　店舗一覧」を縦並び（display,flex-direction）にします。

「.page_mv_title span」で店舗一覧の左側の余白（margin-left）を調整します。（共通で使ってるcssが悪さしているため）

メインビジュアルが完成しました。

ただ、メインビジュアルのコーディングで1つ疑問が浮かびました。

そういえば「.page_mv」で使用した背景色（background-color）の役割ってなんだろう。
背景画像がリンク切れしたときのため？役割が不明だったので講師の方に質問。

結果は特に必要ないとのこと。ふぇぇ。

店舗情報の作成

店舗情報を作成していきます。

htmlで下記を記載。

<main class="main"> <div class="shop_container wrapper"> <div class="shop_info"> <h2 class="shop_name">茨城つくば店</h2> <table class="shop_table"> <tr> <th>住所</th> <td>〇〇県〇〇市〇〇町</td> </tr> <tr> <th>電話</th> <td>000-0000-0000</td> </tr> <tr> <th>サイト</th> <td>https://〇〇〇〇〇〇〇〇</td> </tr> </table> </div> <div class="shop_map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3281.2385890004934!2d135.494503077112!3d34.67392738464671!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e74d5f549d2f%3A0x55387a4850878072!2z44Kv44Oq44Ko44Kk44K_44O844K644OV44Kh44Kv44OI44Oq44O8IHwg6YCa5a2m44O744Kq44Oz44Op44Kk44Oz44Gn5a2m44G544KLV2Vi44K544Kv44O844Or!5e0!3m2!1sja!2sjp!4v1696506170214!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div> </div>
</main>

住所、電話、サイトは表の要素を使っています。
下記サイトで簡単に表が作れると講師の方に教えてもらいました。

Table Tag Generator

こういう便利ツールはどんどん使っていった方がいいですね。
ただ、記述の意味を理解してから使ったほうがよさそう。

地図については、GoogleMapから情報を持ってきてHTMLに貼り付けるだけ。
こんなに簡単だったとは。

あとはCSSで見た目を整えていくだけ。

.shop_table { width: 100%; margin-top: 26px;
}
.shop_table th { font-weight: bold; text-align: center; background-color: #F2F2F2; padding: 6px 0; width: 20%;
}
.shop_table td { font-size: 14px; padding-left: 20px; border: 1px solid #DBDBDB; vertical-align: middle;
}
.shop_container { display: flex; justify-content: space-between; border-top: 1px solid #C5C5C5; padding: 40px 0;
}
.shop_container:last-of-type { border-bottom: 1px solid #C5C5C5;
}
.shop_name { font-size: 18px; font-weight: bold;
}
.shop_info { width: 33%;
}
.shop_map { width: 55%;
}
.shop_map iframe { height: 280px;
}

「.shop_table」で下記を調整します。

・表の横幅（width）
・表の上側の余白（margin-top）

「.shop_table th」で下記を調整します。

・表見出しのフォントの太さ（font-weight）
・表見出しの文字を中央揃え（text-align）
・表見出しの背景色（background-color）
・表見出しの余白（padding）
・表見出しの横幅（width）

「.shop_table td」で下記を調整します。

・表説明文のフォントサイズ（font-size）
・表説明文の左側の余白（padding-left）
・表説明文の罫線（border）
・表説明文を垂直方向に中央揃え（vertical-align）

「.shop_container」で下記を調整します。

・店舗の詳細と地図を両端に配置（display,justify-content）
・コンテンツの上側に罫線（border-top）
・コンテンツの上下に余白（padding）

「.shop_container:last-of-type」でコンテンツの下側に罫線（border-bottom）を表示します。

「.shop_name」で下記を調整します。

・店舗名のフォントのサイズ（font-size）
・店舗名のフォントの太さ（font-weight）

「.shop_info」で店舗の詳細の横幅（width）を調整します。

「.shop_map」で地図の横幅（width）を調整します。

「.shop_map iframe」で地図の高さ（height）を調整します。

1つ目の店舗が完成です。
今記述したコードをコピーして店舗名を変更すると

2店舗目も完成しました。

今回の授業はここまで。

本日の課題

カフェショップのコーディングの期限がもうすぐなのでそろそろ取り掛からないと。
でも、個人制作もやりたいし、オンライン講座も残ってる。
やることがいっぱいすぎる。