【連載企画5日目】ウェブ画面開発者の頭の中を見てみよう！〜完結編〜

Advent Calendar 2022

この記事は最終更新日から1年以上が経過しています。

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

はじめに

こんにちは！レコチョクが提供している音楽配信サービスのウェブ開発をしている今井です。
普段の業務ではHTML・CSS・JavaScriptを扱い、ユーザーが実際に操作する画面の作成を担当しております。

企画内容

本記事は、「ウェブページ制作 × 伝言ゲーム」5日目の記事となります。

ウェブページのデザインを伝言し、伝えられた人は伝言をもとにウェブページ制作を行う企画になっております。

こちらで企画内容やルール説明しておりますので、合わせてご確認ください。

伝えられた内容のメモ

私は伝えられた内容をその場で「手書きの図」にしてメモを取りました。
[実際のメモは以下]
image-20221121051456856.png

  • メモを文章ではなく、ワイヤーフレームのような設計図として作成しておけば、コーディングする際にレイアウトが一目でわかるので便利かなと思い、今回は「手書きの図」を作成してみました。
  • メモを視覚的な情報として残しておくことで、後日メモの内容を思い出しやすく、スムーズに実装することができました。

成果物

本企画の成果物は以下になります。元のデザインと大きな差異はなく、安心しました！
image-20221121051759087.png

本企画を通して

本企画の参加者に感想をお聞きしたので、まとめて掲載しようと思います。

本企画でやりにくさを感じたこと

  • 伝える側、伝えられる側の認識を摺り合わる時間がなく、両者の認識にズレがないか不安だった。
    -> 確かに。。私も多少の認識ズレを起こしてしまったので、認識摺り合わせの重要さを再認識しました！
  • 伝えられた内容を整理する余裕がなく、伝えられた内容のメモが雑になってしまった。（後々、メモを解読するのが大変だった..）
    -> 文章でメモするのは大変そう..。私の場合は図やキーワードをメモに残したので、少し時間に余裕があったかもです。
  • 伝達タイミングで十分な情報が揃っているか分からなかった。（実装タイミングで情報が不足していることに気づく..）
    -> まさに私も同じことを感じました。実装タイミングで気づくことって案外多いですよね..。

工夫したこと

  • 伝える時、冒頭で「言葉の定義」を説明した。
    • 「カラーコードが #d2006eのところは、レコチョクカラーとお伝えしますね！」のような感じで。
      -> 認識相違が生まれないように、色を具体的なカラーコードで伝えていることもGoodですね！
  • 共通するデザインは一度に伝えるようにした。
    • 「ヘッダーとフッターの背景色は同色で #cff2faです！」のような感じで。
      -> 時間短縮の工夫が施されていますね！
  • メモを文章ではなく、ワイヤーフレームのような「手書きの図」として取った。
    -> メモを自分以外の人が見る場合にも、「手書きの図」であれば認識相違がなくなりそうで良さそう！

ウェブページ作成フローを紹介！

最後に少しだけ、私がウェブページを作成する時の流れをご紹介します。
以下の手順で進めると、頭の中を整理しながら実装できるので、初心者の方にはおすすめです！

1：まずは、仕様やデザインを確認します。（画像はイメージです）

  • 資料に不備や疑問点があれば事前に解消しておきます。

image-20221122064216556.png

2：HTML構造やHTMLタグを検討・実装します。

  • HTML最新バージョン（HTML Living Standard）に準拠して、ウェブクローラが理解しやすいHTML構造（セマンティックなHTML）を意識すると良いでしょう。
<ul>
    <li>Grid-1</li>
    <li>Grid-2</li>
    <li>Grid-3</li>
    <li>Grid-4</li>
</ul>

3：CSSプロパティの検討・実装します。

  • 一旦、スタイル設定はHTMLタグのstyle属性に記述します。
  • ブラウザで動作確認しながら実装進めます。
<ul style="display: flex; flex-wrap: wrap; gap: 16px; padding-left: 0; list-style: none;">
    <li style="width: calc(50% - 8px); padding: 16px; border: 1px solid #222; box-sizing: border-box;">Grid-1</li>
    <li style="width: calc(50% - 8px); padding: 16px; border: 1px solid #222; box-sizing: border-box;">Grid-2</li>
    <li style="width: calc(50% - 8px); padding: 16px; border: 1px solid #222; box-sizing: border-box;">Grid-3</li>
    <li style="width: calc(50% - 8px); padding: 16px; border: 1px solid #222; box-sizing: border-box;">Grid-4</li>
</ul>

4：styleタグやCSSクラスを用いたコードに修正します。

  • CSSクラス名を検討・実装します。
  • プロジェクト内のコーディング規約に合わせて全体を整えます。
<ul class="parent">
    <li class="child">Grid-1</li>
    <li class="child">Grid-2</li>
    <li class="child">Grid-3</li>
    <li class="child">Grid-4</li>
</ul>
 
<style>
.parent {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-left: 0;
    list-style: none;
}
 
.child {
    width: calc(50% - 8px);
    padding: 16px;
    border: 1px solid #222;
    box-sizing: border-box;
}
</style>

5：ブラウザ上で動作確認する。

  • 問題なければ終わり！

おわりに

最後まで読んでいただき、ありがとうございました。
本記事は連載企画5日目になりますので、是非1日目から閲読していただけますと嬉しいです！

明日の レコチョク Advent Calendar 2022 は10日目 Visual Regression Testingを導入してみた(iOSアプリ) です。お楽しみに！

Advent Calendar 2022