iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
ディープラーニングに頼らず、機械に絵を描かせる | fladdict
Processingで、自動絵画化してみるテクニカルスタディ。 最近だと、ディープラーニング系でやるのが流行りだけど、あえて手動アルゴで頑張るなど。流行に逆らって、素手で戦うのが美学だと思う！！ ファーストのスタディ。アインシュタイン。ドットをボコボコ置いただけともいう。いちおう画素の標準偏差などをとって、絵としての粗密を判定しながらドットを置いていく。 基礎理論ができたところで、ブラシのスタディ。とりあえずランダムな文字で配置してみた。もっとtypographyっぽくなるはずが思った通りにいかない。 セカンドのスタディ。モナ・リザの再絵画化。文字のかわりに筆パターンをテクスチャとして利用。細部がなかなかでない。 キツネの絵画化・・・筆テクスチャの大きさを絵の密度で制御する。色のゆらぎをRGBで表現すると虹色に歪む。 カラーをHSB空間に変更。だいぶいいかんじに。エッジ境界がガラスエフェク
Apple Watchアプリを作るべきかUIUX評価雑感 | fladdict
事前レビュー「UI考（番外編） AppleWatchについて、あまり語られてない視点」の続き、週末に使ってみた雑感。 通知マシーンとしての素晴らしさ 通知マシーンとしては文句なく素晴らしい。手首に対する自然なノックからはじまる通知と確認のプロセスは、ミニマルで合理的に設計されている。Facebookのメッセンジャーやカレンダーなどとの相性は抜群だった。 全てをぶちこわす致命傷 いっぽうアプリのプラットフォームとして考えた場合、これはまだ実用に達していないと判断した。おそらく一番致命的な問題はレスポンスの遅さだ。 Apple Watchの謳う最大の価値は、「携帯を取り出すより楽」なことと「グランサビリティ（一目瞭然性）」だった。ところが実際触ってみると圧倒的に遅い。これはiPhone本体とのBT通信が全てを台無しにしているためだ。 例えばグランスやアプリを使用する場合を考えてみよう。アプリ利
UI考（番外編） AppleWatchについて、あまり語られてない視点 | fladdict
AppleWatchの発売まであと10日。「Apple Watch誰もつかわねーよ！」「いやiPhoneのときもみんなそういってたじゃん」という論争される今日この頃。 色々な立ち位置から多用な意見が展開されているが、いくつか大きなことが見落とされてると思う。特にスマホのUIUX系文脈で、一目瞭然性（グランサビリティ）とかワンタップといった、Appleのガイドラインをコピペしてるだけの人が多い印象。個人的に、もう少し気になっていることについてメモ。 「iPhoneは片手で操作できる」 vs 「AppleWatchは操作に両手を使う」 まず、Apple Wach本当に手早くハンディなのかについて。 Apple Wachの利点は、1アクションで「画面を表示できる」ことであり、1アクションで「操作できる」ではない。見落とされている点は、iPhoneは片手で操作できるということ。でもApple Wa
Googleはどうやってサービスを生み出すのか？ – Google主催のプロトタイピング・ワークショップ | fladdict
＜追記＞オリジナルのデザインスプリント文献翻訳はじめました＜／追記＞ THE GUILDのメンバーで、Google主催のプロトタイピングのワークショップ「デザインスプリント」に参加してくるなど。ご招待いただき多謝でございます。 デザインスプリントとは？ デザインスプリントはグーグルによるデザイン教育メソッドとそのワークショップ。数時間から数日で一気に籠って、商品のコンセプトデザインやプロトタピングを仕上げてしまう高速なデザイン手法です。Googleのベンチャー機関Google Venturesがよく、投資先に行っているものです。 導入事例としては、最近に日本にも上陸したブルーボトルコーヒーのサイトブランディングで行われたのが有名でしょうか。GoogleX内部でも頻繁に行われているようです。本来は5日間でやるこのデザインスプリント、今回は入門編ということで圧縮して2時間で1つの企画を考えます
インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdict
巷では、スマホは「手触り」が重要・・・って話が持ち上がりつつあるが、使い易さと気持ちよさを両方できる人材が不足している。広告Flash業界で培われたインタラクションのノウハウは、だんだんと失伝しつつあり、ビジュアルや動きをちゃんとコーディングできるスマホ系の人材なかなかいない。新しく勉強するパスもほとんどない。 そんなわけでTHE GUILDの社員研修として勉強会をすることに。目標は1年ぐらいでこの程度のモリモリ動くものを作れるようにすること。で、2年目に動きや手触りに、合理性や必然性、使い易さを付加できるとこまでもっていく。 第1回はインタラクティブの根幹となる乱数について。 1: 乱数とは ランダムな値を返す関数、機能。 乱数はインタラクティブ・プログラミングの根源。静的な絵とは根本に異なる、永遠に定着しない絵を作り出す。 インタラクティブなプログラミングでは、知識以上にその応用力が問
パリで超巨大Google Mapアートを設営してくるなど | fladdict
パリの美術館ゲテ・リリック(Gaite Lyrique)で開催中の、Capitaine Futurというエキシビジョンにて、拙作のTHE GIANT MAPが展示中させて頂きました。展示帰還は10月18日から来年の2月8日まで。 THE GIANT MAPって何？ 子供がゴジラのように暴れられる、インタラクティブな巨大グーグルマップです。 Google Mapにレーザーセンサーやシェーダー、物理エンジンなどを悪魔合体し、さらに日の出や日没、色調補正、飛行機や霧や雲などを追加したもの。子供の歩行を検知して地響きとともに大地が割れ、大爆発。ド直球のアイデアですが、ググっても誰も作ってないっぽかったので、アルバイトの岩谷君と一緒に勢いで作ってみました。 制作の背景 元々はGoogle DevArtという、グーグル主催アートコンペ用への応募用に作成したもの。Google DevArtはGoogle
iOS用のアニメーションエンジンを作ろうと思う その2 〜 APIを設計する | fladdict
GLDTweenを作るにあたって、まずパブリックAPIの仕様を決める。 自分はライブラリを作るときは、まず内部仕様より先に、パブリックAPIを定めるべきだと考えている。 まずユーザーが実際にさわるAPIを策定し、先にサンプルコードを書いて「ユーザーが使いやすいことを確信」する。その後ライブラリの中身を設計する。この工程を省略すると、パワフルかつ難解なオナニーライブラリが生まれてしまうからだ。設計にパブリックなAPIが従事するのではなく、パブリックなAPIに設計が従事すべきだと考える。 アニメーションエンジンの定番API というわけで既存のAPIを調査し、パブリックAPIの設計を下記３つの方式から選択することとした。 すなわちUIAnimation型、CATransition型、Tweener型だ。 1: UIAnimation型 UIAanimationやOpenGLのように、betinと
iOS用のアニメーションエンジンを作ろうと思う その1 | fladdict
iOSのSDKが提供するアニメーションSDKは正直いってショボイ。 UIAnimationは機能が貧弱すぎるし、CoreAnimationは強力なものの手続きが煩雑で使えたものじゃない。JSやAndroidと比べれば悪くはないのだけれども、僕はもともとFlash業界で育ってきた人間だったので、Flashの柔軟な表現力が基準になってしまう。 しょうがないので結局、自分で作ることにした。 GitのリポジトリはGLDTween、ライセンスはMITを予定。 そもそも、なぜiOSのアニメーション系のSDKがショボイのか？というと、これはUIKitの設計のせいだ。 UIKitではViewの座標系が、CGPoint、CGSize、CGFrame、CGAffineTransformなど様々な構造体に分散して保持されている。構造体はNSObjectではないので、配列や辞書に突っ込むことができず、参照ではなく
タブレット向けのペーパープロト用ノートをリリースしました ＆ アプリ設計用ピクセル定規プレゼント | fladdict
iPhone版のペーパープロトパッドに続き、リクエストの多かったタブレット版が完成！iPad mini版実寸準拠のA4ノートです。増刷御礼のスマホ版ノートともども、THE GUILDストアから購入可能です。初回ロットは1000部限定生産。 このタブレット用パッド発売を記念して、ご要望の多かったTHE GUILDのピクセル定規（非売品）をプレゼント企画をしようかと。 THE GUILDピクセル定規は、iPhone、iPadのピクセル実寸やミリインチなどが刻印された万能三角スケール。アルミ製にレーザー刻印、100本だけがプロトタイプとして存在する激レア高級グッズ。残り十数本のこの定規を、今回バーンと放出しようかと。 応募方法 応募方法は以下のいづれか4通りから1つを行えばok。複数種を行った場合、当選確率は比例してアップします。 stores.jpから商品を購入する このエントリーをはてぶする
デザイナがエンジニアリング（プログラム）を学ぶコツ | fladdict
最近、色々な方と「表現とエンジニアリングの融合」について、お話を伺ったりしたことからのまとめ。 なぜ表現者はテクノロジーを学習するのが苦手か 表現とエンジニアリングができるハイブリッドな製作者は、理系あるいはエンジニア出身の人間が多い。逆にアーティストや（グラフィック）デザイナーのバックグラウンドから、ハイブリッド型へと移行する人は相対的に少ない。 基本的には、エンジニアのほうが「系統立てて学習する」という点で、ノウハウと教育がある。いわゆる「美的センス」といわれるようなモノであっても、いちどロジック化して自分なりに消化さえできてしまえば、エンジニアは表現やデザインもエンジニアリングの一貫として学習することができる。（逆に、スキルをブレイクダウンして学習するぶん、「作れるけど作りたいものがない」になりがちではある。） 明確なビジョンが学習を阻害する 一方アーティストやデザイナが、なぜテクノ
FacebookのニュースアプリPaperのUIと、その背後に見える戦略について | fladdict
Introducing Paper from Facebook on Vimeo. FacebookがリリースしたニュースアプリPaper、さっそくダウンロードして触ってみた。 使ってみた第一印象は、「意欲的な実験作だが、まだ実用品ではない」といった感じだ。 外見や手触りが注目されるPaperだが、しかし僕自身が一番注目しているのは右上のナビゲーションだ。Paperの右上は、「人」「会話」「通知」 というFacebookの基幹アプリとまったく同じ構成なのである。そしてFacebookの同機能にアクセスする。つまり、Paperはニュースアプリの形をしているが、本質的にはFacebookクライアントなのだ。 これは。何を意味するのか・・・ つまりFacebookは今後、様々なコンセプトのFacebookクライアントを複数リリースするということだ。 右上のボタン群が主張するUI上のメッセージは、
ペーパープロトタイピング入門 – 第1回 どうして紙でプロトを作るのか | fladdict
ペーパープロトタイピング講座シリーズ。第1回は導入編。 第1回はの導入編。ペーパー・プロトタイピングとは何なのか、何故必要なのか。そして導入することで、どんな利点があるのかを説明する。 ペーパー・プロトタイピングって何？ ペーパー・プロトタイピングとは、紙で実際にアプリやサイトを「実装する」ことである。 通常の開発においてコンテンツが使いやすいかどうかは、開発が終盤になるまでわからない。このため「作ってはみたが使いにくい」や「いまさら後戻りできない」という問題が発生する。UIや手触りが重要なモバイル系のアプリにおいて、これは致命的な問題になる。ペーパープロトタイピングはこの問題を低コストで解決する。 紙とペンで動作モックを作成することで、本実装を行う前に、素早く手戻なく検証を行うことができる。これにより、仕様書策定や実装前にPDCAのサイクルを実現できる。作業負荷の高い本実装を行う前に軽く
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
どんなに頑張っても、出版社は電子書籍の価格を防衛できない | fladdict
Kindleストアを見て思った。無理だ。 3〜5年のタームで見た場合、出版社がどんなに足並みをそろえて防衛線を貼っても、電子書籍の価格を維持することは難しい。 なぜならば電子書籍ストアにおいて、最大のライバルは同業者ではないからだ。 電子書籍の最大の特徴は、「印刷、複製のコストが０になったこと」だ。これは参入障壁の劇的な低下と同義であり、3種類の危険な新規プレイヤーを呼び寄せる。 新しいプレイヤーの参入 出版のコストが限りなく０に近づく時、新たに参入してくるプレイヤーとは誰か？ では、その新規プレイヤーは何なのか？ まず第一に「ギャンブルのできる、失うもののないプレイヤー」、そして第二に「金銭的な利益を求めないをプレイヤー」、そして第三の、最大の競合が「書籍以外に収益モデルのあるプレイヤー」の参入である。 第一の「失うもののないプレイヤー」とは、いわゆるインディペンデントや新規参入の出版社
Appleの弱点と、対抗プレイヤーの取るべき戦略メモ | fladdict
Appleの全ての戦略は、iTunesを起点とした囲い込みをコアとする。この囲い込み戦略については5年前の予測エントリが、現状をあらわしていると思う。 この領域にて先行者利益を得ているAppleに対し、対抗プレイヤーが純粋に端末や、囲い込み戦略のコピーで戦うことは難しい。 Appleの土俵で勝負をするな よって対抗プレイヤーがすべきことは、Appleの土俵上にて同じルールで戦うことではない。 Appleの戦略がアドバンテージを失うように、市場のルールとトレンドを変更することだ。 その為にはどうすべきか？ ー Appleの戦略の起点がiTunesである以上、iTunesがイノベーションのジレンマにそのものになるよう、ルールを変更することができれば、Appleの支配体制は崩壊する。 商品を模倣するのではなく、攻め方を模倣する 実は、これはAppleがいままでやってきたアプローチそのものである。
Flashで作った iPhoneアプリがリリースされたよ
日本では一番乗り・・・なのかな！？ Adobe Flash CS5 (Beta) によって作られたiPhoneアプリをAppStoreに公開しました。 シンプルなメトロノームアプリです。 いちおうアプリのリリースと、告知だけは許可貰ってます 。UIを改良したver1.01も現在審査中。 本来パブリックベータ公開にぶつける用に作った、オプソ前提のテクニカルデモなので機能的にはシンプル。 「iPhoneじゃFlashは実用レベルじゃ動かない！」という説を覆すべく、比較的正確な動きが要求されるメトロノームを作ってみました。アニメーション検証と思って頂ければ。 感想としては最適化をすすめれば商業案件で十分使えるレベル。この程度のクオリティが実装工数２〜３日で作れるとなると、CS5のリリースと同時に、大量のFlasherさんが参入してきそう。 正式版ではより速くなり、ヌルヌル動くiPhoneアプリが
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
オンラインで試せる、iPhoneミニチュア風写真の作り方 | fladdict
おかげさまでTiltShift Generator、リリース当日から１位みたいです。皆様りがとうございます。 i-pod touch対応や、高解像度出力についても粛々とアップデートしていきますので、よろしくお願いいたします。 ちょっとTwitterで見たところ、ミニチュア風にやるコツを試行錯誤している方がいるようなので、簡単な入門チュートリアルをしたいと思います。 iPhoneがないユーザーでも楽しめるように、オンライン版のTiltShift Generatorを使って進めてみます。 ■ミニチュアっぽく見えるようにするには？ 風景写真をミニチュア風にするにはどうすればいいでしょうか。 簡単にいえば、「実際に風景にあってミニチュアにはない要素」を消し、「ミニチュアにあって写真にない要素」を追加すれば、写真をミニチュア風にすることができます。 １：空気による色の減衰 空気には実はちょっとだけ色
Flashにおけるマルチタッチ実装について | fladdict
iPhoneを色々触ってQuadCameraに、自力で回転つきUIScrollViewとかを実装したりしたお陰で、ようやっとFlashでマルチタッチを実装するノウハウとかが確立できた気がする。 Flashでマルチタッチはサイネージ系でもほぼ仕事がなさそうだけど、先行投資研究としてメモ。 数年後には需要がでるはず。 ■マルチタッチを如何に管理するか ゆび１つにつき１つのTouchObjectとして管理し、TOUCH_PRESS, TOUCH_RELESE, TOUCH_MOVE をEventDispacherで発行するようにする。 要はこのパートはiPhoneの機構をマルパクリする。 ■タッチの同一性の検出 最大の問題は、指Ａのタッチと指Ｂのタッチの同一性を検出すること。 つまりマルチタッチでグリグリ動かすときに、２つのタッチでどっちがＡでＢかを正しく判別しつづけること。 iPhoneではコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
