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

今井元揮

開発

＃Advent Calendar 2022

今井元揮

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

この記事はレコチョク 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アプリ) です。お楽しみに！

RecoChoku Engineering Blog

目次