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

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

2025年09月29日 /最終更新:2025年09月29日
読了目安:約6分

Webデザインツール「Figma」の説明を行います。

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

ウェブデザイン演習を担当する、情報ビジネス学科の脇坂です。
今後半年間にわたって、ウェブデザインに関しての知識や技術の習得を行い、
最終的にはオリジナルのウェブサイトのデザインを制作する作業を行います。

ウェブデザイン演習について

本講義ですべきこと

本講義は「ウェブデザイン演習」と銘打った講義ですので、最も大きなテーマとしてウェブデザインに関しての理解を深めなければいけません。
その最も効率の良い方法は、数多くの参考サイトを見てインプットを増やすことです。
最先端の技術を使った最新のウェブデザインは、まさにウェブを通し、Pinterestなどで簡単に探すことができます。

本講義を受講する上で皆さんに取り組んで欲しいのは、、Pinterestなどでキーワード検索を行って、
様々なウェブデザインを日頃からチェックし、動き配色などの表現新しい発見常にできるよう心掛け、
世間で「センス」と呼ばれている頭の中の引き出しを多く大きくして欲しいのです。
なぜなら、クオリティの高いデザインが生まれるきっかけクオリティの高いデザインを吸収することだからです。

「この手法を違う形で実現できたら」「この配色をもっと派手にしたらどうなる?」とか、
とにかく色々なものを目にして、「自分ならこうしてみたい」というアイディアを探してもらいたいのです。

本講義の進行について

本講義の進行はこのブログ、そしてブラウザベースのデザインツール「Figma」を使用します。
ブログは引き続き当ブログ「WEBCRE8TOR.COM」を使用するため授業開始前に表示しておいてください。
またYoutubeなどの動画を利用し、様々な表現や手法を学んでいきたいと考えています。

基本的には講義1回につき1記事、全15回の講義で全15記事を使って進めていきますが、
進行具合によっては前の講義記事の途中からはじめることもあります。

本講義の提出物など

ウェブデザイン演習には、2014年の担当開始当初より、ウェブサイトのデザインスキルを身に付けるという授業の最大のテーマがありました。
そのため、みなさんそれぞれのオリジナルウェブサイトのデザインに取り組み、最終的に完成した作品課題提出することになります。
また、それぞれの回の講義で学んだ画像加工技術課題などの提出や、本講義で学んだウェブデザインに関する小テストを何度か行う予定です。

以上のように主に課題の提出状況・意欲や態度、小テストなどを主な採点方法にするので、定期試験はありません

出席について

本講義の出席確認は、UNIPAのスマホ出席機能を利用します。
ただし科目履修者が一定数を超えない場合は目視や点呼による出席確認をします。
なお10分を超えると遅刻30分を超えると欠席です。

スマホ出席マニュアル

公欠の課題

公的理由での欠席は公欠の扱いになりますが、公欠を認めるには公欠届の提出とは別に公欠の課題を提出しなければいけません。
公欠課題に関して詳しくは以下のページを参照してください。

公欠課題提出

Webデザインツール「Figma」

ウェブデザイン演習では、FigmaというWebデザインツールを使ってデザインを作ります
まずはFigmaの特徴Figmaを使ってできることWebデザイナー視点でのメリット・デメリットを確認しましょう。

[Figma] 01 Figmaってどんなデザインツールなの?

なおFigma使用感に慣れるために、みなさんが制作体験を行うWebページデザインは以下です。

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

この制作を経て、クライアントからの依頼として私がお題をだし、最終的に依頼に沿ったWebページデザインを作ってください。

課題の提出

このウェブデザイン演習はウェブデザイン系3科目の集大成となる科目です。
最終的にオリジナルのWebサイトのデザイン制作が最後の課題になります。

そこで、今回の課題は、デザインアーカイブサイト「S5-Style」より目標とするページデザインのウェブサイトを検索し、
そのサイトのトップページのURL、さらにそのサイトを選んだ理由を教えてください。

参考サイト:ハイクオリティなWebサイトを探すなら Webデザインギャラリー | S5-Style

なお今回の課題の提出期限は、私が担当する他の科目同様に次回授業開始前までとしますが、
この授業時間内に提出することより、提出期限までじっくりと探して選ぶことが重要です。
今回は「課題」というよりも、どちらかと言えば「宿題」というニュアンスで捉えてもらえたらと思います。

では、以下のフォームの必要項目に記入を行い、送信を行ってください。

演習01 目標デザイン課題提出フォーム

繰り返しますが、提出期限次回授業開始前までとします。

本日のまとめ

いかがでしたか?
Figmaはこれからウェブデザイン制作を行う人にとってはファーストチョイスになりえるアプリです。
PhotoshopやIllustratorのような複雑な表現は苦手ですが、シンプルなウェブデザインが非常に得意なので、使いこなしていきましょう!