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

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

2026年11月10日 /最終更新:2026年11月10日
読了目安:約3分

Webページデザイン演習のmainimgおよびserviceを作っていきましょう。

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

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

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

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

完成イメージの再確認

今回も一度「専用デザインファイルの確認」を以下で確認しておきましょう。

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

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

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

ではページデザイン作業を始めるため、Figmaのチームのプロジェクトから、
自分の「学籍番号 Webページデザイン演習」ファイルを開いてください。
「Shift + R」でガイドを表示しておくと作業効率がいいと思います。

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

mainimg作成編

まずはmainimgの作成手順を見ながら作業を行いましょう。
以下のページをCtrl + クリックください。

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

service作成編

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

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

本日のまとめ

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