9/4（木）主婦・ママクラス卒業制作 コーディング講評会レポート

9/4（木）主婦・ママクラス卒業制作 コーディング講評会レポート

2025年9月4日、デジタルハリウッドSTUDIO広島ウェブデザイナー専攻 主婦・ママクラスの「卒業制作 コーディング講評会」を行いました。
制作を進めているWebサイトを持ち寄り、担任のマスべ先生から実装に直結するフィードバックを受けました。

■レスポンシブ表示を意識したUI設計

まずは、レスポンシブ対応時の表示方法について確認しました。

• タップ可能領域を増やすことによって、ユーザビリティを向上させること
• 画像とテキストのレイアウトパターンを意識すること
• width/height指定の適切な記述場所を明確にし、コンポーネント単位で管理すること

といった観点から、コードのどこにスタイルを適用すべきかを整理しました。
実際のデバイスでの閲覧を想定した細部調整が、完成度を大きく左右することを再認識しました。

次に、ボタンの設計について。

• ベーススタイル（タイポグラフィ・カラー・ボーダー・シャドウなど）は統一することで一貫性を保つこと
• ただし、配置場所によって求められる役割が異なるため、修飾用クラス（modifier class）を用いてバリエーションをつけること

といった具体的なコーディング手法が共有されました。
「同じスタイルを共通化しつつ、場所ごとの役割に応じてクラスを分ける」という考え方は、実務にも直結する重要なポイントです。

■タイポグラフィとレタースペーシングの統一

デザインの中の文字組みに関してもアドバイスがありました。

• letter-spacing（字間）を統一することで全体のトーン＆マナーを揃えること
• 本文テキストについては、body要素にベーススタイルを定義しておくと管理が容易になること
• 微調整を繰り返すことで、より洗練されたタイポグラフィへと仕上げられること

特にデジタル媒体では、可読性と視認性を高めるための行間（line-height）や字間の調整がユーザー体験を大きく変えることを学びました。

■完成へ向けて、次の一歩

今回の講評を通じて、構造面・UI設計・タイポグラフィといった多角的な観点から改善点が明確になりました。 アドバイスを反映しながら、セクションごとの完成度をさらに高めていくことで、実務レベルのWebサイト制作に近づける手応えを感じられる時間となりました。