実習課題指示書:FigmaによるWebセクション・トレース演習

1. 演習の目的と概要

本演習では、Webデザインツール「Figma」を使用して、企業のランディングページ(LP)の一部セクションを再現します。
限られた制限時間の中で、お手本と同じデザインを正確に、かつ効率よく形にすることを目的としています。

2. 配布ファイルについて

あらかじめFigma上に、以下の「スターター素材」が用意されています。
※注意: ゼロから文字を打ったり画像を探したりする必要はありません。
すでにあるパーツの「配置」と「見た目の調整」を行ってください。

• テキストデータ: すべて入力済みのテキストボックスとして配置されています。
• 画像・アイコン: プレースホルダー(四角形や円形の枠)として配置されています。

3. 当日の進め方・タイムスケジュール

① 準備・作戦タイム(最初の5分:操作禁止)

※全員共通のルール:まだFigmaの操作を始めないでください。

ペア・グループ(2〜3人)のチーム

画面を見ながら「どこを誰が担当するか」の役割分担を話し合って決定してください。

個人(1人)で作業する方

画面全体を見渡し、「上から順に作るか」「どのパーツから手を付けるか」の作業手順を頭の中で組み立ててください。

② 組み立て・配置(55分:ここから計測スタート)

「スタート」の合図と同時に操作を開始します。
お手本の見本画像を参考に、上から順にパーツを配置・整えていきます。

きれい並べるコツ(整列機能を使おう)

マウスで適当に動かすのではなく、複数の要素を選択してFigma右パネルの「整列・等間隔に分散」ボタンを使うと、
3つのカードやメニューが綺麗にピタッと揃います。

③ 仕上げ・見直し(制限時間内)

フォントサイズ、色、カードの角丸、余白などに大きなズレがないか、
チーム全員で(または自分で)確認して仕上げ、制限時間になった時点で作業終了となります。

4. 評価およびアンケートについて

評価とボーナス点について

本課題の基本は「正確な配置と再現性」ですが、
もし時間内に余裕ができたり、より効率的な作り方に挑戦したい場合は、
オートレイアウト機能やコンポーネント機能を活用して構いません。
(※活用度合いや挑戦に応じてボーナス加点を行います)

なお、これらの機能の詳しい使い方の説明はありません。
必要に応じて、各自やチームでインターネット等で調べて実践してください。

制作物の完璧さだけでなく、制限時間内にチームでどう協力したか(プロセス)を重視します。

事後アンケートについて

終了後、簡単な「事後アンケート」へのご協力をお願いします。
本アンケートおよび制作データは、大学の教育研究・論文発表の目的でのみ使用し、
個人情報は完全に匿名化されます。またあなたの成績には一切影響しません。