セブンカフェ・ユーザインターフェイスの提案

Twitterで流れてきた、セブンイレブンに新しく導入されたらしいセルフコーヒーサービスのセブンカフェのインターフェイスがひどい というのが面白かったので即席で代替案を作ってみた。Illustratorでわわっと描いただけだから配置のバランスとかフォントとか適当だけど。

ちなみに件のマシンとその惨状については下記リンク参照。

• #セブンカフェの様子

たとえばこんなん。

セブンイレブン台東1丁目店　#セブンカフェの様子 http://t.co/62kd6ddOtQ” pic.twitter.com/gfgKa1CjOl

— ippei ogiwara (@iogi) July 10, 2013

私は「文句言われる前に貼っとけ」的な日本の張り紙文化大嫌いなんだけど、まぁこれはしょうがないよね。というか面白いね。

元のインターフェイスもわかりづらいけど素人の張り紙・テプラべたべたもそれ以上に醜い。

こういうの出てくると「気取ったデザインは無能、結局ゴチャゴチャ全部書いた方が良い」みたいな意見が出てくるんだけどそれは違うんでないかいと言いたい、ちょっと変えるだけでも良くなるもんだよ。

ただし実機は見てなくて写真だけ見て書いたからもしかしたらなんか勘違いしてるかも。

改善案

で、その作ってみたヤツと問題点＆改善点。

どこが押せるのかがわかりづらい

この点問題に上がってなかったようにみえるが、これ結構大きい気がする。最近コンピュータのUIで人気のフラットデザインと共通するのだがあんまりにものっぺらぼうだとどこが押せるのか、そもそも押せる箇所が存在するのかがわかりづらいという。いちおう物理的なボタンみたいだから実機を前にすればわかるのかもしれないけど。ってことで押せるところを光らせてみた。

準備中とかで無効のときはボタンそのものが光らない、というおまけも。

R / L ってなんなのよ

まぁ結局そこだよな。普通に考えたら Right と Left を想像するだろうし。すぐ下にRegular / LargeってキャプションがあるのにそのRとLを取ってボタンにするのは何も意味がないと言って良い。それより画がいいんじゃない？という。こういうところはピクトグラムが便利だよね。意匠的にもスマートだし。

英語わかりづらい

言いたいことはわかる。けど日本語はむずかしいんだよ。日本語読めない人もいるんだって。ってことでこれを全部「あったか〜い」とか「普通サイズ」とかに変えるのには反対。だけど、やっぱアイコンと英単語だけだとそれはそれで困る層もいるだろうから日本語も下に書いとく（個人的にはなくてもいいんだけど）。ちょっと添えとくだけで結構効果あると思う。ホットとアイスは普通の人は色で判断できるかな。上にキャプションもあるから全く見失うことはないはず。

値段が書いてない

値段はまぁ店舗とか時期によって変わることもあるだろうから機械に直接書くのは難しいと思う。ってことでこれはそばにパネルでも立てとけばいいんじゃない？ それでいいと思う。むしろレジに料金表置いて、このマシンには「まずレジで注文して下さい」とかだけ書いとけばいいじゃない？

って感じ。前のイメージを壊さずに野暮ったくならない範囲でやってみた。

要点は挙げた通りだが、実際の押すボタンそのものに必要な情報（サイズ・温度・品切れか）全てが入っているってのもポイント。

ってことで駆け足でしたがおいらのセブンカフェUI改善案。

以上。

OS Xにおけるツールバーアイコンの使い分け

Mountain Lion現在、いやその数年前から、Macのツールバーには大きく分けて2種類のタイプが混在している。ひとつはOS Xの当初から用いられていた32px四方のフルカラーアイコン（以下、カラータイプ）、もう1つは比較的新しい、ボタンの枠内に納められた単色のグリフタイプ（以下、グリフタイプ）である。

この2種類のツールバーアイコン、なんとなく「グリフタイプの方が新しくてモダンな感じ」とか「カラータイプの方がかわいい」とかではなく、明確に性質に違いがあり、そのためソフトェアによって適するタイプが異なる。

この2つの違いについて書いてる人みたことないので、それをあらためて私なりにまとめてみたい。

これから書くことは、Appleがそういったガイドラインが定めているわけではないことに留意して頂きたい。また、UIデザイナーの間でそういった暗黙の共通認識があるわけでもない。あくまで私の思想や経験から帰着した結論である。

read more

Vim Replacement Icon

代替アイコン作ったよー。ここにきてVimですよ、Vim。

まぁご存知のように根っからのCotEditor愛用者なのですが、それでもEmacsかVimかと訊かれたらVimかなぁ、Terminal上でテキストファイル触らないといけないときはVim使うし。なんてね、まぁ単純にVimのアイコン触りたかった。

今回は基本的な意匠は全く替えないというルールの元に作成しました。独自のアレンジは一切せずに質感だけをモダンでリッチに。

個人的な思想から言うと、アプリケーションアイコンは具象的なモチーフで成り立っているべきだと思っているので、こういう文字だけのアイコンは好きではないのですが（某adobeシリーズとか某MS Officeとか）、これは代替アイコンであり、かつ作成動機が「今のアイコンをリッチにしよう」なのでオリジナルに倣ってます。

作成ツールは相変わらず終始Illustratorで。Illustrator CS3で作るアイコンもこれが最後、次回はCS6だな。

基本的にはベースはMacVimなのですが、せっかくマルチプラットホームなVimなので、Windows用のicoファイルも作ってみたり、それ以外にもUnix系でも自前で作れるようにPNGファイルも同梱してあります。最大サイズは1024px。

ダウンロードはdeviantARTから。どうぞよろしく。

• Vim Icon by ~1024jp -deviantArt

CleanArchiver Replacement Icon

勝手にアイコンシリーズ、第4弾。今回はCleanArchiverというフリーの圧縮ソフトです。ファイルの圧縮はMacの場合OSレベルですでに装備されているのですが、このOS内蔵のアーカイバだと .DS_Store などの不過視設定ファイルなども含まれてしまうため、Windowsなどの別のプラットフォームの人に渡すのにはあまり美しくありません。そこでCleanArchiver。これは、それらの不要な設定ファイルを自動的に除いてファイルを固めてくれるのです。

こいつをDockに置いておいて、圧縮したいときDockのアイコンにポイっとドラッグ&ドロップすれば、たちまちクリーンな圧縮がされるというわけです。圧縮形式も選べるため、zipじゃなくてtar.gzの方がオシャレ！などという場合も思いのまま。かなり便利なソフトウェアです。

なかなか小憎く、痒い所に手が届くこのCleanArchiverですが、その性質上Dockに置いて使うことになり、しかしアイコンがDockに並べるにはちょっとテイストが合わないかな、ということで以前から気になってた。それにサイズが128pxまでしかないし。

ってことで、実は半年くらい前からすでにこのCleanArchiverのカスタムアイコンを作る計画はあったのですが、当時使っていたMacBook+Illustrator CS3 + Mac OS X Lion の組み合わせがあまりにも重たくてアイコン制作に耐えないため、ラフだけ作って放置してありました。Macも新しくなったし、BathyScapheも一段落したし、そろそろかなと思い作業再開。

できあがりはこんなんです。

一応オリジナルアイコンを出発点として、色はオレンジ・水色・若干の黄色、モチーフは紙束にそれを纏めるモノ、にしたのですが、なんだかだいぶかけ離れてしまった。

最初は輪ゴムじゃなくてバインダークリップでやろうと思っていたのですが、クリップで留めるにはある程度の紙に薄さが必要で、でもアプリケーションアイコン的にボリュームを出したい、という理由で悩んだけれど却下。紙が薄いとエディタっぽくなってしまうんでそれは避けたかった。紙モチーフってやりがちだし。エディットするものじゃなくて固めるものなのでボリュームが欲しかった。

また、相変わらず相当拡大させないとわからないところでアレですが、輪ゴムの質感は結構気に入ってます。

サイズは最大1024px、16pxは今回別パース。あとウィンドウの背景画像も差し替え版が同梱されています。背景画像はpdfなのでHiDPI対応、ただし差し替える際は元のPNGデータに上書きはされないので、それは名前を変えるなり外に出すなりしてどっかに避けてください。まぁ、その辺はREADMEを。

いつも通りdeviantArtで公開してます。アイコンのダウンロードはこちらから。

• CleanArchiver Icon by ~1024jp

ちなみに現在CleanArchiverのサイトのトップページからダウンロードできるv2.3.1はLionだとうまいこと動かないので 10.7以上の人は Downloads ページにある 3.0α6 を使うと良い。

BathyScaphe 2.1

愛用しているMac用2ちゃんねるブラウザ BathyScapheの v2.1 (.Invador) がリリースされました。

Sneaky（いわゆるβ版）から既に使われていたのでご存知の方もいらっしゃるかもしれませんが、本バージョンから、私が以前作成したBathyScapheのカスタムアイコンが正式採用された他、合わせてツールバーボタンやage/sageアイコンなどのソフトウェア内で使われるUI画像も新たに作成させていただきました。

BathyScapheはMac専用の2ちゃんねるブラウザの中でも、Macらしい優れたインターフェイスと軽快な使い心地を約束できる優良なソフトウェアです。既にご利用の皆様のアップデートはもちろん、新たに2ちゃんねる専用ブラウザを導入する方にもオススメします。

1つ前のバージョンであるv2.0.5からv2.1での主な変更点は以下になります。

OS X Lion のサポート

このバージョンの BathyScaphe では、OS X Lion との互換性が向上しているだけでなく、フルスクリーン表示、再開、オートセーブとバージョン、マルチタッチジェスチャなどの OS X Lion の新機能にも対応しています。

洗練された外観

アプリケーションのアイコン、ツールバーのデザイン、その他のグラフィックがすべて見直され、より最近の Mac OS X にマッチする美しい外観を提供します。これにより、より気持ちよく２ちゃんねるをブラウズすることができ、Mac を使用していることへの満足感もさらに向上します。さらに、内蔵のテーマが 3 種類に増えました。

その他の新機能

• ツールバーに「スレッドタイトル検索」及び「新規スレッド」ボタンが追加可能になり、これらの機能を呼び出しやすくなりました。
• 「次の未読スレッドを開く」動作が、新着スレッドも含めるかどうかを選べるようになり、さらに使いやすくなりました。
• このバージョンの BathyScaphe は完全に 64 ビットに対応しています。
• 上記以外の新機能および変更点について詳しくは、次の Web ページを参照してください： BathyScaphe 2.1 .Invader：変更点のリスト

ダウンロードは公式サイトからどうぞ。

せっかくなので、以下紹介がてらちょっと詳しく。

read more

BookpediaほかPediasシリーズ用カスタムソースアイコン

App Store

Bookpediaという蔵書管理ソフトのためのカスタム画像データを作りました。

Mac用の蔵書管理ソフトというとこのBookpedia以外にもDelicious Library App Store, Books, Booxter App Store辺りが有名ですが、色々使ってみた結果、今ではこのBookpediaに落ち着いています。このBookpediaについて書きたいことは色々あるのですが、今日はそれをすっ飛ばして、単純に自作の紹介。

このBookpedia、ソフトウェアの機能自体は素晴らしいのですが見た目がイマイチ垢抜けない。とはいえDelicious Libraryみたいにコテコテなのも私はあまり好きじゃないので、そっけなさは丁度良いのですが、画像パーツがどうも甘いのが気になっておりました。もー少しピシッしてたらなぁと思ってはいたのですが、そういえばカスタム機能があるじゃないのさ、といそいそ作ってみたのが今回の。Bookpediaはルックスが非常に弄りやすい設計になってます。

　　

今回作ったのはサイドバーに並ぶソースアイコン用の画像です。デフォルトのこのソースアイコンがことよく分からなくて、そもそもスマート・コレクション用のアイコンが紫じゃなくて何故かエメラルドグリーンだし、アイコン毎になんかテイストやサイズも違うし。wolfrosch版はその辺のテイストを揃えて、も少しコッテリしたリッチな感じに仕上げました。

read more

夜フクロウ 公式版アイコン

先日、Twitterクライアント 夜フクロウのリプレースメント・アイコンを作りましたが、それを夜フクロウの作者の@aki_null様に拾って頂き、このたび夜フクロウ公式アイコン版も作らせて頂くことになりました。というか作りました。

v2.52から拙作のアイコンに変更されており、公式サイトでは既にダウンロード可能となっております。AppStoreは数日後、アップデートがAppleに受諾されてからの公開になります。

read more

夜フクロウ Replacement Icon Set

また勝手に代替アイコンを作ったので紹介します。今回は夜フクロウ (YoruFukurou) という、Mac用の日本製Twitterクライアント App Store です。

夜フクロウはオリジナルのアイコンもなかなかかわいらしいのですが、「やっぱりもっとMacっぽくしたい！」と思い作りました。公式サイトにカスタムアイコンのページがあるというのも動機の1つ。BathyScapheもそうでしたが、こういうオープンさがあると「じゃあ私も」って気持ちになってくる。国産でなかなか人気のクライアントみたいなので大きくはばたいて欲しいなと思っています。

で、こんな間の抜けたのが出来上がったわけです。Dockにぽやっと座ってるイメージです。ぽやっとなんかつぶやく、といった感じ。色は直球でわかりやすくTwitterカラー。本体は塩ビのような求肥のようなサラサラしたテクスチャで目とクチバシだけツヤツヤ。

このアイコンは何処まで形を削いでフクロウに見えるか、という引き算方式で作りました。故に「フクロウなのか？これは」といった仕上がりになってますが、まぁ、いちおうギリギリそう見えるかな、と。頭からにょきにょき生えている物はフクロウのいわゆる耳のつもりです。

本当は3Dソフトで作るとちゃんと本物っぽくなるのでしょうが、そんな技術もソフトも残念ながら持ち合わせていないので、いつも通りIllustratorで描いてます。そもそも私には絵の基礎体力がないので、このパースのかかった立体的な曲線線対称型は辛くて辛くて泣きながら作りました。

と，私の技量の限界はありながらも、このアイコンはかなり気に入ってます。自分で書くのもなんだがとってもかわいいぞ。

前の2作BathyScapheとCotEditorは元のアイコンデザインに忠実に作ったのに対し、今回はデザイン的には100%オリジナル。

そうそう、夜フクロウはモードによってDockアイコンが変わるんですよ。普段は寝てて、起動すると目を開ける。そしてサイレント・モードというモードの時は眠そうな半目になります。そこもかわいいんで是非作ってみたかった。ちゃんと3種類作って同胞してあります。

ちなみに、システム上寝てる状態がデフォルトのアイコンなのですが、Cover Flowなんかで拡大した時は起きてるアイコンになるように、ちょっとトリッキーに作ってあります。

きたるLionに備えてデータは1024pxサイズで作ってるので、Lionがリリースされたら1024が入ったのも作ります。今はまだツール的に作れないので512pxが最大サイズです。当初はLionが出てから公開しようと思っていたのですが、来月のいつなのかよく分からないので、もう出しちゃいます。半分β版みたいな感覚です。なので1024サイズを出すまでの間にツッコミがあったら受けられるのは受けます。

毎度ながらdeviantARTに置いています。ページ右側の Download ボタンからダウンロード下さい。

• YoruFukurou Icon by ~1024jp

今回、設定方法はREADMEに書いてあります。

また、このアイコンからライセンスにCreativeCommonsを採用しています。そんな高らかに宣言するほどのアレではないのですが、「どれなの？」と聞かれたときに楽なので。今後も基本的には同じライセンスでいこうと思ってます。

もし、気に入っていただけたら、Dockの上で是非愛でてあげて下さい。

CotEditor Replacement Icon

なんか前回のが楽しかったので、またアイコンを作ってみました。今回は以前から愛用しているCotEditorという国産のプレーンテキストエディタです。このサイトもコーディングはこれ1本でやっております。シンプルなルックスながら十分な機能を備える大変スマートなコーディング用テキストエディタです。

このソフト、昨年生みの親であるnakamuxuさんからusami-kさんという方に開発が引き継がれたのですが、最近引き継ぎ以降初のアップデートがあってv1.1がリリースされました。一時期存続が危ぶまれた愛用エディタが引き続き開発されていくのは大変うれしいので、記念にまたリプレースメントアイコンを作ってみました。このソフトないと困る。

今回も、前回のバチスカと同じく、テーマはオリジナルアイコンのイメージを壊さないで "MaxOSXらしいアプリケーションアイコン" を心がけました。

基本的にkazさんがつくられた、ライトグリーンをキーカラーとしたデザイン展開はとても好きなのであんま変えることもないのですが、Leopard以降の512x512サイズがなかったのと、Cのイタリックが前から若干気になってたもんで。

ペンのモデルは、知ってる人にはバレるだろうから言っておくと、LAMYのSafariっていう学習用万年筆です。今回は海面と違って見本が手元にあったので（と言っても私が持ってるのは最近のモデルなので細部は違いますが）とてもやりやすかったです。オリジナルアイコン通りに鉛筆でも良かったんだけど、コーディング用のエディタってことで、なんとなく機械的な雰囲気のある万年筆を選んでみました。

ついでに、このパックにはツールバー用のアイコンイメージも3つほど同胞されてます。環境設定は、まぁアプリケーションアイコンが変わるのでそれと合わせたもの、あと保存のアイコンはフォルダが古かったのでLeopardっぽいものを新たに描いてみました。ドット絵久しぶり。

こいつらはお好みで、AppIcon.icnsと同じく、アプリケーションのパッケージを開けて、Contents > Resources の中に.tiffファイルを直接突っ込んで下さい。

長々書きましたが、肝心のダウンロード先は以下になります。ちょっとわかりづらいかもしれませんが、右側に Download ってボタンがあります。

• CotEditor Icon by ~1024jp

さて、今回のCotEditorアイコンも含め配布するアイコン関係はdeviantARTっていうカスタマイズ用データの配布サイトに置くことにしました。せっかく作ったのだし、こんな辺境サイトに置くよりも目に触れるだろう、ということで。今後もなんか作った時は基本的にこのBlogにも書きますので。

BathyScaphe Replacement Icon

ものすごくご無沙汰しております。更新していないだけで、このサイトを見捨てたわけではないので一応（何が違うのかと言われるとまた困りますが）。久しぶりにblogなどを書いてみます。

最近、人生何度目かのIllustratorブームが来ており、ふと新しいことがやってみたいな、とアイコン作りなどに手を出してみました。一度やってみたかったんだよねぇ（正確に言えば身内向けに以前作ったことはある）。標的に選ばせて頂いたのは、以前から愛用しているMac用2ちゃんねるブラウザBathyScaphe、それの代替アプリケーションアイコンです。

BathyScapheは、その前身のCocoMonarの頃から使っており、tsawada2氏がBathyScapheプロジェクトを立ち上げた時からずっと見ているのでなんだか勝手に愛着が湧いているのである。思想や作りもMacOSに素直な設計で、無駄があまりなく、とても好みだ。ここ最近は2chを見る頻度も減ってBathyScaphe本スレも追いかけていなかったのだが、ふと気付けばv2.0がリリースされたのを機に公式のアイコンが変わったらしい。最近のMacOSの高解像度アイコンに合わせてなのかなと思うのですが、新しいアイコンが、私のMacの使い方だとどうもDockに座りが悪い。まぁ、言ってしまえば好みの問題なのだが、BathyScapheプロジェクトは以前から有志による代替アイコンの類いを積極的に受けて入れていたので、これを機にじゃあ私も作って一つそこに加えてもらってみようかしらん、と思ったのである。

で、こんなんできました。

512x512です（せっかく高解像度で作ったので等倍でででんっと置いてみましたが、サイトに置くにはでかいなぁ....。

こういうアプリケーションアイコンはほぼ初なのでビギナーズラックと言うことで。もちろん私なりに丹誠は込めさせていただきました。せっかくなのでコッテリとした、いかにもMacネイティブアプリケーションっぽいのを目指してみた。

基本的にはあくまで代替アイコン、ということでBathyScapheをすぐに思い起こさせるようオリジナルアイコンを踏襲する。とくにv1.xのアイコンの要素は全部詰めたつもりである。やはりそこには敬意を払いたい。

個人的なイメージとしては、これから深海調査艇 BathyScapheで2chの海底に潜っていくそのところ、である。夜の星明かりに照らされる静かな海面に、しかし穏やかな波が当たりくだける、みたいのをやりたかった。できてるかな？

作り始める時から大まかなカラーリングと完成像は浮かんでいたのだが、具体的なところは作りながら考えていった。

ワクや盤面なんかは正円で幾何学的なので意外とそれっぽくサクサクすすんだのだが、いざ作り始めて見るといかんせん海が手強い。特に波。動いている透明の液体、しかも夜に星明かり、見本を用意してそれを見ながら描くわけにもいかないし写真を撮ってトレース、ともいかない。なんでこんな図案にしたんだよ、自分。

結局、最初は水が透明なことを意識しすぎていたのだが、アイコンっぽくデフォルメして塊でとらえた方がふさわしいのでは、と気付いてからはやっと事が運んだ。そもそもこの海の配色だってかなりのデフォルメなんだから。あまり得意ではないIllustratorでのグラデーションを色々重ね、最後の最後でやっと納得できるのができた。

あともうひとつ作り始めてから気付いたこと、Illustratorに向かってひたすら描いてた時はきにならなかったのだが、ある程度できて雰囲気を見るためにいざDockに置いてみると、あまりにもまわりと馴染まない。そう、コントラストや大きさなんかの微妙なディティールが他と合っていないのである。おそらくMac系アイコンの不文律みたいなデザインコードがあって、それに合ってない。慌ててコントラストを上げたりエッジを立てたりハッキリクッキリ調整してゆく。512サイズで作ってる時と、実際Dockに置いて72pxくらいで見るのも、ある程度想定はしていたがけっこう乖離がある。奥が深いよアイコン作り。グラデーションを数％弄っては書き出してDockに置き直し、また今度は線を1pxから1.5pxにしよう、なんて地味な作業。

あとは、普段扱うサイズではまず潰れて見えないであろう気泡や対岸の夜景、照準の影まで丁寧に色々書き込んでいく。この辺はもうイースターエッグというか、自己満足である。そしてこれに至る。

最終的には枠がメタルなバージョンも作って2種類。

黒枠でずっと作業していたのだが、いざDockに置くとメタル縁の方がおさまりが良い気がしてきたので、バリエーションを作った（実は結局自分ではメタル縁のを使ってる）。でも黒は黒で味があるし、そういうダーク系で揃えるのが好きな方もいるだろうから。あくまでオリジナルは黒、と言い張ってみる。

完成品はBathyScapheWikiに置かせてもらっているので、興味がある人はそこからダウンロードしてみて下さい。

• カスタムアイコン - BathyScapheWiki

しかし、アイコンを作る作業そのものは新鮮で楽しかった。このたびの作業期間は、ポチポチと夜な夜な作って1週間くらい。また味を占めてなんか作るかもしれない。そしたらまたここに書く。