キッドピクスについての話


お絵描きアプリ キッドピクス のWeb移植版が公開されたと聞いて、早速使ってみました。
キッドピクスの再現がブラウザ(JavaScript)でここまでできるのか!という感動とともにとても懐かしい気持ちになりました。

https://kidpix.app/

私にとって、キッドピクスの使用がほぼコンピューターに触り始めた初期の体験であるので、このソフトを通してコンピューター操作に学んだことが多かったように思います。 今回は今の視点でキッドピクスを見て個人的に振りかえって思うことや知ったこと書いてみます。

使いやすく楽しかった思い出

キッドピクスを使い始めたときについては親が買ってくれて渡された記憶しかなく、マニュアルを読んだ記憶はありません。
パッケージにマニュアルが同梱されていたかもしれないですが、マニュアルの印刷物を見たリ読んだりした覚えはなく、黄色いパッケージとステッカーが付いていたことの記憶だけあります、マニュアルの文章をちゃんと理解できる年齢で触っていなかったような気もしますが。 目の前にあるツールを触って動かしてみて、使い方を学びました。はじめは、鉛筆や文字スタンプなどの描画ツールを選んだりしたときのサウンドがおもしろくて、いろいろ触っていたように思います。

Web移植版 キッドピクス

やっぱり衝撃的なのは特殊ブラシや「ミキサー」で、キッドピクスならではの絵が描けるのはこの機能があるからではないかと思います。
ただの線を描くだけでなくランダムなエフェクトがついていたり、記号や絵文字が描ける。これらも触って見るだけでも楽しかった。後年プリクラに落書きができるようになったとき、キラキラペンだやもこもこしたペンを見て、このキッドピクスの特殊ブラシを思い出していたりしました。
「ミキサー」は、今お絵かきソフトを作ろうとしたとして思いつく機能だろうか、とも思います。描いた絵にかなり大きな破壊的なエフェクトをかけることができます。エフェクトを描けるときのカーソルの顔(なぞのおじさんの顔)もおもしろい。自分の描いた絵にグリッジを与えるような感覚で描くよりも、その変化が楽しい。

わたしは正直あまり絵を描くことはしていませんでした。スタンプで街のようなもの絵を作って特殊ブラシで描き込み、ミキサーでぶち壊し、さらに消しゴムツールのエフェクト付きの消去を楽しむという遊び方をしていました。クリエイト&デストロイ。砂場で城を作って壊すまでが遊び、のような。描くよりもツールを使った遊び要素が強かったと思います。

壊しても1つ前の状態には「やり直しおじさん」のボタンから「Oh, No!」「Opps!」のサウンド付きで戻れるのもおもしろくて、ミキサーや消去を一瞬で「やり直す」ことも楽しんでいました。
今から思うと「やり直しおじさん」という Undo のアイコンもすごいなと思います。現状のスタンダードだと Undo は「矢印(左向き)」のモチーフが主流です。「やり直しおじさん」の顔の表情には「しまった感」があって、子どもには「やり直し」が伝わりやすかったように思います。

The Undo Guyこと、やり直しおじさん

絵を描くよりもスタンプでつくることが多かったので、スタンプの絵柄にはとても親しみがあります。今回の移植版だとキッドピクスの2以降と思われるスタンプも多く移植されていますが、(昔の) Mac っぽいスタンプが懐かしく感じますし、キッドピクスのイメージにしっくりくる気がします。

キッドピクスの開発裏話

スタンプについて、Mac っぽい絵のスタンプとキッドピクス2以降スタンプの違いは何だろうと調べてみました。
キッドピクスのスタンプに使用されているシンボルは、Apple の絵文字フォント Cairo を転用しているらしい。なるほど、それで犬(dogcow)のスタンプがいるのか。Mac の体験とキッドピクスの体験が私の中で統一されているのは、この共通イメージのおかげかもしれません。
 Cairo は、Mac のデザイナーだった、スーザン・ケアがデザインしたアイコンのフォントです。Sad Mac をデザインした方のアイコンを絵のスタンプとして使っていたと思うと、それだけでもおもしろい、価値のある体験だったなと思います。

キッドピクスの開発裏話は、オリジナルの開発者本人のクレイグ・ヒックマンの記事がとても興味深い。

http://red-green-blue.com/kid-pix-the-early-years

簡単な要約抜粋:

  • 子どもが Mac Paint をうまく使いこなせなかったことが、キッドピクスを開発するきっかけだった。
  • 当時の Mac Paint はすべてプルダウンメニューにツールが格納されており、マウスの動かし方の失敗により思った操作ができないことがフラストレーションだった(プルダウンメニューはテキストが読めないと分からない)。
  • 使いやすいものにするため、キッドピクスはツールやツールのオプションをすべて画面内で表示するUIになった。
  • 一般的な描画ツールだけでなく、驚きと見た目にも変わった(surprising and visually unusual)ツールを追加する(=特殊ペン)
  • 「The Undo Guy(やり直しおじさん)」は重要な機能なのでプルダウンメニューではなくツールと同様のボタンになった(アイコンは、これも Cairo のアイコンをもとに作った模様)
  • 子どもは壊すことも楽しむことから、爆弾での消去機能をつけた

ツールを違和感なく選んで使うことができ、楽しく絵を描いたり壊したりすることを楽しめる。 記事を読んで、昔使っていたソフトウエアを使っていた体験とそのコンセプトが一致して、爽快な気分にもなりました。

 Mac Paint とキッドピクスの比較についてはMac Plus のオンラインエミュレーターでどちらも触って見られるので、比べてみるとおもしろいです。
たしかに圧倒的にプルダウンメニューよりもツールがボタンで並んでいる方が使いやすい。
PCE.js Mac Plus emulator running Mac OS System 7

また余談ですが、英語では「Goodies」となっているプルダウンメニューが日本語版では「おどうぐばこ」になっていました。
「Goodies」はUIモードの切り替えやサウンドの録音・再生やスタンプの編集のオプションを表示します。もともとの「Goodies」は「おまけ」のような意味でオプションに近いことのようですが、「おどうぐばこ」にした日本語訳はツールのひとつと理解できていい訳だなあと思います。

コンセプトと体験の一致がこんなにすんなりつながって腹落ちする体験もあまりないと個人的には思います。実現したいことの方向性を持ってリソースを活用し、プロダクトを作っていくプロセスも知ることができました。UIデザイナーとしてこういうことをやってみたい、という成功を垣間見たような気がします。

そして、やはり、「The Undo Guy(やり直しおじさん)」はすごい発明だと思います。

参考:
Kid Pix – The Early Years
WikiPedia: Kid Pix

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Imanishi Emi

UIデザイングループリード。
制作会社でプロモーションサイトや広告のデザイン制作、受託開発会社にてサービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。
実際にインターフェースを試したりフィクションの世界のUIにヒントをもらいながら、心地よく使えるデザインを考えるのが好き。