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

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

はじめに

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

企画内容

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

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

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

伝えられた内容のメモ

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

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

成果物

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

本企画を通して

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

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

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

工夫したこと

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

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

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

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

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

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アプリ) です。お楽しみに！

---

この記事はレコチョクのエンジニアブログの記事を転載したものとなります。