🚌 デザインで最初にやるべきこと
- 顧客が求めている価値はなにか？
- その価値を提供できるfeatureは何か？
- そのfeatureを提供するために必要なレイアウトはなにか？
🍄 ディテールは後から考える
- 捨てやすいスケッチ・ワイヤーフレームから始める
- グレースケールでデザイン
- アイコンやディテールをやる
😀 仕事のサイクル
- feature についてのシンプルな機能から始める
- 投資しすぎないように気をつけよう
- あとからできることはあとから。実装を含まらませない
🐰 デザインのパーソナリティ
- デザインにはプロフェッショナルや楽しさといった個性がある
- Fontはデザインの重要な要素の一つだ
- 色も個性。金はゴージャス、青は嫌いな人がいない。ピンクは楽しい
- 枠線の丸みひとつでも、その個性は変わってくる
- パーソナリティを出せば楽しさ、なくせばオフィシャル感・プロ感が出る
🏀 選択肢をへらす
不要な選択・決断を減らすために：
- 「8-10」種類の色を設定しよう
- font-size, font-weight, line-height をあらかじめ決めよう
- 12px, 16px, 24px, 32px などで「小 <-> 中」のサイズを決める
🍮 デザインのポイント
- すべてのエレメントが等価ではない => どの要素が重要かを考えて強調する
- サイズがすべてではない => サイズは変えすぎない。色で強弱をつける
- グレーカラーを色のついた背景で使わない => コントラストを意識する
- パターンのついた背景では、ライトカラーを使うと良い
- うまく目立たせるために、選ばれてない要素を弱くすると良い
🐹 ラベル表示のバランス調整
- 重視すべき要素とそうでない要素を切り分ける
- ラベルと値をできるだけ付け足す。数字を最初に持ってきて協調する
- 数値が重要な場合は協調する。でもやりすぎない
- ラベルを協調すべき場合もある。シリアスになりすぎないようにバランスを取る
🎉 表示上の階層構造と、HTMLの階層構造を分けて考える
- HTMLの階層構造ではなく、Focus してほしい順序で考える
🎳 Font weight とコントラストのバランス
- Bold Text は Regular Text よりも表面積が大きいので協調を感じる
- IconとTextがある場合は表面積でIconが強調されて感じるので、ソフトな色にする
- 1px border も色をやさしくすることで、ノイズ感を軽減できる。ソフトな色 2px で強調できる
😼 Semantics (意味論) は 2番目
- Semantics は重要だが、階層構造を忘れていいわけではない
- ページは重要度によるピラミット構造である。重要なアクションとそうでないアクションがある
- Primary Actionはコントラストを高く、2番目、3番目のアクションはコントラストを下げよう
- 破壊的な変更は Primary とは異なるコントラストの高い色を詰める
🚕 スペースを適切に開けよう
- 適切に「息」ができるスペースを開けよう
- 必要以上のスペースは良くないので、バランスを考えよう
- スペースとサイズは均等に正しく見積もろう
😸 すべてのスクリーンを埋める必要はない
- PCの全てのスクリーンを埋めなくて良い。600pxなど適切な幅にしよう。
- スマートフォンのスクリーンサイズから考えると、シンプルになる
- カラムを意識することで、ヘッダとフォームを分離できる
🎃 グリットを過大評価しない
- 12カラムのグリッドはシンプル化として素晴らしいが、全てを委ねるのには弊害がある
- 一部を固定幅、一部をレスポンシブを可変にすることでデザインが良くなることもある
- 必要なく、要素をグリッドに合わせて拡大・縮小する必要はない
🐠 相対サイズはスケールしない
- 相対サイズは万能ではない。画面サイズ次第で最適ではなくなる
- パディングも常に比例するわけではなく、大きいボタン・小さなボタンで調整が必要となる
😎 曖昧なスペースを避けよう
- グルーピングのある要素と、グルーピングのない要素でスペースの取り方を変える
- 並行方向・水平方向の両方でグループを意識する。関連性をスペースで示す
🚜 Type System を定義する
- 12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px… とサイズを規定しよう
🐡 適切なフォントを使おう
- 5つ以上の Font Weight を持つフォントを選択しよう
- 背が高い小文字を持つフォントのほうが読みやすい
- 自分の好きなサイトのフォントを確認して、こちらも利用しよう
🐯 一行のラインの文字数を意識する
- PCのフルサイズで文字を並べると読みづらいので、一行で45-75文字くらいを目安にする
- パラグラフや画像など、複数のコンポーネントがあるときも、横幅を使いすぎないように注意
🎂 ベースラインを中央にしない
- 複数のフォントサイズを含む場合にベースラインはtext-bottomにする
🐞 必要ない要素の縮小は行わない
- グリッドデザインに則って、必要なく要素を縮小する必要はない
- 要素に必要なMaxの横幅を意識して、レスポンシブデザインを行う
🤔 Relative sizing (相対的なサイズ指定)
- 大きなボタンは大きなボタンと意識させる余白配置、小さなボタンは小さいと感じる余白を取る
🐮 曖昧な余白を避ける
- グルーピングを意識して余白の設定を行う
- リスト表示とかでも、常にグループとそれ以外が視覚的にわかるように注意する
- 縦方向の余白だけでなく、横方向の余白にもグループとそれ以外を分ける意識を持つ
🏈 Type System を意識してフォントのサイズを選ぶ
- フォントサイズを沢山使い分けすぎると読みづらく、と煩わしいと感じる
👽 良いフォントを使おう
- Weightを正しく表現できるフォントを使う(Weightが5個のフォントは使わない)
- 人気のあるフォントは読みやすいフォントがある。人気を指標にする
- 人気のあるサイトやデザインの気に入っているサイトのフォントを真似る
🐝 1行の長さを保つ
- 1行が横長すぎて、文字が多いと読みづらいと感じる
- 英語では1行あたり、45-75文字を目安にする
🗽 タイポグラフィ
- テキストのベースラインは下・中央ではない
- Line Height は1行あたりのテキストの長さに応じて1.5倍-2倍が望ましい
- フォントサイズが小さい場合は1.75倍以上。フォントサイズが大きい場合は1倍でも良い
🍣 読みやすさ
- 長いテキストを中央揃えにすると読みづらくなる。中央揃えは文字数をへらす
- 表などで数字を使う場合は右揃えにして、小数点を揃えるようにする
- 英語の場合は、
hyphens: autoを使うことで適切なハイフンを挿入できる - ヘッドラインは
letter-spacingをタイトにすることで強調する - 全角英字の場合は
letter-spacingを広く取ることで読みやすくなる
🗻 色使いについて
- Hueは色の位置を表す
- 色の度合いを0度が赤、120度が緑、240度が青を表す
- 彩度(Saturation)は、ビビットないろの度合いを表す。0%がグレイ、100%がピュアなその色を表す
- 光度(Lightness)は、0%が黒に近い色合い、100%が白に近い色合いを表す。50%がピュアなその色を表す
undefined あなたが考える以上の色が要素に存在する
- 灰色は8-10色の光度(Saturation)の異なる色をあらかじめ選択しておく
- Primary Color を1色選定する。そして光度(Lightness)の異なる色を5-10色選択しておく
- Accent Color (赤や黄色、緑)を1色選択して、「違う」コミュニケーションを表すようにする
undefined Shade(色調)を定義する
- Primary Color
- 50% の光度のピュアな色をベースの色として使うようにする
- Shade(色調)の黒に近い光度は文章に向く。白に近い光度は背景として使える
- Shadeはベース色、両端を決めて、あとはその間のギャップを埋めていくように色を決める
- Gray Color
- ベースカラーは重要ではないので、両端の色を埋めて、少しずつギャップを埋めていくように色をチョイスする
- Lightness(光度)でSaturation(彩度)を打ち消さない
- 明るい色調と暗い色調が適切に表示されるために、明度が50%から遠ざかるにつれて彩度を上げる必要がある
- 色のアクセシビリティ(Web Content Accessibility Guidline) を守る
- 白文字は使いづらい。暗めの文字色と明るめの背景色の方が Raito を維持しやすい
- 色盲の人を意識して、色だけに頼らずに矢印などのアイコンを付与するようにしよう
undefined 色の深さを作る
- 光のエミュレートしてボタンの凹凸を再現し、影や立体感を出す
- z-index をうまく活用にすることで Dropdown が浮いたような表現ができる
- e.g. z-index で下の要素をぼやかして、上のモーダルに影をつけて注意を集める
- フラットデザインでも色をうまく使い分けて深さを表すことができる
- solid shadow をうまく使うことで一部に立体感をあたえることができる
- 要素のオーバーレイを影と組み合わせて表現することで、おしゃれなデザインが実現できる
undefined 写真を使う場合
- 高いクオリティの写真を使うこと
🖥 VULTRおすすめ
「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！
📚 おすすめの書籍
