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

授業評価アンケート

当科目の授業評価アンケートの回答のお願いです。
5分程度時間を取りますので、回答をお願いします。解答方法は以下。

授業評価アンケート

授業に入ります

前回はWebデザイン制作作業を行う際に非常に重要になるレイアウトに関して解説を行いました。
今回はレイアウトと同じく重要となる、配色に関しての解説を行いたいと思います。

レイアウト課題(再掲)

前回はレイアウト課題が途中で終わってしまいました。
今回は完成まで行い提出しましょう。

課題のやりかた

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

手順

手順は以下。

1. Figmaにログインして、前回途中まで行った「学籍番号 レイアウト課題」を開く。
   ※前回の課題ファイルを保持してない人は、前回の記事の課題ファイルのリンクを開き、
   ドラフトへの複製と移動を完了してください。
2. レイアウト課題に取り組んで完成させる。
3. 共有ボタンからリンクをコピーし、課題提出フォームで提出する。

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

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

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

Webデザインの構築 配色

配色に関しては以下の記事を参照して下さい。

[Webデザインの基礎] 配色

本日のまとめ

制作の現場に限らず、「色」を決めるのは本当に難しいですよね。

毎朝着る服を選ぶ時も・・・
雑貨屋さんでマグカップを買う時も・・・
何をどの色にするかは本当に悩みの種です。

しかし、色が持つ役割を言語化して、組み込まなければいけないキーワードとして使い、
どういった配色が望ましいか理論的に考えることで、より簡単に配色の答えの答えを知ることができます。

一方で、その配色が面白いか面白くないかは試してみないとわかりません。
色々な配色パターンを試してみて、それを自分の中に落とし込んでおき、
ページデザイン時に楽しんで配色ができるようレパートリーを増やしてみましょう。

演習課題

基本3配色の課題

今回は、ベースカラー・メインカラー・アクセントカラーの基本の3配色、
そしてテキストカラー・リンクカラーを自分自身で探し、選んだ配色をFigmaのデザインファイルに反映する演習です。

課題のやりかた

課題データはFigmaのデザインファイルです。
このデータは長方形ツール・テキストツール・線ツールなどをオートレイアウトなどでレイアウトしており、
それぞれをCtrl + クリックで個別選択し、塗りパネルで色を変えることができるようになっています。

現在はモノクロの状態でレイアウトが組まれていますが、
今回学んだベースカラー・メインカラー・アクセントカラーがどこに使われるべきかよく考え、
それをデータに反映してみましょう。

配色の方向性

また今回は配色の方向性を決めます。
「色の持つ意味」で学んだ円と表の画像を見ながら、配色Webツールを使いながら、
「高級感のある大人な配色」をテーマに配色の課題を行ってください。以下の記事なども参考になると思います。

参考:カラー別に検証!WEBサイトにおける配色パターン | SEO対策なら株式会社ペコプラ

私が考える「高級感のある大人な配色」を配色するコツは「色を使いすぎず落ち着いたイメージで考える」ことです。

参考までに・・・先輩の配色例

全く想像できない・・・という人のために、みなさんの先輩方が提出してくれた配色例を掲載しておきます。
参考になりますよ。

配色Webツール

最も望ましいのはもちろんメインカラーを決めてから配色をじっくり考えるのがベストですが、
以下のようなWebツールを使うと簡単に配色を考えてくれます。

• Color Hunt – Color Palettes for Designers and Artists
• ColorSpace – Color Palettes Generator and Color Gradient Tool(おすすめ)
• ColorDrop – New colors

この中で最も簡単なものはColorSpaceです。
メインカラーをカラーピッカーで選択して「GENERATE」ボタンをクリックすると、
ページ内の「Spot Palette」の項目などに配色例が紹介されます。

手順

手順は以下。

1. 以下の課題ページ「演習07 配色課題」を開き、ドラフトに複製し、ファイル名を「学籍番号 配色課題」と名称変更し、チームのプロジェクトに移動する。
2. ColorSpaceなどのWebツールを使い「高級感のある大人な配色」をテーマに配色を考える
3. 配色課題に取り組んで完成させる。
   なお課題のレイヤー内で非表示にしている「編集方法」レイヤーを表示するとヒントが表示される。
4. 共有ボタンからリンクをコピーし、課題提出フォームで提出する。

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

課題ページ:演習07 配色課題

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

演習07 配色課題提出フォーム

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