第4回講義「Figmaデザイン」を行いました
こんにちは、ループラボです。
2026年10月27日、ループラボの第4回講義を行いました。テーマは前回に引き続き「Figmaデザイン」です。
前回はデザインの前段階であるリサーチやワイヤーフレームについて学びましたが、今回はいよいよ、実際にWEBサイトの見た目を作っていく「デザインの実践」に入りました。この記事では、その様子をレポートします。
【講義レポート】ループラボ第3回講義「Figmaデザイン基礎」を行いました！
先週の課題「ワイヤーフレーム」を発表
講義は、前回出された課題の発表からスタートしました。課題は、リサーチをもとにしたワイヤーフレーム（WEBサイトの設計図）の作成です。
受講生さん一人ひとりが、
- どんなリサーチ結果をもとに
- どんな考えで
- どんなユーザーに向けてこの構成にしたのか
を発表しました。
発表のあとは、制作現場で活躍するプロの講師が講評とアドバイスを行います。「自分の考えを言葉にして伝える」経験と、「プロの視点からのフィードバック」の両方を得られるのは、実案件にもつながる大切な学びです。
WEBデザインに欠かせない基礎用語を学ぶ
続いては、スライドを使った座学の時間です。デザインをする上で外せない用語を学びました。その一部をご紹介します。
コンテンツ幅
コンテンツ幅とは、WEBページの中で文章や画像などのメインの内容を表示する横幅のことです。広すぎても狭すぎても読みにくくなるため、デザインを始める前に決めておく大切な要素です。
レスポンシブデザイン
レスポンシブデザインとは、パソコン・タブレット・スマートフォンなど、見る画面の大きさに合わせてレイアウトが切り替わるデザインのことです。スマホでWEBサイトを見ることが当たり前の今、欠かせない考え方です。
Webフォント
Webフォントとは、インターネット上にあるフォント（書体）のデータを読み込んで表示する仕組みのことです。見る人のパソコンやスマホにそのフォントが入っていなくても、デザインで意図した書体で表示できます。
Figma実践：お手本を見ながらWEBデザインに挑戦
講義の大半を占めたのが、Figmaを使ったデザインの実践です。前回のワイヤーフレームとは違い、今回は色や文字を使って、実際のWEBサイトの見た目を作っていきます。
お手本を見ながら、まずはヘッダー（ページ上部のロゴやメニューが並ぶ部分）の作成からスタート。ハンバーガーボタン（スマホサイトでよく見る、三本線のメニューボタン）などの簡単なパーツが用意されていて、それらを組み合わせながら形にしていきました。そこから、ページを構成するセクション（内容ごとのまとまり）ごとに、デザインを整えていきます。
進め方も特徴的でした。講師が一緒に操作しながら解説する時間もあれば、「それでは今から15分ほど時間をとるので、学んだことを自由にアウトプットしましょう」と、受講生さんが自分の力で手を動かす時間も。教わったことをすぐに自分で試せるので、「分かった」が「できた」に変わっていく、とても実践的な授業となりました。
まとめ
第4回講義では、ワイヤーフレーム課題の発表とプロからの講評、デザインの基礎用語の座学、そしてFigmaを使ったデザインの実践までを行いました。
次週は祝日のためお休みとなり、今回は2週間分の課題が出されました。内容は、先週作成したワイヤーフレームをもとに、卒業制作となるWEBサイトのデザインを進めていくというものです。これまでの学びを、いよいよ自分の作品として形にしていく段階に入ります。
ループラボでは、プロからのフィードバックと、手を動かす実践の時間を大切にしながら、WEB制作の「実践力」を身につけていただけます。「未経験からでも作品を作れるようになるのかな」と気になっている方は、ぜひ一度ループラボのことを知っていただけたらうれしいです。