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

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

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

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

アートボード設定

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

レイヤー操作

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

レイヤー編集

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

編集モード

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

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

新機能もあります

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

レイヤーの整列・調整

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

アートボードの枠線

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

グラデーションカラー

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

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

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

フィルター

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

複数のエフェクト

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

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

無料でBiNDupのSiGNを使ってみるBiNDの制作事例を見る