Adobe’s design system 入門日本語

2022年2月18日 00:12

文献

はじめに

WEBデザインをしていて、いざワイヤーフレームを作ろうとしたときに
何を基準に作ればいいのか分からないことがあると思います。

そんな時、Adobeのデザインシステムがとても重宝したので大事そうなところをピックアップして日本語でまとめてみました。

Adobeデザインで見るべきところは1つ

上に添付したURLのサイドバーにある主にFoundation、Content、Components、Patternsの4つを1つずつ解説していきます。

ただし、必読はFoundationのみ。
それ以外の3つは都度読めば事足りると思います。

それでは、早速解説していきます。

==========Foundation==========

デザイントークンを最初に作る

簡単にいうと、最初の設定値みたいなものです。
色やサイズに対して、どの値を100にするかを決めて
それを基準に色なら薄くしたり、濃くしたりします。
サイズも同様です。

プラットフォームによってスケールを変更する

デスクトップとモバイルでボタンなど要素の大きさが変わるということを表しています。

基本的に、デスクトップ 1 : 1.25 モバイルです。
ただし、枠線の幅は変えません。

色は自作しない

・最も明るい、明るい、暗い、最も暗いの4つのテーマに対応できる色を用意する。
・アクセシビリティガイドラインに準拠した色を使用する。
・11のグレーを用意し、その中から背景色とテキストの色を決める。

スクリーンショット 2022-02-14 15.47.27

・セマンティックカラー
意味合いのある色。下記の4色で4つの色を表現することを推奨する。

・ラベルの色も展開してくれている、下のURLからcopyして使えます。
https://spectrum.adobe.com/page/color/#Label-colors
・基本的に独自の色は作成してはいけない。

フォントサイズと行間は決まっている

・書体
Adobeデザインシステムでは、adobeが開発した4つのフォントを使用することを推奨している。でもなんでもいいと思う。
・タイポグラフィの分類
文字の使い分けは4つに分類されるそうです。
見出し、ボディ、詳細、コード
詳細ってなんだ？って思ったんですが、見出しの小さいバージョンと捉えるのが良さそうです。

・フォントサイズ
下の表に即したフォントサイズを使用するのが良さそうです。
デスクトップに対してモバイルは1.25倍のフォントサイズになっています。

スクリーンショット 2022-02-14 15.59.03

・テキスト書式の使い分け
強調のための下線は使用しない。

・線の高さ(空白のとり方)
見出しと詳細とコンポーネントは、欧文なら1.3x、和文なら1.5x。
本文は、欧文なら1.5x、和文なら1.7x。

・テキストのブロックはおよそ70文字。
幅は少なくとも50文字〜120文字にする必要があります。
・インデントを使用しない。

角を丸める時は5or4px

・角を丸める時は通常デスクトップは4px、モバイルは5px

・境界線は1pxが一般的：
テキストフィールド、タグ、ポップオーバー、テーブルなど
・境界線2px：
基本ボタンに使用されるが使用頻度は少なめ。
・境界線3px：
大きな仕切り線の時のみ使用される。

モーションをつけたい時

ここは説明が難しいのでここでは取り扱わない。
アニメーションをさせたい時などに使用する。CSSやjQueryが絡んでくる。
https://spectrum.adobe.com/page/motion/

アイコンは拡大縮小しない

・サイズはデスクトップは18px、モバイルは22pxに統一されている
・アイコンを拡大縮小して使用してはならない。
・塗りつぶして使用すること。アウトラインに変更しない。

イラストの種類と役割を理解する

Adobeのイラストには塗りつぶしのイラストと、アウトライン化されたイラストがある。
その2つの役割について解説する。
・塗りつぶしイラスト：
遊び心があって、装飾的であるため注目を集めやすい。
新しいコンテンツや機能を紹介するためによく使用されます。
・アウトラインイラスト：
このスタイルは、より情報的で、機能的で、指示的です。
UI関連のタスクの説明に最適です。

社会全体のことを考えてデザインをする(インクルーシブデザイン)

インクルーシブデザインとは、高齢者、障がい者、外国人など、従来、デザインプロセスから除外されてきた多様な人々を、巻き込むデザインプロセス。
・完璧はないものと仮定する
その上で、適切なエラーメッセージを吐き出す。
・リストやフォーム、パネルなどの読み取り順序が論理的であることを確認する。
・色覚異常者のことを考えた配色の設計になっている。
・光てんかん発作を防ぐために、画面の一部を1秒間に3回以上点滅させない。

国際的な標準デザインを把握する

世界にはおよそ200の国と6500の言語がある。したがって、webサイトの1つ1つの要素は言語によって大きく異なる。
・最大で300%長くなるテキスト

スクリーンショット 2022-02-14 16.52.21

・正解と不正解(○と×)は国によって表現が異なるから注意
・地図記号とかアイコンの意味が異なる場合がある。
・国によってやってはいけない、手のジェスチャーがある
・動物に意味を持つ国があるため、安易に動物にアイコンを使わない。
・画像埋め込みテキストは翻訳が使えない為、なるべくテキスト化する。
・人物のポートレートの使用には注意する
・季節のコンテンツは国によって大きく異なる
・国によって意味する色のイメージが異なる。

双方向性　言語によって逆から読む文字もある

左から読む言語と、右から読む言語があるので要注意とのこと。

データ、グラフは見やすく表現する

データは見やすく表現しましょう。
グラフのカテゴリーに色をつけたいときは、Adobeはこれらの色を推奨しています。
https://spectrum.adobe.com/page/color-for-data-visualization/

レイアウトは12の列、側溝、マージンから成り立つ

レスポンシブグリッドを使用すると画面のサイズに基づいてレイアウトを自由に動的に変更できます。
こちらからUIキットをダウンロードできます
https://spectrum.adobe.com/page/responsive-grid/

スクリーンショット 2022-02-14 17.09.00

ワイヤーフレームや、デザインを作っていくときに非常に便利なツールです。
ピンク色の列は12個あります。
基本的には、これらの12本の列に合わせて、レイアウトを組んでいきます。

==========Content==========

Foundation(基礎)が終わりました。
ここから先は必読ではないです。
ここからはコンテンツについて見ていきます。

声とトーン

一貫した声とトーンを使用する。

文法

・基本はAP Stylebookに準拠する。
https://www.apstylebook.com/
米AP通信(Associated Press)社が編纂・発行する、文体スタイルガイドのこと。記者だけでなく企業広報などの方が文体統一の参考にするのに便利で、文法や句読法、表記法(大文字・略語・スペリング・数詞の使い方、スタイルの定義とルールなど)がまとめられています。

・基本は能動態を使用する。
能動態：誰が何をしているのかが明確
受動態：能動態だと厳しい伝わり方になる場合に使用する。

・文字は短縮する
can not → can't
are not → aren't
is not → isn't
※ただし、is, does, has, was と名詞の省略は避ける

・時制に気をつける

スクリーンショット 2022-02-14 17.49.34

・大文字と小文字の使い分け

・代名詞

・句読点
&は使用しない、アポストロフィーと引用符を混同しない

必須を表現する時にアスタリスクを使用する
@は使用せずに at を使用する
[] や {} は使用せずに () を使用する

リストの時には : を活用する
リストする時にはシリアルコンマ , を使用する

小さいスペースに文字を切り捨てるときは省略記号(...)を使う
絵文字を使用しない
イコール(=)を使用しない

感嘆符(!)は使用しない
不等号記号(<, >)は使用しない
関連する考えを区切るには、全角ダッシュ(ー)を使用します。
数字の範囲と時間の長さには、ダッシュ(-)を使用する。

マイナスの記号を使用しない
テキストが全文の場合は、末尾にピリオドを追記する。ただしヘッダーやボタンにピリオドは使用しない。

「and」という単語の代わりにプラス記号（+）を使用したり、その他のデザイン要素として使用したりしないでください。
タイトルを書くとき、疑問符（？）は含めることができる唯一の許容可能な句読点です。ただし、修辞的な質問をするために疑問符を使用することは避けてください。

引用符（“”）は、誰かの言葉を引用する場合、またはファイルやアセットの名前を参照する場合にのみ使用してください。
セミコロン（;）は使用しないでください。文を中断する必要がある場合は、ピリオド、コンマ、または場合によっては全角ダッシュを使用します。

単語やアイデアを組み合わせるために円記号を使用したり、円記号（/）を使用したりしないでください。
実行中のテキストで垂直バー（|）を使用しないでください。Webページのタイトルタグとフッター情報以外の場所で情報を分割するために使用することは避けてください。

・略語
金額：
Kは千、Mは百万、Bは十億、大文字、期間なしを使用します。
数値と測定単位の間にスペースを入れてください（例：「71Mレコードが見つかりました」）。

・数字
多数：
読みやすくするために、コンマを使用して3桁のグループをオフセットします。（例：10/100/1,000/10,000/100,000）
通貨：
小数点が必要な場合はつける。（例：$ 100USDは$ 138.21 SGDに等しい）
パーセンテージ：
文字ではなく記号パーセンテージ(%)で表す。

・日時