直感操作を目指した画像編集ツールSiGNの変更点【UI編】

サイト作りでは画像を編集する頻度が高いからこそ、新しいSiGNはどのようにしたら直感的にマウス操作ができて、使いやすくなるかを目指して開発しました。今までのSiGNと比べてどんなところが変わったのかを紹介します。

BiNDでは画像を編集するための専用ツールSiGNが搭載されています。
新しいSiGNは、どのようにしたら直感的にマウス操作ができて、使いやすくなるかを目指して開発しました。
今までのSiGNと比べてどんなところが変わったのかを紹介します。

迷わせない、使いやすいUIの配置へ

SiGNのUI(ユーザーインターフェイス)が変わります。新しいUIでは、機能の役割ごとに関連ツールを配置しています。これまでのSiGNに慣れている人が迷うことのないように旧UIの機能を踏襲しつつ、よりスムーズな操作性を重視しました。

アートボード設定

newsign_ui_01
アートボード(画像全体)の設定は今まで通り画面上部にあります。画像全体のサイズを変更したり背景色を設定したりできます。SiGNを開き最初に設定することが多いので、わかりやすい位置に配置しています。

レイヤー操作

newsign_ui_02
次に画像の制作作業に入り、最初に使うレイヤー操作に関する機能は左側にまとめられています。レイヤー追加のほか、ツール切り替えやレイヤー一覧もここから確認できます。また、拡大表示ツールと縮小表示ツールが増えました。レイアウトの微調整を行うときなどに便利です。

レイヤー編集

newsign_ui_03
さらに、新しく右側に編集パネルができました。画像や色の変更、エフェクト調整など、レイヤーの内容を編集する機能はすべてこのパネルにまとめられています。
レイヤーの整列やサイズの数値入力など、新しい機能も増えています。

編集モード

newsign_ui_04
画像編集モードとイメージマップモードの切り替えはタブ表示になりました。
イメージマップは、画像の一部にリンクを貼りたいときに使います。一つの画像の中に複数設定できるので便利です。

このように画像全体の設定は画面上部で、レイヤーを追加したり操作する時は左側で、レイヤーの内容を編集する時は右側で、といった感じで機能に合わせてツールが配置されているのが新しいUIの特徴です。

新機能もあります

新しいSiGNでは、あると嬉しい機能が増えました。

レイヤーの整列・調整

newsign_function_03
これまでのSiGNでは作業しにくかったレイヤーの整列やサイズなどの微調整が簡単に設定できるようになりました。

アートボードの枠線

newsign_function_01
アートボード全体に枠線を付けることができます。

グラデーションカラー

newsign_function_02
アートボード全体の背景とシェイプレイヤーにグラデーションでの塗りつぶしが使用できます。

デザイン性の高い多様なフォント

newsign_function_04
テキストレイヤーで使用できるフォントが新しくなります。BiNDクラウドでWebフォントとして提供していた多種多様なデザイン書体から選択できます。簡単なロゴ制作などに重宝しそうです。

フィルター

newsign_function_05
あらかじめエフェクトが設定されたフィルターが搭載されます。いわゆるインスタグラムなどのSNSで使われているようなフィルター機能なので、適用すれば画像の色合いなどを簡単に変更でき雰囲気のある画像が作れます。

複数のエフェクト

newsign_function_06
これまでのSiGNでもエフェクトを掛けられましたが、今回からレイヤーに複数のエフェクトを適用できるようになりました。

どこにどんな機能があるのか探せない、という設計ではなく、触っているうちに自然と操作を覚えられるような直感性を重視しました。新しいSiGNのベータテスターはすでにスタートしています。さらなる使い勝手の向上を目指して、春先のリリースを予定しています。

  • 画像全体の設定は画面上部、レイヤー操作は左側、レイヤーの中身の編集は右側に機能を配置
  • 新しいSiGNでは整列やグラデーションなど、あると嬉しい機能が増えました
  • Webフォントとして提供していた多種多様なデザイン書体が使えます

関連記事