menu
works company

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.10.01

category

comments

0

trackbacks

0

permalink

Profile

大宮 聡之(Satoshi Omiya)
Art Director / Designer

アートディレクター Mote Sinabel (モート・シナベル)氏に師事。
1997年 フリーのデザイナーとして独立
2007年 webtron Inc. 創設 代表取締役
2009年 事務所を渋谷区富ヶ谷に移転
2013年 事務所をGUILD内(渋谷区桜ヶ丘町)に移転

デザイナーとして独立した当時発展途上にあった web design にいち早く目を向け、紙面上で培ったデザインのアイディアやスキルを web の世界に持ち込むことに取り組む。

Flash によるインタラクティブ性の高い Web サイトを数多く手掛け、デザインとプログラミングのスキルを高い水準で組み合わせることが可能な デザイナー+ディベロッパ として、おもに音楽アーティストのサイト制作で活躍。

一方で近年では Flash で培ったインターフェイスデザインやインタラクションデザインを iPhone 上に展開することに注力。その成果の一端が デジタル大辞泉 や ポケプロ英和和英 などで見られるデザインに現れており、AppStore でも高い評価もうけている。


Web
hitomi/m-flo/倖田來未/koda kumi x misono/jasmine/soulhead/伴都美子/ONE★DRAFT/tourbillon/ ANA中国/Loft/BEYES/CrossGolf(vw)/ buzz(coca cola)/space invaders 25th(TAITO) 他

iPhone
MoneyTron/SpliTron/SpliTron2/ショッぷらっと(NTT docomo)/iMandalArt/MapFan for iPhone/デジタル大辞泉(小学館)/ポケプロ英和和英(小学館)/P.M.Ken Official Site 他

Graphic
BE@RBRICK world wide tour book(MEDICOM TOY)/日之内エミ/ 小林陽明/makai/WARP MAGAZINE/COOLTRANS 他

13.10.01

category

comments

0

trackbacks

0

permalink

Contact


webtron Inc.
〒151-0063
東京都渋谷区桜丘町2-3 富士商事ビル405 THE GUILD内
TEL. 050-3136-8823  

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  

12.02.11

category

comments

1

trackbacks

0

permalink

Time spans of UX

最近いろいろなところで UX の重要性について語られることが多いのだけど、UX の意味ってすごく広い。
UX をどう捉えるかによってデザインされたアウトプットも変わってくるはずだと思うので、定義を正しく捉えることってとっても大切。そこで、自分がUX について考えてきた過程を少し書いてみることにしました。

◆UX の定義

自分は UI デザイナーという立場から UX というものに出会いました。
最初の自分の UX の定義は「UI の使い心地、ユーザビリティ」や「インタラクション・ビジュアルデザイン」を通じたユーザ体験という感じだったんです。UI Oriented という感じです。

ところが2011年から参加している AIIT の Human Centered Design の履修プログラムで出会った Web サービス系のデザイナーさんや SIer さん達と話をするうちに UX の定義が自分のものと何か根底から違っていることに気がついたのです。
いや、正確にいうと定義というよりも「UX で最も重要視していること」なのかな。
サービス系の人たちは UX =「サービスを使う過程のユーザ体験、サービスを利用することで成し得た体験」、UXD(UX Design)≒「サービスデザイン」といった割と大きな視点で UXを捉えているのです。この捉え方を Service Oriented と勝手に命名。
こちらのほうが世間一般に言われている UX に近い気もします。

両方ともたしかに UX だと考えられるんだけど... というわけで自分のなかに異なる UX の定義が同居することになりました。
この2つの関係性はどうなってるのか、はたまたこれ以外の定義が存在するのか。
自分のなかに疑問が生まれたのです。

◆UX白書(User Experience White Paper)に出会う

ユーザビリティや HCD に関する勉強会「新横浜ユーザビリティ研究会」というのがあります。自分は第3回あたりからずっと参加しているのだけど、その第6回に HCD Value(HCDの実践をコンセプトとしたコミュニティ)の方々が行ったセッションでこの疑問を解決する糸口を得ることになります。

セッションの内容は UX白書(User Experience White Paper)という 2010年に Dagstul セミナーで議論された「ユーザエクスペリエンスの概念」についてまとめた宣言文を HCD Value が翻訳し、その概要について報告をするというものでした。

その UX 白書のなかに「TIME SPANS OF USER EXPERIENCE」というのがあって、そこに解説とともにこんな図があったのです。

timespans-of-UX.png

自分の理解しているレベルで説明すると

Anticipated UX : 
プロダクトを使う前のUX。プロダクトを使うことでできることを"ユーザが想像する"体験。
>ブランドイメージや販売促進戦略などをデザインすることでよりよいUXを提供できると思う。

Momentary UX:
プロダクトを使っている最中のUX。使い心地や効率性の体験。
>ユーザビリティやインタラクションをよりよくデザインすることが重要。自分の最初に考えていたUXの定義はこれだったのか...

Episodic UX:
使用後のUX。プロダクトを使って成し遂げたことを振り返って感じる体験。
>サービスやアプリケーション設計をきちんとデザインすることでユーザの要求を満たすことができる。要求以上のことを提供できれば、それはすばらしい体験につながる。Service Oriented はこのあたりと次の Cumlative を合わせた感じなのかな...

Cumulative UX:
上記3つの体験をあわせた全体から感じる体験。
>よいUXを提供することがユーザの満足感やエンゲージメント(愛着)につながるのではないか。

このように "UX は Time Span ごとに捉えることができるのだ" と考えると、自分のなかの UX の定義に対する疑問がすうっと消化されました。ただ、UX 白書に出会ったのが8月で AIIT に通い出したのが 10月からですから、ピーンとくるのに大分時間がかかってますけどね。さらに自分が認識していた2つの UX に加えて Anticipated と Cumulative というもう2つの UX があることがわかりました。

◆全ての Time Span で UX をデザインする

自分が UI Oriented や Service Oriented と思っていた UX は実は Cumulative UX という全体の体験の一部に過ぎなかったわけです。
それまでに自分がデザインしたプロダクトを振り返ると、理解できていなかった UX へのケアが不足しているのがわかって、己の未熟さにしょんぼりしたりしましたが、同時に UX を Time Span でセグメントすることでよりよい UX を提供するにはどのような方策を取ればいいか、という改善点を容易に見つけることができたのは、この概念を知ることができたからこそだと思っています。

◆まとめ

正直自分は勉強嫌いだし、理論よりも実践してなんぼと思っているタイプなのだけど、こういうことがあると勉強も大事だよねえ、と思わざるをえないです。クライアントワークでこの4つの UX にフルコミットできるのってなかなかないケースだとは思うけど、こんど自分でアプリを出すときにはこれを意識しながらプランをつくっていこうと思うのでありました。

関連リンク:
新横浜ユーザビリティ研究会:http://asanoken.jugem.jp/?cid=23
HCD Value:http://site.hcdvalue.org/
User Experience White Paper:http://www.allaboutux.org/uxwhitepaper




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)
・空間的な記憶の利用
・正しいマッピング
・体制化の利用(ゲシュタルトの法則)

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

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