webデザインの基本
〇宿題 Facebookカバーの制作 2/2締め切り
illustrator、Photoshopを使用して制作する
〇ポートフォリオサイト作成のロードマップ
1 まずはサイトのテーマを決める
2 テーマが決まったら参考サイトを探す
・about
・works
・blog
・contact
とりあえずこれで作ってみよう。選んだ参考サイトに近い架空サイトをつくって
制作実績のひとつとしてポートフォリオサイトに組み込んでも良い
イラストや写真は著作権に注意
3 サイトマップを作る
北欧の風 道の駅とうべつのサイトマップ
4 コンテンツマップをつくる
マインドマップツールを利用するとよい miro使ってみる
北欧の風 道の駅とうべつのコンテンツマップ
少し違うことがあるが、だいたいこのような構成で作られている
5 ワイヤーフレームを作成する
どこに何を配置するかを大まかに考える
6 素材を集める
画像やテキストを用意しておく
7 デザインカンプを作る
デザインの完成イメージ
ワイヤーフレームに色をつけ、画像やテキストを挿入して完成イメージとして仕上げたもの
各セクションの余白は統一しておくと見やすい
8 コーディングを行う
webデザイン
〇配色
最初からセンスが良くなるわけではない
それでも理論を知っておくことが重要
配色とはなんだろう
2種類色の色を組み合わせること、取り合わせた色
緑 自然でみずみずしい 草木 リラックス
黄色 陽の光 活発的 ひきつける
紫 高貴なイメージ 神秘的 気品
茶色 大地や木の幹
2色になったら
それぞれの特徴を合わせてさらに分かりやすくなる
単色が持ってたイメージから変化する
・増幅
・抑制
・別の意味を生み出す
配色が持つイメージ
色合いだけで企業がわかったりする
ファミマ → 青緑白 だったり
ローソン → 青白ピンク
セブンイレブン → 赤緑オレンジ 商標登録されている色
MONO → 青白黒
AU docomo JR四国 単色で表現している
どんな色を連想するか考えてみよう
・クリスマス → 緑赤
・バレンタイン → 赤濃い赤
・母の日 → 赤濃いピンク
・イチゴ味 → ピンク白
・柑橘系 → 黄色オレンジ
・春 → ピンク、黄緑
・夏 → 赤 緑 青 黄色
・秋 → すこしくすんだ色
・冬 → 色味がへって白に近づく
身の回りの色がどのようになってるか探してみよう
配色とは単色が持つイメージをほかの色と組み合わせることにより製作者の意図に近づけること
配色の目的
カラーピッカーモデルを使いこなそう
〇混色による表現
2つ以上の色を混ぜ合わせ別の色を作ること
加法混色 Web用
赤青緑を合成する 光の三原色と呼び RGBで表す すべての色を合わせると白になる
減法混色 印刷物用
シアン マゼンダ イエロー + 黒
色料の三原色 C M Y + K
〇マンセル表色系
- 色相（H） 赤黄緑青紫 主要な5色 色相環上で対極にある色は補色（目立つ）
- 明度（B） 黒灰色を無彩色 色味をもつのを有彩色 モノクロコピーで見やすさ確認
- 彩度（S） 色の鮮やかさ
〇トーン 明度と彩度が似ている色
- 純色 ビビッド
- 清色
- 中間色
- PCCSトーンを使った配色 ドミナントカラーかドミナントトーンを選ぼう
〇補色・類似色・配色の調和
- 物理補色 反対に位置する色のことで、互いの色を引き立たせる
- 類似色 色相環で指定した色から近い色
- 色相の調和 規則に従うと調和がとりやすい
参考サイト
https://www.colordic.org/
https://321web.link/adobe-color/
https://www.aura-office.co.jp/blog/coolors/ - カラーコード ＃ff0011 → ff R 00 G 11 B 16進数で表した数字
〇カラーモード
- カラーピッカーRGBモード 0～255の表現を00～FFに置き換えて表現
- HSBモード 色相、彩度、明度で表現する 直感的にわかりやすい
〇利用者の視点に立った配色
- コントラストを意識した配色
色相、明度、彩度の対比のこと
前景色（文字）と背景色のコントラスト比が激しいと見やすい
〇ウェブサイトの目的に合った配色
色はウェブサイトのコンセプトを引き出すのに重要な要素を持っており、配色を変更するだけでウェ ブサイトのイメージを大きく変化させることができる
- ベースカラー 背景色など 70％
- メインカラー まずはここから決める 25％
- アクセントカラー 強調色 5％
配色の比率は 70：25：5で行くと美しい配色になる 3色をベースに作ってみよう
まずメインカラー（25％）を選ぶ 一番使いたい色をきめる 部屋でいうとドア、家具、カーテン
・ターゲットとなるユーザーが好む色
・競合他社と被らない色
・コーポレートカラー
・商品のテーマ色
ある程度明度の低い色を選ぶとよい
次にベースカラー（７０％）を選ぶ 背景になる色なので、白や薄い色が扱いやすい
明るすぎる色は見づらい
無彩色は扱いやすい 白 グレー 薄い茶色
メインカラーの明度を上げた色も使いやすい
最後にアクセントカラー（５％）を選ぶ
メインカラーの対局にある補色を選ぶと目立ちやすい
4色目以降はバランスを取りにくいため、なるべく3色で比率を守ってつくってみよう
色相が同じでトーンが違う色
トーンが同じで色相が違う色 のどちらかを慣れないうちは選ぼう
illustratorとPhotoshop
- illustrator（Ai）
ベクトル系が得意（点アンカーポイントと線セグメント）
拡大縮小に強い
複雑な色表現が苦手
保存するとき
作成中・・・.ai 別名で保存
完成系・・・.jpg 書き出し→書き出し形式→アートボードごとに✅ - Photoshop（Ps）
ラスター系が得意（ピクセル）
拡大縮小に弱い ピクセルの角がカクカクになるため
複雑な色表現が得意
本格的にWEB制作の授業になってまいりました。
ちなみにPhotoshopもillustratorも初めて触りました🤣