transitkix design log

iOS/AndroidアプリのUIデザインやUXデザインをやっているデザイナーのブログです。 http://transitkix.com/

GitHub Issue Reader「Jasper」をデザイナーにもオススメしたい

f:id:transit_kix:20170810234120p:plain

こんにちは、 transit_kixです。

普段仕事で「Jasper」というツールを使っています。

https://jasperapp.io/

日々大量にやり取りされるGitHub上のイシューやプルリクエストを自分のフィルターで絞り込んで効率的にチェックできるツールです。

f:id:transit_kix:20170810230252p:plain 画像引用元 : Jasper公式サイト

このツールを個人で開発しているRyo Maruyamaさんとは、同じ会社で働いてまして、実はJasperはβテスト時代から使わせてもらっています。

blog.h13i32maru.jp

使い始めて2ヶ月くらいでIssueのメール通知を完全OFFにすることに成功、それから1年経ち…正直これ使えないと業務効率に差し支えるレベルにかなりお世話になっている。GitHubをもっと使いこなしたいデザイナーにもオススメしたいので、自分なりにツールの活用状況をまとめました。

私の利用傾向

エンジニアの利用方法とちょっと異なるかもしれない。

  • 職業 UIデザイナー。UIデザインとかUXデザインとか色々
  • GHE(業務利用) / GitHub(個人利用)
  • 利用目的 Issueを使ったプロジェクトに関する議論、デザインレビュー、実装後調整指示
  • 利用種類 Issueは書く、PullRequestは自分では送ることはほぼないがレビューでは見る
  • 見るリポジトリ たくさん

よく使うストリーム

f:id:transit_kix:20170810223534p:plain

ストリームでは、絞り込み条件を設定して個別のIssueリストを生成することができます。

使い始めたときは、関わるリポジトリごとにストリーム作ったり個別にチェックしてたのですが、ストリームが乱立。結局自分にとって重要度の低いリポジトリは見に行かないので見逃しが多々発生…😢

思い切ってメインで使うストリームは下記2つに絞りました。

1.Me (自分が関わったものを見たい)

設定クエリ involves:transit_kix user:transit_kix

デフォルトで存在するストリームです。メンションで呼ばれたり、自分が関与したIssueやPRに更新があったらここに新着順で並びます。一番優先的に見る。

2.Design Team (デザインに関する進行中のものを見たい)

設定クエリ team:tech/design team:iOS/design team:Android/design -label:design_LGTM is:open is:issue

デザイナーに関係するIssueで、現在進行中のものをリポジトリを跨いで収集しています。 -label:design_LGTMで既にLGTMが出ているものは省いている。

よく使うショートカット

f:id:transit_kix:20170810223512p:plain

この4つしか使ってません。もはやこれがあれば最強です。

U (未読のみ表示)

ストリームはデフォルトで新着順で表示されているのですが、既読と未読が入り混じってくるので「U」を押すと未読のみに絞り込めます。

J(1つ次へ)

1つ先に進みます。次…はい次…みたいな感じで、さくさくIssueを見ていくことができます。

K(1つ前へ)

「J」でさくさく確認しているとき、ふと「さっきのIssue、やっぱりちょっと気になる…」と戻りたいときは焦らず「K」。

I (未読に戻す)

一旦開封したものの、内容を確認して「これは後からじっくり返信したいぞ…」「ちょっと内容が重いから、全てのissueを確認してから後回しに」というものは「I」で未読に戻します。

(余談ですが、⭐️マークもストリームの分裂につながるので最近は使っていません)

たまに使う便利機能

未読を古い順に見る

is:unread sort:"created asc" で絞り込み

Jasperの設計上、新着がどんどん上にくるようになっていて、 ちょっと未読が溜まってしまった時には、古いissueがなかなか目に触れにくくなります。 ちゃんとissueを生成された順に見たい…そんなときはこれを使いましょう。

集中して、このIssueに取り組みたい

Cmd + 1 で見ているIssueのみの表示

Cmd + 2 で見ているストリームのみの表示

Cmd + 3 で通常の3カラム表示に戻ります

…以上、自分なりの活用方法でした。

試行錯誤をする中で今のスタイルに落ち着きましたが、最近では1日数十件溜まった未読のIssueも30分くらいで目を通し終わり、処理できます。

ぜひ他の人の活用方法も知りたいなー

おまけ

実はJasperのロゴマークのデザインは私が担当しました。 「火打ち石の模様」「稲妻」をモチーフにしています。 当初はJasper=火打ち石っぽいえんじ色だったんですが、最近のトレンドっぽくピンクに寄せました⚡️

愛されるプロダクトに育つといいですねー。

応援しています。

medium.com

「デザイン落とし穴」という話をしてきました

f:id:transit_kix:20170702215045p:plain

transit_kixです。 UX MILKの三瓶さんにお声がけしてもらい、先日ux failconというUIデザインやUXデザインに携わっている人々の集まるイベントに登壇してきました。

登壇資料

内容は、サービスデザインにおいて仮説→検証→実行のそれぞれのフェーズで陥りやすいケースについてお話ししました。

ユーザーストーリーを吹き出し形式に

これは簡単で比較的効果があるので、初心者で勉強したい人はどうぞお試しあれ。

f:id:transit_kix:20170702214031p:plain

当日の様子

DMMさんの新オフィス、壁に本物の植物が生えています。 他の登壇者の方の失敗談も面白かったです。

「賃貸住宅「コンセントハウス」のデザイン」(シャープ/電化美術の中田 裕士さん)

f:id:transit_kix:20170702214734p:plain

つよいUI

f:id:transit_kix:20170618021745p:plain

…というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり!あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。

つよいUIであるための7つの視点

1.本来、そこにあるはずの情報がない場合はどうなりますか?

リストUIで載せる情報が0件、文章が空っぽ、画像がない時など

2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか?

数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など

3.ユーザーさんの立場によって、表示要素に変化はありませんか?

ゲストとログインユーザー、無料会員と有料会員…など

4.ロード中、もしくはロードされるまで何が出ていますか?

通信中の表示、読み込み中の画像エリア…など

5.予期せぬエラーが起こった時、画面はどうなりますか?

通信エラー、リンク先のコンテンツが削除されていた…など

6.端末解像度による制御について決めましたか?

ブレイクポイント、iPadAndroidタブレット…など

7.デザインの変更によって、派生的に変化が起こる要素はありませんか?

例えばお知らせ画面を新たに作ろうとしているが、その変更でタブバーにも新着件数が出るようになる…など

つよい、って何さ?

つよい=あらゆる状況において耐久性のある、みたいな意味です。この内容を先日働いている会社の社内エントリーで書いたところ、エンジニアから「つよい、そして優しい」というコメントをもらいました。

つよさとはやさしさ…なるほど。

blog.tsubotax.com

Remove all ads

Update website design

f:id:transit_kix:20170519020440p:plain

transitkix.com

ウェブサイト更新

長いこと黒い画面からgithubの個人アカウントにpushできなくて困ってましたが、 GitHub Desktop をインストールしたことで解決した。

最近の情報を載せて、デザインもちょっとだけ調整。最近ちょこちょこUXデザインとかデザイナー組織のご相談や依頼を受けることが多いので、新たにContactも載せました。

UXのきほん、今年も開催しました

image

週末に、 UXの基礎講義のイベントを開催しました。「ブログを書くまでがワークショップ」ということで、簡単に開催レポートも兼ねて振り返りの記事になります。

2016/4/16(土) UXのきほん-サービスデザインに大事なコトについて -

http://uxbasic.peatix.com/

実は去年 (2015年)も同じ主旨のイベントを開催しましたが、今年も新たに 70 名の方にご参加いただき、懇親会も非常に盛況となりました!東京といえどわりと専門的な知識ゆえ、様々なイベントに参加していると徐々に見知った顔が多くなります。ですが、このイベントでははじめてお会いする方が非常に多かったのが新鮮でした。(みんなどこで知ったんだろう?)

Read more

STICKY50

2015/8/1から「#sticky50」 という企画に参加していて、 Twitterで1日1枚ふせんをアップしています。

Read more
Remove all ads

「マイクロインタラクション UI/UXデザインの神が宿る細部」

ちまちま読み進めていた「マイクロインタラクション」を読み終えたのでメモ。

www.amazon.co.jp

ざっくり言うと「ユーザーのかゆいところに手が届く、気の利いたUIのしぐさを生み出すには」という内容でした。

本文はiPhoneマリンバ事件のエピソードから始まり、しぐさを生み出すための「トリガー→ルール→フィードバック→ループとモード」という4つの重要なポイントについて説明されています。

文章はときおり内部処理構造の話など難しい内容もありますが、各章で多くの画像入りの具体例が紹介されていて理解を助けてくれます。(海外の具体例は本当にウィットにとんでいるというか、日本でやったら反感買いそうなものもありましたがw)

この本は、UIデザイナーに限らず「初めてアプリ開発に携わる人」「初めてUI設計を担当することになった人」向けでもあります。例えばディレクター、プランナー、プログラマ…などなど。UXデザインの書籍はマクロな視点で語られたものが多いですが、この本は「小さな視野で、世界を変えて行こうではありませんか」という言葉で締め括られています。

小さなしぐさでユーザーを幸せにする、そんな「気の利いた相棒」となれるようなコンテンツ(サービス)づくりを目指したいですね。