自己紹介

Pythonプログラマー。デザイナーではないです。
画面案を考えることがるので、UI/UXについて勉強中
https://twitter.com/yuji38kwmt
来栖川電算に所属 https://www.kurusugawa.jp/

背景

画面を考える際、UIデザインパターンを参考にしています。

タグUIに関する詳細なデザインパターンがなかったので、既存のアプリを参考にしてタグUIのデザインパターンを考えました。

定義

タグとは？

ソフトウェアやネットサービスで情報を分類・整理する際に、その属性や特徴を表す単語や短いフレーズをタグという。利用者が考えた様々なタグを対象に対応付けて分類していく手法をタギング（tagging/タグ付け）という。

タグの特徴

オブジェクトに複数の情報を付与する
順番はない
ユニーク

タグUIの古いデザインパターン

各アプリの調査

note

閲覧

編集

文章中にタグを埋め込めるだけでなく、文章を公開する際にタグをフォームから入力できる。

タグとセットで件数を表示している
検索するときには、#プログラミングのように表示している

Instagram

#を入力すると、補完リストが表示される。各ハッシュタグの件数が表示される。

Qitia

閲覧

一覧と詳細でタグの表示方法が異なる

検索

編集

stackoverflow

閲覧

編集

タグに説明文がある。自分で新規のタグも追加できる。ただし信用度を上げて権限を付与してもらう必要あり。https://ja.stackoverflow.com/help/privileges/create-tags

Everhour

閲覧

編集

チェックボックスで編集する

mondaycom

編集

検索

Github

閲覧

編集

Twitter

Toggle Track

Trello

レイアアウトの制約により、色で表現している
trelloはタグをクリックしても、絞り込みできない。タグ検索がメインではないため。
文字がないタグもあり。色が必要。したがってドロップダウンで選択させている。

調査結果まとめ

アプリ	タグの編集方法	タグ専用の入力フォーム	タグの名前以外の情報	タグの先頭にシャープを付けるか	タグをクリックしたときに検索できるか
note	文章内に埋め込む & タグ専用の入力フォーム			Yes	Yes
Instagram	文章内に埋め込む			Yes	Yes
Twitter	文章内に埋め込む			Yes	Yes
Qiita	タグ専用の入力フォーム	テキストボックス	アイコン、説明	No	Yes
stackoverflow	タグ専用の入力フォーム	テキストボックス	アイコン、説明	No	Yes
Everhour	タグ専用の入力フォーム	チェックボックス		No	No
mondaycom	タグ専用の入力フォーム			Yes	Yes
GitHub	タグ専用の入力フォーム	ドロップダウン	色、説明	No	Yes
Toggle Track	タグ専用の入力フォーム	チェックボックス		No	No
Trello	タグ専用の入力フォーム	難しい	色	No	No

まとめ

「タグ」は、分類や検索目的で、あるオブジェクトに情報を付与します。

タグの編集方法は、

テキスト内に直接タグを入力する
タグ専用のフォームで入力する
の2つあります。

タグの編集

「テキスト内に直接タグを入力する」形式

TwitterやInstagramなどで使用されている
タグの先頭に#を付けて、#以降がタグであることを表現することが多い
ユーザーは簡単かつ自由に新しいタグを作成できる
- → タグを管理する場合には向かない
テキストとタグを同時に入力できるので、UIがシンプルになる
タグを選択すると、そのタグで検索できる

「タグ専用のフォームで入力する」形式

ドロップダウンやチェックボックスなど、タグ専用のフォームでタグを指定する
タグをある程度管理したい場合に向いている

タグを入力するフォームは何か

ユーザーがすべてのタグを把握できる場合
- チェックボックスやドロップダウンなどで入力する
- Trelloやmonday.comなどプロジェクト管理ツールで使用される
ユーザーがすべてのタグを把握できない場合
- 補完機能付きのテキストボックスで入力する
- QiitaやStackoverflowなど不特定多数が閲覧するアプリで使用されている

タグの先頭に`#`を付けた場合

#以降がタグであることが分かる
タグを選択すると、選択したタグで検索できる
タグで検索するUIと、タグ以外の情報で検索する（全文検索など）UIを統一できる

タグの閲覧

タグを横に並べる
タグで検索する利用頻度が高い場合は、タグを選択すると選択したタグで検索できることが多い

タグUIを作る際のポイント

タグUIを作る際、事前に以下の情報を決めておく必要がありそうです。

タグに名前以外の情報があるか
タグを管理したいか
すべてのタグの個数はどの程度か（10個以下か）
タグで検索するUIを、タグ以外の情報で検索するUIと同じにしたいか

UI/UXデザイナーを募集しています

求めるスキル・経験

WebアプリケーションまたはスマホアプリのUIデザイン（ギャレットのUX5段階モデルの表層～骨格レイヤ）の経験
Sketch、Figma、Photoshop、Illustrator、Adobe XDなどを使用したUIデザインの経験
上記の経験を示すポートフォリオ
実装コストを考慮して、コストと使いやすさをトレードオフできる人

あると望ましいスキル・経験

オブジェクト指向UIデザインへの関心や経験
情報設計の経験
Webアプリケーションのフロントエンド（HTML,、CSS、JavaScript、Reactなど）の関心や経験
UXライティングの知識や経験
UXデザインの知識や経験