menu

13.10.01

category

comments

0

trackbacks

0

permalink

SpliTron2 : Transition To Flat

SpliTron 2 がリリースされました!

デザインと実装で予想外に時間がかかってしまったけど、
UI の設計とビジュアルデザインのリファインを納得のいくまで行っています。
以下右側が 2 。

・App Icon
icon_beforeafter.png

・金額入力
amount_beforeafter.png

・人数入力
guest_beforeafter.png

・割り勘設定
split_beforeafter.png

・ナンバーパッド
keys_beforeafter.png

・レシート(割り勘結果)
receipt_beforeafter.png

・集金記録
collect_beforeafter.png

13.06.10

category

tags

comments

0

trackbacks

0

permalink

12.11.02

category

comments

0

trackbacks

0

permalink

Interaction Concept of Swiping to Go Back

iPhone5's 4inch screen has the problem when you tap the 'back' button on the navigation bar while you hold the device by one hand.
Apple insists there is no problems on them (in their ad), but in fact there is.

Recently, you can see the apps which has 'back' button on the tool bar (on the bottom of screen) or has function that swiping left to right in order to go back.
 
These are very functional, but seems temporary measures.

So we (@we6tr0n and @zuccoi) improved them and made the concept.
It is based on gesture and visual feedback, also it suits for the current iOS UI.

Interaction Concept of Swiping to Go Back from webtron Inc. on Vimeo.


• the back button indicates amount of swiping in it as a visual feedback.
• when swiping on the content view is not allowed by some reasons, swiping on the tab bar or tool bar will be the another way.
• while you are swiping on the tab/tool bar, the cover layer is shown on it as the visual which means user can't tap its buttons.
• this concept adapt to closing a modal view.

related link : runLoop run]; (entry by @zuccoi)


iPhone5で採用された4inchスクリーンでの問題として

・片手持ちをしている時に、ナビバー上の「戻る」ボタンに親指が届かない、
 届いたとしても少し無理をする必要があって iPhoneを落としそうでこわい

というのがあります。アップルはCMで「何の問題もないよ」と言っていますが、ちょっと無理矢理感があります。そんなわけで、最近では以下のような機能を提供するアプリも目にするようになりました。

・画面を左から右へスワイプすることで「戻る」ことができる
・「戻る」ボタンを画面の下部のツールバー上にも配置

これらはとても有効ですが、暫定的な印象もあります。
僕たち(@we6tr0n@zuccoi)はこれを一段階進めたコンセプトをつくりました。
スワイプジェスチャ + 視覚的フィードバックを基本的な機能として、いままでのGUIにフィットするようなものです。

・スワイプ量に応じた視覚的フィードバックとして Back ボタン内にインジケータを表示する
・画面全体をスワイプできないケースでは、タブバーやツールバー上をスワイプ
・タブバー・ツールバーをスワイプしている間はバーをカバーするようなレイヤーが表示されボタンが押下されないことを明示
・モーダル画面を閉じるケースにも応用できる

まずはビデオを見てみてください!

関連リンク:runLoop run];(@zuccoiによるエントリ)

SpliTronが「2012年度 グッドデザイン賞」を受賞しました

splitron_heros_120921_for_blog.png

webtron Inc. (株式会社ウェブトロン)では、このたび  iPhone / iPod touch 向けアプリケーション「SpliTron(スプリットロン) 」で「2012年度グッドデザイン賞」(主催:公益財団法人日本デザイン振興会)を受賞いたしました。

SpliTron は、美しいユーザインターフェイス、使う楽しさにこだわってデザインされた割り勘アプリケーションです。提供する機能は人間中心設計(HCD)開発プロセスを通じて、割り勘タスクにおける利用状況の調査・把握に基づいた「ユーザの困りごと」を解決するソリューションとしてコンテクスチュアルに設計されています。また UI(ユーザインターフェイス)にインタラクティブ要素を積極的に取り入れることで「機能性」に加え「使う楽しさ」を提供し、UX(ユーザーエクスペリエンス)の質を高め、愛着をもって使ってもらえるようなアプリになるようにデザインされています。

それに対して今回、グッドデザイン賞では「UI細部の作りこみに製作者の強い思い入れと愛情が感じられる。このUIは、製作者の主観的なこだわりだけではなく、実際のユースケースに則った客観性も強く感じられ、総じてバランス良く練りこまれた、使いやすくかつ使い心地のよいアプリケーションとなっている。」と UI を含めた UX を高めるためのデザインが高く評価されました。

当社では今回の受賞を契機に、さらにこれらの優れたデザインの特徴をアピールすることを通じて、SpliTron のより一層の販売増を目指すとともに、デザインの観点から優れたものづくりに真摯に取り組んでまいります。

なお、SpliTron は11月23日(金)から東京ビッグサイトで開催される受賞発表展「グッドデザインエキシビション2012」に出展されます。表彰式は11月22日(木)に同会場で開催される予定です。 

製品名称:SpliTron(スプリットロン)
製品概要:iPhone / iPod touch 向け割り勘アプリケーション
デザイナー:webtron Inc. 大宮 聡之
プログラマー:三浦 一樹
グッドデザイン賞ウェブサイトでの紹介ページ:
http://www.g-mark.org/award/describe/39071
製品情報:http://www.webtron.jp/jp/splitron/

グッドデザイン賞とは

グッドデザイン賞は、1957年に創設されたグッドデザイン商品選定制度を発端とする、日本で唯一の総合的なデザイン評価・推奨の運動です。これまで55年以上にわたって、デザインを通じて日本の産業や生活文化を向上させる運動として展開されており、のべ受賞件数は38,000件以上にのぼり、今日では国内外の多くの企業や団体が参加しています。グッドデザイン賞受賞のシンボルである「Gマーク」は、すぐれたデザインを示すシンボルマークとして広く親しまれています。

12.09.22

category

comments

2

trackbacks

0

permalink

wallpaper for iPhone5

iPhone5 をゲットしたので拙作の壁紙をアップデートしました。
よかったら使ってください!

I've updated the wallpape to go well with iPhone 5.
hope you like it!

black_for_ipn5_thumbnail.png
Download

related entry: iPhone 4 用 Wallpaper  

11.12.01

category

comments

0

trackbacks

0

permalink

MapFan for iPhone 1.5 が iPad のトップ有料で1位を獲得

mzl.eycobknf.480x480-75.jpg

UI 設計/デザインをお手伝いさせていただいている MapFan for iPhone 1.5 がリリースされております。
大きく進化したのは横画面対応、iPad 対応(ユニバーサル)。iPad のトップ有料で1位を獲得しました。

これは INCREMENT P スタッフのみなさんのモチベーションの高さ、ものづくりにおける包容力、大胆な戦略をとれる決断力のなせる技だと思います。

mzl.cmhdjcco.480x480-75.jpg

そして、制作サイドではやはり実装とデザインが深くコミュニケーションしながらものづくりができることはとても強力なのだと実感しました。
実装を行っている HMDT さんとは、Agile 的なこともずいぶん前からあたりまえのようにやっていましたし、少しの無茶もいえる関係があったからこそクオリティを生み出すことができたのだと。

こういう形でプロジェクトに関わることができ、今回こうして結果もついてきたことは本当に嬉しいことです。みなさまに感謝!

関連リンク:


11.11.10

category

comments

0

trackbacks

0

permalink

[AIIT]インターフェイス設計の8原則

認知科学はときに難解で数回に分けて行われている授業でもたびたび睡魔に襲われつつようやくあと1回を残すとこまできた。昨日は特に UI デザイナーにとってはとても重要な講義だった。

講義ではノーマンのメンタルモデルの話やよいデザインの4原則などが紹介されたのだけど、なかでも「インタフェース設計の8原則(Shneiderman, 1996)」は自分がデザインや設計を行うときに常に肝に銘じているもの。

shneiderman.png

UI の使い心地をダイレクトにユーザが感じてしまう今日のタッチデバイスのアプリケーションにおけるデザインでは非常に強力な原則だと実感しているものなので、この機会にもう一度おさらいをしておきたいと思ったのでエントリ書いてみました。
(でも、いっぺんにはできないのでちょっとずつw)


1. 一貫性を持たせる

「一貫性」とひとつかみにすると難しいのだけど、なぜ一貫性を持たせるべきなのか?という問いに対する自分の理解としては、

・「システム」と「ユーザ」のメンタルモデルの乖離を最小限にするため
・ユーザのメンタルモデル形成時において、ルールを設けることでユーザがデザイナーの意図したモデルを正しく学習できるようにするため

という感じ。

一貫性と言われて、手短かなところで例をあげると iOS のナビゲーション。

画面のリストをタップすると、画面が右から左にスライドしてより詳細な情報の画面へ遷移する。上のバーの左にある横向きベース形状のボタンをタップすると遷移元の画面へ戻れる。
詳細画面が左からスライドして現れることから「左から右に向かって情報が階層的になっている」というルールをあることを理解する。
遷移した画面の上部のバーの左側の横向きベース形状のボタンをタップするとどうなるか?(遷移元の画面に戻る)は、物理的な側面から類推することができる。

navigation_controller.png

しかし、利用するうちに「左上にあるボタンは戻るボタンである」という感じに位置的記憶が強くなりすぎでMusic Appの「Store」ボタンを間違ってタップしてしまう、というようなエラーを招くこともある(あ、これ蛇足だ)ので注意。

情報構造のテンプレートを用意したり、アニメーションをつかって物理的なイメージを与えたり、ビジュアル的な記憶を使ったりして、一度使えばシステムのメンタルモデルを理解できるのはそういう手法によって生み出された一貫性によるもんなのだよね。

で、一貫性を持たせるためにはどんなことをするかというと、

(Model)
・情報の構造化(noun)
・コンテキストにおけるユーザのアクションの予測(verb)
・モードの利用

(Visual)
・空間的な記憶の利用
・正しいマッピング
・体制化の利用(ゲシュタルトの法則)

などを利用する。
デザイナーはとかく見た目の一貫性だけに固執してしまいがちだけど、そうではなくて全体として「一貫性」というものをとらえないといけないすね。自戒も含め。

てなわけで、今日はここまで。
時間ができたらまた続きをエントリします。

11.06.08

category

tags

comments

0

trackbacks

0

permalink

WWDC 2011

はじめての参加でいろいろ戸惑いながらも参加をしております。
昨日の Keynote はやっぱり雰囲気がとても特別で、朝の3時すぎから並んだ価値はあったと思います。
一緒にならんだドイツ、アメリカ、イギリス、中国といったワールドワイドな人たちと話せたのもすごく貴重な経験。けど、UI デザイナーはやっぱ少ない感じですね(あたりまえか)。
思った以上に忙しかったり、疲れたりでやっつけ気味ですが昨日の様子をちょっとだけ写真で。あとでビデオも追加します。(6/8 16:00 ビデオ追加しました)

IMG_1426.JPGIMG_1428.jpgIMG_1427.jpgIMG_1440.JPGIMG_1443.JPGIMG_1444.JPG

11.04.25

category

comments

0

trackbacks

0

permalink

Passcode screen for MoneyTron

passcode_highdef.png

MoneyTron の次期アップデートではパスコードの実装を予定しています。
これはそのデザインです。地色のテクスチャや光彩の色味を現在のものより少し大人っぽくしたいなあとうっすら考えてますが、どんなもんでしょうね。

The next update of MoneyTron will feature passcode lock function.
This is sneak peek of its design. 

11.01.19

category

tags

comments

0

trackbacks

0

permalink

iPad without physical home button means what...

nextgenipadwithouthomebtn.png

There are rumors that next gen iPhone / iPad will not have home button.
I think that it especially would be a great feature for iPad if they're true.

As you know, iPad is designed as having no right way or wrong way of holding it.

Jony Ive 
"The face of product is pretty much defined by a single peace of multi-touch glass, and that's it.
There is no pointing device, There isn't even a single orientation,
There is no up, there is no down, there is no right or wrong way of holding it.
I don't have to change myself to fit product ... It fits me."

This philosophy is pretty great, also I've been having amazing experience through iPad.
and I realized there are some interfaces unsuitable for this philosophy.

・Home Button
・Mute (or Orientation Lock)Button
・Lock Button

I think these interfaces seems to have usability problem.
For instance, I miss the home button sometimes.
This problem is caused by buttons fixed physically on device, I think.

The button should be placed same place "against the user" always.
Buttons fixed physically are placed different againt the user on each orientation confuse the user.

If using gestures could replace home button, it would be great also it would fit its philosophy more.


次期 iPhone / iPad で home btn がなくなるという噂がでてきていますね。
噂が本当なら特に iPad にとってとてもよい feature になるのではないかと思いました。

iPad はデバイスをどのように持ってもいいようにデザインされています。

Jony Ive
"iPad を形作るもののほとんどは、一枚のマルチタッチガラス、それだけです。
ポインティングデバイスも、縦横や上下を決めるものもありません。持ち方のルールもありません。
製品に自分をあわせるのではなく、製品が自分の一部になるのです"

この思想はとてもすばらしく、実際 iPad を通して得た経験は驚くべきものです。
しかしわずかながらその理念にそぐわないインターフェイスが残されていることに気付いたのです。

・ホームボタン
・Mute (or Orientation Lock) スイッチ
・ロックボタン

これらはユーザビリティ上の問題をかかえているように思います。
例えば iPad を使っているときにホームボタンを見失ってしまうことってよくありませんか?
この問題はデバイス上にフィジカルに固定されているために引き起こされていると考えられます。

これらボタンはユーザに対して同じ位置にあるべきと考えられるのですが、
フィジカルな実装上の制限からデバイスの持ち方によってボタンの位置がユーザに対して上下左右に移動してしまい、それが混乱を引き起こしてしまうのです。

もしジェスチャを利用することでこの問題が解決できるのならとてもすばらしいことで、思想をさらに一歩完全に近づけるものだと思います。

11.01.05

category

comments

0

trackbacks

0

permalink

MoneyTron : Editing categories sneak peak


MoneyTron : Editing categories sneak peak from webtron on Vimeo.


MoneyTron の次の Update の情報を少しだけ。

次回の Update の目玉機能として「カテゴリの編集/新規作成」があります。
非常にたくさんのリクエストをいただいている機能で、次回の Update で提供できることにとてもわくわくしています!

アプリの中枢部分にかかわる機能なだけにテストも十分に行う必要があり、まだすぐにリリースという状況ではありませんがムービーだけでもご覧いただければと思います。

MoneyTron next update will bring some features, one of major feature is "Editing Categories".
We've recieved many requests about this feature, so we're very excited.

We're on testing phase now, so we can provide just the sneak peak video for now.

11.01.05

category

comments

0

trackbacks

0

permalink

MoneyTron : New Year New You


新年からはじめるお小遣い帳というわけで、iTunes の「New Year New You」の Money カテゴリで MoneyTron がおすすめされております。

MoneyTron has been chosen for the "New Year New You" in Japan App Store !

11.01.05

category

comments

0

trackbacks

0

permalink

MoneyTron : iTunes Rewind 2010

rewind2010.png

去年のことになりますが MoneyTron が iTunes Rewind 2010 に選ばれております。
ありがとうございます!

MoneyTron has been chosen for the iTunes Rewind 2010 in Japan !! Thanks a lot !

10.11.04

category

comments

0

trackbacks

0

permalink

Notes Appとメンタルモデル

先日行った UI / UX Meeting #1。

UI / UX に関して各々の経験や知識を共有して、深めていこうという勉強会です。

第1回の参加者は@suzukismooth, @overislandjp, @novi_, @we6tr0n の4名。

アジェンダは「UI デザインにおける、ユーザの期待するカタチと論理的な情報の階層構造に従ったカタチの対峙」でした。

UI を考えているときに、論理的にはこういう手順になるけど、ユーザからの視点でみるとその手順が不自然であったり不便であったりする、ということが結構あると思います。

そんなときにどういった対処をすればよいか、実際にどういうケースがあるのかをそれぞれ話そうということで、僕は例としてApple 純正の メモApp をあげました。

「Notes Appとメンタルモデル」

メモAppで新規メモを作成する場合、ナビゲーションバーの右側アイテムの「+」ボタンをタップします。

fig1.png

すると
・画面が新規メモ画面へ遷移
・編集を開始
します。
つまり、上記2つの機能が「+」ボタンにアサインされているってことになります。

図にするとこんな感じです。

fig4.png

でも、
・メモを編集するための「編集開始」操作はメモ欄をタップする操作で提供されているのだから
・「+」ボタンは「新規メモ」を生成(表示)する機能のみを提供すればよいのではないか(重複した機能を割当なくてもよいのではないか)
・そのほうがシンプルだし、論理的構造に則っていると思える
という疑問もわいてきます。

fig3.png

なぜ「+」ボタンが2つの機能を提供するべきなのかは、ユーザのメンタルモデルに関係していると思われます。

ユーザが新規メモを作成する場面
・ユーザはメモを「書く」ために新規メモを生成する
・そのためユーザは新規メモ画面へ遷移し、かつ「編集開始」された状態を予想している

そこで
・「+」ボタンに前述の2つの機能を割り当てて
ユーザのメンタルモデルに近い操作を提供しようとしているのです。

その後につづく操作について考えてみます。

ここで注意しなければいけないのは、
・「編集の開始操作」はこの時点でユーザに意識されない(編集モードに認知的に入っていない)
という部分です。

新規メモを作成し、ユーザがメモを書き終わったとき、またはキャンセルしたいときは
・ユーザは編集の開始と対になる編集の「完了(Done)」操作をしようとはせず
・一覧にもどろうとする=「戻る」ボタンを探す
という動作をするのではないでしょうか。
最初から開いていた(無認知のうちに開けられた)扉を閉じようとはしないものです。

fig2.png

もし「戻る」を編集モード中に提供しないとなると、
上記の動作で「戻る」ボタンを見つけづらくなり

「安全な探検」:
・ユーザは何の代償も払うことなく操作を試すことができなくてはいけません
・容易に操作前の状態に戻れること(避難口)

に反する事態になってしまうわけです。

そこでナビゲーションバー左側アイテムのボタンに

・編集を完了する
・メモ一覧に戻る

という2つの機能をアサインし、

・編集モード中もこのボタンを提供する

ことで、この問題を解決しているのです。

fig5.png

ボタンのラベルは「Back」ではなく、「Notes」となっていることが単に戻るだけではないことを示しているように思われます。

このように、なんてことのない部分をとりあげてみても、
ユーザが自然と感じる操作が論理的な手順と一致しないケースがあることがおわかりいただけたと思います。

こんな感じでだいぶゆるいですが、UI / UX Meeting 今後も地味につづけていきたいと思います。参加自由ですので興味があればぜひお声がけください。

PS.
@overislandjp の未発表 App についてあーだこーだ言うビデオもUPしております。
こういうのもみんなで集まったかいがあって楽しいですね。

10.10.16

category

comments

0

trackbacks

0

permalink

MoneyTron in Apple Store Shibuya

inretailstore_op.png

先日、アップルストア渋谷にいったときに MoneyTron が店頭の iPod touch にインストールされているのを見つけました。ほかにインストールされている早々たる有名アプリケーションのなかに並ぶことができて本当に嬉しいですし、誇りに思います。

なるべく早く Update したいけど、Developer の HMDT さんがいまめっちゃ忙しいみたいなんで、もうちょっとかかっちゃうかな...

------

A few days ago, I found that MoneyTron is installed in iPod touch for demo in Apple Store Shibuya. 
I have been really happy that MoneyTron stands among prominent apps. and I'm proud of this.

I want to release the update for MoneyTron as soon as possible, but I know that HMDT(the developer) is extremely busy now. so it will take more time...

10.08.20

category

comments

2

trackbacks

0

permalink

MoneyTron : 続・カテゴリ編集機能

カテゴリ編集機能のデザインができました。
実装のほうもコツコツ進んでいるようなので、楽しみです。

edit_categories2.png

10.07.23

category

comments

0

trackbacks

0

permalink

MoneyTron : Note UI の追加実装案

memo_flow.png

多くのユーザさんからご要望をいただいている機能の1つとして、
「新規記録をつける際にメモも同時に書きたい」というものがあります。

MoneyTron のコンセプトの1つ、
・記録をつける際の操作をシンプルにする
を明確に提示したかったこともあり、現在のバージョンには実装されていませんが
機も熟したという感もありますし、現在実装へ向けた検討を行っています。

★メモ入力のながれ
1)記録画面(上図左)で画面下部の「えんぴつアイコン」ボタンをタップする
2)ふきだしがフリップし、Note 入力画面へ状態が遷移(上図真ん中)します
3)任意のメモを入力しおわったら、ふきだし右上の「Done(完了)」ボタンをタップ
4)ふきだしがフリップし、記録画面へ戻ります。
  ふきだしにはメモフィールド(上図右、青く囲まれた部分)が追加されていて
  メモの先頭十数文字が表示されます。
  再度メモを修正したい場合はこのフィールドをタップして2)に遷移することもできます。

★設計のポイント
・メモはオプション項目(必須ではない)
・カテゴリと金額がそろっていれば記録の保存ができる現在の入力フローを汚染しない
 > ノート画面はモーダルな画面とする。記録の保存はノート画面からは行わない。
・「機能を選択する」という負担をユーザに負わせたくない
 > 初期導線としては画面下部のえんぴつボタンのみ用意する
   記録の操作中にはユーザの意識のフォーカスはふきだしにあるため
   意識的にメモ入力をしようとする場合のみに、
   えんぴつボタンの存在が意識されると考えられる

ご意見などありましたらぜひお願いします。

10.07.14

comments

8

trackbacks

0

permalink

iPhone 4 用 Wallpaper

ちょっと前に Twitter のほうに放流した Wallpaper です。
放流しっぱなしももったいないので、こっちにもエントリしときます。

blackthumb.png
Download : for iOS 4.1 | for iOS 4.2 and 5.0


調子こいて White も作ってみましたが、...ものすごい駄作でした。
ぱっと見はいいんだけど、実際に貼ってみると orz な感じ。
けど、せっかくつくったんで放流しておきます。

whitethumb.png
Download : for iOS 4.1 | for iOS 4.2 and 5.0

よろしければどうぞ。

If you like these wallpapers, please check out our iPhone App "MoneyTron".
Thanks.

追記 2010.12.09
iOS4.1とiOS4.2でアイコンの配置が微妙に変わったので、対応版を用意しました。

P.S.
We updated wallpapers. cuz the grid pitch of home screen on iOS 4.2 is changed a little.

2011.10.20
We confirmed that wallpapers for iOS4.2 are compatible with iOS5.0 :)



10.07.01

category

comments

0

trackbacks

0

permalink

MoneyTron:カテゴリー編集機能草案

ご要望を一番多くいただいている「カテゴリーの編集機能」について、どういう実装がよいのか考えてみました。

edit_categories.png
※画像をクリックするとPDFを見れます

迷ったところとしては、

・カテゴリを削除したときに紐づいていた記録をどう扱うか。
 1)記録も一緒に削除する
 2)「カテゴリなし」というカテゴリをあてがう
 現在の案:2を採用
 考察:
 「支出(カテゴリなし)」「収入(カテゴリなし)」というカテゴリが必要。
 この2つは特別扱いで削除不可にしておかないといけない。
 実装上は例外を介在させることになりめんどくさいことになるが、
 ユーザのデータを守るという観点から必要と判断する。

・支出/収入を編集可能にするか
 1)OK
 2)NG。新規カテゴリ作成時のみ、収入or支出を決定可能
 現在の案:2を採用
 理由:
 入力後に収入<>支出を変更することは現実的な運用を考えるとほぼありえず、
 そのようなことを可能にする UI は避けるべき。
 
のようなものがあります。

もしご意見があれば是非サポートtwitterでお寄せください。
次のステップとしては、これをもってプログラマーさんに相談しながら実現への道を探りたいと思います。

10.06.24

category

comments

0

trackbacks

0

permalink

Retina Display : ベクターデータの調整

path_preview.png

またまた Retina Display 対応のお話。
標準のUIエレメントについて、解像度があがったことでそれらはどう変わったのかちょっと見てみました。

retina_sys.png

左:以前の simulator のキャプチャを2倍
右:iPhone 4 simulator のキャプチャ

なるほど、エッジの影のボケ足の表現などがより精細になっています(そりゃそうだ)。
標準の UI エレメントを模したものをつくるケースって意外に多いんですけど、
僕の場合は元データはイラストレータ上でつくってるので、エレメントはベクターで描画されています。
パスなんだから、2倍にしても大丈夫じゃん!とか思ったりもしましたが、やっぱり世の中そんなに甘くないのでした。これ↓を見てください。

retina_path.png

左:いままでのパスデータを単純に2倍した
右:2倍後にそれなりの調整を行ったもの

まあ、こんなに違いますですよ。
右の調整済のパスデータは半分ぐらい作り直してますです。

というわけで、本気でやりだすと恐ろしく人的リソースを消費する Retina Display ではありますが、実際 iPhone 4 の実機で最適化されたアプリケーションを見るともう以前には戻れなくなります。
1つ1つのエレメントを見る分にはそれほど感じないのですが、総合的な外観の印象が圧倒的に違っていて、実体感がより強く感じられるようになりました。

webtron が関わっているアプリとしては「iMandalArt」「MoneyTron」から対応します。
どちらももうじき申請できそうな予感なので、お楽しみに!

10.06.23

category

comments

0

trackbacks

0

permalink

MoneyTron : Retina 対応作業完了

retina_mt.png

iPhone 4 の発売を明日に控えて、ようやく MoneyTron の Retina 対応が終わりました。
実機で検証・微調整後、AppStore に申請する予定です!

10.06.16

category

comments

0

trackbacks

0

permalink

『iPhoneのオモチャ箱 〜iPhone SDKプログラミング〜』刊行 & 記念イベント開催!

昨年から執筆に参加させていただいていた本なのですが、ついにリリースの運びとなしました! ...長かったですねえw

執筆陣がとても豪華ですし(僕なんぞがご一緒させていただいていいのかしらという感じであります)、それぞれが好き勝手やっている感じがとても面白い感じになっていますので書店で見かけたら是非ちょい見してみてください。
ちなみに僕はUIデザインとweb appについて書かせていただいています。MoneyTron の開発工程なども(ちょっとですが)載ってますです。

それとタイトルのとおり、刊行イベントを Apple Store 銀座、ジュンク堂新宿店で開催しますので、興味のあるかたは足を運んでいただければ嬉しいです!

IMG_2160.JPG


『iPhoneのオモチャ箱 〜iPhone SDKプログラミング〜』
『ユメみるiPhone』の続編として第二弾『iPhoneのオモチャ箱』が、より実践的なサンプルベースのiPhoneアプリ開発の解説書が6月21日に弊社より発売されます!!
執筆には、『ユメみるiPhone』の徳井直生氏をはじめ岡村浩志氏(Re<ords)、笠谷真也氏(Pocket Guitar)、深津貴之氏(QuadCamera)、青木太臣氏(one-dot enemies)、大宮聡之氏(MoneyTron)、瀬尾浩二郎氏(LetItSleep)、バスケ氏(ランブリン)、宮川義之氏(iYamato)ら、注目のデベロッパーが集まりました。
--
執筆は、私が個人的に気になっているプログラマー/クリエイターのみなさんにお願いしました。いってみれば、iPhoneというおもちゃ箱の魅力に取りつかれた子どものような大人たちです。開発の第一線で活躍されている方々がそれぞれの得意分野でどのようにiPhoneで遊んでいるか、その一端がうかがえるような記事が集まりました。ステップ・バイ・ステップのチュートリアルから、より概念的なお話、開発のヒントまで、さまざまなトピックの中に、それぞれの開発者ならではの創意工夫が垣間見えてくるはずです。
(徳井直生、本書「はじめに」より抜粋)


刊行記念イベント
本書の刊行を記念し、AppleStore,Ginzaおよびジュンク堂新宿店にてトークイベントを開催いたします。
内容が異なっておりますので、いずれも、ふるってご参加ください!!

●6/22(火) 19:00〜20:00 AppleStore,Ginza(3Fシアタールーム) 入場無料 定員84名
iPhoneデベロッパーが語る"いま、iPhoneで何ができるか"

●6/25(金) 19:00〜20:30 ジュンク堂新宿店(8F喫茶) 1,000円(ドリンク付) 定員40名
話題のiPhoneアプリ開発者が語る、これから...
※特製Tシャツ・書籍プレゼント(抽選)、サイン本の販売あり


WORKS CORPORATION

10.06.14

category

comments

0

trackbacks

0

permalink

MoneyTron : Finance カテゴリ1位獲得!

appstore_banner.png

先週末から始まった AppStore でのバナー掲載の効果もあって、ついに念願のファイナンスカテゴリ1位を獲得しました。ありがとうございます!

IMG_2127.PNG

レビューでもご意見を頂いているように、まだまだ未熟なアプリケーションではありますが、いろいろ検討しながらよりよいアプリケーションになるようがんばっていきたいと思います。今後ともよろしくお願いいたします!

10.06.14

category

comments

0

trackbacks

0

permalink

Retina Display

iPhone 4 の1つの特徴としてあげられる Retina Display
解像度2倍。ピクセル数4倍。
これに対応するには、アプリケーションに組み込む画像部品のほぼ全てに対して、高解像度版の画像を用意してあげる必要があります。

retina.png

webtron で関わっているアプリケーションの中では「iMandalArt」と「MoneyTron」を皮切りに対応をすすめていきます。今週はまさにその作業の真っ最中。実機でどんなふうに見えるのか楽しみにしながら作業をすすめています。

10.06.01

category

comments

0

trackbacks

0

permalink

MoneyTron リリースから一週間

2nd.png

お祝いのメールをいただいたり、ユーザさんからご要望やご意見を頂いたり、嬉しいレビューを頂いたり、App Store のランキングに一喜一憂したり、風邪をこじらせたりと、バッタバタの一週間。

アプリのほうは、おかげさまで現在ファイナンスカテゴリで2位をいただいています。
ユーザさんと直接コミュニケートできるのって、とてもエキサイティングな経験で楽しい一方、人生でこんなこと初めてだけにいろいろ至らなくてすいません。

もう少し落ち着いたらいただいたいろいろな要望も含めて、将来の機能についてのウィッシュリストをまとめてみたいと思います。

とくにカテゴリの編集はとても多くいただいている要望なので最優先で検討すべき項目になりそうです。

それと今日、HMDTさんからいくつかのバグを修正したものをいただきました。
これからテストを行って、問題が発生しなければupdate版の申請となります。
ご迷惑をおかけしてすいません!もうしばしお待ちいただければと思います。

MoneyTron - App Store

10.05.25

category

comments

0

trackbacks

0

permalink

MoneyTron App リリース

webtron の1st アプリが AppStore にならびました。
現在ファイナンスカテゴリで7位ということで、出来過ぎの結果をいただいております。
これを糧にこれからもがんばります。

そして、twitter のほうにも書きましたが、こうやって無事リリースができたのは開発を担当してくださった HMDT さんのみなさんの力添えがあってこそ。本当にありがとうございました!
今後ともよろしくお願いいたします!

7th.png

MoneyTron : AppStore

10.05.19

category

comments

0

trackbacks

0

permalink

MoneyTron 申請

周囲の人たちに助けてもらいながら無事申請が完了しました!
月曜日の夜に申請したので、今日で2日目。まだ Waiting for Review です。
無事に通過してくれるといいのだけど。
審査のあいだに web site の準備をしてるわけですが、とりあえずこんな感じまで出来ました。
今日はもうちょっとだけ作業して明日に備えます。

IMG_2098.JPG

10.05.01

category

comments

0

trackbacks

0

permalink

MoneyTron App

webtron 名義の iPhone アプリケーションがようやくお見せできるところまでこぎつけました!
いやー、嬉しいです。ここまでくるのに1年近くかかっちゃいました。
MoneyTron は簡単な入力、楽しく自然な操作、美しいユーザインターフェイスを追求した iPhone/iPod touch 向けのお小遣い帳アプリケーションです。
実際の動作はぜひビデオを見てみてください!
現状は動作検証とリリースのための準備をしているところです。WWDC までにリリースできるといいなあ!

MoneyTron App from webtron on Vimeo.

10.04.21

category

comments

0

trackbacks

0

permalink

MapFan for iPhone

IMG_2082.PNG

ナビゲーションアプリケーション「MapFan for iPhone」がリリースされています。
webtron は User Interface まわりの設計、グラフィック制作で参加させていただいております。

INCREMENT Pさん、HMDTさんとチーム一丸となって望んだプロジェクトで、鼻息荒く参加させていただいていただけに、ようやくリリースされたということで感無量です。
「とにかくiPhoneらしい操作性やデザインを!」ということで、ナビゲーションソフトの UI という枠を越えて議論をさせていただく機会をいただいたことにとても感銘を受けました。こういった理解力、包容力のあるクライアントさんはなかなかいらっしゃらないと思います。

また、いいものをユーザさんに提供したいというスタッフのみなさんの心意気は非常に熱く、それになんとか報いるクオリティをということで、僕としても最高のパフォーマンスを提供させていただいたアプリケーションです。動作もサクサクしていて、東京在住の方には特に(*1)おすすめのナビなので、ぜひ体験してみてもらえたら嬉しいです。

*1 バージョン1.2がリリースされて詳細地図の収録エリアがかなり広がったようです!(10.4.23追記)

IMG_2084.PNG
IMG_2086.PNG


09.12.19

category

comments

0

trackbacks

0

permalink

Designing iMandalArt : UIのアニメーション

iMandalArt が2.0にアップデートされました。
バックアップや OPML 形式の書き出しなど、機能面でとても強化されましたね。
待ち望んでいたユーザさんにとっては特に実のある内容だったと思います。ぼくも嬉しい!
まずは実装してくれたプログラマーさんに敬意を表したいと思います。
IMG_0964.PNG
さて、こんな機会なので少しだけ iMandalArt の開発裏話?でも書こうかと思います。
ぼくは User Interface Designer として開発に関わっているわけですが、
iMandalArt の特徴の一つでもある階層移動のアニメーションがとても気に入っています。
今日はそのお話。

09.12.14

category

comments

0

trackbacks

0

permalink

iPhone App Project : 名称未設定 改め QR Code App(仮)

先日の自社アプリ「名称未設定」のつづき。
前回UPしたラフでバレバレだったと思いますが、QR コード生成アプリケーションをつくっています。
今日は Paper Prototyping の残骸とデザインのモックアップを公開したいと思います。

Paper Prototyping にもいろいろあるみたいですが、僕のところでは
0)叩き台になる画面構成/遷移の作成
1)遷移図をベースにした、議論フェーズ
2)ユーザ役(初見)とコンピュータ役を設定しておこなう評価フェーズ
という感じでやっています。

IMG_0963.JPG
photo 1: 1m四方ほどある実寸の遷移図(ワイヤフレーム)※クシャクシャですいません...

IMG_0962_800.jpg
photo 2: 実際の操作感を検証するためのカード。こちらも実寸です

1)2)はプログラマーさんにも参加していただいていて、
それが制作におけるコンセンサスをとる手段にもなっている感じですね。

ようやくデザイン(UIのグラフィック)が始められる段階まできたので、
できるまでのデザイン過程をUPしていこうと思います。

MockUp Viewer(iPhone / iPod touch)

09.12.12

category

comments

0

trackbacks

0

permalink

iPhone Web App : Image Viewer


iPhone のネイティブアプリケーションのUIデザイン共有用に web app を作ってたら、思いのほか楽しかったので、ちょっと手を入れたものを公開します。

ポートフォリオ的な使い方もできそうだと思って、デモではお仕事画像を入れてみました。

まだまだ注目度が低い iPhone 用 web app だけど、個人的には楽しく作れるので結構好きだな。

09.11.02

category

comments

0

trackbacks

0

permalink

iPhone App Project : 名称未設定

webtron名義のiPhoneアプリケーション第2弾の計画がすすんでます(まだ第一弾もリリースされてませんがw)。

IMG_0935.JPG

UIのラフスケッチがこれ。さてなんのアプリケーションでしょう?

09.10.26

category

comments

0

trackbacks

0

permalink

iPhone Web App : PastryKit

まずは「iPhoneユーザガイド(http://help.apple.com/iphone/3/mobile/)」を開いてみてほしい。
(モバイル Safari から見てください)
ナビゲーションバーが提供され、テーブルセルをタップして項目をブラウズする。
あたかもネイティブアプリケーションのようなふるまい。webappだ。

fig.1 iPhone ユーザガイド。一見ネイティブアプリケーション。

ここで注目してほしいのはナビゲーションバーの配置。
本来モバイルSafariでのスクロールはwindow自体が移動するため、このようにwindowが移動せずにスクロールが提供されているような画面は通常つくれない(fig. 1)。

09.08.20

category

comments

1

trackbacks

1

permalink

iMandalArt リリース!

ついに iMandalArt が App Store でリリースされました。>App Store
IMG_0767.PNG
せっかくなので、基本機能のご紹介を少し...

■ 基本的な使い方
画面は9つのマス(セルといいます)で構成されています。
で、なにができるかというと...
・中心のセルに1つアイディアを書きます。
・中心セルのアイディアから思いつくアイディアを周りの8つのセルに書いていきます。
・周りのセルをタップすると、こんどはそのセルを中心とした画面に遷移します。
・アイディアを膨らませます(くりかえし)
という感じで、1つのアイディアをもとに階層的に思考を広げていくことができます。
階層になったアイディアの集合をツリーといいます。

では実際のアプリケーションの画面を見てみましょう...

09.08.04

category

tags

comments

0

trackbacks

0

permalink

iMandalArt

R0011598.JPG

先日の Apple Store Event の様子。
従来のユーザの方を中心にたくさんご来場いただきました。

いただいたフィードバックをもとに詰めの作業、無事AppStoreへの申請が終わったようです。
リリースが楽しみです!

09.07.24

category

comments

0

trackbacks

0

permalink

Mandal-Art

mandalart_logo.png

9つのマスを使った思考支援ツール「Mandal-Art」のiPhone版が発表されます。
HyperCard を発祥の地とする伝統のあるアプリケーションです。

光栄なことにその User Interface Design を担当させていただきました。

iPhone 版のデザインを制作するにあたって
・HyperCard からの伝統をもちながら、かつ2009年の現在らしい外観
・ユーザの思考を妨げない UI デザイン
・機能の理解を助けるためのデザインボキャブラリの活用
この3つをポリシーとして掲げました。

3番目のデザインボキャブラリというのは、
ーー例えば「フォルダ」や「ファイル」のアイコンが示す意味は経験から知っています。
また「虫眼鏡」アイコンを見たとき「検索」、場面によっては「拡大/縮小」という機能を想像しますね?
...といったように、「デザインとそれが示す意味の理解」の集合のことをいいます。

それらをうまく利用することで、
ユーザは無意識のうちにアプリケーションの操作を理解し、
オペレーション操作の煩わしさを感じることなく
本来の目的である創作活動を始めることができるようになります。


Mandal-Art はこれまでに
HyperCard 版、Windows 版、Palm 版の歴史があり機能も進化してきました。

従来の機能や操作性を引き継ぎつつ、
先に述べたデザインを提供することは思った以上に難しいことです。

考案者である今泉さん、開発を担当する HMDT さんらと、
本当に土壇場まで議論をしてデザインを詰めました。

最終的には HMDT 木下さんの明晰な思考による分析・判断と、
今泉さんの大いなる包容力によって
難しい命題を達成するデザインを作りだすことができ、
そして、それをHMDTの優秀なプログラマさんたちが実装し、息をふきこんでいます。

そんなこんなで、来る7/26(日)に Apple Store 銀座にて発表イベントが催されます。
iPhone で新たに息をし始める Mandal-Art 、
その伝統あるアプリケーションにたるデザインを携えることができたかどうか
ぜひ確かめに来てください。


Apple Store, 銀座
2009/7/26(日)15:00〜16:30 @Apple Store 銀座
Mandal-Artのご紹介:Life is random.だから人生は"編集"できる。

Mandal-Art 公式サイト

HMDT株式会社

09.07.02

category

comments

0

trackbacks

0

permalink

おこづかいApp(仮)Part 1

というようなものを開発しています。
開発。といっても突然全部自前でできるはずもなく、ディベロップは敏腕なプログラマさんに手伝っていただいていて、webtronの役目はUI設計・デザインになっております。

既に開発自体はそれなりに進んでいるんだけど、どんな感じでiPhoneアプリケーションが出来上がって、どんな経緯があったかを振り返れるようにしたくて、少しずついろんな方向から公開していければなあと思っています。


きっかけ
・財布のなかがすぐに寂しくなる。自分はいったいここ1週間で何にいくらつかったんだ? とか
・クレジットの額が結構いってる? なに買ったっけ? とか
そういうのを iPhone で手軽にログって自己分析できたらおもしろいし、それで新たな1面が見えたりしたらさらにいいじゃないかという。

調査
お財布管理系の iPhone アプリを適当にさわってみる。
・iXpenseIt - 機能大杉で操作方法さえよくわからない。少なくとも手軽に使う感じではないのかも。
・Pennies - デザイン良し。とかいわれて期待したが微妙。だた、手軽さとか月表示の一覧性とかは自分のイメージに近い使い心地。

コンセプト
・らくちん入力、らくちんビュー
・すみずみまでデザインされたインターフェース
の2つだけ。いさぎよく。

こんなのどう?
ジャストアイディア的なところもありつつ、ばばっとつくったのがこれ。
・スクリーン
 収支のサマリーが表示される。
 フリック操作で状態の切替(トータル/月別/日別)
 タップでレポート画面へ遷移

・クリックホイール的ななにか
 カテゴリ、金額をホイール操作で決定
 真ん中ボタンでエントリー追加

・日付ボタン
 エントリーを追加する日付を表示
 左右矢印タップで日付を移動
 
・info ボタン
 設定画面へ遷移

クリックホイールとかリジェクト食らうに決まってるじゃんとかいう無粋なつっこみはなし。
というか現時点ではクリックホイール的ななにかはあきらめる方向になっていて、それはリジェクト云々よりも基本的な操作方法に問題が発生したからなのだ。その話は次回以降でしたいと思う。


Part 2 へつづく

09.04.22

category

comments

2

trackbacks

0

permalink

iPhone Application Development for Flash Users

iPhone Application Development for Flash Users という本がでるようです。fladdict の深津くんの blog でちょっと前に紹介されていたので、自分も遅ればせながら予約入れてみました。

iphoneforflauser.jpg

今後 Flash から iPhone 開発にやってくる Developer は増えてくるんでしょうね。
Flash の Developer や Designer が得意とするインタラクションやモーションデザインにおけるスキルが iPhone の世界にもたらされることは、インターフェイスの質の向上も期待できますし(弊害も少なからず出てくるとは思いますが)大局で見たらよいことなのだと思います。

09.04.13

category

comments

0

trackbacks

0

permalink

iPhone site : pmken.com

P.M.Kenさんの作品をブラウズできるオフィシャルサイトwww.pmken.com

iPhone最適化版はDashcodeで制作したwebAppです。
公開はだいぶ前になりますが、紹介していなかったと思うので。

IMG_0321.jpg

design, develop : Satoshi Omiya (webtron)

09.04.08

category

comments

0

trackbacks

0

permalink

ポケプロ英和和英

大辞泉に続く小学館のiPhone辞書アプリケーションです。

IMG_0317.jpg

・正統派なUI設計
最小の手数・時間で目的を達成(目的の単語の和訳または英訳を見つけること)できること。
iPhoneの基本的な操作方法に則った操作設計。新しいUI要素でユーザの操作をスポイルしない。

・質感
辞書というある意味で枯れた世界であるからこそ、
質感やエレメントのディテールを洗練してユーザーエクスペリエンスの質を高める。

そんな作り手の想いがつまったアプリケーションです。

develop : HMDT
design : Satoshi Omiya (webtron)

08.10.07

category

comments

0

trackbacks

0

permalink

eventの伝播@iPhone

iPhone2.1のsafari上でのイベント伝播の検証をしてみました。 イベントの伝播 画面左側に入れ子になった3つのDIVがあり、それぞれ ・event.preventDefault() ・event.stopPropagation() を画面右側のチェックボックスでon/offできるようになっています。 DIVにtouchすると「touchstart」イベントの伝播の状況が それぞれのチェックボックスの上にあるエリアに表示されます。
見てみる(iPhone or iPod touch)

08.09.26

category

comments

0

trackbacks

0

permalink

lab

iPhoneで実験したいことがふえてきたんで、暫定的な実験場をつくりました。 まあ稚拙なことしかやりませんしできませんが、興味のある方はどうぞ。 iPhone / iPod touch(2.0以上)でwww.webtron.jpにアクセスして、artworks>laboでいけます。 まだコンテンツは1つで、タッチを追尾するボールです。

draggableball.jpg



08.09.18

category

comments

0

trackbacks

0

permalink

iPhone用サイトを公開

既にひっそりと公開していたんですが、OS2.1で安定性も増したようなのでここらで紹介です。
webtron@iphone

興味があればiPhone / iPod touch(os2.0以上)でwww.webtron.jpにアクセスしてみてください。
作品データなどもこっちのほうが新しかったりします。