【PC・スマホ対応のコーディングを学ぼう！】現役フロントエンドエンジニア・yukipan先生による「レスポンシブWebデザイン講座」を開催しました！

7月12日（日）、デジタルハリウッドSTUDIO広島にて「レスポンシブWebデザイン講座」を開催しました。

講師は、現役フロントエンドエンジニアとして活躍するyukipan先生。レスポンシブWebデザインの基本から、実務で役立つ考え方や検証方法まで、クイズや実演を交えながら学ぶ実践的な講座となりました。

■ レスポンシブWebデザインの基本を理解する

講座は、参加者全員で楽しめるクイズからスタート。

「ブレイクポイントとは何か」「どのタイミングでレイアウトを切り替えるのか」など、レスポンシブWebデザインの基本原則を確認しながら、PC・スマートフォン・タブレットなど、さまざまな画面サイズでも見やすく表示させるための考え方を学びました。

あわせて、ブラウザの検証ツール（DevTools）の使い方も実演しながら紹介。実際の制作現場で欠かせないツールを活用し、画面サイズごとの表示を確認する方法を学びました。

■ レイアウトが崩れた原因を見つける力を身につける

今回の講座で大切にしたテーマの一つが、「レイアウトが崩れた原因を特定できるようになること」。

ただCSSを書くのではなく、

• ブレイクポイントを決める考え方
• ブラウザの検証ツールの使い方
• 崩れにくいCSSの設計方法
• 実際のWebサイトを使ったレイアウト検証
• 参考サイトをもとにしたレスポンシブデザインの考察

など、実務でも役立つ知識を一つひとつ解説していただきました。

さらに、

「このCSSの書き方はなぜ良くないのか？」
「なぜレスポンシブ対応がうまくいかないのか？」

といったNG例も取り上げ、改善方法まで詳しく紹介。原因を理解しながら修正する考え方を学ぶことで、今後のコーディングに活かせる内容となりました。

■ yukipan先オリジナルクイズで、実践しながら理解を深める

講座後半では、yukipan先生手作りのオリジナルクイズに挑戦。

参加者は実際にPCを操作しながら、講座前半で学んだ内容を復習しました。ゲーム感覚で進む内容に、会場は集中しながらも笑顔あふれる雰囲気に。

「学んだ内容をすぐ試してみる」というアウトプットの時間があることで、理解をより深めることができました。

■ 実際のWebサイトをみんなで研究

講座の最後は、公開されているWebサイトを題材にレスポンシブデザインを分析しました。

「どこでレイアウトが切り替わっているのか」
「このデザインはどのような設計になっているのか」

今回学んだ視点でサイトを観察することで、普段何気なく見ているWebサイトにも多くの工夫が詰まっていることを実感する時間となりました。

■ 参加者の声

講座終了後のアンケートでは、たくさんの嬉しいご感想をいただきました。

• 「基本的な話が聞けて、とても参考になりました。中間課題の疑問点も聞けて解決でき、とても勉強になりました！」

• 「ゲームを通して楽しく学べました！苦手意識が薄れました。」

• 「レスポンシブの直し方のコツや検証ツールの使い方を改めて学ぶことができました。これからのコーディングで活かしていきたいです。」

• 「とても助かりました！また開催してください。」

今回の講座では、レスポンシブデザインの技術取得だけでなく、「なぜこのCSSではうまくいかないのか」を考える視点を身につけることができました。

「なぜレイアウトが崩れたのか」「どこを確認すれば原因が分かるのか」という視点を持つことで、トラブルにも自分で対応できる力が身についていきます。

今回の講座を通して、参加者のみなさんが普段見るWebサイトにも「どんな工夫がされているのだろう」と興味を持ち、新たな学びにつながるきっかけとなれば嬉しく思います。