サイト情報

パーツデザイン

下記をUIのレギュレーションとします。

機能の目的を明確にする

  • 1画面1機能
  • 主機能・主遷移を最も主張させる

2秒で分かるUIにする

  • 2秒で分からなければ使われない
  • 無言語化を目指す
  • 説明文は10文字まで

マルチデバイスに対応する

  • 大枠レイアウトと専用メニューを除き、個別UIはPC用・モバイル用と考えを切り分けない。同一のパーツとする。
  • 利用感と印象の統一、統一による品質とスピードの向上を図る。

洗練する(=削除をいとわない)

  • クリック数を減らす
  • 線を減らす
  • テキストを減らす
  • 機能を減らす

デザイン・機能の価値を意識する

  • 無料だが、売れるデザイン・機能でなければならない
  • 「お金を払う価値あるもの」でなければ無料でも使われない

PDCAで改善する

  • 要件定義
    • 目的ベースで改善点の選定
    • 仮設を立て対策を決定
  • デザイン・開発
    • プロトタイピング
    • 社内リリース
  • 検証・評価
    • 社内評価
    • リリース・利用分析
  • 改善
    • ブラッシュアップ

レイアウト

フレームワークにBootstrapを使用していますので、レイアウトなどの指定方法は下記サイトから確認できます。

http://twitter.github.io/bootstrap/

アイコン

アイコンはFont Awesomeを使用していますので、詳しいアイコンの種類、指定方法は下記サイトから確認できます。

http://fortawesome.github.io/Font-Awesome/

コンテンツ見出しは <h2> ~ <h6> まであります。

<H2>見出し

<h2><H2>見出し</h2>

<H3>見出し

<h3><H3>見出し</h3>

<H4>見出し

<h4><H4>見出し</h4>
<H5>見出し
<h5><H5>見出し</h5>
<H6>見出し
<h6><H6>見出し</h6>

<a> もしくは <button> タグを使用します。

基本

サイト内でのリンクボタン基本サイズはこのサイズ

ボタン
<a href="#" class="btn btn-middle">ボタン</a>
ボタン
<a href="#" class="btn btn-middle btn-primary">ボタン</a>
ボタン
<a href="#" class="btn btn-middle btn-warning">ボタン</a>

サブメニューに置くボタンはこのサイズ

ボタン
<a href="#" class="btn btn-mini">ボタン</a>
ボタン
<a href="#" class="btn btn-mini btn-primary">ボタン</a>
ボタン
<a href="#" class="btn btn-mini btn-warning">ボタン</a>

入力エリアの横に置くボタンはこのサイズ

ボタン
<a href="#" class="btn">ボタン</a>
ボタン
<a href="#" class="btn btn-primary">ボタン</a>
ボタン
<a href="#" class="btn btn-warning">ボタン</a>

<input type="text" class="mb0" />
<button class="btn">送信</button>

トップページに置くボタンはこのサイズ

ボタン
<a href="#" class="btn btn-large">ボタン</a>
ボタン
<a href="#" class="btn btn-large btn-primary">ボタン</a>
ボタン
<a href="#" class="btn btn-large btn-warning">ボタン</a>

基本

  • リスト1
  • リスト2
  • リスト3
<ul class="list">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

アイコン

  • リスト1
  • リスト2
  • リスト3
<ul class="list list-icon">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

ボーダー

  • リスト1
  • リスト2
  • リスト3
<ul class="list list-border">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

数字

  1. リスト1
  2. リスト2
  3. リスト3
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

基本

テーブル見出し1 テーブル見出し2 テーブル見出し3
テーブルデータ1 テーブルデータ2 テーブルデータ3
テーブルデータ4 テーブルデータ5 テーブルデータ6
<table class="table">
<thead>
<tr>
<th>テーブル見出し1</th>
<th>テーブル見出し2</th>
<th>テーブル見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td>テーブルデータ1</td>
<td>テーブルデータ2</td>
<td>テーブルデータ3</td>
</tr>
<tr>
<td>テーブルデータ4</td>
<td>テーブルデータ5</td>
<td>テーブルデータ6</td>
</tr>
</tbody>
</table>

ストライプ

テーブル見出し1 テーブル見出し2 テーブル見出し3
テーブルデータ1 テーブルデータ2 テーブルデータ3
テーブルデータ4 テーブルデータ5 テーブルデータ6
<table class="table table-striped">
<thead>
<tr>
<th>テーブル見出し1</th>
<th>テーブル見出し2</th>
<th>テーブル見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td>テーブルデータ1</td>
<td>テーブルデータ2</td>
<td>テーブルデータ3</td>
</tr>
<tr>
<td>テーブルデータ4</td>
<td>テーブルデータ5</td>
<td>テーブルデータ6</td>
</tr>
</tbody>
</table>

枠付き

テーブル見出し1 テーブル見出し2 テーブル見出し3
テーブルデータ1 テーブルデータ2 テーブルデータ3
テーブルデータ4 テーブルデータ5 テーブルデータ6
<table class="table table-bordered">
<thead>
<tr>
<th>テーブル見出し1</th>
<th>テーブル見出し2</th>
<th>テーブル見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td>テーブルデータ1</td>
<td>テーブルデータ2</td>
<td>テーブルデータ3</td>
</tr>
<tr>
<td>テーブルデータ4</td>
<td>テーブルデータ5</td>
<td>テーブルデータ6</td>
</tr>
</tbody>
</table>

ホバー

テーブル見出し <thead> 内以外にホバー効果があります。

テーブル見出し1 テーブル見出し2 テーブル見出し3
テーブルデータ1 テーブルデータ2 テーブルデータ3
テーブルデータ4 テーブルデータ5 テーブルデータ6
<table class="table table-hover">
<thead>
<tr>
<th>テーブル見出し1</th>
<th>テーブル見出し2</th>
<th>テーブル見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td>テーブルデータ1</td>
<td>テーブルデータ2</td>
<td>テーブルデータ3</td>
</tr>
<tr>
<td>テーブルデータ4</td>
<td>テーブルデータ5</td>
<td>テーブルデータ6</td>
</tr>
</tbody>
</table>

コンパクト

クラスに table-condensed を追加すると、コンパクトなテーブルになります。
その場合、table-striped などとの併用は可能です。

テーブル見出し1 テーブル見出し2 テーブル見出し3
テーブルデータ1 テーブルデータ2 テーブルデータ3
テーブルデータ4 テーブルデータ5 テーブルデータ6
<table class="table table-condensed">
<thead>
<tr>
<th>テーブル見出し1</th>
<th>テーブル見出し2</th>
<th>テーブル見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td>テーブルデータ1</td>
<td>テーブルデータ2</td>
<td>テーブルデータ3</td>
</tr>
<tr>
<td>テーブルデータ4</td>
<td>テーブルデータ5</td>
<td>テーブルデータ6</td>
</tr>
</tbody>
</table>

ブランドのロゴやアイコンは下記を使用します。

Aipo.comロゴ

Aipo.com

https://www.aipo.com/common/source/img/logo.png

Aipo.com

https://www.aipo.com/common/source/img/logo_smp.png

Aipoロゴ

Aipo

https://www.aipo.com/common/source/img/aipo_logo.png

特大

Aipo

https://www.aipo.com/common/source/img/aipo_logo_l.png

ホームアイコン

https://www.aipo.com/apple-touch-icon-precomposed.png

ファビコン

https://www.aipo.com/favicon.ico

お知らせ、エラー、完了などのアラートは下記を使用します。

お知らせ

お知らせがあります。
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
お知らせがあります。
</div>

完了

◯◯が完了しました。
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
◯◯が完了しました。
</div>

エラー

エラーがあります。
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button>
エラーがあります。
</div>