まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
Sponsored Link
この記事の目次
デザインラフ課題のダウンロード
デザインラフ課題を返却しましたが、スキャナで読み取った画像をダウンロードします。
以下の文字列の「23S〇〇〇」を自分の学籍番号に置き換えて画像を開くことで、
Web上から課題の画像をダウンロードします。
https://webcre8tor.com/data/webdesignb/vol05/2023/23S〇〇〇.jpg
※上記文字列をコピーしてください
※ID・PASSはいつものです
手順は以下。
- 上記の文字列をコピーする。
- ブラウザで新しいタブを開く。（例：Ctrl + Tなど）
- ❶をブラウザの❷のタブのアドレスバー（URLが表示されている枠）にペーストする。
- ❸の文字列の中の〇〇〇を自分の学籍番号の下3桁に書き換えてキーボード「Enter」を押す。
例）学籍番号が1番の場合「001」となる。 - 画像が開くので、「右クリック→名前を付けて画像を保存」として保存する。
保存先はウェブデザインBの授業のデータがあるUSBの中などに。
このデータは後のワイヤーフレームの制作で使用するため絶対になくさないようにしてください。
ダウンロードが終わったら今日の内容に入りたいと思います。
ウェブデザインの構築 配色
配色に関しては以下の記事より。
課題提出：Photoshop 実践 ベースカラー・メインカラー・アクセントカラーを調整する
今回の実践は、ベースカラー・メインカラー・アクセントカラーのパターンをいろいろといじってみようと思います。
まず、課題ファイルをダウンロードしましょう。
課題ダウンロード&やりかた
課題ファイルURL：https://webcre8tor.com/data/webdesignb/vol11/kadai_color.psd
※ID・PASSは講義で伝えます。
課題ファイルの中身は、PSDデータです。以下を見てみましょう。
このPSDデータは長方形ツールとテキストツールでレイアウトを作っていて、それぞれの色を変えることができるようになっています。
現在は白黒でレイアウトが組まれていますが、今日学んだ、「ベースカラー・メインカラー・アクセントカラー」がどこに使われるべきかよく考え、それをデータに反映してみましょう。
また今回は配色の方向性を決めます。
今回は「色の持つ意味」で学んだ円と表の画像を見ながら「難易度★☆☆：高級感のある大人な配色」を行ってください。以下の記事なども参考になると思います。
もう一度言いますが、「ベースカラー・メインカラー・アクセントカラー」がどこに使われるべきかよく考え、配色を行ってみましょう。
余裕があったらこれもやりましょう
さて、上記の「高級感のある大人な配色」でもいいですが、これでは物足りない人はもう少し難易度をあげて、
「難易度★★☆：カラフルな子どもイメージの配色」をやってみましょう。
「高級感のある大人な配色」の「カラフルな子どもイメージの配色」のどちらを提出しても受理としますが、
難易度の高い「カラフルな子どもイメージの配色」をうまく表現できる人は配色表現力がとても高いと言っていいでしょう。
どちらを提出しても構いません。やる気しだいです！
色々な配色パターンを試してみて、それを自分の中に落とし込んでおき、
ページデザイン時に楽しんで配色ができるようレパートリーを増やしてみましょう。
課題の提出
さて配色の課題をjpgに書き出して提出しましょう。
課題の提出形式はjpg以外は受け付けられないようになっています。
必ずjpgに書き出して提出してください。
手順は以下。
- 上部のメニューバーの「ファイル」→「書き出し」→「Web用に保存」
- Web用に保存のウィンドウが出てきたら、プリセットの右のプルダウンメニューを「JPEG標準」に変更。
- 一番下の「保存」をクリック。
- ファイル名を「学籍番号_color」以下のようにして保存をクリック。
※ファイル名がこれ以外のものは不受理です（日本語のままだと文字化けするため）
では下のフォームに、書き出したJPGを添付して送信してください。
なおフォームの「質問」の枠に「高級感のある大人な配色」と「カラフルな子どもイメージの配色」の、
どちらの配色にチャレンジしたのかわかるように記入してください。
本日のまとめ
制作の現場に限らず、「色」を決めるのは本当に難しいですよね。
毎朝着る服を選ぶ時も・・・
雑貨屋さんでマグカップを買う時も・・・
何をどの色にするかは本当に悩みの種です。
ただし、理論的に考えることでより簡単に配色の答えを出すことができるようになります。
