第5回講義を行いました
こんにちは、ループラボです。
2026年11月10日、ループラボの第5回講義を行いました。今回は、140分間の「Figmaデザイン」と、30分間の「コーディング概要」の2本立てです。
前回から始まった卒業制作のデザインがいよいよ本格化するとともに、次のステップであるコーディングの入口にも触れた回となりました。
【講義レポート】ループラボ第4回講義「Figmaデザイン」を行いました！
Figmaデザイン：スマホ用デザインとプロトタイプ
前半は、20分ほどの座学からスタートしました。
スマホ用デザインの注意点
スマホ用のデザインを作るときは、Figmaのフレーム機能を使います。iPhoneの各モデルなど、端末ごとの画面サイズに合わせたフレームを選ぶことができます。
また、パソコン用のデザインでは「余白は8の倍数を意識して整えるとよい」と学んできましたが、スマホは端末によって画面の幅が異なります。そのため、左右の余白は％（割合）で考えた方がよいという注意点も紹介されました。
プロトタイプでページ遷移と共有
Figmaの特徴的な機能であるプロトタイプについても学びました。プロトタイプとは、デザインを実際のWEBサイトのように動かして確認できる機能です。ボタンを押すと別のページへ移動する「ページ遷移」の設定方法や、完成イメージをクライアントに共有する方法が取り上げられました。
卒業制作：講師のアドバイスを受けながらデザインを進める
残りの時間は、卒業制作のデザインを進める時間です。受講生の皆さんはこれまでの課題でワイヤーフレームを完成させていて、今はデザインを作っている段階です。
自宅でデザインを進める中で、たくさんの悩みが出てきていたようで、講師が一人ひとりの横についてアドバイスをしながら制作を進めました。少人数のクラスなので、気兼ねなく質問してアドバイスを受ける様子が多く見られました。
コーディング概要：HTML・CSS・JavaScriptの役割を知る
後半の30分間は、コーディングの概要を学ぶ講義です。まずは、WEBページはHTMLやCSS、JavaScript、画像などの「ファイルの集まり」でできているというお話から始まりました。
HTML：内容や構造を作る
HTMLは「HyperText Markup Language」の略です。Markup Languageは「目印をつける言語」という意味で、文章に「ここは見出し」「ここは段落」といった目印をつけるマークアップが特徴です。人は見た目で内容を理解できますが、コンピューターは目印がないと文章の意味や構造を理解できない、という違いも説明されました。
実際に <h1>（見出し）、<p>（段落）、<button>（ボタン）という3つだけのシンプルなHTMLを開き、「これからここに見た目を追加していきます」と実演しました。
CSS：見た目を整える
CSSは、色や大きさ、配置など見た目を整える役割です。HTMLファイルの中に「このCSSファイルを読み込んで」と書くことで、見た目が反映されます。先ほどのHTMLにCSSを読み込むと、画面の見た目が変わる様子を実演しました。
JavaScript：動きや機能を追加する
JavaScriptは、WEBページに動きや機能を追加する言語です。たとえば「フォームの送信ボタンを押したとき、必須項目が入力されていなければメッセージを出す」といった機能を作れます。CSSと同じようにHTMLファイルで読み込むと、ボタンを押したときにボタンの文字が変わる様子が実演されました。
HTML・CSS・JavaScriptって結局何をしているの？未経験者向けにやさしく解説
まとめ
第5回講義では、スマホ用デザインの注意点やプロトタイプ機能を学び、講師のアドバイスを受けながら卒業制作のデザインを進めました。後半のコーディング概要では、HTML・CSS・JavaScriptがそれぞれどんな役割を持っているのかを、実演を通して学びました。
デザインを作る力と、それを形にするコーディングの知識。両方を学べるのがループラボの特徴です。「デザインもコーディングも未経験だけど大丈夫かな」という方も、ぜひ一度ループラボのことを知っていただけたらうれしいです。