12/18（木） 主婦・ママクラス お仕事TRYプログラム
コーディング講評会レポート

12/18（木）主婦・ママクラス お仕事TRYプログラム / コーディング講評会レポート

2025年12月18日、デジタルハリウッドSTUDIO広島の「Webデザイナー専攻 主婦・ママクラス」にて、現在取り組んでいる一般社団法人フウド「海ごみ妖怪プロジェクト」のコーディング講評会を行いました。

実務を想定したプロジェクトの制作物を持ち寄り、担任のマスべ先生から、よりアクセシブルで洗練されたサイトに仕上げるための具体的なフィードバックをオンラインで受けました。

■アクセシビリティを意識したHTMLの記述

まず、すべてのユーザーにとって使いやすいサイトを目指す「アクセシビリティ」の観点からアドバイスをいただきました。

• 画像情報の伝え方（alt属性の工夫）
  画像を目で見ることが難しい方や、読み上げ機能を利用する方にも正しく情報を伝えるための工夫を学びました。
• 構造的なライティング
  単に画像を配置するだけでなく、項目名（タイトル）を適切に設定し、その内容を説明する文章を添えることで、より親切な設計になります。

「誰にでも届くデザイン」をコードの段階から意識することの大切さを再認識しました。

■背景デザインの質感をコントロールするテクニック

次に、サイトの雰囲気を左右する「背景の粒子の表現」について、テクニックの共有がありました。

• background-repeatとsizeの組み合わせ
  repeat-x を使って質感を出している部分において、background-size を適切に指定することで、表示の割合や密度を細かく調整できることを学びました。

細かな粒子の揃え方ひとつで、サイト全体のクオリティがぐっと高まります。

■Figmaでの事前準備がコーディングを楽にする！

また、デザインツール「Figma」でサイズの異なる画像を一列に並べる際の工夫についてもアドバイスをいただきました。

• 同じサイズの四角で「フレーム化」する
  サイズのバラバラな画像をそのまま並べるのではなく、あらかじめ同じサイズの四角（枠）を定義して「フレーム化」することで、レイアウトが美しく整います。

「コーディングのしやすさはデザインデータの作り込みから始まる」という、実務で非常に役立つポイントを教わりました。

■実践的なフィードバックを糧に

今回の講評会では、単に「動く」だけでなく、「誰にでも伝わるか」「細部まで意図が反映されているか」というプロの視点を学ぶことができました。

「海ごみ妖怪プロジェクト」の完成に向けて、今回のアドバイスを反映させ、より魅力的なWebサイトを目指していきます。