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

前回は「Webページデザイン演習」の「service作成編」のウェブページデザイン作業でした。
今回も作成手順のページを確認しながら、「news作成編」「footer作成編」を進めていきます。

作業の性質上、わからないまま進めてしまうと、あとから取り戻すのが極めて困難ですので不明点は必ず都度挙手してください。
学生の皆さんは気にするかもしれませんが、私は授業がストップしても全く問題ありません。

Webページデザイン演習〜news・footer作成編〜

完成イメージの再確認

今一度「専用デザインファイルの確認」を確認してみましょう。
今回皆さんがWebデザイン制作体験を行うページの完成図は以下です。

完成図:Webページデザイン演習

非常に基本的な構成のデザインですが、Figmaによるデザイン作業に最低限必要なスキルはほとんど入っています。

Webページデザイン作業開始

ではページデザイン作業を始めるため、Figmaのチームのプロジェクトから、自分の「Webページデザイン演習」ファイルを開いてください。

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

news作成編

ではnewsの作成手順を見ながら作業を行いましょう。
以下のページを別タブで開いてCtrl + クリックください。

Webページデザイン演習 作成手順 – news

footer作成編

次にfooterの作成手順を見ながら作業を行いましょう。
以下のページを別タブで開いてCtrl + クリックください。

Webページデザイン演習 作成手順 – footer

サポート

ここからはFigmaの編集作業を行なっていて、途中でわからなくなって追いついていなかったり、
手詰まりになってしまった人の学習サポートの時間にします。

本日のまとめ

3回に渡り行なってきたWebページデザイン演習のページデザイン作業を完成させました。
しかしながら完成したのはトップページのデザインのみです。
残りの授業では他のページデザイン作業もしていきたいと思います。

課題提出

では完成させたデザインファイルを提出しましょう。

1. Figmaでデザインファイル「Webページデザイン演習」を開く。
2. 共有ボタンからリンクをコピーし、課題提出フォームで提出する。

以上です。
以下のフォームに共有コピーしたリンクを貼り付けて送信してください。

実践 Webページデザイン演習課題提出フォーム

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