iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
iOS11で最も注目すべきは、QRコード対応かもしれない | fladdict
今年のWWDCとiOS11の注目ポイントは、「カメラのQRコード対応」ではないか？ いや冗談でなく、マジで。 いまさら対応QRコード まさに「いまさら」。QRコードは枯れきったテクノロジーである。テック的には新しさもヤバさもない。 ところがこのQRコード、実はようやくiPhoneに搭載された、万人が使えるO2Oの入り口だったりする。 QRコードの搭載、ユーザーの週間学習で何が変わるか？ というと、だいたい全部変わる。 この辺りは中国でのQRコード（Alipay）の成功を、Appleが無視できなくなったということだろう。 これはQRが新しいのではない。「公式カメラにQRが搭載されること」が、「全てのアプリがQR対応すること」を意味する。そちらがインパクトなのだ（そして、iOS/Android両方で使えることに意味が出る） QRコードの中に、アプリを起動させるURLを仕込めば、アプリ側で特に何
GoogleがプロトタイピングツールPixateを買収。無料化される。オススメ。 | fladdict
Googleが、ローカルベースのプロトタイピングツールPixateを買収した模様。以後、Pixateアプリは無料となり引き続き開発が続けられるようです。 2013年頃、Pixateに$600払ってた俺は泣いた。おめでとうございます。 Invisionを主流に百花繚乱の分断化で割と困っていたプロトタイピング業界。Googleがこの分野に手を出したことで変動は起きるのだろうか。 これがプロトタイピングツールの決定版になるとよいですね。高性能だし無料だし。クラウド版も$5だし。 日本でプロトタイピングサービスばパッとしない究極の問題は、サービスがオンラインのことなんですよね。SI系の人たちは「セキュリティ的な事情でオンラインの共有サービスを使えない」という事情がありました。Pixateはローカルアプリなので、その辺の心配をする必要がないのがポイントですね。そのうち大手SIとかでもこういうツールが
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
スマホUI考（番外編） なぜ機能追加をし続けるとアプリが破綻するのか？ | fladdict
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
カンボジア遺跡にいったら、ガチでダンジョンRPGでヤバイ | fladdict
ゴールデンウィークをずらして、初カンボジアに行って来たわけだけど超楽しかった。 アンコール・トム。内部はまさにウィザードリィ。 いろんなところが崩壊してる。 十字キーで移動する感じ。 ダークソウルな何か。 アンコールトムといえばデカイ顔。 顔一個が石柱一本でございます。 謎の仏像 復元工事中のタプローム遺跡。ガジュマルに浸食されて崩壊しかかってる。 ガジュマルの樹に浸食されたお釈迦さま。 ベンメリア。天空の城ラピュタのモデルになったとかなんとか。 ベンメリアは郊外のためルートもまともに整備されておらず、崩壊状態。トカゲいっぱいでワンダっぽいです。 この廃墟感。観光中とはいえ足踏み外したり落石くらえば死ねます。 破壊された石柱。 ベンメリア遺跡にいたカワイイ子供。 ダンジョンの向こうから瓦礫をヒョイヒョイと越えて10体ぐらいで出現し、色々とガイドしてくれる。 そして最後にお金をせびるのである
アイコンを合字Webフォントとして扱うSymbolSetが革新的にステキ | fladdict
Symbolset teaser from Symbolset on Vimeo. 正直この発想はなかった！ symbolsetは、アイコンに特化したウェブフォント。 このフォントが面白いところは、アイコンを「合字」として割り当てていること。 まずはサイト上部の大きなテキスト部分がエディターになっているので、そこにheartやtweetなどとタイプしてみてほしい。ビックリするはず。 「合字」というのは、特定の文字ペアに特殊文字を割り振れる欧文書体のルール。日本ではなじみのない作法だけど、海外ではftやffなど、スペースが空いてしまう文字を特殊な文字で代替することがある。 SymbolSetはこれ利用して、フォントをアイコンとして活用できる仕組みを発明した。 たとえば、♥のアイコンを「heart」という合字に割り振っている。つまり文章内にheartという文字があれば自動的にハートが、「Twi
Skala Previewは、iPhoneアプリ製作に必須かもしれない | fladdict
有名アプリなんでしょうかね、Skala Preview。いままで知りませんでした。 Skala Previewを使うと、Mac上の画像やPhotoshop画面やクリップボードの画像を、iPhone上でピクセルパーフェクトで表示できます。 Mac / iPhone 用アプリ。 使い方も簡単で、MacとiPhoneで両方立ち上げれば適当に同期してくれます。フォトショッパ—マジ感涙！ 昔はイラレ画像をDropboxとかメールで転送してたのですが、Skalaを使えば直接見れる。UIもシンプルで綺麗。まだiPhone5には対応してませんが、はやく対応して欲しいなぁ。これは便利！ ついでに、普段使ってるものをつらつら。大分定番ですが。 IconKit Store 大きいアイコンを作れば、自動でiPad用やiPhone用などすべてのアイコンをリサイズして準備してくれる。 ReSizer Store iP
iCloudハック事件の手口がガード不能すぎてヤバイ | fladdict
GizmodeのライターがiCloudのアカウントを乗っ取られ、iCloud消滅、iPad, iPhone, Macのデータワイプ、Gmail, Twitterの乗っ取りを食らった件について、ハッキングを本人が語ってらっしゃる。 手口としては典型的なソーシャルエンジニアリングによる、複数サイトから得た情報のギャザリングを用いたハック。 だがこのハッキングのプロセスが鮮やかすぎてヤバイ。ツールを一切つかわず電話だけでハッキングしてる。 Twitterアカウントに目をつける 元々クラッカーは、Gizライターの持っていた「３文字のTwitterアカウント」が欲しくてアタックをかけたらしい。 Twitterプロフィールから、本人のウェブサイトへ 本人のウェブサイトからGmailのアドレスを発見 Gmailで「パスワードがわからない」から再発行 再発行メール用のアドレスが画面に表示される。この m*
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
fladdict » iPhoneアプリ審査での111の禁止項目（意訳）
ついに明らかになった、iPhoneアプリのリジェクト基準条項。 Engadetが公開したPDFをベースに、リアルタイムに更新中。 とりあえずリアルタイムに翻訳を作成中。 おもいっきり意訳なので、間違いの指摘や突っ込みはコメント欄かTwitterでお願いします。 ＜このリストは、2010年9月10日現在のものです。また意訳なので、気になる条文は原典をチェックすること。＞ 2. 機能 2.1: クラッシュするアプリはリジェクト。 2.2: バグのあるアプリはリジェクト。 2.3: 開発者の申請したものと違うアプリはリジェクト。 2.4: アプリの紹介文にない隠し機能を持つアプリはリジェクト。 2.5: 非公開のAPIを用いたアプリはリジェクト。 2.6: サンドボックス外のデータを読み書きするアプリはリジェクト 2.7: 実行コードを外部からダウンロードするアプリはリジェクト 2.8: 他の実
WWDCレポ2 ー 新iPhoneの解像度を体感する比較画像 | fladdict
解像度が2倍になるという新iPhone。はたしてどれくらいキレイなのか！？ というわけでTiltShift GeneratorのUIを新しいRetina Display対応で０から作り直した。 左がRetina用に新しく作り直した版、右は従来版。 新旧のiPhoneではこれぐらい表現力が違いそう。新しい版はもうちょっと微調整しないといけません。Retina対応しないと、ライバルと比較したときにだいぶションボリしたことになる実感。 改装コストは？ 新iPhoneでは、古いアプリは勝手に2倍表示される為、基本的にプログラムパートの改修コストはほぼ０と思ってよい模様。 問題はグラフィックのコスト。 既存のコンポーネントはともかく、ちょっとグラフィックを凝ったアプリを作ろうとすると、デザインの結構なパートはビットマップ画像に依存することになる。 これの改修コストがハンパない。 原画がビットマップの
fladdict » Amazon印税率を70%に大幅引き上げ、焦土戦に突入。概要と雑感。
ソースはAmazon。本日1/20日にプレスリリース。とりあえずの概要と、雑感。 正式には30%の印税オプションと、70%から通信料を差し引いた印税を受け取るオプションの２種類を選択可能になる模様。 現在の通信料のレートは$0.15/MB。 Amazonの電子書籍の容量の最頻値中央値(注意：平均値ではない)は368KB。つまり一般的な本は１冊につきおよそ$0.06の通信費となる。 これにより、一般的には辞書辞典、写真集以外の電子書籍はほぼ70%の印税を取得できると考えてよい。 ただし印税率70%を選択する場合は以下の条件を満たさなければならない。 ・価格が$2.99 ～ $9.99 の範囲 ・リアル書籍版の最低価格より20%以上安くなければならない。 ・著作者が権利を持つ全ての地域で購入可能でなければならない。 ・KindleとKindle Storeの全オプション(Text to Spe
Nexus Oneを入手したので、とりあえず分析 | fladdict
Google Phoneこと、Nexus Oneを入手しました。 シアトルから送ってくださったMasuiさん多謝ですー。 ＜追記＞とりあえず、ざっと触った雑記。ちょっと長くなったので、あたまにインデックスを作成。 1:工業製品としてのNexus One 2:UIとしてのNexus One 3:アプリ 4:Flash Platformとして 5:ビジネスとして 6:プラットフォームとして 7:HTML5および、クラウドアプリは来るのか？ —————————————————————- ・工業製品としてのNexus One 第一印象としては、とても素晴らしい出来。 ボディーは金属と軟質プラスチックの組み合わせ。 この軟質プラスチックの背面が、スベスベしながらも手に吸い付く感覚でiPhoneよりも手触りがエロい。 強化ガラス(ゴリラガラス製?)のタッチスクリーンの下には、Androidの標準UIで
FITC2日目 リポ ～戦闘力の差を感じました | fladdict
豚インフルエンザの大惨事は、単にメキシコの医療レベルのしょぼさとタミフルがないことが原因なんじゃないかと、甘く見ている今日この頃です。 みなさん、こんにちは。 FITC２日目は、最強クラスの神コーダーGSkinnerやら Quasimondo が大暴れ。 お前らホントに同年代かと。 ActionScripterとしてのベクトルが違うとはいえ、スカラー量的にもだいぶ差をつけられてる気がして焦る。 Quasimondoは、コードで絵を描く系のセッションで、.flaや去年のMAXで僕がやってたようなことを、更に数光年進めたような話をしていて凹む。だいたい職業がActionScriptコンサルタントってなんだ。 日本では成立しなさそうな職業名だ。 で、そのQuasimondoは、定番の画像の絵画化みたいなアレ。 そこエッジ検出的なものを組み合わせて、描画密度を場所ごとにコントロールするビジュアライ
tha退職のお知らせ | fladdict
4月20日を持って、thaを退職することとなりました。 まだまだ未熟であり、会社にて学ばなければならない事も多いのですが、昨今のFlashやiPhone,世界不況等、webを取り巻く目まぐるしい変化を見るにつれ、一度集中的に勉強をしなおそうと思い職を辞すること決心致しました。 今後しばらくは勉強期間にあて、その後フリーランスとして活動を再開していきたいと思います。 ロンドンで路頭に迷っていた僕を拾ってくださり、貴重な経験をつませてくださったtha社長の中村勇吾氏、および仕事を通じてお世話になった皆様には、どれほど感謝してもしきれません。まだまだご恩を返しきれていませんが、今後の成長と行動を以って、少しずつ返せていければと思います。 今後はfladdict.neetとして新しく頑張っていきたい思います。 皆々様よろしくお願いいたします。 ＜追記＞ ・・・結構広まってるっぽいので一応補足してお
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Kinectで光学迷彩を作ってみた | fladdict
http://fladdict.net/exp/ginnyeffect/