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

前回までFigmaを使った「Webページデザイン演習」のウェブページデザイン作業を行いました。
今回はWebデザイン制作作業を行う際に非常に重要になるレイアウトに関して解説を行います。

Webデザインの構築 レイアウト

レイアウトに関しては以下の記事を参照してください。

[Webデザインの基礎] レイアウト

本日のまとめ

テクニック・ルールを知り、身につける。

レイアウトはとても頭を悩ませるポイントです。
でも実は先人たちが知識と経験で培ったものをベースにしたテクニックやルールが存在し、
それらを知り、忠実に守るところからデザインを始めてみましょう。

そして自然と身についてきたら今度はテクニック・ルールを客観的に見つめなおしてみます。
「正しい」だとされていたことが本当に「正しい」のかを考え、分析してみましょう。

その上で「こっちの方が自分に合っているんじゃないか?」と考えられるものがあれば、
今度はそのテクニック・ルールを壊して自分のものにしてみましょう。

ただ忘れてはいけないのは、
テクニック・ルールを壊せるのはテクニック・ルールを知っている人にしかできません。
テクニック・ルールを知らずにテクニック・ルールを壊そうとしても次のステップには進めません。

まずはしっかりと身につけることが大事です。

ヤコブ・ニールセン氏

ちなみに今回ヤコブ・ニールセン氏のお話が出てきましたが、
彼の考えるユーザビリティの10原則もとても参考になります。

参考:UI デザイン初心者がヤコブ・ニールセンのユーザビリティ 10 原則について学んでみた | cloud.config Tech Blog

演習課題

レイアウトの復習

今回は、先ほど学んだレイアウトの復習をFigmaのデザインファイルで行う演習です。

課題のやりかた

課題データはFigmaのデザインファイルです。
ファイル内にヒントがありますので、参照しつつ課題作業を行なってください。

手順

手順は以下。

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

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

課題ページ:演習06 レイアウト課題

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

演習06 レイアウト課題提出フォーム

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