UID Lab

Λ Structure Design™とは

新たに立ち上げたデザインのブランドです。アプリやWebサービスなど、面白い事をしていきます。

Webサイト

Λ Structure Design™

制作プロセス

コンセプト&ネーミング編

ロゴ&名刺編

Webサイト編

公式Twitter

@lsd_jp

Feed

突然ですが、当ブログ「UID Lab」はこの投稿を持って更新終了します。

一年ちょっとの間、ありがとうございました。

ブログを始めて痛感したのは、「誰でも発信者になれる」ということの持つ強大なパワーです。最初に書いた記事「GunosyのUIを徹底的に分析してリデザインしてみた」がいきなりバズって、ありがたいことに記事を見かけた方からいくつかUIデザインのオファーをいただくことができました。

その後もいくつかの話題に恵まれ、「iOS7でAppleが目指したのは「UIデザインの常識」の再発明である」によって、TokyoFMに2回もゲスト出演するという貴重な体験も出来ましたし、「UXを損ねる最悪なグロースハック」は多少なりとも「ユーザーを騙す事はやめた方がいい」というメッセージを伝える事ができたと思います。

こんな夢のような出来事が自分に起こるとは思っていませんでしたし、ぜひ皆さんにも自分の得意分野のブログを立ち上げてほしいです。絶対にセルフブランディングになるから。

更新終了の理由

更新をやめるのは、僕が次のステップに進むためです。次のステップというのは、UIデザインというジャンルにとらわれずに、「Webから仕事を戴く」ということであったり、「自分の世界観を発信」したりすることに更に力を入れるという事です。

UIデザインに興味がなくなったわけではないですが、UIデザインについて語ることにはずっと負い目がありました。というのも、優れたデザイナーじゃない人物がデザインの事を偉そうにしゃべっても、それはただの批評家にすぎないからです。僕は批評家になりたい訳ではないので、デザインブログを書いている暇があったらとにかくデザインをしていきたいと強く思うようになりました。

負い目があるのにこのブログを立ち上げた目的は、ゆくゆくは個人で仕事をしていきたいという気持ちがあり、その足がかりになって欲しかったからです。ブログを書くのはがっつりプロジェクト始めるよりも遥かにコストが低いですから。その役目は十分に果たしたという判断になります。

今後の活動

そういうわけで、ここしばらくずっと準備していた新プロジェクトをやっと発表できる段階になりました。新たにデザインブランド「Λ Structure Design™」を立ち上げます。今後は、このブランドを拠点として活動する事にしました。アプリやWebサービスなど、色々作って行きたいと思っています。デザインについて語る事は少なくなってしまうかもしれませんが、ブログもあります。

さいごに

これまでSNSでシェアしていただいた方、ソーシャルブックマークやdisqusで貴重なコメントをくださった方、リブログやLikeしてくださった方、ブログから仕事のオファーをくださった方、そして今この記事を読んでいるあなたに感謝します。

GODZILLAを観てきた。結論からいうと、前回のハリウッド版ゴジラと大して変わらないという印象だった。アメリカのゴジラは自分が考えるゴジラらしさに合わないとも言える。ただし、前回は明らかに別ものだったので楽しめたが、今回は全体的な雰囲気やゴジラの造形が日本版に近づいていることもあり、残念度は増してしまった。

具体的な自分の考えるゴジラ像は以下の通り。ちなみに平成ゴジラ世代である。

自然災害のメタファーとしてのモンスターパニックもの

大迫力の特撮（ミニチュア&CG)

ゴジラの生物としての心の機微

反戦・反核メッセージ

この中で今回のGODZILLAで表現されたのは、「自然災害のメタファーとしてのモンスターパニックもの」のみだった。怪獣が軽く歩くだけでも人間社会には甚大な被害が生じてしまう…この部分はとてもよく表現されていたと思う。アクション映画として、少年のようにドキドキするという気持ちは満たされた。

そのほかの3つについて、順に感想を書きたい。

大迫力の特撮（ミニチュア&CG)

これは残念ながら、全盛期の日本特撮には到底かなわなかった。当然、CGだからこそできた映像、カメラワークなどはかなりあって、それはそれでいいんだけれども、日本特撮を見慣れている自分としては、トータルの印象として「すごい」という感じにはならなかった。それは建物の壊れが嘘っぽかったり、怪獣の動きが軽すぎたり、いろいろなところに出ていたんだけども。

特にいまいちだったのがゴジラの放射火炎だ。光線というよりも特殊な息を吹きかけているようなイメージで、確かにリアルなのかも知れないが日本版のド派手なものの方が好みだった。ただ、直前の背びれが徐々に発光するシーンは「きたぞ！」という感じでかなりかっこよかった。それだけに発射シーンとの落差が大きかったように感じる。

まだまだCGだけではミニチュア特撮にかなわないんだな、と思った。

ゴジラの生物としての心の機微

怪獣の感情が垣間見えたのは「子供を殺されて怒り狂うムート」「カップルでいちゃつくムート」くらいで、ゴジラには感情がないんじゃないかと思えるほどだった。それもそのはずで今回のゴジラは「自然界のバランスを取るために出現する調停者」という、平成ガメラのような描写が強調されていて、神様のような立ち位置である（GODZILLAだしね）。にもかかわらずゴジラをヒーローとして持ち上げるような演出はいかにもアメリカっぽくて合わなかった。これが「人類が強くなりすぎるといつかはゴジラに牙を剥かれるかもしれない」という感じだったらゴジラらしいと思えるのだが。

反戦・反核メッセージ

人間が生み出してしまった怪獣を人間の手で殺す身勝手さ。こういったメッセージ性がゴジラの魅力である。

今回はこれが非常に薄く、強いて言えば渡辺謙が演じる芹沢博士が核兵器の使用に反対するシーンは、唯一の被爆国である日本を代表して…という風に見えてよかった。

それよりもどうかと思ったのは、ゴジラの出自に関してだ。初代ゴジラでは「度重なる水爆実験で住処を追われてしまったゴジラが地上に現れる」という形だったが、今回のゴジラは「世界初の原子力潜水艦が目覚めさせてしまった」ということになっている。それだけならなんてことはないのだが、なんと「実は水爆実験は実験ではなく、ゴジラを恐れたアメリカとソ連がゴジラを殺すために行っていた攻撃だった」という設定になっているのだ。

これは初代ゴジラの反核メッセージを全否定しているように思えた。日本人の中には、これに嫌な気分になる人がいるかもしれない。ほかの映画ならともかくゴジラでそれをやるのは…。

ただし、アメリカで作られたゴジラなのでこういった設定変更はやむを得ないだろうし、「日本での原発事故」や「原発周辺を禁止区域にして事故原因を隠蔽する組織」など、日本では絶対に描けないことをやってのけているのでトレードオフかもしれない。しかしこの原発事故は日本で起こったことをなぞっているだけでなんのメッセージ性もなく、そこが残念だった。もっと強烈に日本をディスってくれるかと期待していた。

またせっかく芹沢博士が登場するのに、名前が同じというだけで、特に初代とは関係なかったのは残念だ。ゴジラを生かしたがったり、生物学専門だったりと、どちらかというと山根博士の方がよかったのでは…。

その他

主人公が爆発物解体屋なのに爆弾のふたが開かないせいで解体できずに終わるので、主人公はいなくてよかった。

まとめ

日本のミニチュア特撮の新作が観たい。そう思わせてくれる映画だった。「巨神兵東京に現わる」「パシフィック・リム」そして今回の「GODZILLA」の流れで、確実に特撮ブーム再燃のきざしは見えてきている。なんとか採算が取れるような形で日本特撮の復活を望む。

ゴジラ(昭和29年度作品)【60周年記念版】 [Blu-ray]

posted with amazlet at 14.07.26

東宝 (2014-06-18) 売り上げランキング: 694

 >世界で読み継がれてきた、わびさびを読み解く試み。 世界を魅了した美の哲学。待望の初訳刊行! (ツイッター社・スクエア社創業者ジャック・ドーシー氏も愛読! ) とのことで、初版は94年らしい。僕は小学2年生だった。20年以上も前から「わびさびの消滅」を危惧していて、しかも外国人が海外向けに出版したというのはすごいことだと思う。 内容としては日本人が感覚的には理解している「わびさび」というものを、モダニズムなどと対比しながら言語化するという非常に実験的な試みを行っていて、非常に納得出来た。 しばしば自然界に現れる微妙な機微（いわば諸行無常のようなもの）に儚さを感じて「いとをかし」と表現するのは日本人だけなのかもしれない。 尚、本書には著者の新たな書き下ろしが追加されており、その中で「わびさびを表現するには無限値が必要なのでデジタル化は不可能である」と述べられていたのがUIデザイナーとして印象的だった。「Web上でのわびさび表現」というのは興味深いテーマである。 とても短い本で読みやすいし、是非一読をおすすめします。

Wabi-Sabi わびさびを読み解く for Artists, Designers, Poets & Philosophers

posted with amazlet at 14.07.08

レナード・コーレン ビー・エヌ・エヌ新社 売り上げランキング: 74,753

シンプルさの重要性が叫ばれ始めてからずいぶん時間が経ちました。特にAppleが大成功をおさめたくらいからだと思うのですが、書店に立ち寄ると必ずといっていいほど「シンプルさ」をテーマにした書籍を見かけます。こういった本では「シンプルだと気持ちがすっきりする」や「Apple製品はシンプルだから売れる、だからシンプルにしよう」というようなことばかりが語られています。 言うまでも無く、単純にApple製品のスタイリング（見た目のデザイン）を真似てもシンプルなプロダクトにはなりません。考え無しに「少ないは正義！」といってやみくもに断捨離しても、捨てたら困る物まで捨ててしまって後悔することになります。 それでは、そもそもシンプルとはなんなのでしょうか？一体どうすれば、あらゆるものをシンプルにデザインすることができるのでしょうか？ ## シンプルさとは… シンプルさとは、「一点のブレもなく、進む方向が完璧に決まっている」状態だと僕は考えます。「コンセプトが明確である」と言い換えることも出来るでしょう。 コンセプトが明確だと、なにが必要でなにが不必要であるのか分かる様になります。すると、不必要なものをどんどん捨てる勇気が出てきます。 シンプルで大胆なデザインを得意とするアートディレクターの佐藤可士和さんは、まず医者の問診のような感覚でクライアントにヒアリングするそうです。企業の問題点を洗い出し、デザインの力で治療する。ヒアリングは、コンセプトを決定するための地道な努力であると言えるでしょう。 ## WiiとWii U  例えば、Wiiは「直感的なコントローラ」というコンセプトで大ヒットしましたが、それはこのコンセプトを完全に体現した「Wii Sports」というゲームがあったからです。「Wii Sports」を始めとして、WiiのほとんどのゲームはWiiリモコンとヌンチャクさえあれば遊べました。つまりWiiリモコンは、Wiiにとってこれ以上減らせない最小限である＝シンプルである、ということになります。 一方、Wiiの次世代機Wii Uでは「Gamepadで画面が2つある」というコンセプトを打ち出したものの、「テレビなしでプレイ出来る」のか「2画面で非対称のゲームプレイが楽しめる」のか、どっちつかずでよく分からない上に、Gamepad、Wiiリモコン、Wiiリモコンプラス、ヌンチャク、PROコントローラなどなどゲームによって対応している（あるいは最適な）コントローラがバラバラです。必要がないのに無理矢理Gamepadを使わせようとしてくるゲームも多く、任天堂がWii Uで表現したいことは一体なんなのか、任天堂自身が混乱してしまっています。 これが「ブレている」状態で、この状態に陥ると何が必要で何が必要じゃないのか分からなくなってしまい、色々と余分なものを付け足してしまったり、必要なものを削除してしまったりするのです。なぜなら、余分かどうかを作っている人が判断出来ないからです。絶対にこうなんだ！というコンセプトさえしっかりしていれば、自信をもって取捨選択が出来るため、常にシンプルでいつづけられます。 余談ですがこのブログにも関連記事や人気記事といったセクションが下部にありますが、何も考えずに「ブログアクセスアップ法」みたいな記事を読んで設置してしまったので、そのうち削除しようかなと思っています。。 ## ではコンセプトの決め方は？ ### 自分と対話する ブレないコンセプトを決めるために必要なこと…それは、常日頃から自分の人生のあらゆる事柄について、深くこだわることだと思います。もっと言うと、自分の内面との対話ということになるでしょうか。 例えばあなたの机（家に机がなければオフィスでもいいです）の上には何が置いてあるか、見ないで全て答えられるでしょうか？置いてあるもののうち、絶対に必要なものがどれで嗜好品がどれかという整理はできていますか？また、今の机の状態に満足しているでしょうか。中には考えたこともなかったという方もいるかもしれません。 僕はMacbookをスタンドに立て、ディスプレイを接続して、Wirelessなキーボードとトラックパッドを使っていましたが、ある日思い立って、Macbook以外をすべてどかしました。それ以来なんの問題もなく作業出来ています。「デザイナーだったら大きいディスプレイが必要なんじゃないか」「ラップトップだと肩が凝るんじゃないか」といった不安で使っていたのですが、実はそれらは全てまやかしでした。よくよく考えると、僕には必要なかったのです（必要な人もいると思いますが）。すると、机の上のスペースが大幅に広くなり、まさしく「シンプル」と形容すべき状態になりました。これが僕にとっての必要最小限だったのです。 このようなことを積み重ねると、「自分がどんなことをしたいのか」ということがどんどんハッキリしてきます。そうすると自分の中に軸ができて、物事を決める時に迷わなくなってきます。そしてそれが、ブレないコンセプトを作る為の土台になるのではないでしょうか。 ### とにかく書き出す 僕は1人会議することがよくあります。[UIデザイナー必須ツールメモ](http://uid-lab.tumblr.com/post/84800563526/ui)でも紹介した「DAY ONE」にしょっちゅうメモ書きしています。書くことで考えが整理され、問題点が浮かび上がってきます。

Day One

カテゴリ: ライフスタイル 価格: ￥700

デザイナーの場合

デザイナーは依頼者のコンセプトをヒアリングすることももちろん大事ですが、既に述べた様に世の中には自分が何をしたいのかハッキリしていない方も大勢いますので、一緒にコンセプトを作り上げる様に、導いてあげましょう。そこさえクリアすれば、あとはジェットコースターのようにコンセプトに沿ってひたすら作るだけです。

まとめ

やみくもに減らすことにこだわるのではなく、道筋をしっかり確定させ、ブレずにまっすぐ進むことで、真の「シンプル」が実現出来るのではないでしょうか。

minimalism 〜30歳からはじめるミニマル・ライフ

posted with amazlet at 14.07.06

ジョシュア・フィールズ・ミルバーン ライアン・ニコデマス フィルムアート社 売り上げランキング: 13,449

 偶然Webで知った[薄い財布](http://superclassic.jp/?pid=16355432)。ミニマリスト以外は使うなと言わんばかりの尖ったコンセプトが素敵です。 小銭入れが小さかったりカードが5枚しか入らなかったりするものの、実際に使ってみて全く問題ない事が判明。特に小銭入れは辛いかな？と思っていたのですが、通常の財布に比べて見通しがいいため要求された小銭を取り出しやすく、小銭があふれた事は今の所ありません。 また、隠しポケットがあり鍵を入れられるようになっています。実はこれが何よりも嬉しかったかもしれません。これによって面倒な鍵の取り回しがなくなり「iPhoneと財布」だけでの外出が可能になりました。 色々なモデル/カラーのものがAmazonで売られていますが、どれも革の質感がかなり異なるためリアル店舗で実物を見てから購入する事をオススメします。僕は[髙島屋限定モデルの黒×黒](http://www.takashimaya.co.jp/shopping/mens/abrasus/itemlist/0200000461/-/ps_id/4308675/storeCode/ECST0001/c_cd/0200000461)を使っています。

薄い財布 abrAsus ブッテーロレザーエディション キャメル 7月10日出荷

posted with amazlet at 14.07.04

 夏のインナーはずっとUNIQLOのAirismを使ってきましたが、乗り換えることに。 ## いいところ ### 1.日本人向けのサイズ  これまでのHanesTシャツはサイズがアメリカンだったのでワンサイズ小さめのものを買わないとならなかったんですが、これは日本人の体系に合わせてあるのでそういう問題がないです。 ### 2.安い 2枚で2,300円なので、1枚1,000円ちょっと。ファッション性で売ってるアイテムにしては安くないですか？へたっても気軽に買い直せそうです。またこの2枚組っていうのがうまくて、試しに使ってみようという気分になります。新規ユーザーを取り込もうとしてることが伺えますね。 ### 3.着心地がいい Japan Fitモデルのみあらかじめ洗い処理が施されているということもあるのか、着た瞬間から「あ、気持ちいいな」と思いました。Airismの場合、確かに体を冷やしてくれるのは実感出来るんですが、着心地がざらついていてあんまり気持ちいいものではないんですよね。もちろん、Tシャツなんていいものを買おうと思えばいくらでも高いものがありますが、値段を考えるとコスパがめちゃくちゃ高いと思います。 ### 4.無地 タグ部分にしかブランドのロゴがなく、見える部分は完全無地。インナーにもなるし、シャツとレイヤードにもしやすい。それなりに肉厚なので部屋着にもなる。イケメンとかモデル体系だったらこれ一枚で外出しても映えるんじゃないでしょうか。[公式サイト](http://www.hanes.jp/japanfit/)に色々コーデが載ってました。ちなみにホワイト、ブラック、クルーネック、Vネック揃ってます。 ### 4.おしゃれ  海外版のパッケージは日本人の感覚からしたら、正直ダサい感じがありますw  それに対してJapan Fitはパッケージもかっこいいし、気軽に買い物かごに放り込める感じですね。BEAMSの別注モデルがあったりもします。

(ビームス) BEAMS HANES / T-SHIRTS Japan Fit 11490037411 1 WHITE XL

posted with amazlet at 14.06.26

BEAMS(ビームス)

Amazon.co.jpで詳細を見る

ちなみに海外版にはsupremeの別注モデルもあって、ファッションブランドの3枚パックTシャツの先駆けになったとか。確かに突然よく見かけるようになりましたよねぇ。そんなわけで、「HanesのTシャツ着てる」ってだけでオシャレになったような気分を味わえます。

まとめ

今年はホワイトが流行ということもあり、シンプルなファッションが流行りみたいですね。白Tシャツは1枚あると色々便利ですし、是非試してみてください。あと、これまで男性向けしかなかったんですがJapan Fitの女性向けも発売されたみたいです(amazonにはまだないみたいです)。

ヘインズ 日本人女性に向けたパックTシャツ発売 | Fashionsnap.com

女性の方も是非試してみてくださいね。

(ヘインズ) Hanes H4110 2PACK TEE JAPAN-FIT - WHITE 2枚組パックTシャツ スリムフィット

posted with amazlet at 14.06.26

売り上げランキング: 57,490

Wii Fit U バランスWiiボード (シロ) + フィットメーター (ミドリ) セット

posted with amazlet at 14.06.23

任天堂 (2014-02-01) 売り上げランキング: 1,158

Amazon.co.jpで詳細を見る

今更ながらWii Fit Uのレビューです。結論から言うと、とても楽しい！運動嫌いな僕でも、楽しく有酸素運動や筋トレが出来る。遊んでいて気が付くと（ジョギングやウォーキングには及ばないものの）それなりのカロリー消費が出来る。

それだけなら無印Wii Fitと変わらないのだけど、今作はユーザーが電源を入れる敷居がかなり低くなっており、また生活に溶け込んだ自然な形でフィットネスが出来るように相当工夫されている。

僕はWii Fit Uと間食抜きダイエットを実践しているのだが、購入後約3週間で2キロの減量に成功した。

知り合いじゃないと伝わらないのだが、この僕が運動を継続出来ているというのは相当だ。以前ジョギングにチャレンジしたときは、5分走っただけでクタクタ。走るという行為自体がめちゃくちゃつまらないし、足が痛いしで一瞬にして挫折したのだった。

これまであからさまに太った事がなかった僕は、正直どうやって痩せればいいのか途方に暮れていたのだが、Wii Fit Uがいともたやすく壁を打ち壊してくれた。今回は特に、「モチベーションを上げるためのゲーミフィケーションの仕組み」に焦点を絞ってレビューを書いてみる。具体的なトレーニングの内容については他のブログ等を参照に。

フィットメーターの存在

今作はフィットメーターという活動量計と連動しており、一日の消費カロリーをWii Fit Uに転送して消費カロリーを管理することができる。これが意外と優れもので、気圧センサーによって高度を測定し、階段の昇り降りのカロリーなども計算してくれる。

恐らくこれがWii Fit Uにおけるカギとなる仕組みで、

1.見やすいグラフで消費カロリーを確認するためにはWii Fit Uを起動せねばならず、 2.一旦起動したら自然な流れで体重を計ることになり、 3.目標カロリーに到達していなければついでにトレーニングも…となる。

そうなるとどんどん体重と消費カロリーのデータが蓄積されていき、いわゆる「計るだけダイエット」も継続しやすくなり、トレーニングも続けたくなってくる。このエコシステムが思ったよりも素晴らしく、これだけで相当モチベーションアップになった。

フィットメーターからカロリーを転送するときの、消費カロリーが貯まるアニメーションが気持ちよく、楽しい。

GamePadのみでプレイ

今作はWii U GamePadのみでほとんどのトレーニングをプレイできるようになり、テレビを付ける必要がないのでかなり起動の敷居が下がっている。また、家族がテレビを見ていてもトレーニングが可能である。これまでのWii Uのゲームの中で、最もGamePadが活用されているのではないかとさえ思う。もちろん画面は小さくなってしまうのでバランスゲーム等は臨場感が減ってしまうが、筋トレとヨガ、有酸素運動には十分ではないだろうか。

クイックスタート画面の実装

これはWii Fit UというよりWii U本体の機能なのだが、最近のアップデートによりクイックスタート画面が実装され、かなりの早さでゲームが起動できるようになった。このため電源を入れるのが億劫ということは全くなくなり、余裕で毎日プレイ出来ている。ちなみにこの機能はGame Padのキャッシュを利用しているとのことなので、他社のハードには恐らく真似出来ないと思われる。 （参考:任天堂 Wii U本体更新、クイックスタート画面を追加。本体メニューを介さず直接ゲーム起動 - Engadget Japanese）

ダウンロード版の存在

Wii Uではフルプライスのゲームにもダウンロード版があり、Wii Fit Uももちろん販売されている。どんなゲームをプレイしていてもディスクを入れ替える必要がなくなるため、これまた起動の敷居が下がっている。ただし、なぜかバランスWiiボード同梱版にはDLカードのバージョンがないため、これから新規で始める場合は値段的にパッケージ版の方がお得という状態になってしまっている。明らかにDL版が向いているソフトなので、DLカードとバランスWiiボードがセットになったパッケージも欲しかった。

Miiverseで励まし合う

Wii Fit UのMiiverseコミュニティでは、多くのユーザーが毎日のように進捗や悩みを投稿していて、モチベーションアップに繋がる。Miiverseでなくても、と思うかもしれないが、2chなどの掲示板ではモチベーション維持というよりも情報交換目的の方が多いので、ちょっと毛色が違うかなと。

難点

これはWii Uのゲーム全般に言えることなのだが、コントローラの種類が多すぎて煩雑である。あるトレーニングではWiiリモコンプラスが2つ必要なのだが、あるトレーニングではヌンチャクでよかったり、GamePadが必要だったりテレビとGamePadが両方必要だったりと、何がなんだか分からない。これではせっかく購買意欲があってもコントローラのことがよくわからずに購入に至らないケースもあるのではないかと思った。

ちなみに、よくわからない場合はWiiリモコンプラスを2つ買っておけば、全てのトレーニングに対応できる。

Wiiリモコン プラス (シロ) (「Wiiリモコンジャケット」同梱)

posted with amazlet at 14.06.23

任天堂 (2010-11-11) 売り上げランキング: 718

Amazon.co.jpで詳細を見る

まとめ

以上のようにWii Fit Uでは、相当のものぐさでも楽しく運動出来るように、徹底的にユーザーをもてなす工夫が施されている事が分かる。ゲームのスコアを稼ぐ感覚でカロリーを消費でき、体重を目標に近づけていくのは快感ですらある。もちろん、本格的なトレーニングには向いていないが、僕みたいに「運動がとにかく嫌いだが、それでも筋肉をつけたい、ダイエットしたい」という層にはちょうどいいのではないだろうか。

なによりもワンセットで自宅で「消費カロリー」「体の重心」「体重」「BMI」が全て管理でき、正しいトレーニング方法も分かり、健康に関する知識も得られるガジェットはこれしかないはずだ。

実は、Wii Fit Uを買う前にWii Uのゲームは全て売り払ってしまった。ピクミン3やマリオ3Dワールドを含めて、面白いと感じられるゲームがなかった。よって継続できているという意味では、僕にとってWii Fit Uが最も面白いWii Uソフトである。本来のゲームではないWii Fit Uが最も出来がいいというのは、皮肉なことかもしれない。

これほど良質なフィットネス体験を提供できるのだから、任天堂がQOLプラットフォームという新規事業を立ち上げるのは間違っていないと思うし、このノウハウを様々な分野に活かすことで「本当はつらいはずのこと」が「楽しくゲームをしていたらいつの間にか達成していたこと」に変わっていくかもしれないと思った。

▼Wii Fit UとバランスWiiボード、フィットメーターのセット▼

Wii Fit U バランスWiiボード (シロ) + フィットメーター (ミドリ) セット

posted with amazlet at 14.06.23

任天堂 (2014-02-01) 売り上げランキング: 1,158

Amazon.co.jpで詳細を見る

▼Wiiリモコンプラスが2つあれば安心▼

Wiiリモコン プラス (シロ) (「Wiiリモコンジャケット」同梱)

posted with amazlet at 14.06.23

任天堂 (2010-11-11) 売り上げランキング: 718

Amazon.co.jpで詳細を見る

▼ヨガマットも必須▼

任天堂公式ライセンス商品 Wii Fit U マット

posted with amazlet at 14.06.23

ホリ (2013-10-31) 売り上げランキング: 1,224

POP - Prototyping on Paper

カテゴリ: 仕事効率化 価格: 無料

プロトタイピングツールのPOPがバージョンアップし2.0になっていました。POPは、以前書いた必須ツールメモにも挙げた素晴らしいアプリです。

追加された機能

Dropbox 同期

横画面モード対応

ジェスチャー操作対応

iPad, iPhone, Nexus アプリの作成

一括複数画面撮影

スクロール可能なモックアップの作成

プロジェクト、モックアップ、ホットスポットの複製

モックアップのタグによるグループ分け

既存のモックアップとのリンク

スクロール対応はかなり嬉しいですね！ジェスチャーやランドスケープモード対応もありがたく、痒いところに手が届くようになりました。

また、リリースノートにはありませんでしたがUIがiOS7に最適化され、アプリアイコンもシンプルになりました。

タイトルバーのUIが気になる…

…なんですが、前のバージョンに比べて少々UIがわかりづらくなっていますね。特段気になったのはタイトルバー部分のアイコン。

編集ボタン

「編集」ボタンのアイコンが「鉛筆」ですが、鉛筆は新規投稿のイメージが強いので、不適当かな。その横に新規追加の「+」アイコンがあるのも混乱を招きますね。ここは「編集」というテキストで良かったかもしれません。

ヘルプボタン

また、ヘルプボタンが新設されていましたが、大した内容でもないですし、かなりボタンの数が多くなってしまっているので不要かなと思いました。

フィルターボタン

「フィルター」のアイコンは漏斗かな？気持ちは分かりますが、ちょっとイメージしづらいですね。

「モックアップの説明」画面にタグのアイコンがあるので、普通にそれを使えばよかったと思います。「タグ」があるのですから「フィルター」という概念を新たに作る必要はないかなと。

この辺り、UIを作るツールなのでもう少しこだわって欲しかったですね。とはいえ最強ツールには変わりませんので、ガンガン活用していこうと思います。

▼UIパターンの事例集

デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン

posted with amazlet at 14.05.27

Jenifer Tidwell オライリージャパン 売り上げランキング: 290,158

 mailtoスキームとは、<a href="mailto:メールアドレス">メールアドレス</a>のようなやつです。 僕がWebに関わり始めた頃(2004年くらい)には、「勝手にメールアプリを起動するのでユーザビリティを損ねる」ということが様々な書籍・ブログなどに書かれていた記憶があるのですが、いつのまにかパッタリと見かけなくなりました。「mailto ユーザビリティ」などでググってみると、このことを問題視している最も最近のサイトの日付は2007年付近のようです。しかも2ちゃんねる。 ([そろそろmailto:やめろって!!](http://toro.2ch.net/test/read.cgi/hp/1161741449/)) なぜあまり見なくなったのか、その理由を探ってみました。 ## mailtoを使っている事例 クリエイティブ系の企業Webサイトや最近流行りのシングルページ系サイトでは、mailtoスキームを利用して連絡先を表示している事例をよく見る気がします（体感）。  [ABOUT | POOL inc.](http://pool-inc.net/about/contact)  [dot by dot inc.](http://dotby.jp)  [Nobuaki Honma](http://rbv.me) こうして見ると、やはりユーザビリティの問題は完全になくなってしまったかのように思えますね。 ## そもそもなぜまずいのか ### Wikipedia Wikipediaのmailtoの項目（そういうのもあるのか！）には以下のように書かれていました。 >Webメールの普及により、メールクライアントのない環境、またメールクライアントはプリインストールしてあるものの、設定すらされず放置されている環境も増えてきている。そのような環境でmailtoのリンクをクリックしても、メールクライアントが設定されていないとエラーを出すか、未設定のメールクライアントが開いてしまうという、どちらにしても望まない結果となってしまう。 [mailto - Wikipedia](http://ja.wikipedia.org/wiki/Mailto) Wikipediaにしては独自研究感の強い記述ですが、つまりブラウザでgmailを使っているユーザーが多いので、メールソフトを起動されると困るということですね。 ### ヤコブ・ニールセン博士 ユーザビリティの第一人者「ヤコブ・ニールセン博士」が1999年に公開した文章には以下のように書かれていました。 >ブルーの下線が付いたテキストをクリックした時の反応として、新しいページへのハイパーリンクではなく、電子メール画面が開くというのは、Webの慣習に反している; このような一貫性のなさは、Webをますます予測不可能なものにし、ユーザビリティを損ねるものだ。 [新・Webデザインの間違い・トップ10 – U-Site](http://www.usability.gr.jp/alertbox/990530.html) まぁこれは「著者の名前にmailtoスキームを使うな」という文脈での意見なのですが、この書き方だとmailtoを全否定しているようにも読み取れます。 更に、ネットにメールアドレスを晒すとスパム業者のメール爆撃がある、という管理者側の問題もありますね。 ### まとめると。。 mailtoスキームを使用する上での問題点は以下の3点かと思います。 1. ユーザーの「リンクをクリックするとブラウザ内で別の画面に遷移するだろう」というメンタルモデルに反する 2. ユーザーがOSネイティブのメールソフトを利用していない場合、勝手に起動されるとイライラする 3. スパム業者からの迷惑メール地獄 それぞれについて、解決したであろう理由の仮説を立ててみました。 ## 1.正しいラベルの普及とユーザーのメンタルモデルの変化 >「「メーラーが起動する」ということが分かるようなラベルを用いずに使ってしまうと、ユーザーの「リンクをクリックするとブラウザ内で別の画面に遷移するだろう」というメンタルモデルに反する」 これについては、ラベルに気をつければ解決します。つまり、「メーラーが起動するリンクの場合は、必ずラベルをメールアドレスにする」という手法です。いわばシグ二ファイヤですね。例を見るまでもなく、完全に開発者側に浸透したと思います。それにともなって、ユーザーのメンタルモデルも統一されてきたという可能性は高いです。 そういえば、mailtoリンクの後に(クリックするとメーラーが起動します)のような補足説明を書いているサイトをよく見かけましたが、最近はないですね。もはやそのような補助輪は必要ないのでしょう。 ## 2.In browserなメーラーの普及  >ユーザーがOSネイティブのメールソフトを利用していない場合、勝手に起動されるとイライラする これについて、スマートフォンやタブレットでは、mailtoリンクをタップするとブラウザ内のアクションシート形式でメーラーが起動します。シームレスで起動も非常に早く、メールフォームよりも圧倒的に使いやすいこの機能の登場で、このことを問題視するユーザーが相当減ったのではないかというのが僕の予想です。 また、スマートフォン説を裏付けるかもしれない事実があります。それは、iPhoneの発売が上記の2007年ということです。それ以降のスマートフォンの普及に伴って、徐々にmailto不要論は縮小していったのではないでしょうか。 ## 3.メールアドレスのエンコード >スパム業者からの迷惑メール地獄 これについては、メールアドレスをエンコードする事でスパムを低減することが出来るようです。 [いろんなサイトのスパム対策 - Folioscope](http://folioscope.hatenablog.jp/entry/2013/01/12/000424) また、gmailは非常に高い精度で迷惑メールを振り分けてくれます。たまにミスもありますが…。よって、ネットにメアドを書き込むリスクがかなり軽減されたということも背景にあるのではないでしょうか。 ## まとめ 以上はあくまで仮説ですが、もしこの通りなら技術の進歩とユーザーリテラシーの上昇にともなってクリアされかけている（まだ完全ではない）問題と言えそうです。感度の高いクリエイティブ系の企業は、このような事も肌で感じ取っているのかもしれません。実際、シンプルにメアドだけを掲載しているサイトは「潔くてかっこいいな」と思いました。 もちろん、色々な項目を入力して欲しい場合や、利用者の層がPC中心である場合などは、メールフォームの方を選択すべきでしょうが、スマートフォン中心のサイトやトレンドに敏感なことを示したいクリエイティブ系サイトなら、mailtoのみというのも考慮する価値はあるのではないでしょうか。 恐らく、in-appなメーラーは今後PCにも導入されていくでしょう。iOS7ライクなデザインになると言われているOSX10.10での導入に期待したいです（PCのメールは未だにブラウザgmailですし）。これまでのメールアプリは、ちょっと大げさすぎたのではないでしょうか。 **▼bad UIの事例が多く見れる本**

ほんとに使える「ユーザビリティ」 -より良いデザインへのシンプルなアプローチ

posted with amazlet at 14.05.16

エリック・ライス ビー・エヌ・エヌ新社 売り上げランキング: 69,665

マイクロインタラクション ―UI/UXデザインの神が宿る細部

posted with amazlet at 14.05.12

Dan Saffer オライリージャパン 売り上げランキング: 10,372

Amazon.co.jpで詳細を見る

オライリーのマイクロインタラクションが素晴らしいです。インタラクションデザインの本は数あれど、これは「誰のためのデザイン？」のドナルド・ノーマンが推薦しているというふれこみの一冊。「細部のインタラクションこそUIデザインの肝」といった趣旨なのですが、豊富な事例が掲載されていて、興味深く体系立てて学べるように工夫されています。

この本の一番の功績は、マイクロインタラクションを次の4つのフェーズに分解したということです：

トリガー

ルール

フィードバック

ループとモード

トリガー

ユーザーが何らかのマイクロインタラクションを起動するきっかけです。トリガーには手動トリガーとシステムトリガーがあります。

手動トリガー

ユーザーが自分で動作させるトリガーです。例えばiPhoneの消音スイッチは「iPhoneをマナーモードに切り替える」というマイクロインタラクションのトリガーです。

システムトリガー

一定の条件が満たされたことをシステムやアプリが検知して、起動するものです。 例えばメールが到着したら「メール着信を通知する」というマイクロインタラクションが起動されます。

ルール

ルールは、つまりマイクロインタラクションで「起こること」です。例えば、iPhoneの消音スイッチをONにしても、音量をゼロにしなければアラームは鳴ってしまいます。東京に住んでいれば、電車でアラームが鳴り響いた人を見たことがあるかもしれません。

このルールはトレードオフで、もし「マナーモードをONにしていればアラームも鳴らない」というルールにしてしまうと、うっかりマナーモードのまま眠りに入ってしまった人たちの遅刻が続出してしまいます。どちらがいいのか、どういうルールにするかということを決めるのはデザイナーの仕事です。

ただし、iPhoneにはこのルールに対する明確な「フィードバック」がないためユーザーがうっかりしてしまうことに繋がっています。

フィードバック

例えば「ファイルをフォルダに入れる」とき、本当にファイルがフォルダに入っているわけではありません。これはあくまで、ユーザーに何が起こっているかを理解させるためのメタファーに過ぎないのです。このような、ユーザーの理解を助ける視覚・聴覚・触覚的な要素がフィードバックです。

ループとモード

いわばルールのルールのようなもので、そのマイクロインタラクションが長期的にどうなるのかを定義するものです。「ループ」は、例えばアラームのスヌーズ機能をどのように繰り返すのか(5分おきで、10回やっても止まらなければ終了する等)といったことです。「モード」は、天気予報アプリで「天気を見るモード」と「天気を見る地域を設定するモード」を切り替えるようなことです。

感想

書籍では、以上の4点についてかなり掘り下げて解説してくれています。個人的な感想は以下のとおりです。

マイクロインタラクションは後回しにされがち

ほとんどの場合、クライアントやお偉いさんは全体にばかり注目します。方針を決定する立場にある訳ですから、当然といえば当然です。ですが細部に目が行き届いていないプロダクトは、ユーザーに違和感を覚えさせイライラさせてしまいます。

マイクロインタラクションが重要であるということをチームにいかに浸透させ、こだわる時間/予算を確保するかが重要だと思いました。逆に言うと、監修する立場の方々には是非この点を認識して頂いて、競合を出し抜いて欲しいですね。大抵の会社は、細かいことを気にしませんから。もちろん、デザイナーに裁量を与えてマイクロインタラクションの設計をしてほしいです。

デザイナーは見た目を作る人という誤解

このブログでも「デザイナー視点から考える「日本のWebデザインの問題点」 | UID Lab」や「デザインを良くしたい全ての人に知って欲しい3つの誤解 | UID Lab」などで取り上げてきましたが、マイクロインタラクションを読むと「こんなところまでデザイナーが決めるべきなんだ」という点について確信が持てます。

はっきり言って、（ユーザーから見た）仕様は全てデザイナーが決めるべきです。デザイナーの地位が低い日本では、いつまで経っても海外に敵う使い心地は実現できません。まぁ、本当は「デザイナー」などという役職はどうでもいいんです。UIデザイン・UXデザインなどの専門知識を持っていれば。そうでないなら、やはりコンセプトをデザイナーに伝えて任せるべきでしょう。

まとめ

細かいところこそ大事！と言い切る本が出てきたことは非常に嬉しいです。「マイクロインタラクション」の各フェーズを理解することで、デザイナーとしてもスキルアップできるしプロダクトの品質も上がるでしょう。

（余談ですが、日本版の副題にある「UI/UXデザインの神が宿る細部」という文言は、それだけで大論争になりそうなアレですね。僕は、デジタルに限ってならばUIがUXの大部分を占めると思っているので、併記はありなんじゃないかと思いますが、誤解を招くことには変わりないですね）

マイクロインタラクション ―UI/UXデザインの神が宿る細部

posted with amazlet at 14.05.12

Dan Saffer オライリージャパン 売り上げランキング: 10,372

「自分が仕事に何を使っているか」を把握しておきたかったので、ジャンル問わず横断的にメモしたものをシェア。随時アップデート予定。 ## 目次 * [アプリ](#app) * [ガジェット](#gadget) * [文房具](#tool) * [書籍](#book) * [Webサービス](#service)

アプリ

Coda

Coda 2

カテゴリ: 開発ツール 価格: ￥7,400

プレビュー、ターミナル、MYSQLの操作までなんでもできるエディタ。オンラインのドキュメントを保存するbook機能も素晴らしい。Sublime Textが主流のようだけど、僕はこっち派。比べると、Macとの親和性の高さやgrep周りが便利。

Sketch

Sketch 3

カテゴリ: グラフィック&デザイン 価格: ￥7,800

Fireworks開発終了とともに注目をあびた画像制作アプリ。ワイヤーフレームからしっかりしたUIカンプまでなんでもこれで作ります。詳しいレビュー記事あります。

Sketch Mirror

Sketch Mirror

カテゴリ: ユーティリティ 価格: ￥500

Sketchで作っている画像をiOSデバイスにリアルタイムプレビューできます。当たり前ですが、実機で見るとデザインの印象はかなり変わりますね。

Codekit

公式サイトでダウンロード

sassのコンパイル、jsのminify、画像の最適化などを全自動で行ってくれる。また、ブラウザのオートリロードやライブラリのバージョン管理(Bower)なども。Coda+Sketch+Codekitが個人的に最強の組み合わせで、もっとも使用頻度が高いアプリです。gruntのGUI版の様なアプリだが、個人的にgruntは環境構築がスマートじゃなくて好きになれないので使用。凝ったことをしないならこれで十分かと。以下の記事で詳しく解説されています。 Codekit 2.0 ファーストインプレッション | Sou-Lablog

Pixelmator

Pixelmator

カテゴリ: グラフィック&デザイン 価格: ￥1,500

ビットマップ画像の編集や写真のレタッチはこれで。Photoshopとの違いはMacネイティブな機能（オートセーブやバージョン、UI等）ことと、価格が圧倒的に安い事。Photoshopほど高機能ではないですが、UIデザイナーなら十分かなと。

Writer Pro

Writer Pro: Note, Write, Edit, Read

カテゴリ: 仕事効率化 価格: ￥2,000

シンプルで高機能なエディタ。WriteやReadなど4つのワークフローによってタイポグラフィが変わるという面白いエディタ。デザイナーならエディタのデザインにもこだわりたい。Markdownも使えるので、ブログはこれで書いています。

Ember

Ember - Screenshot, Annotate and Share

カテゴリ: グラフィック&デザイン 価格: ￥5,000

Ember - Screenshot, Annotate and Share

カテゴリ: 仕事効率化 価格: ￥500

画像収集アプリ。Webからクリップしたり、RSSからコレクションに加えたりできます。フォルダ分けや、自動で任意の色の画像のみを表示することも。僕はこれを使ってイメージボードを作成し、デザインの世界観を決めています。またiCloud経由で同期できるので、自分の作品集もこのアプリに貯めておき、人に見せる時に使っています（写真アプリだと、プライベートなものもありますからね）。 こちらも以前に紹介記事を書きました。

GitHub for Mac

公式サイトでダウンロード

Gitクライアント。Syncボタンがとにかく便利で、コミットメッセージを書いてワンクリックでpushまでやってくれます。submodule updateも全自動。バギーでクラッシュしやすいのが玉にキズ。機能が少ないので、複雑なことをしたければターミナルか他のgitクライアントの方がよい。

ImageAlpha

公式サイトでダウンロード

pngの減色ツール。かなり綺麗な状態を保ったまま減色してくれる。尚画像のメタデータを削除してくれるImageOptimというアプリも常用していたのだが、画像の色が変わってしまうことがあったため最近は使っていない。Sketchにも同様の機能があるのでそれでまかなっている。

POP

POP - Prototyping on Paper

カテゴリ: 仕事効率化 価格: 無料

ペーパープロトを撮影してiPhoneの画面上で遷移させられるアプリ。これを使ってUIの矛盾点を潰しておくことで、実装の手間が大幅に減り、クライアントの承認も得られ、優れたプロダクトが作れるはず。言うまでもなく、紙の上で確認しづらいものについては、実装後に判断するということも必要。

Adobe Creative Cloud

公式サイト

言わずと知れたデザインツール群。使用頻度はものすごく減っているので、恐らく徐々に使わなくなると思う。

The Unarchiver

The Unarchiver

カテゴリ: ユーティリティ 価格: 無料

いろんな形式の圧縮ファイルを解凍出来る。

MacZip4Win

ダウンロード

Windowsで開けるzip圧縮が出来る。作者が失踪されたので代理の方が公開している模様。

Dropbox

Dropbox

カテゴリ: 仕事効率化 価格: 無料

特にiOSでは全てのアプリでファイルをやりとりするハブ化しており、絶対必須アプリ。個人的には、そろそろデフォルトでファイルシステムがサポートされるんじゃないかと思っていますが。。。招待リンク置いておきますので、もしアカウント持ってない方がいたら宜しくお願い致します。 Dropboxに登録

Skype

公式サイトでダウンロード

言わずと知れたチャットアプリ。遠隔地でのミーティングはこれで。

Evernote

Evernote

カテゴリ: 仕事効率化 価格: 無料

Evernote

カテゴリ: 仕事効率化 価格: 無料

ドキュメント共有のために使用。個人では、IFTTTで各種ソーシャルサービスの自分の投稿とお気に入りを全自動でバックアップしている。

DAY ONE

Day One

カテゴリ: ライフスタイル 価格: ￥1,000

Day One (日誌 / 日記)

カテゴリ: ライフスタイル 価格: ￥500

で、メモアプリ/日記としてこちらを使用。Evernoteよりも遥かに使いやすく軽いアプリ。また、デザインが相当良いアプリだと思う。

XCode

Xcode

カテゴリ: 開発ツール 価格: 無料

iOS/Macアプリ作るのに必須エディタ。

Processing

公式サイトでダウンロード

ジェネラティブアートやビジュアルプログラミングの練習に最適なアプリ。こういうツールでかっこいいものが作れるかどうかが、デザイナーとエンジニアの境目なのかなと個人的に思う。

Paper by fiftyThree

Paper by FiftyThree

カテゴリ: 仕事効率化 価格: 無料

iPadの中では定番のスケッチアプリ。マインドマップ、ロゴのラフ、サイトレイアウトのラフなどをこれで。

i文庫HD

i文庫HD

カテゴリ: ブック 価格: ￥800

自炊した本は.pkgに固めて、iTunes経由でこのアプリに入れています。可もなく不可もなく、読書用に使いやすいアプリ。

無カメラ

無カメラ

カテゴリ: 写真／ビデオ 価格: 無料

街中などでいいUI、悪いUIを見つけた時はこのアプリでこっそり撮影。

IFTTT

IFTTT

カテゴリ: 仕事効率化 価格: 無料

アプリ同士を連携させる。ブログの更新をツイートしたり、各種サービスのお気に入りをEvernoteにつっこんだり。イフトと読むらしい。

Instapaper

Instapaper

カテゴリ: ニュース 価格: ￥400

あとで読むサービス。Pocketよりもデザインがいいのでこちらを使用。

Omnifocus

OmniFocus 2

カテゴリ: 仕事効率化 価格: ￥4,000

OmniFocus for iPad

カテゴリ: 仕事効率化 価格: ￥4,000

OmniFocus 2 for iPhone

カテゴリ: 仕事効率化 価格: ￥2,000

GTDアプリ。Mac, iPad, iPhoneと3つ揃えると相当高くなってしまうし、GTDの知識がないと使いこなせないが、それを補ってあまりある便利さを提供してくれる。生きる上でのタスクはこれと標準カレンダーのみで全部管理している。

ガジェット

ScanSnap iX500

FUJITSU ScanSnap iX500 FI-IX500

posted with amazlet at 14.05.08

富士通 (2012-11-30) 売り上げランキング: 319

Amazon.co.jpで詳細を見る

これで技術書の自炊や、領収書や契約書などのスキャンをしています。検索可能なPDFにできるのが素晴らしい。

BOSE QuietComfort20i

【国内正規流通品】BOSE QuietComfort20i ノイズキャンセリング・ヘッドホン(インイヤータイプ)

posted with amazlet at 14.05.05

BOSE 売り上げランキング: 2,337

Amazon.co.jpで詳細を見る

現状最強のノイズキャンセリングイヤホン。これをつけると心が落ち着き、めちゃくちゃ集中出来ます。特にオフィスやカフェ等うるさい環境では素晴らしい性能を発揮してくれます。

My Passport for Mac 500GB

WD My Passport for Mac 500GB (Mac用 TimeMachine対応 / USB3.0接続) WDBGCH5000ASL-JESN

posted with amazlet at 14.05.08

WESTERNDIGITAL (2012-09-14) 売り上げランキング: 32,795

Amazon.co.jpで詳細を見る

TimeMachineでのバックアップ用に外付けHDDを使っています。ケーブルが接着されていて、Mac本体からUSB一本で給電できるので取り回しが楽。Macbook Airの128GBなので、HDDは500GBで十分。

文房具

Paper Prototyping Pad

https://theguild.stores.jp/#!/

fladdictさんの会社で販売されている、ペーパープロトタイピング用シート。上記のPOPと組み合わせて使う。

ステッドラーシャープペンシル&コピックペン&定規

ステッドラー 2mm芯シャープペン Nブルー 925 35-20N

posted with amazlet at 14.05.05

ステッドラー 売り上げランキング: 724

Amazon.co.jpで詳細を見る

コピックマルチライナー【ブラック】0.05mm 11780005

posted with amazlet at 14.05.05

.Too/トゥー 売り上げランキング: 50,061

Amazon.co.jpで詳細を見る

ペーパープロト用に。定規は無印良品のものを使用。

DURODEX 200DX

DURODEX 自炊裁断機 ブラック 200DX

posted with amazlet at 14.05.08

DURODEX 売り上げランキング: 470

Amazon.co.jpで詳細を見る

自炊用の裁断機はこれ。ScanSnapと両方買うとかなりの出費にはなりますが、やはり自炊した本は取り回しが非常に便利です。ちなみに大判の本や作品中心のデザイン本なんかは自炊せずにとってあります。大事なのは使い分けかと。

モレスキン

MOLESKINE モレスキン プレーンノートブック・無地・ポケット ([文具])

posted with amazlet at 14.05.05

MOLESKINE ワーキングユニット・ジャパン 売り上げランキング: 30,895

Amazon.co.jpで詳細を見る

ロゴデザインのより精密なスケッチにはこれを使います。

書籍

デザイン、新・25+100の法則

Design Rule Index[第2版]― デザイン、新・25+100の法則

posted with amazlet at 14.05.05

William Lidwell Kritina Holden Jill Butler ビー・エヌ・エヌ新社 売り上げランキング: 8,128

Amazon.co.jpで詳細を見る

もはや伝説の本ですね。デザインというものの本質がぎっちり詰まっていて最強。辞書の様に使います。

デザイナーとして起業した(い)君へ。成功するためのアドバイス

デザイナーとして起業した(い)君へ。成功するためのアドバイス - Work for Money, Design for Love

posted with amazlet at 14.05.05

David Airey ビー・エヌ・エヌ新社 売り上げランキング: 121,927

Amazon.co.jpで詳細を見る

ブランディングの仕方から料金でトラブった時の対策まで。この本も何度も読み返しています。

Webサービス

一部自分のアカウントへリンクしますので、フォロー等よければお願いします。

Twitter

http://twitter.com/uidlab/

セルフブランディング（）に。Twitterから仕事をもらうことも多いです。

Tumblr

http://seabream.tumblr.com

スクラップサービス。このブログもTumblrですが、実はリブログ専用のアカウントもあります。DribbbleよりもBehanceよりもJAYPEGよりも、遥かにインスピレーションの元になっております。

Sumally

http://sumally.com/seabream

モノを軸にしたサービス。欲しいもの/持っているものを管理できる。とにかくオシャレ。最近モノを売買できるようになったが使っていない。これもインスピレーションに。

Fontstruct

http://fontstruct.com

あまり知られていないがブラウザでフォントが作れるサービス。パーツを組み合わせる形式なのであまり複雑な物は作れないが、ちょっとしたものならこれで。

IcoMoon App

[http://icomoon.io/app/#/select]

SketchやIllustratorなどで作ったSVGファイルをWebフォントに変換してくれ、cssなども込みでDLできるサービス。オリジナルのWebフォントアイコン制作に。

feedly

http://cloud.feedly.com/

皆さんは、自然界には似たような形の物が多いと思った事はありませんか？例えば、樹木の枝の分かれ方と川の流れ方、ニワトリの卵を光に透かしたときの血管の形、都市の道路の形状、激しい稲妻、Webサイトのサイトマップなど…。全く関係のないこれらに共通のパターンが現れるのはなぜなのでしょう？全くの偶然なのでしょうか？

このような万物の形を決定する物理法則が、熱工学分野の権威エイドリアン・ベシャン氏の提唱するコンストラクタル法則です。

流れとかたち――万物のデザインを決める新たな物理法則

posted with amazlet at 14.04.17

エイドリアン・ベジャン 紀伊國屋書店 売り上げランキング: 13,674

Amazon.co.jpで詳細を見る

コンストラクタル法則は次のように定義されています： >有限大の流動系が時の流れの中で存続する（生きる）ためには、その系の配置は、中を通過する流れを良くする様に進化しなくてはならない

例えば河川は、より効率的に水を移動させる為にあの形をしており、道路も人間をより効率よく遠くまで移動させる為にああいった形状をしているということです。生物の形状は、質量をより効率的に移動させるために進化してきた結果なのだそうです。

より効率的に、より遠く…人間もその目標に向けて交通機関を発展させてきました。考えてみれば当たり前すぎることなのですが、個々の現象がある単一の法則から成り立っているという発想が斬新ですよね。

詳しくはベシャン氏の著書「流れとかたち――万物のデザインを決める新たな物理法則」を読んで頂けると、様々な現象についてコンストラクタル法則が当てはまる事が分かります。圧巻なのが、都市計画、黄金比、文化、情報、歴史等ありとあらゆる分野に対して言及しているというところ。全く異なる分野で研究されている事が、実は全て結びついているという大胆なテキストになっていました。もはや物理学の範疇を超えています。現在の所、恐らく仮説の段階なのですが、確かに状況証拠は揃っているなという印象でした。今後の検証が待たれるところです（なんだか某細胞みたいな状況ですね）。

ここからが本題です。ベシャン氏が著書の中で繰り返し述べているコンストラクタル法則の優れた点の一つが、未来を推測できるということです。つまり、歴史や人間の作る道具、生物の形などあらゆるものが、より効率的に質量を移動させる方向へ進化していくということです。この法則はあらゆる分野に当てはまるので、何かをデザインする際の様々なパラメータを試して有用性を検証する手間を最小限に抑えることが出来るのだそうです。著書の中では、より効率のいい空港のデザインが検証されていました。

そこで、この法則を僕の専門分野であるUIデザインで考えてみたいと思います。

UIデザインとコンストラクタル法則

もう一度コンストラクタル法則の定義を確認しましょう。 >有限大の流動系が時の流れの中で存続する（生きる）ためには、その系の配置は、中を通過する流れを良くする様に進化しなくてはならない

これをUIデザインに当てはめるために、あるアプリケーション（WebサイトやiPhoneアプリなど）を考えます。ユーザーはこのアプリを使って、あるタスク（買い物やニュース閲覧等）を達成するために画面の中を遷移していきます。これがコンストラクタル法則でいうところの「有限大の流動系」ですね。ユーザーが「流れ」で、「系の配置」がまさしくUIということになるでしょう。そうしますと、「ユーザーが行いたいタスクを効率的にこなせるように、UIが進化していく」ということになります。おぉ！UIデザインで当たり前のことが、コンストラクタル法則だけを使って導けてしまいました。素晴らしいですね。更に以下のような事が言えると思います。

1 ある画面において大多数のユーザーがこなしたいと思っているタスクへの入り口は、もっとも分かりやすい位置に分かりやすいデザインで表示されなくてはならない 2 大多数のユーザー以外がこなしたいタスクは、あまり目立たないようにする必要がある 3 そのタスクを達成するまでの画面数は少なければ少ないほどよい 4 挙動は軽ければ軽いほどよい 5 通信速度は速ければ速いほどよい

当たり前ですね。当たり前です。これらの項目はUIデザインの本を読めば必ず書いてあるといってもいいでしょう。ですが僕は1〜5を導く為にUIデザインの考え方をひとつも使っていません。

具体例を挙げましょう。1と2についてはFacebookのアプリが分かりやすいでしょう。かつては起動直後にアイコンを並べていたのですが、今はユーザーの投稿が最初に表示され、その他の機能はナビゲーションに配置されています。 河川に例えるとFacebookというサービスにおいては、大多数のユーザーが求める「本流」が投稿で、その他の機能は優先度が低い「支流」であるということですね。

3はフォームをイメージすると分かりやすいでしょう。あまりに長大で何度も全角半角の違いを指摘してくるようなフォームは、離脱率が当然高くなってしまいます。「抵抗」が大きすぎる為に流れがストップしてしまうということですね。コンストラクタル法則では、流れが促進されなくなった系は「死」を意味します。

4、5については、パフォーマンスが重要ということです。これは言わずもがなでしょう。

まとめると、UIデザインに迷った時は、ユーザーが最も効率よくタスクを消化出来るということを念頭に置くということだと思います。コンストラクタル法則を前提とするならば、あらゆる系が存続するためにはそのように変化します。その流れに逆らうことは出来ません。もしも邪魔な広告などでユーザーの流れを妨げてしまえば、いずれは淘汰されてしまうことでしょう。

UIデザインの本には原則は書かれていても「そもそもなぜそのような原則が成り立つのか？」ということは書かれていません。ところがこれからは、「コンストラクタル法則により…」と言えてしまう訳です。「UIデザインとは」みたいなことをいちいち説明しなくても極めてシンプルに最適解を教えてくれる、非常に強力なメソッドだと言えるでしょう。もしこの法則が証明されて広く教えられるようになれば、クライアントの説得もらくちんですね。いわば熱力学第一法則、第二法則のようにこの世を支配している法則なので、絶対にくつがえせないというわけです。

皆さんの専門分野でもぜひこの法則を使ってみて下さい。

流れとかたち――万物のデザインを決める新たな物理法則

posted with amazlet at 14.04.17

エイドリアン・ベジャン 紀伊國屋書店 売り上げランキング: 13,674

 Fireworksの開発終了と共に注目を浴びたデザイン制作アプリ、Sketchのバージョン3がリリースされていました。

Sketch 3

カテゴリ: グラフィック&デザイン 価格: ￥5,000

僕もバージョン2の頃から愛用しており、Retina/非Retinaの同時書き出しが出来たり、Sketch Mirror

という連携アプリを使ってiOSデバイスにデータをミラーリング出来たりと、WebはもちろんアプリのUIデザイナーにとっては非常に有用なツールでした。主に海外のネット上で有志がプラグインやテンプレートを配布しており、豊富なリソースを活用できることも魅力の一つです。

今回のアップデートでは更に機能が強化され、「Fireworksと並んだ」と言っても過言ではない状態になりました。

シンボル機能

待望のシンボル機能が搭載され、同じオブジェクトを使いまわしたり一気に編集出来るようになりました。ただし全てのシンボルに反映されてしまう処理とそうではない処理があり、確認した範囲ではshadowとscaleを多数あるシンボルのうちひとつにだけ適応することはできませんでした。rotateとopacityは逆に個別に編集できるため、もしかしたら仕様ではなくバグなのかもしれません。個人的にはFireworksよりもUIが優れていると思うので、もう少ししっかり作りこんで欲しいですね。

書き出し機能の強化

書き出し機能がかなりパワーアップしており、中でも、「レイヤーやグループを選択してそのまま書き出せる機能」と「デスクトップにドラッグ&ドロップで書き出せる機能」は独特で注目に値すると思います。しかもいちいちUIがいいんですよね。

ビットマップ編集

ビットマップ画像を切り抜いたり、彩度/明度/コントラストを調整したり出来るようになりました。これはかなり嬉しい。ゆくゆくはレベル補正やトーンカーブ調整、色相調節などもできるようになるともっといいですね。

洗練されたUI

シェイプやスライス、アートボードまで「insert」機能にまとめられていたり、+ボタンでアピアランスや書き出す解像度を追加するなど、相当なこだわりが見受けられ、様々な機能が2よりもしっかりとまとめあげられています。使っていて非常に気持ちがいい。UIを作るツールなので、UIがしっかり作りこまれていることは重要だと思います。

リリース記念価格でセール中。

その他にも多数の新機能が備わったSketch 3ですが、2014年4月21日までは5,000円で購入できるようです（通常価格はおそらく8,000円）。割高な印象を受けますが、Adobe CC一ヶ月分でずっと使えると考えるとそこまでではないかな、と思います。Fireworksが好きだった方もそうでない方も、UIデザイナーはぜひ購入すべきだと思います。

参考

Bohemian Coding - Sketch 3

Bohemian Coding Blog - Sketch 3 is now available!

Sketch 3

カテゴリ: グラフィック&デザイン 価格: ￥5,000

Sketch Mirror

 TumblrをCMSとしてWebサイトやブログを構築する例を比較的多く見かける。実際このブログはTumblrで出来ているし、以前制作した[hikarucho.com](http://www.hikarucho.com)でもCMSとしてTumblrを採用している。 Tumblrで構築されたWebサイトとしては、以下が有名どころである。  [UNIQLO GINZA | ユニクロ銀座店](http://uniqlo-ginza.tumblr.com)  [SHIFTBRAIN backyard](http://shiftbrain.tumblr.com) Tumblrはデザインのカスタマイズが比較的容易で、リブログされることによるバイラル効果も期待できる。また、Yahooに買収されてからはやや微妙だが、クールでクリエイティブなサービスというイメージもあるため、TumblrでWebサイトを作りたいという需要は一定数あると思われる。 ただ、実はTumblrのカスタマイズ性はそれほど高くなく、Wordpressはおろか国内のブログサービスよりもできることが少なかったりするので、やりたいことを実現するには色々工夫したり、最悪諦めたりする必要がある。そこで、Tumblrでサイトを作る際にできないことと対策をまとめた。ここに書かれているような機能を求める場合、Tumblrを諦めるという選択肢も検討したほうがいいだろう。尚、内容はある程度Web制作に精通している方向けである。 ## Text投稿では画像が小さくリサイズされてしまう  Tumblrに投稿する際は6種類からメディアを選択するのだが、Textを選択すると画像が横幅500pxまでリサイズされてしまう。今どき500pxではかなり厳しい。Photoを選択すると元解像度のまま表示させることもできるのだが、その場合記事タイトルを入力することができず、画像のキャプションのみの表示になる。 ### 対策 記事にタイトルがなくても問題ないサイトなのであれば、Photo投稿で高解像度の画像を用意するのがいいだろう。タイトルが必要な場合は、自前サーバーに画像をアップロードして直リンクすればよい。 当ブログの場合は、苦肉の策としてFlickrにアップロードした画像をembedしている。Flickrは写真サイトなので、ブログの文脈がないと意味不明な画像を上げるのは気持ち悪い感じもするし手間がかかるが、ストレージ容量を考えるとベストかと思う。 画像アップロードには、[IFTTT](https://ifttt.com)で「Dropboxの特定のフォルダに入った画像を自動でFlickrにアップロードする」レシピを使うと便利である。 ## indexページで一度に15Postまでしか表示できない  検索結果やトップページなどに表示できる記事の数は最大15までで、それ以上はページングということになる。これも用途によるのだが、画像ギャラリーなどではかなり厳しい数だと思う。 ### 対策 jsでautopagerize（無限スクロール）を実装して、なおかつサイトにアクセスした時点で2ページ目以降を読み込むようにすれば、一度に30、45記事ずつなど表示することができる。どうしてもリンクで遷移させたい場合は、おそらく諦めるしかないだろう。 ## 静的ファイルのアップローダの使い勝手が悪い 外部cssやjs、UI用の画像などを使用したい場合、以下からアップロードすることが出来る。  [Upload a static file](http://www.tumblr.com/themes/upload_static_file) が、記載されている通り一度アップロードしたファイルを上書きしたり削除することはできない。永久にサーバー上に残り続ける。よってデザインを修正したい場合は、ローカルで修正したファイルを再度アップロードし、テンプレートの読み込み先URLを書き換える必要がある。気持ち悪いし、何らかの事情でファイルを削除したくなったときに不可能というのは痛い。 ### 対策 自前のサーバーにアップロードして直リンクするのが一番いいだろう。Dropboxの公開ファイルにリンクするという手もあるが、グレーゾーンな気がするので自己責任でということになる。ちょっとしたサイトであれば、妥協して純正アップローダを使うのもいいだろう。 ## カテゴリー機能がなく、タグはあるがタグクラウドはない タグで記事を仕分けることはできるし、本文のページにタグを表示させてクリックで検索、ということは可能なのだが、肝心のタグクラウドが存在しない。このためジャンル別の記事を利用者に探してもらう、ということができない。 ### 対策 ググれば色々な方法が出てくるが、個人的には[TumblrPosts.js](http://blog.mach3.jp/2012/11/26/tumblrposts-js-1-3.html)というjQueryプラグインが最もカスタマイズしやすく高速だと感じた。ただこういったプラグインはTumblr運営のご機嫌次第で突然動かなくなったりするので、やはり信頼性は高くない。タグの種類が固定で決まっているのであれば、ベタ書きでタグのページ（/tagged/hogehoge）にリンクするという手もある。 ## タグや投稿によってデザインを変えたり、特定の画面で非表示にしたりできない 機能ごとのデザインのカスタマイズ性はかなり高く、大きく見た目を変えることも可能なのだが、一方タグによってデザインを変えることは不可能である。例えば新着お知らせだけは違う見た目にするとか、トップページには表示させないとか、そう言ったことは一切出来ない。また、記事によって色を変えるといった凝ったことは出来ない。 ### 対策 jsで表示させたくないDOMを削除したり、data-属性にタグを突っ込んでcssを当てる、URLから現在の画面を判別してデザインを変えるなどという対応はできる。また、記事によって見た目を変えるのは恐らく不可能。（photoやtextなど、メディアのタイプで振り分けることは可能） ## お問い合わせフォームが微妙  [このブログのお問い合わせフォーム](http://uid-lab.tumblr.com/ask)をご覧頂ければ分かる通り、単にテキストを送信出来るだけである。また、文中にURLが含まれると送信出来ないという、かなり斬新なスパム対策が施されている。 ### 対策 Googleフォームを利用するという方法がある。[hikarucho.comはこの方法で構築した。](http://www.hikarucho.com/contact) 作り方→[Google フォームを作成する - ドライブ ヘルプ](https://support.google.com/drive/answer/87809?hl=ja) ## text投稿にサムネイルをつけることが出来ない 読んで字のごとく出来ない。 ### 対策 jsで記事を取得して、一番最初の画像を引っ張ってくるなどが現実的か。 ## まとめ 凝ったことをしたければ、「Tumblrが出力するテンプレートをJavascriptで無理やり書き換える」ことと「自前のサーバーを用意して静的ファイルをリンクする」ことがポイントになってくる。結局のところ用途によっての使い分けが重要なので、ムリにTumblrで作る必要はないと思う。ただし上記の出来ないことリストに不便を感じないのであれば、是非TumblrでのWeb制作に挑戦してほしい。Tumblrとは思えないあっと驚くサイトを構築することも可能だろう。 **▼Tumblrのカスタマイズ事例や作り方が分かるオススメ本▼**

Designing Tumblr デザイニング・タンブラー

posted with amazlet at 14.02.24

ビー・エヌ・エヌ新社 売り上げランキング: 29,977