記事の目的について
webページやアプリの画面デザインを作るにあたり、デザインに関する知識や用語を全然理解していないので、
そのあたりをまとめて、後で見やすいようにしていくのが目的です。
既に同じことをしている記事があるかもしれませんが、自分で作ると覚えが良い（と思う）ので、
学習もかねてやっていく。
最終的にはもう少しまとめていくが、まずはどんどんやってどんどん吐き出す形でやっていく。
WEBデザインとは
・ウェブサイト全体の設計
・視覚的な要素を作成するグラフィックデザイン
・WEBサイト・アプリ等のUI設計
上記を総合して指す。
デザインの要素
- レイアウト（全体レイアウト、コンテンツレイアウト）
- タイポグラフィ・フォント
- 配色
全体レイアウト
1カラム
１つのコンテンツに集中させる場合に有効
使用用途：ランディングページ、コーポレートサイト、ブランドサイト、キャンペーンサイトなど
2カラム
サイドバーにカテゴリーや関連ページなどを配置し、ユーザが関心のあるコンテンツに迷わずアクセスできるデザイン。
使用用途：ECサイト、ブログなど
3カラム
1度にたくさんのコンテンツを見せる場合に有効。
情報量や商品量の多さをアピールし、ワクワク感を増幅させる。
使用用途：ECサイト
例：yahoo
グリッドレイアウト
コンテンツを一覧で多く表示させるが整っている印象を与えさせる。煩雑さがでず、クリエイティブなページを作れる。
写真とかデザイン系を一覧で表示させてるサイトでよく見かける。
例：Pinterest
コンテンツレイアウト
レイアウトの基本原則。下記を基本は意識する。
-
近接
要素同士を近づけ、まとまった情報として見せる。
逆に異なる要素は空白で余白を作る。 -
整列
関連する要素の位置を揃える。 -
反復
同じ要素のデザインルールを繰り返す。
フォントや配置などを同じ要素でばらけさせないこと。
やりすぎると単調になるので注意 -
対比
要素同士を明確に差をつける。伝えたい情報を特に強調する。
参考にした動画内の例が分かりやすい。https://youtu.be/zuRMrEeS7_8?t=532
タイポグラフィ・フォント
タイポグラフィ
文字の書体・大きさ・配置の仕方
フォント
同一書体の一揃い。書体データそのもの。
Webデザインの場合、一般的に本文のフォントはゴジック体（サンセリフ体）が使われる。
（昔の環境だと明朝体では解像度の問題で綺麗に表示されないことがあったらしく、その名残？）
- メイリオ
windowsに入っている標準フォント（ちなみに私は資料作成では全てこれを使っていた。） - 游ゴシック
windows,mac共通 - ヒラギノ角ゴ
macに入っている標準フォント
配色
ベースカラー70%
アクセントカラー5%
メインカラー25%
ベースカラーの選び方
余白や背景に使用されることが多く、メインカラーの妨げにならないカラー選定が必要。
一般的には白や薄いグレーなどが多い。
メインカラーの選び方
ブランドカラーとなる色や、ターゲットユーザが好む色など。
色の意味や印象を把握しながら選定。
アクセントカラーの選び方
メインカラーのみだと単調になるため、メリハリをつけるために目立つ色を使用。
特に目立たせたいお問合せや強調したい要素に使用する。
色相・彩度・明度
フルカラー・・・約1677万色
色の調整は色相・彩度・明度を調整するということ。
色相：色合い。色の方向性。赤や青など。
彩度：鮮やかさ。高いほどビビットカラーやビタミンカラーと言う。
明度：明るさ。
配色に困ったら？
緑：穏やか
青：知的
などなど、色ごとの意味や印象から決めるのが良い。
参考ページ：https://iro-color.com/
追記
デザイン系の記事なのに、文字だけは分かりづらい。。。次回以降は工夫します。
参考にした記事や動画
参考にさせていただきました。ありがとうございます。
https://www.youtube.com/watch?v=zuRMrEeS7_8