当日案内指示書:FigmaによるWebセクション・トレース演習

FigmaによるWebセクション・トレース演習

事前にお知らせしていた通り今回は「Figmaを使ったUIトレース実践演習」を実施します。
本日のスケジュールと進め方は以下の通りです。
各自グループのメンバーと確認しながら、落ち着いて取り組んでください。

なお、正確なデータが取れなくなるため実践中は他の作業を行わないようにしてください。

本日のタイムスケジュール

本日のチーム構成および準備

事前アンケートをもとに、以下の体制で実施します。
作業のしやすさを考慮し、基本的にはチームで集まって着席してください。

1人グループ

• 25S053

2人ペア

• 25s047
• 25s002

3人グループ

• 25S026
• 25S013
• 25S054

控えメンバー

• 25s034

準備

チームで着席ししだいPCを起動しFigmaへのログイン、Figmaファイルブラウザ画面の表示などの準備を行ってください。

演習のルールと手順

1. ファイルの開き方(※重要)

すでに私から順次各チームのFigmaファイルへ閲覧権限で招待をお送りしていますので、
メールもしくはファイルブラウザの通知から確認してください。
演習開始の13時25分を目途に、閲覧権限から編集権限へ順次変更します。
演習ファイル左上の通知を確認して承諾をクリックして編集が可能な状態にしておいてください。

なお招待を送付したアドレスは、ウェブデザイン演習の課題提出で入力の、
学園発行のアドレスではないgmailアカウントです。
学園メールの場合はそのアドレスにお送りしておりますので確認してください。

• Figmaのファイルブラウザ画面(ホーム画面)を開いてお待ちください。
• 招待の通知が表示され次第、「承諾(Accept)」ボタンを押してファイルに参加してください。

2. 作戦タイム(最初の5分間:13:25〜13:30)

ファイルが開いたら、いきなり手を動かさずにまずは作戦会議を行ってください。

• 1人チーム:どのようにパーツを分解して進めるか、どこから手をつけるか整理する。
• ペア・3人チーム:誰がどのセクション(ヘッダー、メイン画像、カード部分など)を担当するか分担を決める。

3. トレース作業(13:30〜14:25)

指定のお手本URL(※別途案内)のUIを、Figma上で可能な限り忠実にトレース(再現)してください。

時間内にトレースが完了した場合

終了時間を待たず時間内にトレースが完了したチームは記録するため終了時刻を申告してください。

• 1人:14時15分終了
• 2人:時間どおり
• 3人:14時10分終了

ボーナス加点チャンス!

基本的なトレースに加え、以下の発展機能にチャレンジできた場合は加点対象になるため積極的に試してみましょう。
なお機能の使い方等の調べ方は、指定はなく制限も設けませんが、教員への質問のみNGとします。

• オートレイアウト(Auto Layout)の活用
• コンポーネント化(パーツの共通化)
• バリアブル・スタイル設定(カラーやテキストの共通管理)

演習終了後の手順(14:25〜)

1. 作品の提出について

各チームに配布されたFigmaファイル上で作業するため、別途のファイル提出作業は不要です。
時間になったら手を止め、ファイルを開いたままにしておいてください。

2. 事後アンケートの回答

最後に、以下のリンクより、本日の演習に関する事後アンケートに回答してください。
時間厳守で、必ずすべての演習を終えた後で記入するようにしてください。

Figma実践演習の事後アンケート