SendGrid公式スタイルガイドのご紹介

先日、SendGridではダッシュボードで使用している様々なコンポーネントやレイアウト、アイコンなどをまとめた「SendGrid公式スタイルガイド」を公開しました。今回はこのスタイルガイドについてご紹介します。

元々、このガイドはSendGrid社内向けに作成されたもので、プロダクト全体で一貫性のあるユーザ体験を提供するためのものでした。ボタン、テキストフィールド、テーブル、ツールチップなどの再利用可能なUIコンポーネントの他、グリッド、カラーパレット、フォント、アイコンなどレイアウトを構成する基本的な要素が含まれています。

使い方はとても簡単でHTMLファイルの<head>タグ内に以下のような<link>タグを記述し、あとはサンプルに従ってUIタグを記述していくだけです。

<link href="http://uiux.s3.amazonaws.com/style-guide/css/style-guide.css" rel="stylesheet">

例えば、テーブルコンポーネントのサンプルコード（コンテンツを日本語に変更しています）は以下の通りです。

<html lang="ja">
<head>
  <link href="http://uiux.s3.amazonaws.com/style-guide/css/style-guide.css" rel="stylesheet">
</head>
<body>
<div style="padding: 100px;">
<h1>標準テーブル</h1>
<table class="table-wrap has-checkboxes">
  <thead>
    <tr>
      <th class="table-checkbox">
        <div class="input-checkbox-wrap">
          <input type="checkbox" id="table-default-select-all" value="Select All">
          <label class="input-checkbox-label" for="table-default-select-all"></label>
        </div>
      </th>
      <th class="sort">連絡先</th>
      <th class="sort">追加日</th>
      <th class="sort">最終開封日</th>
      <th class="sort">最終クリック日</th>
      <th class="actions">アクション</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table-checkbox">
        <div class="input-checkbox-wrap">
          <input type="checkbox" id="table-default-select-row1" value="Select">
          <label class="input-checkbox-label" for="table-default-select-row1"></label>
        </div>
      </td>
      <td class="contact"><a href="#">hello@example.com</a></td>
      <td class="stats">2015/02/02</td>
      <td class="stats">2016/02/10</td>
      <td class="stats">2016/02/08</td>
      <td class="actions">
        <i class="sg-icon sg-icon-ellipsis"></i>
        <div class="action-icons">
          <span data-tooltip="View" data-tooltip-pos="up"><i class="sg-icon sg-icon-view"></i></span>
          <span data-tooltip="Edit" data-tooltip-pos="up"><i class="sg-icon sg-icon-pencil"></i></span>
          <span data-tooltip="Copy" data-tooltip-pos="up"><i class="sg-icon sg-icon-copy"></i></span>
          <span data-tooltip="Delete" data-tooltip-pos="up"><i class="sg-icon sg-icon-trash"></i></span>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
</body>

これをブラウザで表示すると次のようになります。