【連載企画4日目】ウェブ画面開発者の頭の中を見てみよう！〜伝言編 part3〜

望月華

開発

＃Advent Calendar 2022

望月華

最終更新日2022/12/08 投稿日2022/12/08

この記事はレコチョク Advent Calendar 2022の8日目の記事となります。

自己紹介

みなさんこんにちは。

連載企画4日目担当、新卒1年目エンジニアの望月と申します。

k-popアイドルと旅行とNetflixが好きなインドア派です。

お仕事は今年の11月から弊社の採用サイトの開発を行っています。

人生初エンジニアのお仕事に苦しみながらも楽しんでいます！

企画についてご案内

本企画は伝言ゲーム形式でサイト作成してみた、というものですが、詳しい企画内容はこちらになります。

1年目フロントエンジニアって開発する時何を考えているの？？？という興味で軽く読んでいただけたら嬉しいです。

伝えられた内容

まずは3日目の方に伝言をもらいました。

とったメモは以下です。

全部で5要素

ヘッダー
- 背景色は#cff2fa(水色)
- 縦80px
- ロゴ
    - 中央 横100px

バナー
- 画像
    - 中央 横800px 

ランキング
- タイトル「ランキング」
    - 中央 18px
    - 横にレコチョクカラーで線(全角ハイフンより少し長い)
- 1~5位が横並び
- 順位ごとに薄い灰色枠線でかこう
- 枠線の中は順位画像曲名アーティスト名
- 順位は一番上の中央表示
- 「曲名01 」「アーティスト名01 」を05まで
- 1~3位は金銀同の文字色
- 枠の左上にリボンをつける
    - 白でnewの文字
    - リボンはレコチョクカラー(#d2006e)
    - newはリボンの模様(文字)

ジャンル
- タイトル「ジャンル」
    - 中央 18 横線を引く
- 5個横並び
- 200×200px
- 背景は縦向きのグラーデション
    - 上レコチョクカラー
    - 下指定のカラー
    - jpop(紫), kpop(赤), 洋画pops(青), ジャズ(黒), クラシック(黄)

フッター
- 2段
- ヘッダーと同じロゴ
- 「レコチョクで検索」→ロゴと太字で
- レコチョクコピーライトをつける 12px
- 背景色はヘッダーと同じ

不安は残りますし自信はありませんが、心配していたよりは同じ仕様のものを作れそうじゃない？と思いました。

がんばるぞ。

メモと記憶を頼りに実装する

1, 必要な要素や情報をHTMLで記述

まずはHTMLでサイト内に記載すべき情報を記述します。

サイト内に載せる情報と順番はメモをとれていたので、全体を通して特に迷うこと無く、実装することができました。

2, メモを頼りに指定の装飾をCSSで記述

次にCSSで各要素を装飾し、配置等を決定していきます。

メモを頼りに記憶を呼び起こしつつ、確実にわかるところから実装を進めていきました。

伝言を伝えてもらった時は、必要な情報はかなり入手できた！と思っていましたが、当然ながら実際は不足ばかりでした。

ですが正直、自分のメモだけでは不足があることや、正しく解読できない部分があるであろうことは想定内だったので、ある程度は諦め、できるだけ伝えてもらった方のイメージに近づけられるように、ということを目標に実装していきました。

できあがったもの

そんなこんなでできあがったものがこちらになります。

道を外れていないと良いなと思います。

実装中考えていたこと→余白難しい

実装中、メモだけでは不足しているために悩んだものの一つが「余白」です。

メモを見返すと、余白に関する情報は0、伝言時も「こことここってどれくらいの間隔？」というような疑問が出ませんでした。

フロントエンジニアにとって余白のとり方は慣れや経験なのか、センスなのか、界隈での常識があるのかわからないのですが、1年目にとって余白の指定が無いことは悩みの種でした。

今回は今自分が持ってる知識と感覚で、こんな表示がよさそう〜、と思う通りに実装してみました。

持っていた知識

私が持っていた知識は以下2点です。

1, 関連する情報はまとめてグループ化する

デザインの基本原則の1つに「近接」というものがあります。

関連する情報は余白を狭くし、まとめることで情報がわかりやすくなります。

2, 実際の値は8の倍数で指定するとよい

サイト作成において、要素や余白のサイズは8の倍数に指定するとよいとされています。

世の中で使用されているデバイスの画面サイズの多くが8で割り切れるため、このルールに従うと端数が発生せず、どのデバイスで閲覧しても最適な比率を保つことができます。

また、個人的にこのルールに従うことで要素や余白のサイズに悩むことが少なくなった事も大きなメリットだと感じます。

余白、悩んだ末にどうしたのか

上記の知識を活用し、各余白を決定していきました。

その中で、ランキングとジャンルの各要素を横並びで表示した際、余白の決定について、何がしたくてどうしたのかを2点書いてみます。

1 , ランキングは画面幅いっぱいに表示したい

ランキングはこのサイトの主要素な気がしたので、画面幅いっぱい大きめに表示したいと思いました。また、各順位同士の間隔が詰まりすぎていないものにしたかったです。

結果、ランキング全体を画面いっぱいの横並びにし、子要素の左右余白を8pxとりました。

コードは下のような感じです。

<ul class="ranking">
    <li class="ranking-inner">
      <!-- ランキング1位の情報を記述 -->
    </li>
    <li class="ranking-inner">
      <!-- ランキング2位の情報を記述 -->
    </li>
    <li class="ranking-inner">
      <!-- ランキング3位の情報を記述 -->
    </li>
    <li class="ranking-inner">
      <!-- ランキング4位の情報を記述 -->
    </li>
    <li class="ranking-inner">
      <!-- ランキング5位の情報を記述 -->
    </li>
</ul>

/* 画面幅いっぱいに横並びで表示 */
.ranking {
  display: flex;
}
/* 子要素間の余白を指定し、要素同士の間隔を調節 */
.ranking-inner {
  margin: 0 8px;
}

2, ジャンルはまとまり感が出るように表示したい

ジャンルはランキングとは違い、各子要素のサイズに200×200pxの指定がありました。

この状態でランキングのように画面幅いっぱいに広げて表示してしまうと、子要素同士の余白が広すぎて情報のまとまりがなくなってしまうと思い、ジャンルは中央寄りに表示しました。

結果、ジャンル全体を中央寄せの横並びにし、子要素の左右余白を24pxをとりました。

コードは下のような感じです。

<ul class="genre">
    <li class="genre-inner">
      <!-- Jpopの情報を記述 -->
    </li>
    <li class="genre-inner">
      <!-- Kpopの情報を記述 -->
    </li>
    <li class="genre-inner">
      <!-- 洋楽popsの情報を記述 -->
    </li>
    <li class="genre-inner">
      <!-- ジャズの情報を記述 -->
    </li>
    <li class="genre-inner">
      <!-- クラシックの情報を記述 -->
    </li>
</ul>

/* 画面中央寄せの横並びで表示 */
.genre {
  display: flex;
  justify-content: center;
}
/* 子要素間の余白を指定し、要素同士の間隔を調節 */
.genre-inner {
  margin: 0 24px;
}

以上2点、余白に対して自分なりに感じたことやってみたことでしたが、これが良いのか悪いのかはまだ判断が付きません。

正解がないって難しいなと思いました…！

伝えた内容

最後に、以下5日目の方に伝えた内容です。

抜け漏れありそうでビビりながら伝えました。

- 音楽のランキングのサイト
- 全部で5要素ある

構成 
- ヘッダー
- バナー
- ランキング
- ジャンル
- フッター

ヘッダー
- 背景色: カラーコード #cff2fa
- 高さ: 80px
中の要素: 1個
- レコチョクロゴの画像を中央におく
    - 画像は後で送ります
    - 幅: 100px

バナー
- 画像
- 真ん中に表示
- 幅: 800px

ランキング
- タイトル
    - 文言: ランキング
  - サイズ : 18px
  - 位置: 真ん中に表示
  - 文言の横に見出し線がある
    - 色: レコチョクカラー(#d2006e)
    - 長さ: 全角ハイフンより少し長いくらい
- 楽曲のランキング
    - 1~5位までの楽曲情報を、横並びで表示します
  - 各順位ごとに枠線で情報を囲います
    - 枠線の色: 薄い灰色(#f2f2f2)
    - 左上に斜めにリボンがかかっている
        - 色: レコチョクカラー
      - リボンに文字
        - 文言: 英語で「NEW」
        - 色: 白
  - 枠内の情報4つについて上から
    - 順位
        - 位置: 一番上真ん中
      - 色: 1位~3位は金銀銅
    - ジャケット画像
        - 中央表示
    - 曲名
    - アーティスト名
        - 曲名とアーティスト名の文言
        - 例えば1位なら、「曲名01」「アーティスト名01」
        - これを05まで

ジャンル
- タイトル
    - 文言: ジャンル
  - 他はランキングと同じ
- ジャンル
    - 全部で5個
    - Jpop, kpop, 洋楽pops, ジャズ, クラシック
  - それぞれ5つの正方形を横並びで表示
  - 正方形の大きさ: 200px × 200px
  - 正方形の色: 縦向きのグラデーション
  - 色の組み合わせ: 上がレコチョクカラー、下が他の色
    - Jpop: 紫, kpop: 赤, 洋楽pops: 青, ジャズ: 黒, クラシック: 黄色

フッター
- 背景の色: ヘッダーと同じ
- 構成: ２段
- 1段目にはヘッダーと同じロゴ画像がある
    - ロゴとあわせて「レコチョクで検索」となるように、ロゴの横に「で検索」の文言がある
    - 文言は太字
- 2段目はレコチョクのコピーライト
    - サイズ: 12px

あとがき

今回は連載企画で伝言ゲーム形式でのサイト作成に挑戦してみました。

足りない情報は自分でなんとかするしかなかったのですが、そんなことも通して、伝達方法の重要性や、自分がサイトを作成する時どんなことに目を向けているかに気づくことができました。

自分がどれくらい元の形を保てているか、次がどうなるのかドキドキです。

明日のレコチョク Advent Calendar 20229日目は、いよいよ連載企画感動のラスト【連載企画5日目】ウェブ画面開発者の頭の中を見てみよう！〜完結編〜です。

ハンカチ必須です。

お楽しみに！

RecoChoku Engineering Blog

目次