- PuTTYアイコンは、1990年代末〜2000年代初頭に作られた古いスタイルを保ったまま、画面サイズやプラットフォーム要件の変化に合わせて何度も再レンダリングされてきた
- 初期バージョンはMSVCアイコンエディタでピクセル単位に描かれた32×32画像で、Windows推奨の16色パレットやモノクロアイコンといった当時の制約を反映していた
- 2台のコンピュータと稲妻、文書、帽子、鍵、スパナといった要素は、各ツールの役割を区別しつつもPuTTY製品群らしく見せるための仕掛けだった
- 2007年ごろ、Windowsの48×48アイコン表示によって32×32の拡大品質が悪化すると、48×48・32×32・16×16とモノクロ版をスクリプトで自動生成するようになった
- その後、大きいサイズでのビットマップスクリプトの限界を補うためにSVG生成スクリプトを作ったが、小さいアイコンでは従来のスクリプトのほうが良い結果を出した
PuTTYアイコンの出発点
- 2025年3月、PuTTYのWindows実行ファイルアイコンである「ロゴ」の起源と変遷を尋ねるメールが、この整理のきっかけになった
- 現在のアイコンデザインの骨格は1990年代末から2000年代初頭に作られ、その後も大きなスタイル変更なく維持されている
- 時間がたつにつれてアイコンは複数の制約の下で再レンダリングされる必要があり、それはグラフィックデザインの問題であると同時に技術的な問題でもあった
手でピクセルを打っていた時代
- 初期には複数サイズのアイコンが必要になるとは予想しておらず、自動化なしでMSVCアイコンエディタ上で直接描いていた
- Windows GUIプログラムはアイコンがないと識別しづらいため、PuTTYの初期から専用アイコンが必要だった
-
PuTTY本体
- 現存する最も古いPuTTYアイコンは1999年初頭に使われていたバージョンで、プロジェクト開始時点である1996年夏までさかのぼるソース管理履歴は残っていない
- アイコンは32×32ピクセルで、原色とグレー系から成る制限されたパレットを使っていた
- 1990年代半ばにはtruecolourではないディスプレイが一般的で、Windowsアイコンには固定の16色パレットを使うことが推奨されていた
- GUI全体のアイコンで同じ16個のパレット項目を再利用し、画面の色資源をあまり消費しないようにする方式だった
- 当時の推奨に従ってモノクロ版も提供された
- Win95以降、モノクロディスプレイで実際に見た記憶はないが、Windows 3.1で32ビットプログラムの実行を可能にするWin32sと関係していた可能性がある
- デザインは1990年代によくあるCRTモニタとシステムボックス型のコンピュータ2台を稲妻でつないだものだった
- 稲妻は電気的な通信を示唆している
- 黄色い稲妻と青い画面を使った理由は明確には残っていない
- 青い画面はWindowsのBlue Screen of Deathを意味しているわけではなく、一般的なPuTTY利用では片方だけがWindowsで、どちらもクラッシュ状態ではないためである
-
PSCPとPSFTP
- 1999年、あるコントリビュータがSCP実装を送ってきたことでPSCPが生まれ、専用アイコンも描かれた
- PSCPはコマンドライン引数なしでは使えないため、GUIから起動したりStart Menuで識別したりする実用上の必要性はあまり大きくなかった
- PSCPアイコンはPuTTYアイコンの片方のコンピュータを文書に置き換え、残るコンピュータと文書を稲妻で結んだ形になっている
- その後、ファイル転送ツールのPSFTPも同じアイコンを再利用した
- PSFTPはコマンドライン引数なしで起動しても対話型プロンプトで接続先を入力できるため、同じアイコンをPSCPより実用的に活用していた
- 2つのツールが同じアイコンを使うとExplorer上で区別に注意が必要になるが、違いを視覚的に表す簡単な方法は見つからなかった
-
Pageant
- PageantはSSH agentで、当初は秘密工作員の顔をアイコンに描こうとしていた
- 顔の表現は失敗したが、うまく描けたつばの広い帽子をPuTTYのコンピュータの上に載せた形がそのまま残った
- 同じコンピュータデザインを再利用することで製品群としての視覚的一体感が出るうえ、Pageantのagentが人間ではなくコンピュータ化されたagentである点にも合っていた
- Pageantの初期アイコンにはモノクロ版がなく、代わりにSystem Trayに入れる16×16の小さいアイコンが必要だった
- Windowsが32×32アイコンを縮小すると品質が良くなかったため、小サイズでは帽子の帯やモニタの輪郭を手作業でアンチエイリアスしていた
- 輪郭線は背景と区別できるよう黒のままにしていた
-
PuTTYgen
- PuTTYgenのアイコンは、コンピュータ、稲妻、鍵を組み合わせた形である
- 鍵は暗号鍵を生成・処理するツールであることを示す、軽い視覚的ダジャレになっている
- PuTTYgenはネットワーク通信を行わないので稲妻は機能的には不正確だが、PuTTY製品群のツールであるという視覚的一貫性を与えるために入っている
- PSCPと違ってコンピュータとオブジェクトの配置方向が逆なので、2つのアイコンは区別しやすくなっている
-
設定ダイアログ
- PuTTY設定ダイアログのtaskbar項目は標準のWindowsウィンドウアイコンを使っており、見た目が良くなかった
- 本体アイコンをそのまま再利用せず、設定・変更を表す大きなスパナを重ねたアイコンを描いた
- このアイコンには再びモノクロ版が含まれており、既存のモノクロ版付きアイコンを修正したためかもしれない
スクリプトで描き直されたアイコン
- 2007年ごろ、32×32アイコンが見栄えしないという不満が出てきた
- ディスプレイが大型化し、Windowsが48×48アイコン表示を標準にするようになると、32×32しか持たないアプリケーションアイコンは拡大表示されるようになった
- 48は32の倍数ではないため、Windowsはアイコンを均等でなく引き伸ばし、その結果はさらに悪くなった
- 新しいアイコンセットをすべて手で描き直す代わりに、各アイコン構成要素をプログラムで描く生成スクリプトを書いた
- このスクリプトで、すべてのツールについて48×48、32×32、16×16アイコンを自動生成した
- 特定のアイコンだけに小サイズ版やモノクロ版があるという不一致が解消された
- すべてのアイコンがすべてのバージョンを持つようになった
- 最も難しかったのは16×16アイコンだった
- Pageantで手作業適用していたアンチエイリアスの判断をコードで再現する必要があった
- 同じ方式をすべてのグラフィック構成要素に適用しなければならなかった
- スクリプトの結果は元の手描きと完全に同一ではない
- PuTTYアイコンは数ピクセル違う程度の近い結果だった
- Pageantアイコンは帽子の帯のアンチエイリアスだけでなく、コンピュータの大きさも変わった
- スクリプトはモノクロアイコンも生成できるよう作られた
- 2007年にはモノクロディスプレイでWindowsを使う例はさらにまれだったと思われる
- 自動化のおかげで48ピクセルのモノクロアイコンまで作れるようになった
ptermとX11アイコン
- 2002年、PuTTYコードのかなりの部分がLinuxへ移植され、Linux用GUI版PuTTYとX11端末エミュレータのptermが作られた
- X11プログラムはウィンドウ属性にアイコンビットマップを設定できる
- ウィンドウマネージャはそれを最小化アイコン、taskbar項目、ウィンドウフレームのアイコンなどとして使える
- 2002年当時は、GTK 1がウィンドウアイコン設定をサポートしていないと理解しており、複数のビットマップファイル形式を用意するのも面倒だったため、アイコンは作らなかった
- 生成スクリプトができた後は複数形式への出力が容易になり、GTK 1でもアイコン属性を設定できることが分かった
- ptermアイコンはネットワーク通信をしないため、稲妻なしでコンピュータ1台だけを大きく描いた形になっている
- pterm設定ダイアログには、PuTTY設定アイコンと同じスパナのオーバーレイを再利用した
- 2021年にはWindowsで動作するptermも作れるようになり、このアイコンがWindows版ptermにも使われるようになった
インストーラアイコンと色処理
- 生成スクリプトはtrue colourアイコンも出力できるため、従来の16色パレットに縛られなくなった
- PuTTYインストーラのアイコンには、開いた段ボール箱とコンピュータへ向かって飛び出す稲妻が描かれている
- 「PuTTYが箱からユーザーのマシンへ飛び出してくる」というイメージを意図している
- 段ボール箱には茶色が必要だったが、茶色は従来のWindows 16色アイコンパレットにはなかった
- true-colourアイコンでは実際の茶色を使うことができた
- それでも下位互換性のために16色アイコンは維持した
- 濃い赤
#800000 を黒 #000000、濃い黄 #808000、黄 #ffff00 とそれぞれ50:50で混ぜ、茶色に近い3つの色を作った
- true-colourでは平均色を使い、16色版では2つのパレット色のピクセルを交互に配置するハーフトーンで表現した
SVGで再構成したアイコンセット
- 既存のアイコンスクリプトは32×32と48×48ではうまく動作し、16×16への縮小も悪くないが、さらに大きくすると品質が良くない
- 失敗に終わったMac移植の試みの中で、MacOS dockに128×128アイコンが必要になったが、既存スクリプトのそのサイズ出力は満足のいくものではなかった
- Mac移植自体は事実上断念されたが、完全に拡張可能なアイコンはほかの用途にも有用かもしれない
- GUIアイコン以外の文脈でも使える
- TシャツやノートPCステッカーのような用途も考えられる
- 2つ目のアイコン生成スクリプトは、既存スクリプトの発想をまねしつつ、ビットマップではなくSVGファイルを出力する
- 現在のSVG版は、PuTTY、PuTTY設定、pterm、pterm設定、PSCP、Pageant、PuTTYgen、インストーラの8つのアイコンで構成されている
- 小さいアイコンではSVGはアンチエイリアスの判断ができないため、従来スクリプトのほうが良いレンダリングになる
- 大きいアイコン、とくにtrue colourの大きなビットマップが必要な場合は、SVGをベースにレンダリングする方法が推奨される
古いスタイルを維持する理由
- PuTTYアイコンセットの現状は、1990年代スタイルを保ったまま複数のレンダリング方式を追加した形である
- 1990年代スタイル全体に反対し、新しいデザインセットを提案した人もいたが、採用したいと思えるほど気に入る案はなかった
- 1990年代スタイルは、PuTTYを安心できるほど古風に見せる要素として受け止められている
- 大規模な再設計が実際に受け入れられる可能性は低く、プロジェクトの存続期間中は現在のアイコン、あるいはほぼ同じ形が維持されると見込まれている
1件のコメント
Hacker Newsの意見
稲妻が黄色なのは変だというくだりで少し引っかかったが、自分には黄色が「当然」正しい色のように感じられた。
画像検索してみても、黄色い稲妻は電気を表す最も一般的なシンボルで、標準的な黒と黄色の危険標識も一緒に思い浮かぶ。
この表現が歴史的にどれほど古く、どこに由来するのかは分からないが、コミックやカートゥーンでは昔から広く使われていたように思う。
英国の感電死の危険標識も黒地ではなく、黄色地に黒だ: https://www.hse.gov.uk/electricity/nearelectric.htm#signs
ただし稲妻の画像検索をしてみると、ロイヤルブルーの上に青緑、紫、赤など、選択肢はかなり見つかる。
おそらく90年代後半にはこうした色選びはごく自然で、Windowsのデザイン慣習に従ったものだったため、当時はあまり深く考えていなかったことを忘れているのだろう。
黄色は昔から視認性の高い色として好まれており、産業機器の外装でも、感電の危険を言語に依存せず明確に伝えるピクトグラムとしてよく見えたはずだ。
結局「いつもそうしてきたから」という慣性で、黄色い稲妻が維持されたように思う。
PuTTYに惹かれる理由の一つがまさにそこだ。PuTTYのように見えるアプリケーションには、どこか安心感がある。
古い見た目が変わらないことによる安定感を与えるのか、OS標準の要素を使っているからより一貫して見えるのかは分からない。
逆に「モダン」な美学のアプリは、Material Design、丸い角、遷移効果、低いコントラスト、大きな余白が増えるほど、不信感と懐疑心が強くなる。
心理分析をする資格はないが、PuTTY的なデザインを好む層がいることを見ると、こうした解釈は珍しくないのだろう。
そういう見た目だからといって必ず速い保証はなく、別のところで時間を浪費していたり、その見た目を精巧にまねているだけだったりするかもしれないが、昔のNotepadのように即座に反応する本物である可能性もある。
あの「単にテキストコントロールにファイルを入れて、
\rのない\nなど気にしない」Notepadが恋しい。自分ではないもののふりをせず、正確に自分の役割だけを果たすプログラムだった。昔、アセンブリでNotepadを再実装したものを見た気がするが、ファイルアクセスをテキストコントロールにつなぐ接着コードが画面の半分ほどで、
ctrl+hメニューとダイアログまであったかもしれない。Pythonが得意とする接着コードに似ているが、純粋なアセンブリで、ファイルアクセスDLLと最小限の標準コントロール一式以外には依存関係がなかった。
今ではすべてが大きな「モダンWindows」ウィジェットを使うか、さらに悪いことにElectronを使っている。
それはボタンかもしれないし、テキストボックスかもしれないし、ただの四角形かもしれない。
「望むアイコンを描けるまで待っていたら、Pageantはそもそもリリースされないだろうと気づいた」という文が響いた。
手を付けてみたいプロジェクトのかなり多くが、こうした自分で作り出した障害物で止まってしまう。
個人的には、リポジトリ名や最上位フォルダ名を決めるところで詰まるのが典型だ。
ハッカー文化ではプロジェクト管理が常に無駄のように軽視されるが、プロジェクトを前に進める方法を見つけるのは価値ある役割だ。
リポジトリ、変数、構造体名のようなものを、なぜかうまく決められないほうだ。
結局、最初に作ろうとしていたものよりずっと単純だが、より筋の通ったロゴになった。
画面をなぜ青に選んだのか覚えていないと言っていたが、Win 3.xやWin95のアイコンで画面を表現するとき、青は標準的な色だったので、単にその慣習に従ったのだと思う。
EDIT.COMとMS-DOSのインストーラも青い背景を使っていた。実際、青、つまりCGAカラー1番は多くのツールで背景色として非常に人気があった。
Turbo PascalやTurbo Cのようなものでは、青い背景に白い文字がよくある配色テーマで、Borland dBaseは複数の画面で青と青緑の背景を混ぜて使っていた。
当時使える色が限られていたため、青は目に優しい数少ない背景色の一つだった。
Windows 3.1、95、98などでも、コンピュータを表すアイコンの画面色として青を使っていた記憶がある。
「ネットワーク コンピューター」のようにコンピュータが2台あるアイコンでは、片方の画面が青で、もう片方は青緑だった。
同じアイコンではないか確認するために拡大して見なければならなかった。
懐かしい。2000年ごろ、PuTTYをフォークして「RedBrick PuTTy」というバージョンを作り、redbrick.dcu.ieへ一発でSSH接続するボタンを入れた
redbrick.dcu.ieはDublin City University Networking Societyのターミナルサーバーで、当時自分がシステム管理者だったのかウェブマスターだったのかは覚えていない
ただ、ロゴを手で編集して赤いレンガを入れたことは覚えている
この画像でかろうじて見える: https://wiki.redbrick.dcu.ie/images/b/b8/Putty_configuration...
この小さくてくだらないフォークのおかげで、TelnetではなくSSHの利用率が約5%から事実上100%になった
こういうことを可能にするライセンスを使ってくれたSimonに感謝
「各アイコン画像のすべての構成要素をプログラムで描画するコードを書いた」というくだりは、Simonの問題への取り組み方を非常によく示す例だ
2000年代にSimonとかなり多くの時間を過ごし、さまざまな話題について多くを学べたが、こういうやり方は本当に彼らしいと感じる
当時Windowsではデフォルトのアイコン表示が32×32ではなく48×48になり、MacOSはDockに128×128アイコンを求めていた、という部分を思い出す
そのころWindowsからMac OS Xへ移った、最も表面的でありながら同時に最も強烈な理由の一つが、まさに128×128アイコンだった
FinderやDockでアプリの入口になるアイコンが、ずっと魅力的で、本能的により美しく見えた
特にWindowsアプリのアイコンは、Macアプリより使う色が少ないことが多かった
もちろん乗り換えた理由はいくつもあったが、初めてMacのデスクトップを見たとき、アイコンは十分に強い印象を与え、もっと深く見てみようと思わせた
まともなアイコンを作ることに気を配る人がほとんどいないように見えた
デフォルトサイズが48×48に変わったのにアイコンを更新せず、拡大のせいでぼやけているものもあったし、すべてのサイズを入れてはいるものの、大きいサイズでだけ見栄えのする画像を縮小したものもあった
そうすると一般的なアイコンサイズでは、すべてのディテールがつぶれてめちゃくちゃになった
デスクトップやタスクバーで醜いアイコンを見るのが嫌で、自分でカスタムアイコンを作り、リソースエディタで実行ファイル内のアイコンを差し替えたりしていた
ビットマップからSVGへ移ると、何か失われるものがある
ビットマップの粗い粒状感には独特の魅力がある
単に1:1で移して良い結果を期待することはできない。しかも実際には1:1でもなく、SVGでは輪郭線がずっと細くなっている
低解像度の絵では、想像力が隙間を埋めてくれる
解像度が上がるほど、求められる品質も上がる。ベクターアートは定義上無限解像度だから
「Agent」の帽子アイコンは、Windows向けで最も人気があったUsenetソフトウェアだと思うForté Agentに着想を得たのではないかと思う
とてもよく似たモチーフを使っていた: https://archive.org/details/forte-agent-1.6
こうした歴史を作った人から直接読めるのは良い
現代版である2014年版にも同じ位置にフィルム・ノワール風の探偵がいて、アプリケーションアイコンはいまだに帽子をかぶった女性だ: https://youtu.be/h-_UNm_gycU?t=94
これを文書化した公式リンクは知らないが、https://www.google.com/search?q=spy+vs+spy&udm=2で画像検索してみると、この帽子の着想元になった画像をたくさん見られる