新しいSiGNより、開発中の画面UI

開発ディレクターの四家さんの記事にもあるように、現在、画像編集ツール「SiGN」のリニューアルを進めています。

新しい画像編集ツール「SiGN」の展望

本日はUI（ユーザインタフェース）の話を少し。
UIとはソフトウェアなどの機能を画面上でどう見せて、どう操作してもらい、操作の結果をどう表示するかなど、大雑把な言い方ですが、いわゆる画面の設計図みたいなものです。

今回は、新機能の搭載ではなくて今あるSiGNからのリニューアルになるため、大きく分けて下記の２段階で作業を進めているところです。
・今ある機能を、新しい画面でどう見せるか
・追加される新機能をどう盛り込むか

新しく設計する際に、気をつけているのは
・見やすいレイアウト
・ユーザー目線での機能の整理整頓
をコンセプトに進めています。

現行のSiGNから

互換性を考慮して、今まで使われていた機能はできるだけ引き継ぐようにする予定です。
既存の機能を一通り見直して、整理し直すところから始めました。
できるだけ、一連の流れで作業した方が良いものをまとめることも、使いやすいUIのためには大切なポイントだったりします。

新しいSiGNへ

整理し直した既存機能に、より使いやすくするための新しい機能をプラスし、全体図を把握できるように組み立てたワイヤーフレームです。
どこに何の機能があるか迷わないように、これを元に、練り直しを重ねながら新しくなるSiGNの画面をデザインしています。

※画像は開発中のものです。変更する可能性があります。

まだ検討中ではありますが、新しいUIの一例をあげると、レイヤー（画像やシェイプなど）のデザインする際の調整はサイドにまとめて、より俯瞰的に操作できるようにしていく予定です。

デザインというものには正解がなく、Webデザインと同様にUIデザインも最新の動向は常に変化しています。
SiGNの新しいUIはまだまだ試行錯誤中ですが、よりよいものをお届けできたらと思っています。

SiGN専用のテンプレート

SiGNにはあらかじめバナーやボタンなどを想定したテンプレートが用意されています。
ボタンデザインの傾向や大きさなど、SiGNができた当時から考えるとトレンドが変化した面もあるため、
こちらも最新のWebデザインでも使えるような、新しいSiGNテンプレートを増やしていきたいと考えています。