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

BiNDの画像編集機能「SiGN」のフルリニューアルに向けて、ユーザインターフェース(UI)も刷新します。今回は、その開発中のUIを少しお見せしたいと思います。

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

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

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

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

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

現行のSiGNから

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

新しいSiGNへ

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

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

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

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

SiGN専用のテンプレート

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

  • 使い手の目線で機能を整理し、迷わせない設計を心がける
  • 既存の機能はできるだけ引き継ぐように考慮する
  • デザインには正解がないので、常に試行錯誤しながらより良いUIを目指す

関連記事