とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

【良記事ピックアップ】タブUIの考察・最適解

【良記事ピックアップ】タブUIの考察・最適解

デザイナーなら読んでおきたい

良記事ピックアップシリーズ。

 

Web屋の現場では、日々の情報収集が

スキルに直結していく場面も多い。

普段からいかにアンテナを張って、

引き出しを増やしておくかが

スキルアップへの近道であーる!

 

というわけで、さっそく第一弾。

第一弾は「タブUIはこうあるべき」

という良記事を紹介します。

 

u-site.jp


タブUIを設計する際に抑えておきたいポイントが

要約されています。

タブコントロールに関する12のデザインガイドラインに

基づいて解説されています。

 

タブUIは設計をミスると、

使いにくい・わかりにくいUIに

早変わりしやすく、問題が起きやすいUIなので、

デザイン初学者はとくに意識しておきたいですね。

 

ではざっくり記事の中の目次を紹介します。

 

目次

  1. 別のエリアに移動するためではなく、同じコンテキストの中で、表示内容を切り替えるためにタブは利用しよう。
  2. コンテンツを論理的なかたまりに分けて、そのそれぞれにタブを付けよう。
  3. ユーザーが同時に複数のタブでコンテンツを見る必要がない場合にのみ、タブは利用しよう。
  4. タブの内容はお互いに関連があるものにしよう。
  5. 選択中のタブはハイライトしよう。
  6. 選択されていないタブもはっきりと表示し、読めるようにすべきだ。
  7. 選択中のタブとそのコンテンツのエリアは一続きになるようにつなげよう。
  8. タブのラベルは短く書こう。
  9. タブラベルを全部大文字にするのはやめたほうがよい。
  10. タブは1列に収めよう。
  11. タブの並びはタブパネルの最上部に配置しよう。
  12. タブの外観や機能はすべて同じにするべきである。

 

各項目の詳細は、

記事中に詳しい解説がありますので、

ぜひチェックしておきましょう。