三階ラボ

iPad Idea Sheet ver.01

kanwa — Wed, 03 Mar 2010 08:40:46 +0000

iPhone Idea Sheet [to 三階ラボ]に続いて、iPad Idea Sheetを作りました。
原寸大のシート(横向き)、70%縮小シート(縦向き)、50%縮小シート(横向き)の計3種類あります。画面内で縦横8分割しやすいように小さなドットが入っています。取り急ぎ作ってみただけなので、使いやすいかどうかまだ分かりませんｗ。こういう方が使いやすいのに！という要望があれば可能な限り対応したいと思います。

まだ発売されてないiPad (執筆時：3月3日)。
このシートで皆さんもアイデア(妄想?)を膨らませてみてください！僕らと同じようにｗ。

iPhone Idea Sheet ver.01

kanwa — Wed, 03 Mar 2010 08:35:01 +0000

どんなものでもデザインを始める際には、まずはペンで紙にアイデアスケッチをするように心がけています。実際に仕事になるかどうかは置いといて、喫茶店などでアイデアを膨らませているわけです。
無地の紙でもいいのですが、デザインするものが決まっている場合は大まかな枠があるとイメージしやすいので、いろいろなテンプレートを作って、そこにスケッチをしています。
個人的な好みとしてノートは使わず、バラのA4サイズの紙をクリアファイルに入れて持ち歩いています。一枚だけ人に渡したり、たくさん机に広げて俯瞰できるし、ある程度時間が経ったらまとめてスキャナーで取り込んでデジタルデータにするのにとても便利なので。

というわけで、ここ1年くらい使ってたiPhone用のアイデアシートのPDFをアップします。
原寸大シートと75%に縮小したシートの計4種類あるので、お好みのシートを印刷してみてください！画面内に40pxごとのドットが入っています。

壁紙カレンダー 2010 ver.02

kanwa — Sat, 06 Feb 2010 08:51:33 +0000

カレンダーだというのに2月にアップしちゃってすみませんｗ。
月曜日始まりではなく、日曜日始まりのカレンダーが欲しいという声がいくつかありましたので、2月から12月までのカレンダーを追加しました。
また新たに1920×1080サイズの壁紙カレンダーも追加しましたので、フルHDサイズのモニターを使用している方もご利用ください。明るいグレーと暗いグレーの2色あります。自分で背景画像をいじりたい人向けに透過PNGも用意しています。

1024 x 768
1280 x 768
1280 x 800
1280 x 960
1280 x 1024
1440 x 900
1600 x 1200
1680 x 1050
1920 x 1080 追加!!
1920 x 1200
2560 x 1600

この壁紙は日付がマス目状になっているので、いろんな予定日の枠内にフォルダやファイルを置くと便利かもしれませんね！僕は締め切り日にその仕事のフォルダのエイリアスを置いたりしています。

月曜始まりと日曜始まりの2パターンがありますので、好みに合わせてダウンロードしてください。

さてさて、透過PNGも合わせると全部で572枚の画像を書き出すはめに(泣)。

流石にこれを毎年作るのは大変・・・。
MacなりWinなりのアプリにすれば、好きな壁紙の上に重ねて表示できるだろうし、解像度を気にしなくても平気だし、月曜始まりや日曜始まりもチェックボックスで変更できるし、
月が変われば自動で切り替えてくれるだろうし、iCalの予定を表示したり、まさにいいことずくめ！！(そして僕も毎年作らなくていいので、楽できる！！)
僕にはアプリを作るスキルは全くないですが、素材は提供できると思うので、どなたか作ってくれませんか？お願いします！！

iPad Illustration ver.02

onthehead — Sat, 30 Jan 2010 07:05:00 +0000

こんにちは。開発者さんラブな宮澤です。
開発者さんが iPad App のダミーを作りやすいように iPad Illustration を作ったのですが、みなさん Illustrator CS4 を持ってるとは限らないですよね。。。気がまわらずすいません。
ということで、Illustrator CS4形式以外にも、Illustrator CS2、Photoshop CS4、PNG、JPEG形式のファイルを用意しました。

そんでもって、Illustrator形式のファイルは、既存の iPhone App をシミュレートできるようにしてみました。
ほんでもって、縦表示バージョンと横表示バージョンも用意しました。また、下部の映りこみをやめ、ドロップシャドウに変更しました。

以下にファイル構成をまとめておきました。何か変なところがありましたらご指摘ください！

_images/

Illustratorファイルに配置した画像が入ってます。

iPad-screen-vertical.png: 縦表示モード用のiPad Appスクリーン画像です。この画像を差し替えると縦表示モード用のIllustratorファイルに反映されます。
iPad-screen-horizontal.png: 横表示モード用のiPad Appスクリーン画像です。この画像を差し替えると横表示モード用のIllustratorファイルに反映されます。
iPhone-screen-vertical.png: 縦表示モード用のiPhone Appスクリーン画像です。この画像を差し替えると縦表示モード用のIllustratorファイルに反映されます。
iPhone-screen-horizontal.png: 横表示モード用のiPhone Appスクリーン画像です。この画像を差し替えると横表示モード用のIllustratorファイルに反映されます。
iPad-statusbar-vertical.png: 縦表示モード用のステータスバー画像です。
iPad-statusbar-horizontal.png: 横表示モード用のステータスバー画像です。

Illustrator-CS4/

Illustrator CS4形式のファイルです。アピアランスを使いまくっているのでベジェ曲線が少ないのが売りです（笑）拡大縮小する場合は気をつけてください。
「iPhone screen x1」「iPhone screen x2」「iPad screen」というレイヤーの表示を切り替えて使用してください。

iPad-Illustration-v02-vertical-CS4.ai: 縦表示モード用のIllustratorファイルです。
iPad-Illustration-v02-horizontal-CS4.ai: 横表示モード用のIllustratorファイルです。

Illustrator-CS2/

Illustrator CS2形式で書き出し直したファイルです。アピアランスが分解されてしまってますが、問題は無いと思います。
「iPhone screen x1」「iPhone screen x2」「iPad screen」というレイヤーの表示を切り替えて使用してください。

iPad-Illustration-v02-vertical-CS2.ai: 縦表示モード用のIllustratorファイルです。
iPad-Illustration-v02-horizontal-CS2.ai: 横表示モード用のIllustratorファイルです。

Photoshop-CS4/

Photoshop CS4形式のファイルです。近いバージョンPhotoshopなら開けると思います。
スクリーン部分のサイズはW768px x H1024px または W1024px x H768px で画像解像度は 132dpi です。「Screen image (xxxxxx)」というレイヤーを差し替えて使用してください。

iPad-Illustration-v02-vertical.psd: 縦表示モード用のIllustratorファイルです。
iPad-Illustration-v02-horizontal.psd: 横表示モードのPhotoshopファイルです。

PNG/

汎用性の高いPNG形式のファイルです。
スクリーン部分のサイズはW768px x H1024px または W1024px x H768px で画像解像度は 72dpi です。透明部分にスクリーン画像をはめ込んでください。

iPad-Illustration-v02-vertical.png: 縦表示モードのPNGファイルです。
iPad-Illustration-v02-horizontal.png: 横表示モードのPNGファイルです。

JPEG/

汎用性の高いJPEG形式のファイルです。
スクリーン部分のサイズはW768px x H1024px または W1024px x H768px で画像解像度は 72dpi です。白い部分にスクリーン画像をはめ込んでください。

iPad-Illustration-v02-vertical.jpg: 縦表示モードのJPEGファイルです。
iPad-Illustration-v02-horizontal.jpg: 横表示モードのJPEGファイルです。

iPad Illustration ver.01

onthehead — Thu, 28 Jan 2010 14:42:07 +0000

iPad用 Apps の企画・デザインするとき用に、iPad [to Apple] のIllustratorデータをチョロっと作ってみました。
実機が無いので雑な作りですが、大体のサイズはあっているハズです。

Illustrator CS4のアピアランス機能を使いまくっているので、拡大／縮小するときは気をつけてください。同梱してある screen-image.png を編集するか、Illustrator上の「Screen image」レイヤーに W768 x H1024（132ppi）の画像を配置するればスクリーンにぴったりハマるように作ってあります。

あーーーー。iPadアプリケーションのデザインしたーーーーい。

卓上カレンダー 2010

kanwa — Mon, 18 Jan 2010 06:14:47 +0000

去年から事務所で使っているオリジナル卓上カレンダーがあるのですが、せっかくなので2010年版をPDFにしました。僕らがあちこちで探しても気に入るカレンダーがない！というので作り始めたので、万人に使いやすいかどうかは不明です(笑)。
葉書サイズの用紙を用意して、ご自分で印刷してみてください。またスリーフローの事務所にお越しいただいた方には印刷したカレンダーをプレゼントしています！来年は製品として販売してみたいなあ。

写真では無印良品の「アクリルスタンドフレームハガキサイズ用」の中に印刷したカレンダーを入れていますが、ハガキが入るケースなら何でもいいと思います。
スリーフローで大量購入した際はアスクルが安かったです。

Link

ちなみにこのスタンドフレームは縦置きだけじゃなくて、横置きもできる工夫がされています！もっとそこをアピールしてもいいと思うんですけどね〜。もったいない！

壁紙カレンダー 2010

kanwa — Tue, 12 Jan 2010 11:29:52 +0000

新年明けましておめでとうございます。本年も三階ラボとスリーフローをよろしくお願いいたします。

もう1月に入って一週間以上経っちゃいましたが、壁紙カレンダーを作りました。
去年はスリーフローのサイトで配ってたんですが、今年からは内容も増やして三階ラボで配布します。
2010年1月から2010年12月まで、各月明るいグレーと暗いグレーの2色あります。
壁紙サイズは10種ありますので、ご自分のPCの解像度に合わせてご利用ください。

1024 x 768
1280 x 768
1280 x 800
1280 x 960
1280 x 1024
1440 x 900
1600 x 1200
1680 x 1050
1920 x 1200
2560 x 1600

また、自分で背景画像をいじりたい人向けに透過PNGも用意しましたので、ご自由に使ってみてください。サンプルのPhotoshopファイルも入っています。

この壁紙は日付がマス目状になっているので、こんな感じでいろんな予定日の枠内にフォルダやファイルを置くと便利かもしれませんね！僕は締め切り日にその仕事のフォルダのエイリアスを置いたりしています。

すべての壁紙サイズをまとめて入れているので、ちょっと重いです。すみません。もしミスがあれば、ご報告いただけると幸いです〜！

入力機器カスタマイズ07 - 総集編

onthehead — Tue, 12 Jan 2010 10:53:54 +0000

キーボード中央配置計画 [to 三階ラボ] を書いてから約2年ちょい。
2009年末現在、自分好みにカスタマイズ＆レイアウトした入力機器や周辺機器をまとめてみます。

NEC-DS MultiSync LCD3090WQXi [to Amazon]
30インチのメインモニタ。作業はこのモニタでします。
H-IPSパネルなので視野角や色表現は問題ないですが、若干ギラつきます。Adobe RGB に対応してますが、sRGB モードで使用しています。少々値が張りますが、この広さと快適さはプライスレス。机と同じ模様のデスクトップピクチャを設定しています。
NANAO FlexScan L997 [to Amazon]
21インチのサブモニタ。原稿書類や参考資料を表示してます。
90°回転させ、縦にして使用しています。目に優しく色もキレイなのでとても気に入ってます。予備でもう一台買っておこうかと思うくらい素晴らしい機種です。ただし、動画再生には向いてません。
WACOM Cintiq 12WX [to Amazon]
kanwa氏からお借りしている12インチの液晶ペンタブレットです。
アゴが邪魔なので上下反転させ、反円柱の木材を脚に挟んで角度調整してあります。裏にはUSBハブを隠しておいてあります。
メールソフト、チャットソフト、ツイッターなどのコミュニケーションツールを常時表示しています。必要があればペンタブレットして使用します。
Apple Wireless Keyboard [to Amazon]
メインキーボードです。コンパクトで無駄が少なく、非常にシンプルなキーボードです。
KeyRemap4MacBook を使って、左右のcommandキーに英数とかなを割り当て [to 三階ラボ] てあります。黒く塗装 [to 三階ラボ] しましたが、いままで使っていた Logicool diNovo Edge [to Amazon] とキーの位置が微妙に違い誤打ちが増えてしまったので、メンディング素材のシールに印刷し、カッティングマシンで切り抜いて貼付けてます。慣れてきたら剥がす予定。
サンワサプライ NT-M5UH2BK [to Amazon]
拡張キーを登録したハブ付きテンキーパッドです。
ControllerMate [to 三階ラボ] や Quickeys [to 三階ラボ] を使って、iTunes の操作や音声出力先を変更するアクションを登録してます。
USBハブが付いているので、デジカメやワイヤレスマウス、iPod などを手元で接続できるので便利です。キートップはメインキーボードと同様、シールを貼付けてあります。
サンワサプライ NT-M5UBK [to Amazon]
テンキー入力用のテンキーパッドです。
全く同じ機種を2台以上接続すると、抜き差しした際、ControllerMate [to 三階ラボ] が読み込む順番を間違えることがあるので、念のためハブ無しのものを購入しました。数字の配列を左右反転させてあります。
KORG nanoKEY [to Amazon]
音楽用MIDIキーボードです。
音楽用として使用しているわけではなく、指定したフォルダを開いたり、アプリに関係なく使用するアクションを Quickeys [to 三階ラボ] で登録してあります。まだまだ試行錯誤中です。
Logicool VX Revolution [to Amazon]
多ボタンのワイヤレスマウスです。
SteerMouse でカスタマイズ [to 三階ラボ] してます。
3Dconnexion SpaceNavigator SE [to Amazon]
Google Earth や 3Dソフトをコントロールできる3Dマウスです。
全く使いこなせてないのでインテリア状態です。今後、ControllerMate [to 三階ラボ] でカスタマイズする予定です。

といった構成になりました。
この構成にしてから暫く経ち、環境や操作にも慣れてきましたし、不具合も特にないのですこぶる快適です。モニタ作業領域の中央にメインキーボードを置くことができ、無駄な手の移動も減りました。

作業環境というのはとても重要な「インターフェイス」だと思ってます。（デザイン力は別ですが！）

会社支給のMacだったり、1台を複数人で共有したりする人にはなかなか難しいことかもしれませんが、作業環境を快適にすることはとても大事なことだと思いますので、是非試してみてください！

以上、（年が開けてしまいましたが）作業環境オタクによる「2009年版入力機器のカスタマイズシリーズ」でした。ああ、需要少なそう。

入力機器カスタマイズ06 - マウス編

onthehead — Wed, 16 Dec 2009 09:11:01 +0000

プログラマーさんや物書きさんにはあまり関係ないことかと思いますが、マウスをメインに作業する方であれば、カスタマイズしないなんてもったいない！ということで、入力機器カスタマイズ01 - ユーティリティ編 [to 三階ラボ] の SteerMouse を使って、多ボタンマウスをカスタマイズします。

マウス選び

マウスはいろいろな種類のものが発売されています。人それぞれ好みが違うと思いますが、一応ぼくのこだわっているポイントを。

ワイヤレスであること
ケーブルがマウス操作の邪魔をすることを避けるためです。
多ボタンであること
いろいろなキーやショートカットを割り当てたいので、スクロールホイールを含め、最低10ボタンは欲しいです。
大きすぎないこと
ここが一番好みのわかれるところだと思いますが、ボクは「指」だけでクイックイッと操作するので、マウスが手のひらに触れない程度の大きさのものを選びます。
バッテリーが内蔵されていないこと
マウスの電池が切れてしまうと、何も作業ができなくなってしまいます。乾電池タイプのマウスであれば、予備のeneloopを入れ替えるだけですぐに使用することがでます。

以上のことを踏まえると、Logicool の VX-Revolution [to Amazon] しか選択肢が無い状況です…. やたらと壊れやすいマウス [to 三階ラボ] ですが〜。Magic Mouse [to Amazon] も専用カスタマイズソフト次第でイイ感じになりそうですが、まだ作業用マウスとしては個人的にキビしいです。

ああ、オリジナルマウスを作りたいです。

キーボードの右側にあるキーを割り当てる

マウスを使った作業をする際、一番ネックなのが、キーボードの右側にあるキーを押すことです。頻繁に使用するreturnとdeleteを押すたびに、マウスから右手を離してメインキーボードまで移動させるのは効率が悪いです。
そこで、マウスのボタンにreturnとdeleteを割り振ってしまいます。これは本当にオススメです。

また、左手テンキー [to 三階ラボ] を導入した場合、左手だけで数値とtabキーを入力することになってしまい、入力するテンポが悪くなってしまいます。なのでマウスにtabキーを割り振ってしまいます。こうしておけば、左手 → 右手、左手 → 右手とスタタンッと数値入力ができるようになります。

カスタマイズのポイント

マウスをカスタマイズするときのポイントは、ある程度フィックスした設定をベースにし、アプリケーション毎に使いやすく上書きカスタマイズすることです。

ぼくの場合（VX-Revolution）、ウェブ / ファイルブラウザ、テキストエディタ、その他グラフィック系アプリケーションで、ベースとなる設定を使い分けています。

ウェブ / ファイルブラウザのベース設定

左ボタン → 左クリック
右ボタン → 新しいタブで開く
ホイールボタン → ソースを表示
ホイール手前ボタン → tabキー
上下スクロール → 上下スクロール
左右チルト → タブ切り替え
親指奥ボタン → deleteキー
親指手前ボタン → returnキー
ズームスライダーイン / アウト → テキスト拡大 / 縮小

テキストエディタのベース設定

左ボタン → 左クリック
右ボタン → コンテクストメニュー
ホイールボタン → テキストの検索 / 置換
ホイール手前ボタン → tabキー
上下スクロール → 上下スクロール
左右チルト → テキストポインタの左右移動
親指奥ボタン → deleteキー
親指手前ボタン → returnキー
ズームスライダーイン / アウト → テキスト拡大 / 縮小 or インデント増 / 減

グラフィック系アプリケーションのベース設定

左ボタン → 左クリック
右ボタン → Quickeys のショートカットグループ
ホイールボタン → アプリケーション毎の設定
ホイール手前ボタン → tabキー
上下スクロール → オブジェクトや選択範囲の上下移動
左右チルト → オブジェクトや選択範囲の左右移動
親指奥ボタン → deleteキー
親指手前ボタン → returnキー
ズームスライダーイン / アウト → 表示拡大 / 縮小

といった設定をベースにしています。
※拡大/縮小やタブ切り替えなどはソフト毎にショートカットキーが違いますので、ソフト毎に該当するショートカットキーを設定しておきます。

頻繁に使う機能や挙動が違ってきますので、使うアプリケーションのクセに合わせて微調整をするとよいです。そんなに設定を変えちゃうと覚えきれない！という方は、１つのデフォルトの設定だけでも十分快適になると思います。

時間ができたら、各アプリケーションの変態設定例をまとめてみたいと思います。

入力機器カスタマイズ05 - テンキーパッド編

onthehead — Fri, 11 Dec 2009 09:29:11 +0000

入力機器カスタマイズ01 - ユーティリティ編 [to 三階ラボ]
入力機器カスタマイズ02 - ControllerMate [to 三階ラボ]
を元に、テンキーパッドをカスタマイズしていきます。

左手テンキー

Illustrator や Photoshop、Flash などでデザイン作業をしていると、何かと数値入力することが多くなります。数値を入力する度にマウスから右手を離すのが億劫になります。そこで、外付けテンキーパッドを導入し、それをメインキーボードの左側に置くようにします。右手でマウスを持ったまま、左手でテンキーを操作することになります。
ただ、右手で打ち慣れたテンキーを左手で操作するとなると、テンキーの配列に違和感がでてきます。一般的に、人さし指で1、親指で0を押すと思いますが、それを左手で操作すると、小指か薬指で1と0を押すことになってしまいます。その違和感を解決するために、テンキーの数字配列を「左右反転」させてしまいます。かなりイレギュラーな方法ですが、すでにカラダが慣れてしまった動きに対応させるには一番いい方法だと思います。

左手用テンキーパッドのこだわり

外付けテンキーパッドを購入する際、

Windows用なのかMac用なのか
00キーの有無

が重要なポイントになります。

もし Winodws用を購入した場合は、「NumLock問題の解決」という問題（笑）を回避しなければなりません。ほとんどの Winodws用テンキーパッドは「NumLock問題」を回避するために、キー信号を送る前に「Keyboard Num Lock and Clear」という信号を送っています。例えば、テンキーパッドの2を押した場合、「clear」→「2」の順で Mac側にキー信号を送ります。この勝手に送られる「Keyboard Num Lock and Clear」という信号がクセもので、ダイアログが表示されている状態でテンキーパッドからファイル名を入力しようとすると、勝手に「キャンセル」してしまうことがあるのです。

この問題を回避するために、ControllerMate を使って、「Keyboard Num Lock and Clear」というキー信号を無効化してあげます。そうすれば、MacでもWinodws用テンキーパッドを快適に使うことができます。

次に、00キーの有無です。表計算用という名目で、テンキーパッドに00キーが配置されているものがありますが、これはただ単に、0キー信号を2回送っているだけです。例えば0キーにaという文字入力キーを割り当てると、00キーを押したとき、「aa」と入力されます。0キーと00キーが同期してしまうのです。ControllerMate を使って自由にカスタマイズするにはとても邪魔になってしまうので、できれば00キーが無いテンキーパッドを選ぶと良いです。
ぼくが使っているのはサンワサプライのNT-M5UBK [to Amazon] とNT-M5UH2BK [to Amazon] というテンキーパッドです。Mac用ですし00キーがないのでほぼ理想のテンキーパッドです。おすすめ。

テンキーパッドをカスタマイズ

入力機器カスタマイズ02 - ControllerMate [to 三階ラボ] のキーをリマップする方法 [to 三階ラボ] で変更してもいいのですが、テンキーパッドは変更する箇所が多いので、視覚的に把握しやすいようにキーに機能を追加する [to 三階ラボ] 方法でキーの変更を行います。まず、該当記事のタイトルのキーを無効にする [to 三階ラボ] 方法で、テンキーパッド上のキー信号を全て殺します。

次にキーに機能を追加する [to 三階ラボ] 方法で、テンキーパッドのキー一つ一つに目的のキー信号を割り当てていきます。
こんな感じ。

ぼくの場合、テンキーパッドを２つ用意し、内側のテンキーパッドは数値入力関係のキーを、外側のテンキーパッドには音楽＆サウンドの操作とIllustrator用の数値入力キーを割り当てています。こんな感じ。

YMDキー: ファイル名やフォルダ名に使用する今日の日付（例えば091130）を入力するApplescriptを登録してあります。
iTunes操作キー: iTunesの曲送りや再生/一時停止、ボリューム調整ができるようにしています。どんなソフトが前面に来てても操作できるように、Bowtie [to Official] やEverplay [to SNARB] というソフトを使ってグローバルショートカットを設定しています。

サウンド切り替えキー: 音声出力先を「ライン出力」か「デジタル出力」に変更できるようにしています。変更には Quickeysを使用しています。

Illustrator用キー: グラデーションの90°回転、数値のマイナス化させるキーを割り当ててあります。変更には Quickeysを使用しています。

その他のキー: 作業毎に頻繁に使用するアクションを適宜割り当てています。

こういった感じに、頻繁に使用するキーをテンキーに割り当てておくと作業が楽になるはずです。