Webデザインのまとめ

nabetsu

参考になりそうな資料

デザイン全般

UI設計

Tool

Color

【2020年版】もう配色デザインには迷わない！すごい無料カラーパレットツール66個まとめ
http://photoshopvip.net/72189

Webサイト上で選択した色での見方を見せてくれるサイト
https://www.happyhues.co/palettes/12

配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド

キャンセルボタンに色をつけてはいけない理由

具体的なサイト

いい感じの色を一覧で見たい時
Material-ui Colors
【個人開発・ポートフォリオに】無料で簡単にいい感じのデザインにできるサービスまとめ - Qiita
色味を調整したい時
leonardocolor
お世話になってるデザインの情報収集源 | Cat Knows
個人的UIデザインの情報源まとめ

nabetsu

Layout

Udemyの講座のまとめ資料は以下のリンク参照

Alignment and Grid

Alignment

整列が適切にされていると洗練された印象を与える

left alignment
center alignment
right
horizontal
center alignment
bottom

例えば以下のページはleft alignmentで形成されている

Grid

Layoutを構成するStructureのこと。
gridに沿ってレイアウトを構成することで、ページを使う人に構造が明確になる。

Gridを使わないことはあるが、Alignmentを破ることはめったにない

Figmaでの実例

Setup

Layerを選択して、右のプロパティからGridを追加する

Gridは右上のタブから表示・非表示を切り替える

Navbarの追加

サイズの調整

HとかWを調整するときは数字を入力する以外に矢印で上下を調整できる。
またSHIFT + 矢印　で10単位でサイズを調整できる。

整列

パワポとかと同じように複数の要素を選択した状態でAlignmentを選択すると自動でそれぞれの要素の整列をしてくれる

Udemy Figma Solution file

Visual Hierarchy

以下のページがひどく見える理由は

Alignmentがぜんぜんされていない
Visual Hierarchyがされていない

すべての部分が同じようにattentionを求めていて、どこを見ればいいのかわからない

対象的に以下のサイトは非常に見やすい。

このサイトを見たときにまず右側のイメージ、次に左側のヘッドライン、次にその他の要素といった形で順番にユーザの注意を引くようにデザインされている。

人間は一度に複数のことに注目、焦点を合わせることができないので、
注目させる部分とそうでない部分に差をつける必要がある。

Visual Hierarchyを決める要素は何か

以下のようにいろいろな要素があるが、sizeとweightが基本

sizes and weight of elements
color contrast
images

そして、Visual Hierarchyを考えるときにはページで最も注目してもらいたい点、focal pointを決める。

実例

Focal Pointは写真にする。
それに合わせてNavbarの色も変更する。
特にボタンの部分は写真の背景とかぶって見にくいので、背景を白でopacityを20%、文字も白に変更する。

次に左寄せにする
(TextはプロパティのTextからAlignを選択しないといけない点に注意)

ここでこのWebページのゴールを考える。
デザインのゴールは何で、それを達成するために最も効果的な方法は何か。

What is this website about?
- 弁護士でBoston Divorce Attornyに所属するVincent Schwartzに関してのページ
- どっちの情報が重要かは場合による(弁護士として高名かどうかなど)

What am i going to get out of this website
How do i get it?

テキストの情報はプロパティのText部分からフォント、文字のサイズ、太さ、Uppercase, lowercaseなど様々な要素が設定できる。

(完成したデザイン)

(Udemyの課題)

Optical Illusion

以下の2つの線を見ると下の方が長く見えるが、実際には同じ長さ。

人の目はこのように錯覚に惑わされるが、デザインをする上ではどうすればいいのか。
実際のところ、人は線を引いたり定規で実際の大きさを比べたりするわけではないので、人の目で見て同じ大きさに見えるようにサイズを調整しないといけない。(ピクセルのサイズよりも人ん目で見えるサイズの方が重要)

どこまで大きくするかに明確なルールはなく、あくまで目で見て判断するしかない（この部分の調整がプロとアマチュアを分ける要因になったりもする）

Sinking Effect

文字が下に沈んでいる用に見える、
その場合には配置を少し上に持っていく

重いものは沈んでいるように見え、軽いものは浮いているように見える傾向があるので、それを考慮して配置の調整を行う必要がある。

Proximity

すべてのものを均等に配置するのではなく、関連するものは近くにまとめて、関連しないものは遠くに配置する。
この考えをProximityという。

Proximityに関して以下のデザインは4つの変更を行っている。

ナビゲーションリンクはそれぞれが関連しているので、近くにまとめた
ヘッドラインとその下のテキストはそれぞれが関連しているので、近くにまとめた
2つのボタンは関連しているので、近くにまとめた
左のボタンとその下のテキストは関連しているので、さらに近くに移動させた

nabetsu

Typography

フォントとスタイルの組み合わせ

言葉の定義

TYPEFACE(TYPE)
FONT

Personality

それぞれのTypefaceには個性があり、場所によって合う、合わないがある(TPOに合わせた服装があるのと同じイメージ)

実例としてProxima SoftというTypefaceは冬の休日のページには適しているが、
高級なオフィススペースの紹介ページには適していない。
これはProxima SoftというTypefaceがカジュアルでフレンドリーなPersonalityを持つから。
そのため、文字はソフトで丸くて、雪でできているように見える。

下の例はビルの背景の四角の造形から連想される厳格なイメージや、
そもそもラグジュアリーという言葉から連想するイメージとフォントが全くあっていない。

Bodoniというクラシックで厳格なイメージのTypefaceを使うとマッチする。

Typeface Categories

有名なものにserifとsans serifの2つに分けられる。
serifはしっぽがあるもの、sans serifはしっぽがないもの。

さらにserifとsans serifの他にdispalyとscriptがある。

Serif

Oldstyle
最もポピュラーでクラシックなもの。
殆どの本はこのスタイルで作られている

印刷物は携帯等のディスプレイより高精度(High Definition)であったためserifが使われていたが、解像度の低いディスプレイでは小さい文字のserifはみずらいので最近までWeb Designでoldstyleが使われることはあまりなかった。（最近は解像度が上がってきたので使われるようになってきた）

2. Modern

先程のオフィスの例で使ったBodoniはModernスタイルに属する。
Modernはヘッドラインには向いているが、文章には向いてない

Slab
メカニカルな印象を与えるものに適している。
Modernと同様にヘッドラインに向いているが、文章には向いていない

Sans Serif

一番Web Designで使うことになるもの。

文章からヘッドラインまで様々な用途に使える。
スタイルによる違いはSerifほど大きくない。

Display

個性がありすぎてあまり使うことはない。
使うのは大きなヘッドラインのみ。

Script

手書き風なもの。

例えば子供向けページのヘッドラインなどに使える。

実際にどうやって選ぶか

TypefaceのDescriptionから考える。
Descriptionには作ったデザイナーの意図が込められているので、基本的にそれに反することはしないほうがいい。

General Use
- 文章や長いテキストに向いている
display
- ヘッドラインに向いている
- 文章には使わない

具体例としてGoogle FontにRalewayがあり、AboutページにはRaleway is an elegant sans-serif typeface family intended for headings and other large size usageと書いてあるが、多くのWebサイトで文章や長いテキストに使われており、結果的に可読性を失っている。