「The ustwo™ Pixel Perfect Precision Handbook 2 日本語版 」を読んだ
https://www.concentinc.jp/design_research/2014/01/pixel-perfect-precision-handbook-2-japanese/
ドキュメントが PDF というのが気に食わなかったけど、簡潔にまとめられた文章と説明のためにつけられたグラフィックは読みやすかった。
自分がなるほどな、これは知らなかったなと思ったことをまとめた。普段 Sketch で Photoshop を使ってないから、ツール的なところは全然メモしてない。
- きれいに整列されたデザインをつくるためにグリッドを使おう
- 枠線を角丸で指定したとき、内側の角丸の半径について気を配ることがよくあるが、このときの半径の求め方として「線幅と角の半径を足す方法」または「線幅から角の半径を引く方法」があるのは知らなかった。この方法を使えば、内側の角を CSS などで汎用的に指定することが可能になりそう
- 正三角形を描くとき、「横幅に対して高さを 86.6% にすると綺麗な正三角形に見える」というのを知らなかった。正確にはこの方法自体は知っていたが、縦幅の求め方（値）を知らなかった
- 1 段落 5 行以内で！っていう提案があったけど、レスポンシブに表示されることを考えたら文字数で制限したほうがいいと思った。読みやすさのために、制限をつけること自体はいいと思う
- たとえばページ内の注意書きの表示位置など、コンテンツを載せる順番を決めておくことは、ユーザーが知りたい情報をうまく見せるのに役立つ
- フォームなど、ユーザーが行動を開始してから目標を達成するまでの最高ステップ数には制限をつけて決めていいかも。「いつになったら私がやりたいことができるの」とユーザーが思わないように
- 何のページか明確にするためにタイトルは必要
- ラベルは短い文章で的確に
- タッチデバイスでもリンクを押せるエリアを十分確保しよう（この "十分" というのを正確な値でルール化するのが必要）
- アプリケーションに慣れたユーザーにはリンクよりボタンのほうがアクション要素としてわかりやすい
- ユーザーが何らかのアクションした際は反応を返そう。ユーザーが自分の取った行動を不安に思わないように
- タイポグラフィを 3 点リーダーで短縮表示すると Example 1, Example 2 みたいなときにサフィックスが見れなくて困るから、省略するときは十分気をつけること
- 色だけで要素の違いをつけることはしないこと。グラフなんかでも
- 曲線にすると直線で同じ線幅にしたときより線が細く見えてしまう。こういったときは曲線と直線で同じ線幅に見えるように調整するため、線幅を直接調整するか、光彩で擬似的に見た目を整える
Semantic UI Doc ( Elements - Step ) を読む
Semantic UI の Step を読んだ。ステップにテーマは 3 個ある。
ステップは一連の行動の中で、自分が今どのポイントにいるかを示す。基本的にグループで使うことを想定してつくられている。
<div class="ui steps"> <div class="step"> ... </div> <div class="active step"> ... </div> <!-- アクティブ状態 --> <div class="disabled step"> ... </div> <!-- 無効状態 --> </div>
.ui.ordered.steps で順序付きリストにすることもできるし、.ui.vertical.steps でステップを縦に並べて表示することもできる。
ステップに含めることができるコンテンツは、説明文、アイコン、リンクがある。
ステップは状態を持ち、アクティブ状態と、チェックマーク付きの完了状態、無効状態がある。
バリエーションもいくつかあり、ステップを横に並べて矢印でステップの方向を示す「Stackable」、幅いっぱいに表示する「Fluid」、ステップをコンテンツの上下にくっつける「Attached」、サイズのバリエーションなど。
ステップはフォームの進行状況をユーザーが確認したいときなどに使えそうだ。
Semantic UI Doc ( Elements - Segment ) を読む
Semantic UI の Segment を読んだ。セグメントにテーマは 2 個ある。
セグメントは関連コンテンツのグループをつくるのに使う。いくつかタイプがあり、「Raised」はページの上に浮遊しているような表示に、「Stacked」は複数のページが重なったような表示に、「Piled」は複数のページが散らばりながら重なった表示に、「Vertical Segment」はセグメントを水平線で分断する表示。
グループ化もできる。セグメントの入れ子もできるし、水平にセグメントを並べることもできる。グループ化した際の仕切り線に色をつけたりもできる。また、グループの中でセグメントの注目度を落としたければ .ui.secondary.segment を使い、背景色をグレーにする。
セグメントには通常の状態に加えて、無効状態、読み込み中状態がある。
バリエーションもいくつかあり、反転色にしたり、Attached Header や Attached Message をくっつけたり、セグメント内部の余白を広げたり、コンパクトな見た目にしたり、セグメントの上部ボーダーに色を付けたり、背景色に色を付けたり、前述したような注目度を落とすために見た目を変えたり、円形にしたり、float でセグメントを左右に並べたり、書式方向を変更したり、枠線や背景を取っ払ったシンプルな見た目にしたりできる。
Semantic UI Doc ( Elements - Rail, Reveal ) を読む
Rail
Semantic UI の Rail を読んだ。レールにテーマはない。
レールはサイトのメインコンテンツに付随するオプションコンテンツを表示するのに使う。たとえば、ブログ記事がメインコンテンツで、前後の記事に移動するリンクがオプションコンテンツだ。
レールはメインコンテンツの左右に固定位置で表示される。幅は 300px、これは広告やサブナビゲーションを表示するのに最適なサイズだ。レールをモバイルなど幅が狭い環境でも表示するにはブレークポイントの指定が必要になる。
タイプが 3 つある。1 つ目はメインコンテンツの外側左右にレールを表示する。2 つ目はメインコンテンツの内側左右にレールを表示する。3 つ目はメインコンテンツとレールの間に境界線を敷いて、左右にレールを表示する。
見た目のバリエーションもいくつかある。コンテンツとレールを接着させて表示したり、コンテンツとレールを通常より近づけて表示したり、レールの中身の文字サイズを変更したりできる。
Reveal
Semantic UI の Reveal を読んだ。Reveal にテーマはない。
Reveal は何ていうか説明が難しいけど、マウスオーバーなどでコンテンツをアクティブ状態にしたときに、任意のアニメーションを加えながら表示を切り替えるためのもの。
3 つのアニメーションタイプがあり、「Fade」は非アクティブ状態の表示がその場で消えてアクティブ状態に切り替わる。「Move」は非アクティブ状態の表示が上下左右どこかに移動しながら消えてアクティブ状態に切り替わる。「Rotate」は非アクティブ状態の表示が左右どちらかに回転しながら消えてアクティブ状態に切り替わる。
マウスオーバーする前のコンテンツの状態を非アクティブ状態にすることもできるし、逆にアクティブ状態にすることもできる。
「Instant」バリエーションを指定すると、マウスオーバーした瞬間にアニメーションが開始されるようにできる（ transition-delay: 0s ）。
Semantic UI Doc ( Elements - Loader ) を読む
Semantic UI の Loader を読んだ。ローダーにテーマは 3 個ある。
ローダーはコンテンツが読み込み中であることを示すために使う。クルクル回るいつものアレを画像（ CSS で描画されるが面倒なので画像と呼ぶ）だけで表示するか、テキストラベル付きで表示するか選べる。
通常のローダーは親要素に .ui.active.dimmer を持ち、子要素に .ui.loader を持つ。これは黒背景を想定したローダーだが、もし白背景でも見えるようにしたければ .ui.active.inverted.dimmer で反転色のローダーにする。
ローダーは 3 つの状態を持ち、読み込みの所要時間が不明確なときに黒背景をローダーとコンテンツの間に敷く「Indeterminate」、コンテンツが見えた状態でローダーを表示する「Active」、ローダーを非表示にする「Disabled」がある。
見た目のバリエーションもいくつかあり、配置に関してはインラインまたはインラインで中央に表示することができ、サイズにはバリエーションがあり、背景に合わせてローダーの色を反転することもできる。
Semantic UI Doc ( Elements - List ) を読む
Semantic UI の List を読んだ。リストにテーマはない。
リストは親要素に .ui.list をつけて表示する。div 要素でリストを表現する場合は、追加で子要素に .item を指定して表示する。リストは入れ子にすることができ、階層をつくりだせる。
div 要素で指定したリストにバレット（黒ポチ）はない。バレットをつけるには .ui.bulleted.list を指定するか、指定する要素を ul 要素に変更する。.ui.horizontal.bulleted.list でインラインリストを表示することもできる。この指定ではアイテムの境界がバレットになる。
順序付きリストは .ui.ordered.list で表示できる。順序付きリストの場合、リストを階層化すると親は 1 、2 、3 ... と番号が付き、子は 1.1 、1.2 、1.3 ... と番号が振られていく。順序付きリストでは、li 要素の value 属性を指定すれば好きな文字列で番号部分を変更できる。
ナビゲーションリンクのリストを表示するには .ui.link.list を指定する。このリストにはリンクをアクティブ状態に見せるクラスが用意されている。
リストに含むことができるコンテンツは、文字列、アイコン、画像、リンク、ヘッダー、説明文（ .description ）がある。
リストには見た目のバリエーションもあり、水平にアイテムを並べたリスト、番号付きで水平にアイテムを並べたリスト、黒背景などを想定した反転色のリスト、アイテムを選択できるリスト（マウスオーバーなどの状態で表示が変わる）、アニメーション付きでアイテムを選択できるリスト（マウスオーバーなどの状態で表示が変わる）、余白を調整したリスト、アイテムに境界線をつけたリスト、サイズのバリエーションなどなど。
リストのコンテンツの中身についても見た目を指定することができ、たとえば水平に画像と文章を並べた場合の縦方向の配置を指定したりできる。
