[3166] プログラマorデザイナからデベロッパーへ

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■データ・デザインの地平［13］
プログラマ or デザイナから、"デベロッパー"へ

薬師寺　聖
< https://bn.dgcr.com/archives/20111205140400.html
>
───────────────────────────────────
RIA開発では、プログラミングとデザインは相互に強く関わり合っています。開発ツールは分業を可能とする方向に進み、作業そのものは分担しやすくなりましたが、アプリケーションのクオリティを高めようとすると、双方の仕事への理解がもとめられます。今回は、RIAデザインについて、思うところを述べてみます。

●ヴィジュアルデザインは、それ単独では成立しない

RIA開発におけるデザインの実作業は、三層構造になっています。すべての基盤となる「企画」の上に、デザインがあります。一層目は機能設計、二層目は操作設計、三層目が表現設計です。おおまかに言えば、一層目と二層目はユーザーインタフェースデザインで、三層目がヴィジュアルデザインです。

これら三層の作業は深く関わり合っています。上の層の作業は、下の層から独立しているのではなく、下の層の上に重なっています。三層目のヴィジュアルデザインは、一層目と二層目の上に構築されるものであり、それ単独では成立しません。上の層を下の層から切り離すことは、非常に困難です。

それは、プログラミングにおいて、技術仕様が固まっていない状態で詳細設計を進めたり、データベース設計が固まっていない状態でデータ処理のコードを記述するのに似ています。下の層が固まっていない状態で、上の層の作業を進めると、トラブルが発生しやすくなります。

また、下の層をないがしろにして、表層の作業だけにこだわっても、クオリティを根本から高められるわけではありません。これは、プログラミングにおいて、名前付けにこだわっても、プログラムの本質的なクオリティが向上するわけではないのと同じです。

もうすこし具体的な説明を試みましょう。たとえば特定のユーザー層をターゲットとするために、1ページに盛り込む要素を最小限に抑えた方が良いUIである、アプリケーションがあるとします。

1ページに多数の機能を盛り込んだプロトタイプに対して、一画面上の色やレイアウトを変えたところで、それは表面を取り繕ったことにしかなりません。

デザインのクオリティを高めるには、搭載機能や手順を見直すか、省略できる機能も手順もないならば、複数のページに分割したり、フリックして次のアイテムを表示するなど他の方法はないかを検討し、一層目と二層目の設計を見直さなければなりません。

大量の塩と砂糖を入れたスープをユーザーが食べられるようにするには、美しい食器に盛り付けてもだめで、調味する前の状態に戻す必要があります。

部品の配置、色やフォントの設定といった、ビジュアルプロパティにかかわる作業を、一層目や二層目の根拠なく行っても、それは表現の調整であって、表現の設計ではなく、もとよりUIデザインではありません。

さらに言うなら、デザインの実作業自体は3層ですが、技術進化を鑑みると、その下の「企画」もデザインに含める方が妥当です。デザインとは、その言葉の本来の意味通り「設計」です。ことRIAデザインに関しては、プランニングとアートディレクションも含む一連の作業を「デザイン」として捉えた方がよいと思います。

もし、プログラマの皆さんが協業相手のデザイナーの作業をかいま見た時、またデザイナー自身が自分に問いかけた時、表面的な美しさだけを取り繕ってお茶を濁してしまっているのではないか？　と感じたなら、その根底にある、一層目と二層目、その下に横たわる企画について言及する必要があります。その姿勢は、必ず、UIのクオリティを高めてくれます。

●自分のゴールデンルールは、ユーザーのそれではない

小規模アプリケーション開発の現場では、すでに開発形態そのものが大きく変わりつつあります。とくに、スマホアプリではその傾向が顕著です。プロデューサー不在でプログラミングとデザインの両方を理解した者同士がコラボレーションし、開発テーマに応じて分担方法を変更したり、両者を一人で兼ねるケースも目立ちます。

プログラマがデザイナを兼務するには、デザイナーの視点をあわせ持つことが必要でしょう。デザイナーには、「自分対それ以外」という感覚をもって、対象を外から眺める傾向があるように思います（全員がそうだというわけではありません）。外から、世界を、社会を、人々を観察するのです。「自分を含む社会」という視点では、自分のゴールデンルールと他者（主にユーザー）のそれを混同してしまうからです。技術力のあるプログラマほど、この視点が必要です。

技術に明るくガジェットに慣れているプログラマは、新しいインタフェースのアプリケーションが目の前に現れても、興味深く感じて触ってみます。使えるようになるまでの過程を楽しむ人すらいます。

もし、対象とするユーザーが同じ技術レベルの人々ならば、プログラマが自分のゴールデンルールとユーザーのそれを同一視しても問題はありません。しかし、ユーザー層によっては、新規なものに触れること自体が苦痛だという人々も、少なからずいます。ユーザーの利便性を考えて新しい技術を使ったところが、新技術の使用それ自体を目的化しているように受け取られる可能性もあります。

「自分ができるからユーザーもできる」とは限りません。「自分が気にならないからユーザーも気にならない」とは限りません。「使うことができる」と「使いやすい」は違いますし、「使いやすい」と「使ってみたい」は違います。さらにいえば、「使ってみたい」と「対価を払ってでも使おうとする」は異なります（これが非常に厄介なのですが）。

外からの視点を持ってデザインにのぞまなければ、ともすれば、頭の中に蜘蛛の巣が張りそうな画面遷移や、ヘルプを読まなければ手順を推測しにくいレイアウト、ナビゲートするメッセージの多用を、スルーしがちになります。

デザインの基本は、機能も、操作も、表現も、すべての層において、引き算です。機能を絞り込み、操作手順の無駄を省き、色の数やフォントの数を絞り込むことから始めなければなりません。

デザイナーを兼務するなら、配色の知識を学んで表現設計に没頭するよりも、まずは、プログラマであることの利点、処理を理解してい強みを生かし、機能設計、操作設計に注力する方がよいと思います。

それらが優れていれば、色なんぞは、白バックにモノトーンでまとめ、彩度の高い色を一つ決めて、その色をポイントとしてあしらう程度でもかまわないのです（むしろ、下手に色を使いすぎると、良い設計が台無しになります）。その方が、配色やフォントに凝っただけのデザインより、何倍も良いデザインになるでしょう。

●問題は職種ではなく、「世界をまなざす感性」

プログラマから見れば、デザインは、ずいぶん性質の異なる職業のように思われるかもしれません。しかし、プログラミングとデザインは決して離れてはいません。その隔たりは微々たるものです。

たとえば、真っ赤な紅葉の一枚を日にかざすとき、美しいその色その形は、三層目の表現設計にあたります。どのタイミングで芽吹き、色付き、枝から切り離され、朽ちていくかという流れは、二層目の操作設計にあたります。

一本の樹木の生涯の機能を決定付けているのが、一層目の機能設計です。そして、その下の層に、紅葉が紅葉として成立するための、世界の企画があります。

筆者は───そして多くの人々が───紅葉を美しいと感じます。その表面の色だけが美しいのでしょうか。それが美しいのは、その企画が、なにか「エレガントな概念」に基いてデザインされ、計算されて、我々の眼前に現れているからではないでしょうか。

デザインとは、この世界を成立させている「エレガントな概念」に基づく着想を、この社会の中に、この日常生活の中に、他者に伝わる信号に変換して出力する仕事だと、筆者は思います。デザインがプログラミングと異なるのは、その変換形式が、計算機に与えるコードではなく、色や形だということです。

「プログラマ」や「デザイナー」という5文字のテキストには、職業上の利便性以上の意味はなく、デザインを理解できるかどうかは、職業名には関係ありません。職務経験にすら関係ありません。それはひとえに、エレガントな概念への気付きを得るための、「世界をまなざす感性」にかかっています。

その概念にもっとも近い位置にあるのは数学（あるいは物理学や、メタ哲学ではない哲学）であり、そう考えれば、むしろ、デザイナーよりも、プログラマの方が、気付きやすい近い位置にいるはずです。

この世界のあらゆる情報を、より深く、強く、受けとめる感性を持てば、職業に関わらず、デザインを分かるようになります。その感性は、物理的に地理上の広い範囲の多くの現象を五感で受信するという経験ではなく、時間的に遠い範囲を見渡して深く概念を突き詰める経験によって磨かれるようです（もちろん前者は、職務スキルやコミュニケーションスキルを磨く上で非常に重要な経験です）。

ただし、それは自ずと磨かれるものであって、自分で意図して磨こうとすると、逆に擦り減ってしまうので、厄介ですが。

デザインを分かるうえでは、この感性が磨かれるような生活をおくることの方が、セオリーに関する知識を蓄積することよりも、表現手法を磨くことよりも、はるかに重要です。

そんな悠長な、そんなことのために人生の多大な時間を費やしてしまい、デザインが形にならないまま一生を終えてしまったら元も子もないではないか？と思われるかもしれません。が、それはそれでいいのではないでしょうか。世界に対する見方が変わらないまま、場数だけこなしても、器用さが身に付くだけで、逆にデザインから遠ざかってしまいますから。

この世界は既にデザインされており、我々の最小限の生のために追加した方がいいものなど、実のところ、さほど多くはないでしょうから。

プログラミングとデザインの両方の最新情報をチェックしたり、人生の物理的な時間制限のあるなかで一人で二人分の作業をこなすことは不可能です。それ以前に、プログラミング環境とデザイン環境の両方を揃えた日には、グレードアップ貧乏になってしまうかもしれません。

しかし、世界をまなざす感性が磨かれたなら、一人二役で開発する際に、自分自身の中での対話が可能になります。

これからは、プログラマやデザイナーではなく、一人の「デベロッパー」を名乗るべき時代なのかもしれません。「プログラミングに軸足を置くデベロッパー」か「デザインに軸足を置くデベロッパー」のいずれかです。

そのどちらに軸足を置くにせよ、今、デベロッパーは、世界に対する感度を高め、デザインという言葉の本来の意味を問いただす地点に立っています。

◇WindowsPhone Holiday Apps コンテスト

年末年始をテーマにした Windows Phoneアプリのコンテストです。マーケットプレイス登録済みのアプリは、特別加点があるそうです。締切間近です。
< http://msdn.microsoft.com/ja-jp/windowsphone/hh580342
>

※虐待の連鎖と制御を描いた「Don't Cry, Mama」、脳神経倫理と発達の凹凸を描いた「Change The Brain」、脳機能をテーマとする2曲入りアルバム「Change The Brain」を、着うたフル、Amazon MP3 ほかで発売中です。筆者サイトでは、HTML 5 のAudio要素を使った試聴を展開しています。
< http://lyric.seindesign.net/info/ChangeTheBrain.htm
>

※MSDN Code Recipe「逆引きサンプルコード」
< http://msdn.microsoft.com/ja-jp/ff363212#WinPh
>
ブログ「イメージ AndAlso ロジック」
< http://blogs.itmedia.co.jp/seindesign/
>
に、サンプル解説記事を書いています。Windows Phone アプリケーション開発にご利用ください。

【薬師寺聖／個人事業所セイザインデザイン】
個人事業所　< http://www.seindesign.net/
>
ブログ　< http://blogs.itmedia.co.jp/seindesign/
>
PROJECT KySS　< http://www.projectkyss.net/
>
< infosei@seindesign.net >

ヴィジュアル、サウンド、テキスト、コードを扱う、四国の個人事業主。科学技術や医療・福祉分野のXML案件の企画デザインに実績があり、コラボレーションユニットPROJECT KySS名義で、XML、RIA、.NETに関する書籍や記事、多数。さいきんは、Windows Phone 対応 Silverlight アプリケーション開発に注力している。
Microsoft MVP for Development Platforms
- Client App Dev (Oct 2003-Sep 2012)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［298］Androidタブレット編
アプリを入れてみる

古籏一浩
< https://bn.dgcr.com/archives/20111205140300.html
>
───────────────────────────────────
Androidタブレット。標準のままではあまり面白くありません。アプリケーションを入れた方が、いろいろ楽しめるというものです。iPhone/iPadだったら、iTunes Storeで手軽にアプリを買うことができます。結構な数のアプリを入れて楽しんだ経験もあります。Mac OS XであればApp Storeで手軽にアプリを買えます。

AndroidでもAndroidマーケットという、似たような仕組みがあります。Androidの場合は、自分で作成したアプリは自分のサーバーにアップしておき、それをダウンロードしてインストールすることもできます。ここらへんはアプリの審査があるAppleよりも簡単です。

まずは、iPhoneにも入れてある「ウェザーニュース タッチ」をAndoridタブレットに入れてみました。Androidマーケットにアクセスして、検索すると出てきます。早速インストールします。インストールはしばらく待てば終わります。

ウェザーニュース タッチが入ったので早速起動。これで、Androidタブレットでも手軽に天気をチェックすることができます。3台あるからそれぞれの部屋やトイレにおいておけば便利そうです。という目論見は外れました。

画面真っ黒

ということで何も映りません......。iPadならiPhone用のウェザーニュース タッチが、そのまま使えます。でも、Androidでは駄目なようです。Androidタブレットは、Androidという名前がついているだけで別もののようです。でも、そんなことは気にしてはいけません。

仕方ないので、Androidタブレットでウェザーニュース タッチを使うのはやめて、本命である「画面キャプチャー」にとりかかります。

iPhone/iPadでは、画面キャプチャーは簡単にできます。ホームボタンを押したまま電源ボタンを押せば、今見ている画面がキャプチャーされます。ところが、Androidでは簡単に画面キャプチャーすることができません。基本的にパソコンが必要です。

画面キャプチャーしたければパソコンを用意しろ、という世界です。というわけで、パソコンを用意したらEclipseという開発環境をインストールします。その後、Android SDKをインストールします。これでOK。Androidスマートフォンはこれでキャプチャーできます。

ちなみにGalaxy系では、同時にふたつのボタンを押すことで画面キャプチャーできます。が、Galaxy Sでは職人技が必要です。ホームと戻るボタンを0.1秒くらいの精度を持って同時に押すのです。何度かやりましたが、10回に1回成功するかどうかというシビアさです。

Galaxy SIIでは、違うボタンになっているので手軽にできます（iPhoneと同じ電源ボタンとホームボタンを同時に押す）。ちなみにGalaxy Nexusは、電源ボタンと音量を下げるボタンを同時に（！）1秒近く押す必要があります。やった限りではGalaxy SIIの方がはるかによく、Nexusは駄目です。

Androidスマートフォンではキャプチャーできるので、次にAndroidタブレットを接続してみました。でも、接続しても何もデバイス名が表示されません。Webで調べると、接続するケーブルに種類があってAとかBとか云々。

ということで、買った時の箱に入っていたケーブルを差し込んでみました。でも、駄目でした。SONY Tabletだから駄目なのかもと思って、Arrows Tabにも差し込んでみましたが駄目です。

ということで、最後の頼みの綱はREGZA Tablet。ところが、標準のAndroidのケーブルの差し込み口がありません。どこを探してもありません。どうやら普通のUSBケーブルの差し込み口（大と小）しかありません。近くにケーブルがなかったのであきらめました。

仕方ないので、アプリでキャプチャーできるものを探しました。Galaxy Sだと対応アプリがあって手軽にできます。Andoridタブレットでもできそうな感じですが、無料のものをかたっぱしから入れましたが全部アウト。

残っているのは有料アプリだけ......。ということで有料アプリも入れたけど、やはり駄目。キャプチャーできず。

嫌になったので充電して寝ようと思いました。が、Arrows Tab以外は専用のコード。普通のAndroidスマートフォンで使えるケーブルは、Arrows Tabしか対応していませんでした。でも、こんなことで腹を立ててはいけません。
これがAndroidタブレットの世界ですから。

【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>

Androidマーケットのレビューで、「動かない」というのが目立つのも分かる気がします。Androidの場合、開発者は自由ですが、ユーザーは不便です。アプリは返品できるのですが、返品時間の15分を過ぎてしまったので、それも駄目。なんで、そんなに短いんだと思ったら、先週またまた返品時間が改訂され、今度はアプリ制作者が泣くハメになりそうです。結局いいことないAndroid。

・Android マーケット デベロッパー販売/配布契約書
< http://www.android.com/jp/developer-distribution-agreement.html
>

仕事の都合上、最新のAndroid OS version 4を搭載したGalaxy Nexusを購入。これは、またネタにして書くつもりですが、アプリ／Webアプリ（モバイル専用）を作る人しか用がないかと思います。秋葉秀樹さんなら喜んで買いそうですが。UIが変わってしまったというか、ハードウェアボタンがなくなった（HOMEボタンや戻るボタン）のが、かえって使いにくい状態に。というか、ボタンはどこ？　といった状態になるアプリが......。NTTもiPhone扱うなら、8割方iPhoneシェアを占めてもいいと思うほど。

・Galaxy Nexus使い方辞典【New!!】
< http://www.openspc2.org/reibun/Android/Galaxy_Nexus/
>

・Google API Expertが解説する Google Maps APIプログラミングガイド【発売中】
< http://www.amazon.co.jp/dp/4844331167/
>

・jQuery Mobile 1.0例文辞典
< http://www.openspc2.org/reibun/jQuery_Mobile/1.0/
>

・CSS3（スタイルシート Level 3）例文辞典
< http://www.openspc2.org/reibun/CSS3/
>

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199
>

・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184
>

・毎度おなじみASCII.jpの連載
「PhoneGapでiPhoneのコンパスアプリを再現」
< http://ascii.jp/elem/000/000/652/652551/
>

・iPhone/iPad × HTML5アプリ制作
< http://www.amazon.co.jp/dp/4797362618
>
< http://bookpub.jp/books/bp/196
>

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■イベント案内
デザイナーのためのAndroidアプリ　レイアウト勉強会　in大阪
「AndroidアプリのXMLコーディングをマスターしよう」
< http://atnd.org/events/22546/
>
< https://bn.dgcr.com/archives/20111205140200.html
>
───────────────────────────────────
アプリデザインをHTMLと同じように考えている人いませんか？　HTMLと同じようにデザインされたり、切り出しされた素材は意外と使いにくいです。またiPhoneとAndroidでは使い勝手が変わってきます。
みなさんにはこれらをマスターしてもらってアプリ開発者が楽になるようにしてください。もちろん、今後デザインおよびコーディングのみの仕事もでてくるでしょう。そういった時のためにも今のうちに勉強しましょう。
（サイトより）

日時：2011年12月17日（土）13:00〜17:00
会場：ECCコンピュータ専門学校（大阪市北区中崎西2丁目3番35号）
< http://comp.ecc.ac.jp/access/
>
参加費：無料
協力：日本Androidの会 神戸支部、神戸GTUG、ECCコンピュータ専門学校
懇親会詳細：< http://atnd.org/events/22896
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■イベント案内
まにカレ
「すべてのイラレ使いへ、実践的Illustrator快適化テクニック大公開！」
< http://m2.cap-ut.co.jp/event/col02/
>
< https://bn.dgcr.com/archives/20111205140100.html
>
───────────────────────────────────
Adobe Illustrator CSが登場して8年以上が経ちました。「基本機能は変わらないから、バージョン10で十分」と、バージョンアップを見送ってこられた方、あるいは「よく分からない追加機能なんて、使うことないだろう」と、目を向けてこられなかった方も多いと思います。しかし、正直言えば派手な割にあまり使わない機能の陰で、実は少しずつ「知らないと損をする」便利な機能が付け加えられてきました。それらの機能は、長くIllustratorを使ってこられた方ほど、見過ごされてきたのではないでしょうか。

今回の「まにカレ」では、技術評論社から刊行された書籍『10倍ラクするIllustrator仕事術〜ベテランほど知らずに損してる効率化の新常識』を執筆された方々を、なんと全員お招きし、「ラクに生産性を高めるワザ」、「直しに強いデータの作り方」、「使い回しと一括反映の方法」など、日々のデザインワークを快適にする、今どきのイラレ使いの新常識とテクニックを、書籍の枠を越えてお話しいただきます。

「作業」の効率を高め、「クリエイティブ」に時間を多く費やしたい、そんなすべてのイラレ使いにお送りするセミナー、是非この機会にご参加ください。
（サイトより）

日時：2012年2月12日（日）13:00〜17:30
会場：大阪ユビキタス協創広場CANVAS（大阪市中央区和泉町2-2-2　内田洋行）
< http://www.uchida.co.jp/company/showroom/osaka.html
>
参加費：4,000円（2011年中3,000円）、学生3,000円
講師：鷹野雅弘、秋葉秀樹、杏珠、尾花暁
主催：まにまにカレッジ（合同会社かぷっと）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（12/05）

・超軽量折りたたみ自転車YS-11を買ったのが2年前の冬だった。この自転車を電車やバスで輪行し、おいしいところだけをチョイ走りして、また電車やバスで帰ってくるというお気楽小旅行をするのが目的だった。しかし、未だに実現しておらず、せいぜい近所を走り回る程度だ。最近では体力低下でそういう旅行に出掛ける自信がなくなっていたが、伊藤礼「大東京ぐるぐる自転車」（東海大学出版会、2011）を読んで、再び意欲がわいてきた。筆者は胸にペースメーカーを埋め込んだ78歳だが、自転車入門はなんと68歳、いまではdiossのスポーツバイク、マウンテンバイク、dahonの折り畳みなど7台もの自転車を所有し、都内ばかりか全国を走り回っているらしい。まさに矍鑠たる老サイクリストである。この本は月刊「望星」の連載「銀輪ノ翁、東都徘徊ス」をまとめたもので、自転車で東京の歴史を散策するのがテーマらしいが、脱線もじつに楽しい。わたしは筆者よりずっと若いんだから、まだまだ走れるという自信を与えてくれる。ただし、この文体はなんだ。「ここからはひたすらとなる。しかし、振り返ってみると、ここに至るまではひたすらではなかったことをも、わたしは知るのである。それはどういうことかと言うと、こういうことである。」といったまわりくどい語り口で、たしかにユーモラスで読ませる文章ではあるが、ちょっと抵抗感も抱く。筆者は英文学者、翻訳家、エッセイストで、伊藤整の次男だ。なるほど、納得。「こぐこぐ自転車」「自転車ぎこぎこ」なる前作も読んでみようかと思う。（柴田）
< http://www.amazon.co.jp/exec/obidos/ASIN/4486037197/dgcrcom-22/
>
→アマゾンで見る（レビュー3件）

・先日登場した深川氏からもうひとつネタをもらった。デジクリもやりたい「まんじゅう協賛」。どこに？　沖縄ポータルサイト「DEEokinawa」に。こういうの好き。このサイトの連載コラムタイトルを列記。「沖縄デザインマンホール」「やってみた」「スナック看板ライブラリー」「沖縄顔ハメワールド」「勝手にスタンプラリー」「ゆるきゃら辞典」。特集だと「入りにくい店に入ってみた」とか、「沖縄ドリンクをスパークリングにしたらうまいのか」あたりが好き。あー、うちもなんとか協賛やりたいな。（hammer.mule）
< http://www.dee-okinawa.com/
> 　DEEokinawa。
< http://tou.ch/news/
> 　ロケタッチ新聞に大阪版はないのか
< http://goo.gl/uhbGz
>
高校校歌アレンジ「わったぁ校歌着うた」沖縄県内の校歌を熱く歌う「校歌爆奏族」