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

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

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

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

スマホ表示での「不要な余白」を解消する

スマートフォン表示を確認した際、意図しない横揺れや余白が発生してしまうことがあります。
要素が画面の外から移動してくるアニメーションなどをつける場合、overflow-x: hidden; を適切に使用することで、画面外にはみ出した要素を隠し、余白を確実に消して操作性を高めるテクニックを学びました。

デバイスに合わせた「文字の整列」と見やすさ

PCとスマホでは画面の幅が大きく異なるため、文字の配置も工夫が必要です。

• レスポンシブな配置換え：
  PCでは中央寄せ（center）で見映えを良くし、スマホでは可読性を優先して左寄せ（left）に切り替える。

こうした細かな設定の積み重ねが、ユーザーにとって「見やすいサイト」にするための重要なポイントになります。

UIを向上させる「ホバーアクション」の工夫

ボタンにカーソルを合わせた際の色の変化など、ユーザーが操作したことを直感的に伝える「ホバー（マウスオーバー）」演出についてもアドバイスをいただきました。

• 色の変化＋動き：
  不透明度（opacity）を下げるだけでなく、transformのscaleなどを追加し、要素のサイズをわずかに大きくする手法。
• 心地よい変化：
  transition を活用して、フワッと動かすことで高級感や使い心地の良さが生まれます。

ファーストビューを崩さない文字配置

画面を開いた瞬間の印象を決める「ファーストビュー」の調整についても深掘りしました。
文字の位置を固定値（px）ではなく、vh（Viewport Height） で指定することで、閲覧するデバイスの高さに応じて柔軟に位置が調整されます。
これにより、どんな画面サイズでも作り手の意図した位置に文字を配置できるようになります。

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

今回の講評会では、単に「コードを書く」だけでなく、「ユーザーがどう感じるか」「デバイスが変わっても意図が伝わるか」という、よりプロに近い視点を学ぶことができました。
「海ごみ妖怪プロジェクト」の完成に向けて、今回のアドバイスを反映させ、より魅力的なWebサイトを目指していきます。