私はずっとコードばかり書いてきました。
web系の開発やモバイルアプリの開発に携わってきましたが、どちらもデザイナーが作ったデザインをコードにおこすだけで、自分でデザインを考えたことがありませんでしたし、それでも不便はありませんでした。
しかしながら、最近以下の要因でデザインもできた方が良いのではないかと思うようになりました。
というわけで、以下の動画を見てみました。
https://www.youtube.com/watch?v=B-ytMSuwbf8&t=5287s
今回の記事は、上の動画を見て学んだことのまとめ的な記事になります。よろしくお願いします。
UXデザイナー: ユーザーの体験をデザインする人(ユーザーの観点から)
- ワイヤーフレーム
- コンテンツ
- ユーザビリティのテスト
- 心理学
UIデザイナー: デザインを作る人
- カラー
- フォント
- 余白
- 形
Webデザイナー: UIデザイナー + UXデザイナー
カテゴリ
hue: 純粋な色の並び
tints: color + white
カラーピッカーで白(左)に寄せていく操作
shade: color + black
カラーピッカーで黒(下)に寄せていく操作
tone: color + gray
saturation: 純粋度 (右にどれだけ近いか)
brightness: どれだけ白(上)に近いか
赤: 情熱、注意をひく、エナジー、スポーツのサイトとか
青: インターネットで最も使われる。知性、セキュリティ
黄色: 楽しさ、エナジー
緑: 安全、バランス
オレンジ: 幸せ、自信
紫: 高貴
カラーパレットを作る
他のツール
figmaを開く
briefからベースとなる色(primary color)を決める
Adobe Colorにいく
gradientを作る(primary → secondary)
grayの色を決める
grayの75, 50, 25, 10, 5のOpacityを作る
10, 5はラインセパレータなんかに
エラーの色を作る
カテゴリごとにざっくりとしたイメージがある
serif: luxury
sans serif: modern, tech
小さい画面、大きい画面で表示される時にどうなるかを確認する
adobe fontsにアクセス
briefで指定された雰囲気からカテゴリ・フォントを決める
この辺はフォントの知識が必要そう
小さい要素に使うフォントを決める
2で決めたフォントとペアになるように考える
小さい要素でも読みづらくない
それぞれベースとなるフォントサイズ・色・line heightを決める
色は純粋なgray
大きい要素はbold
line heightは実際に要素を複数行にして調整
type-scale.comでベースとなるフォントサイズから要素ごとのサイズを決める
scaleはAugmented Fourthがいいバランスでおすすめ
archetypeapp.comも便利
8 point system
marginやpadding, width …を8の倍数にするようにしよう
figmaのレイアウトは以下の二つが使える
- grid
- guides
- view guide rulers
- この動画ではこちらを使う
アイコンは意味があるものを使う
テキストと関連があるように
アイコンのスタイルは一貫させる
ヘッダはWebページのトップセクション
- ロゴ
- ナビゲーション
- 検索フォーム
サイト内で一番最初に見る領域の一つなので、ユーザーの行動を規定しうる
- 検索フォーム
- 画像のアップロード
ヘッダの次に来るエリア
サイト内の一等地なので重要な情報を配置する
- sliders
- メッセージ
- CTA
基礎となるインタラクティブな要素
ユーザーとプロダクトの間にたつ
figmaのデザインに以下があると開発者が嬉しい
- 有効時
- 無効時
- ホバー時
色については以下があると
- gradient
- 白黒
画像の一覧を表示する際に使う
用例:
- 実績
全部のページのボトムについてるやつ
- copyright
- social media
- external links
- sitemap
- CTA
ユーザーの声
- 内容
- 写真
- 名前
- 役職などの説明
偽のものを入れるのは絶対ダメ。ない方がマシ
内容がパネルに分かれており、一つしか表示されていない。
ユーザーが切り替えることができる
タブの色は
場合両方デザインする
用例:
- カテゴリごとの小項目
楽器のあれと見た目が似てるため
複数のパネルを一度に見せられる
開いている時と閉じている時の両方をデザインする
用例:
- よくある質問
Webサイトはいろんな機器から閲覧される
昔は、モバイル用、PC用のように複数のサイトを作ってドメインわけをしていたりしたが、管理が面倒だった。
↓
Ethan Marcotte がレスポンシブデザインを提案し使われるようになった。
figmaからメインのコンテナをリサイズすると表示の違いを試せる
固定値を使っていると表示が崩れる可能性がある。
breakpointsを使うと特定の幅ごとに表示内容を変えられる
端末ごとにrangeを決める
- phone: ~600px
- tablet: 600 ~ 1200px
- PC 1200px ~
これごとにサイトを作る。
ユーザー操作が可能なモックアップ
figmaでもprototypeタブからできる