おそらくPhotoshop似のオープンソース画像処理ソフトとして一番有名であろうGIMP。私も「たまにPSD用のビューアーや編集ソフトが必要」だというエンジニアの方にはいつもこれをおすすめしているんですが、毎回若干躊躇してしまいます…。
Fri Jan 23
※この記事は以下のYouTube動画のダイジェスト版です。
FOSS画像処理ソフトの中でおそらく一番有名なGIMP。
- 無料のオープンソース画像処理ソフト
- Photoshopの代替ソフト
- 高機能
- PSDとの十分な互換性
- 急な学習曲線
といった特徴で知られています。
私も「たまにPSD用のビューアーや編集ソフトが必要」というエンジニアの方にはいつもこれをおすすめしているんですが、毎回若干ためらってしまいます…。
なんせ学習曲線が急なおかげで使いにくい。レイヤーの概念をGIMP（ver. 1.2.0）で学んだデザイナー（私）でさえ、未だに習得しにくいと感じます…。
なぜGIMPはそこまで難しいんでしょうか？
問題点（兼見出し）
GIMPが難しい理由ですが、大きく分けて2つあると思っています。
もちろん私がプロジェクトの方向性を変えることはできませんが、UIやUXの改善アイデアを共有することくらいはできるかなと。というわけでちょっと書いてみます。
1. UI・UXが整っていない
1-1. ナビゲーション
デフォルトのUIだと、ブラシを調整するのにウインドウ内をあちこち行ったり来たりしなければなりません。基本的に、次のツールの場所を探す回数が多ければ多いほど、脳の決断疲れを引き起こしやすくなってしまいます。
幸い、この問題はダイアログの配置を変えることで解決できます。
配置は簡単にカスタマイズできますが、こういったものは例外です。ここからは、私ならどうUIをリメイクするかについてお話ししたいと思います。
1-2. 描画色/背景色
GIMPには6種類のカラーピッカー（GIMP、CMYK、水彩色、色相環、パレット、スケール）があります。
ここで疑問に思うのが以下の点。
- よくある四角形のカラーピッカーの名前がなぜか『GIMP』
- CMYKのパネルにスペクトラムがない（代わりになぜかRGBモードにしか対応しないHEX値の欄がある）
もしこのUIを作り変えるとしたら、こんな感じでしょうか。
- スペクトラム（GIMP）と値（スケール）を1つのパネル内にまとめる
- こうすれば、まずざっくりと色を選んで後から細かい値を指定するといったことができるようになります。
- 同じパネルにドロップダウンリストを追加する
- CMYKセレクターを追加すれば、ソフトプルーフをONの状態で1と同じ操作ができるようになります。
- 更にHSV/LChセレクターを統合することで『CMYK』と『スケール』の2パネルが不要になり、色選びの作業フローがシンプルになります。
- 『色相環』と『水彩色』にも同じように変更
- 『パレット』は『パレットエディター』の編集機能なし版といった感じで被っているので削除
あとこういった部分も変更したいです。
- 『GIMP』をパネルの特徴に合った名前に変える（『Square』など）
- ダイアログの名称を統一する（※日本語版では問題ありません）
- 『Add a Tab』リスト内では『Colors』ですが、ツールチップでは『FG/BG Color』になっています。
- デフォルトのタブの見出し設定を『現在の状態』から『アイコン』に変える
- ツール内の選択項目が変わるたびに見出しの見た目も変わるので、初心者だと迷ってしまいます。
1-3. パレット
この上下のテキストボックスはちょっと厄介かもしれません。
『filter（タグで検索）』はもちろん表示項目を絞り込むために存在するわけですが、デフォルトの状態だと何のオプションも表示されません。絞り込むには、まず最低でも1つ、何かしらのタグが付いたパレットが必要です。そこでダイアログ下部にオプション＝タグを追加するための『enter tags（タグを付ける）』があるわけです。
目的は違うけれど見た目は同じなボックスが2つあって、使い方については何のヒントもない。これはかなり混乱します。
（※日本語UIは目的語がはっきりしているのでそこまででもないですが）
ユーザーがリスト関連の編集機能をすんなりと見つけられるように、この2つはまとめるべきではないかと思いました。
1つのテキストボックスに2つの機能を与えるため、『Filter（フィルター）』ボタンと『Edit（編集）』ボタンを加えます。
- 『Filter』をクリックすると、選択可能な絞り込みオプションが表示されます。
- 選択可能なオプションが何もない場合は、追加方法についての説明が表示されます。
- 『Edit』ボタンで、テキストボックスの機能をタグ編集モードと絞り込みモードに切り替えられます。
- こうすることで、タグ編集も同じテキストボックス内でできるようになります。
編集ボタン：テキストボックスの機能をタグ編集モードと絞り込みモードに切り替えられます
あるいは『Tag』カラムから直接タグを編集できるようにするのもアリかもしれません。
1-4. デフォルトで選べるパレットの種類
デフォルトラインナップの正直な感想ですが…
ほとんどのパレットは選定基準もなく適当に追加されたのではと思ってしまいます。
もちろん中には実用的なものもあります。『Web』はデザイナーやデベロッパーに嬉しいですし。
ただ他のパレット、特に下の2つは画像処理ソフト的に謎なチョイスです。
- EGA：1980年代の技術系カラースキーム
- China：寒色系パレット（中国の色といえば赤なのに）
もし私がデフォルトラインナップを選ぶとしたら
- 今ある中から数点だけ残します
- その上で、役に立つ色を追加します
- IT関係のユーザー向けに『GIMP Color Palettes』にリストアップされているものを
- グラフィック関係のユーザー向けに、下の画像の色合いをカバーできるパレットを（具体例を挙げられなくて恐縮ですが）
+
1-5. ブラシ
同じように、ブラシダイアログにも『Filter・Editモード』切り替えUIを加えます。更に、
- 『間隔』スライダーを削除
- もしくは『サイズ』スライダーに変更します（『間隔』はサイズ調整に比べて高度かつ需要の少ない機能なので）
1-6. レイヤー
一見いい感じに見えるレイヤーダイアログですが…
なぜだかプルダウンメニューのこれがWindows Updateのアイコンにしか見えません。
あと、ウィルバー君は何故こんなことに…？
真面目に説明すると、このアイコンはレイヤーのモードを『標準』または『レガシー』に切り替えるためのものです。
ただ私には、レガシーモードが標準を退いて7年が経った今、この切り替えスイッチが目立つ必要性が感じられません。
互換性を保つのなら、切り替え機能は残しつつ後方（メニュー内）に追いやってしまうのはどうでしょう。
ここでは仮に『モードグループ』と呼ぶことにします。
1-7. メニュー
（この項は長くて複雑なので、動画からいくつか抜粋するにとどめました。全項目はこちらよりご覧いただけます。）1-7-1. リスト内のアイコン：ファイル＆編集
リスト内のアイコンには重要な機能を探しやすくする効果があります。
とはいえ、『スクリーンショット』（から画像を生成する）がそんなに使われる機能だとは考えにくいです。
むしろ全体の統一感を台無しにしているような…？
『○○で塗りつぶす』についても同じことが言えます。
（これらはよく使われる機能かもしれませんが、選択色やパターンの頻繁な変更がむしろ頭を疲れさせてしまう気がするので、ここでは削除します）
1-7-2. カテゴリー違いと重複項目：選択＆表示
選択
- 『Float』の中身はコピー・貼り付けに関する操作ばかりなので、『編集』に移動します。
表示
- 『ナビゲーションウインドウ』は『ウィンドウ > ドッキング可能なダイアログ』に同じものがあるので削除します。
- 代わりに、『画像 > ガイド』をこちらへ移動させます。
1-7-3. 標準用語の使用：画像＆レイヤー
- 画像処理における『Encoding（エンコーディング）』を指す用語として一般的に使われるのは『Color Depth（ビット数、ビット深度）』のようです。
- 『Stack（重なり）』についても、『Layer Stack（レイヤーの重なり）』や『Layer Order（レイヤーの順序）』の方がより分かりやすいように思います。
補足：『Stack（スタック）』はレイヤーの重なりや順序に近い概念を表すエンジニア用語として広く使われているそうです。
1-7-4. リストの順序：ウィンドウ＆ヘルプ
ウィンドウ
『ドッキング可能なダイアログ』内の項目は、似たような機能ごとにまとめると探しやすくなるかもしれません。
ヘルプ
リンク先が同じページの項目が多すぎて戸惑います…。ここは『ユーザーマニュアル』1つで十分なのでは。
そして『GIMP Online』も対象の読者層ごとにグループ分けすればもっと整理されそうです。
1枚目（After）上から：情報、レイヤー操作、フォントと色、描画、編集、アセットと作業履歴、ユーティリティ
2枚目（After）上から：全体向け、デベロッパー向け
不明確なプロジェクトの方向性とターゲット層の不在
改善案を出すうち、GIMP最大の問題は『ターゲット層の不在』にあるのではと考えるようになりました。「敵を知り、己を知れば、百戦して殆うからず」と言われるように、まず誰を対象とするかをはっきりさせることが、プロジェクトの向かう方向性や目標、そして優先順位を決めるのに不可欠なはずです。
公式サイトをざっくり要約すると、GIMPは『みんなのための』ツールだそうですが、個人的にはそうではないと感じています。
「業界標準や親しまれているやり方は気にしない」と言い切っていますし。
FOSS開発者とデザイナー（典型的Adobeユーザー）間の常識のミスマッチというやつかもしれません…。
もちろん、標準的なやり方がいつも最高のやり方だとは限りません。
でも、実体のない書類という概念が新しかった時代に、何が世界全体へのコンピューター技術の普及を後押ししたのかを考えてみるとどうでしょう？
大抵の場合、標準にはそうなるだけの理由があるものです。
他のやり方を提案したいのなら、自分視点からではなく相手の立場に立って提案しないと難しい。
だからこそ、その「相手」とは誰なのかが分からなくてはいけない。
まとめ
そういった決め事もGIMP開発チーム次第ではありますが、それでも考えを発信するのは大事だと思っています。
開発に参加する手もあるし、フィードバックしたり、チュートリアル動画を作ったり、自分でWikiを作ってしまうのもあり。
そうすれば、有用だけど難しすぎるこのツールの学習曲線も多少は緩やかになるのかなぁと思います。
もしかしたら、そうして発信した『より良いやり方』が開発者の注目を集めるかもしれないですし。
出典
- GIMP: https://www.gimp.org/
- EGA palette:
- National colors: https://en.wikipedia.org/wiki/National_colours
- GIMP Color Palettes: https://robert-96.github.io/gimp-color-palettes/
- Watercolor palette: https://charlenecollinsfreeman.com/blog-montauk/2017/3/6/my-color-sketchbook
- “Introducing Lisa” ad: https://guidebookgallery.org/ads/magazines/lisa/introducinglisa