ウェブデザイン演習 第04回

ウェブデザイン演習 第04回

2025年10月20日 /最終更新:2025年10月20日
読了目安:約4分

デザインファイル編集画面のインターフェイスの解説やツールバー実践演習を行います。

ウェブデザイン演習 第04回

前回はFigmaのアカウントの開設や、ファイルブラウザやチームなどの階層構造についての解説を行い、
Figmaの初めての課題として「ドラフトに複製課題」を行いましたね。
今回はFigmaの編集画面のインターフェイスの解説を行います。

また今回もFigmaを使用しますので、以下のリンクよりFIgmaを開き、
Googleアカウントでのログインまでを行なっておいてください。

Figma: コラボレーションインターフェースデザインツール

Figmaで新しくチームを作る

現在までにFigmaの課題ファイルは「ドラフトに複製課題」「Webページデザイン演習」があると思います。
※上記2件以外のデザインファイルはあらかじめ削除しておいてください。

スタータープランではひとつのチームに作れるデザインファイルは3つまでと説明しましたが、
今回で3つになってしまうため、あらかじめ新規チームを作って移動先を準備しておき、
デザインファイル数の上限に引っかからないようにしておきましょう。

下記の記事を参考に、以下の手順と指示で新規チームを作って、
前回配布した「学籍番号 Webページデザイン演習」を移動しておきましょう。

  1. 記事を参考に新規チームを作り、チーム名を「学籍番号 Webページデザイン」とする。
  2. ファイルブラウザの「最近」で最近のファイル一覧を表示する。
  3. ❷の一覧にあるデザインファイル「学籍番号 Webページデザイン演習」を「右クリック > ファイルを移動」。
  4. 移動ダイアログボックスで、移動先に「学籍番号 Webページデザイン」チームを選び「移動」ボタンをクリックする。
  5. デザインファイルの別のチームへの移動が完了する。

それでは以下の記事をCtrl + クリックください。

[Figma] 16 Figmaで新しくチームを作成する方法。

Figmaのインターフェイスの解説

今回は今後Webデザイン制作で最も目にする時間が長いであろう、
デザインファイルを編集するインターフェイスを解説します。

[Figma] 07 Figmaのインターフェイスの解説

演習課題

ツールバー実践課題

今回はそれぞれのツールを解説したツールバーの使い方を実践する演習課題を行います。

手順は以下。

  1. 以下の課題ページ「演習03 ツールバー実践課題」を開きドラフトに複製する。
  2. ファイル名を「学籍番号 ツールバー実践課題」と名称変更しチームのプロジェクトに移動する。
  3. 課題に取り組んで完成させる
  4. 共有ボタンからリンクをコピーし、課題提出フォームで提出する。

以上です。
今回の課題ページは以下です。

課題ページ:演習04 ツールバー実践課題

今回の課題が完了したら、以下のフォームに共有コピーしたリンクを貼り付けて送信してください。

演習04 ツールバー実践課題提出フォーム

今回の課題の提出期限も通常通り、次回授業開始前までとします。

本日のまとめ

今回はツールバー主にシェイプ系ツールの実践課題を行いました。

長方形の背景を作りたい・・・長方形ツールのシェイプを使えばいい!
ボタンの中に矢印を作りたい・・・矢印ツールのシェイプを使えばいい!

・・・といったように、そのオブジェクトを作るためにはどのツールが必要か?を正しく導き出せるようになれば、
そもそもツールの数が少なく覚えることが少ないFigmaでは、ツールバーを使いこなしているも同然です。
PhotoshopやIllustratorでは越えられなかった壁を簡単に越えられるかもしれません。