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

前回からFigmaを使ってのウェブページデザイン作業を開始しました。
具体的には「Webページデザイン演習」の「header作成編」と「mainimage編」です。
今回も作成手順のページを確認しながら、「service作成編」を進めていきます。

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

Webページデザイン演習〜service作成編〜

完成イメージの再確認

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

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

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

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

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

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

service作成編

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

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

本日のまとめ

前回に引き続き、Webページデザイン演習のページデザイン作業を行いました。
Webページデザイン演習では今回のservice作成編の内容が最もボリュームがあると思います。
次回はnews作成編およびfooter作成編のページデザインを行ない完成させましょう。