l12a

白ウサギを追え

Treee の公開とその後のバージョンアップ

進捗をブログに書いていませんでしたが、 Treee を 2019年5月8日に突然公開しました。

https://treee.app

その後やった以下のことを進捗報告として記事にします。

  • Twitter アカウントの運用を開始
  • Figma によるロゴデザイン
  • エディタ機能の一部アップデート
  • UIデザインのアップデート

Twitter アカウントの運用を開始

個人アカウントとは配信する内容に差をつけたいことからTwitterは専用のアカウントを立ち上げました。
Treee はそのショートカットなど覚える操作が多いことからそれらのTipsの配信や、
バージョンアップ情報などの告知として使えればと考えています。

Figma によるロゴデザイン

f:id:lnly:20190516002342p:plain
TreeeLogoType

ロゴデザインは Figma を使って制作しました。デザインツールの使用経験はもちろんデザイン自体の経験がないため初めての制作になりましたが、
Figma はとても使いやすく思い通りのものができました。

マークは正三角形を敷き詰めて「木」のモチーフを作り、 テーマカラー2色を使って緩やかにグラデーションさせるパターンと、ベタ塗りのパターンを使い分けられるようにしました。
ロゴのフォントは Roboto を使い、ウェイトは Light をベースに小さいサイズの視認性を考慮して太さを若干いじっています。

エディタ機能のリリース後アップデート

リリース時に盛り込まなかったいくつかの機能を追加でリリースしました。

  • 選択したノードを兄弟間で、または世代間で移動できる機能
  • 未保存の変更がある時にウィンドウを閉じようとした場合に警告を表示
  • 一定時間おきに未保存の変更を自動的に保存できる機能

選択したノードを兄弟間で、または世代間で移動できる機能

初めから作りたいと思っていたもの実現方法が思い浮かばなかったため保留としていましたが、
コピー&ペースト機能の副産物で比較的簡単に実現できました。

一瞬で入れ替わってしまうと何が起きたかがわかりにくく感じられたため、
ノードの追加時や削除時に若干のトランジションを追加しました。

未保存の変更がある時にウィンドウを閉じようとした場合に警告を表示

うっかり消してしまうことがユーザーデメリットが大きすぎるため、 デザインは何も作っていませんが(ブラウザ標準の)警告を表示するようにしました。

一定時間おきに未保存の変更を自動的に保存できる機能

実は当初、Undoができないので「勝手に保存されるのも困る」と考えていたため、
Undo機能と同時にリリースする想定でした。
しかしこれも消えた場合のユーザーデメリットの大きさを改めて考慮し、先行で自動保存を実装しました。

現在の設計上の制約によりリアクティブに(変更が生じたら即)保存することが難しく、
なくなくポーリングでの定期保存に落ち着いています。

UIデザインアップデート

f:id:lnly:20190516004025p:plain
Treee一覧画面のUI変更

色付きのボタンや、文字のみのボタンなど、いくつかの基本的なコンポーネントで作られていた UI ですが、デザインをリファインしました。

特に新規追加ボタンはアクションの重要性から他の汎用ボタンよりも大きく、色や形状も変化させています。

進捗は以上です。

簡単ですが今回の報告はこれで以上です。