iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
プロジェクト炎上を防ぐ魔法のアイテム、100徳ナイフを買ったお話２ | fladdict
こんにちは、日本で唯一の100徳ナイフコレクター（推定）兼、UIデザインとかしてる fladdictです。 先日、会社の機材として新しい100徳ナイフを購入しました。 via mantiquesmodern ゾーリンゲンのナイフマイスター、P.LANGが自ら研ぎあげた、最高級の一品です。重量950g、お値段なんと120万円。今年のお小遣いが全部すっ飛びました。 馬鹿と思われるこのナイフ、実はサービスの炎上やデスマーチを防ぐ神ツールだったりします。 このナイフをクライアントの偉い人に見せると、あら不思議！ 「弊社のアプリをこうしては絶対にならない！」「この状況を脱しなければならない！」という号令が、ほぼ100%トップダウンで発動します。 一目瞭然なほど馬鹿で、巨大で、非実用的で、そして無駄に高価であればあるほどに意味がある。これを見せた時、「多機能もすぎれば毒となる」という言質に説得力が生ま
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
人を強制的に幸せにするデザインとインターフェース | fladdict
最近よく考えることに、人間を強制的に幸福にするユーザーインターフェースは作れないか、という着想がある。100万ユーザー級のアプリのUI改善に何本か関わった結論として、単に使いやすいインターフェースや、KPIアゲアゲの設計とかに飽きた。 むしろ統計、認知心理学、脳科学、行動経済学などをフル活用して、デザインで強制的に幸せを生産できないだろうかと考える。 幸せは生産できるか？ アメリカの哲学者、ウィリアム・ジェームズの言葉に、「私達は幸せだから笑うのではない。笑うから幸せなのだ」というものがある。日本にも類似の表現として、「笑う門には福来る」という諺がある。 両者で注目したいのは、因果関係の方向だ。どちらも方向として、「笑う」→「幸福」という因果関係を説いている。「幸福」→「笑う」ではない。 実は最近の脳の研究によると、とりあえず口角を持ち上げれば、人間の脳はドーパミンを生産するのだという。脳
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
Googleはどうやってサービスを生み出すのか？ – Google主催のプロトタイピング・ワークショップ | fladdict
＜追記＞オリジナルのデザインスプリント文献翻訳はじめました＜／追記＞ THE GUILDのメンバーで、Google主催のプロトタイピングのワークショップ「デザインスプリント」に参加してくるなど。ご招待いただき多謝でございます。 デザインスプリントとは？ デザインスプリントはグーグルによるデザイン教育メソッドとそのワークショップ。数時間から数日で一気に籠って、商品のコンセプトデザインやプロトタピングを仕上げてしまう高速なデザイン手法です。Googleのベンチャー機関Google Venturesがよく、投資先に行っているものです。 導入事例としては、最近に日本にも上陸したブルーボトルコーヒーのサイトブランディングで行われたのが有名でしょうか。GoogleX内部でも頻繁に行われているようです。本来は5日間でやるこのデザインスプリント、今回は入門編ということで圧縮して2時間で1つの企画を考えます
日本経済を回す気がない | fladdict
最近なぜだか消費に興味がわかなくなった・・・ もはや日々の生活においても消費がない。食費、家賃、移動等の経費意外を除いたのこりの出費うち、90%はAmazon、Apple、GoogleのIT3大外資に貢いでる。 学生のころは、「将来はピエール・ポーランのイスとか買って、打ちっぱなしの部屋に住むぞ！！」とか思っていたが、いざ買えるようになったら別に欲しくなくなっていた。 そもそも新品に興味がない。持ち家に興味ない。自動車にも興味ない。旅行もしない。ブランドにもそこまで興味ない。根本的に所有欲が少ないのか。 こういうと「よい品を知らないからだ」と言われる。でも自分もいちおうiPhoneバブルのピークでは、100万円ぐらいのレンズ買ったり、アフリカ旅行したり、数万円の食事やワインとか飲み食いと色々やってみたこともあった・・・その後iPhoneバブルは一過性で終わり収入も激減したけど、別に困らない
インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdict
巷では、スマホは「手触り」が重要・・・って話が持ち上がりつつあるが、使い易さと気持ちよさを両方できる人材が不足している。広告Flash業界で培われたインタラクションのノウハウは、だんだんと失伝しつつあり、ビジュアルや動きをちゃんとコーディングできるスマホ系の人材なかなかいない。新しく勉強するパスもほとんどない。 そんなわけでTHE GUILDの社員研修として勉強会をすることに。目標は1年ぐらいでこの程度のモリモリ動くものを作れるようにすること。で、2年目に動きや手触りに、合理性や必然性、使い易さを付加できるとこまでもっていく。 第1回はインタラクティブの根幹となる乱数について。 1: 乱数とは ランダムな値を返す関数、機能。 乱数はインタラクティブ・プログラミングの根源。静的な絵とは根本に異なる、永遠に定着しない絵を作り出す。 インタラクティブなプログラミングでは、知識以上にその応用力が問
コンテンツを最適化すると多様性は死ぬのか？ | fladdict
ちょっとネット小説をリサーチする機会があって、驚愕した。 「小説家になろう」という小説CGMサイトを調べたところ、そのランキングがヤバい。 なんと人気ランキングの1位〜10位中、９本までが「異世界に飛ばされた主人公が（略）」というストーリーだった。 1位：無職転生 引きこもりニートが、異世界に転生。チート性能で大活躍 ２位：異世界迷宮で奴隷ハーレムを 引きこもりニートが、異世界（ゲーム）に飛ばされる。チート性能でハーレムウハウハ。 3位：謙虚、堅実をモットーに生きております！ 主人公が少女マンガの世界に飛ばされる。マンガの設定に逆い堅実にいきようと頑張る。 4位：八男って、それはないでしょう！ 平社員が起きたら異世界で貧乏帰属の八男になってた。 5位：盾の勇者の成り上がり 現代人が異世界に（略） 6位：理想のヒモ生活 ブラック企業社員が異世界に（略） 7位：異世界食堂 現代に異世界の人がく
JavaScriptでゴリゴリ実験サイトを作ったよ | fladdict
fladdict.netのトップをリニューアル。JavaScriptの実験場にしてみた。久しぶりにゴリゴリJS書くと、かなり楽しい。 古き良きゼロ年代のFlash実験サイトはほぼ絶滅してしまったわけだけど、それを現代のJSとHTMLでやり直してみたらどうなるか？そんな感じのスタディ。使用ライブラリはpaper.jsとprocessing.js。時間があるときにcreate.jsも導入してみたいけど、ざっと見た感じcreate.jsは冗長すぎてスケッチには向かないと思う。スマホだと重すぎてだと動かないので、時間あるときに分岐するようにしたい。 最近はインターネットも成熟化したのか、グラフィック、インタラクション、プログラミングを三位一体でする人が減ってる気がする。分業化が進んでいるのだろう。インタラクション系がわかるエンジニアは需要があるわりに、新しい人が学ぶ機会が昔にくらべれば激減している
ナウシカごっこができる！ Terraのサボテン水耕栽培キット | fladdict
Stores.jpで購入した、1012 | TERRAのサボテン水耕栽培キットがついに届きました。Terraはステンドグラスの技法で作成された、手作りのサボテン水耕栽培ケース。この標本感がとってもイカす！ サボテンや多肉植物は、一般的に水をやりすぎると根腐れする・・・ってイメージですが、なんと水耕栽培ができるのだとか。 サボテンの根っ子をちょん切って、根の端っこだけを水につけておく・・・すると、サボテンは水棲環境に適応した新しい根を生やすんだそうです。 世話はとってもシンプルで、水が減ったら交換したり追加するだけ、ノー肥料でいけるというステキ具合です。普通の植物は、「土が感想したら水をたっぷり」みたいな、あやふやなインストラクションで難しいですが、これなら水位を維持するだけなので育てるのも簡単。アプリを使いやすくするのと、植物を枯らすことに定評のある弊社ですが、ここまでシンプルなら頑張れそ
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
ペーパープロトタイピング入門 – 第4回 見やすいペーパープロトの描き方 | fladdict
ペーパープロトタイピング講座シリーズ。第4回は清書の仕方。絵心なんて必要ない、エンジニアリング的アプローチからのデザインスケッチの描き方講座。チーム共有やプレゼン用に、スピーディーで効率の良い清書のしかたを紹介する。（第3回は準備に時間がかかりすぎたので、第4回を先に掲載） シャーペンでアイデアを練る サインペン3種類で太さに差をつける マーカー3種類で濃淡をつける ポップアップや状態変化をポストイットで作る シャーペンでアイデアを練る 最初の段階では高速に試行錯誤するのが重要。 紙に関しては、いつもどおりペーパー・プロトタイピング・パッドを使用する。 シャーペンで描いては消してを繰り返し、あらゆる可能性を広範囲に試していく。とにかく手戻りを恐れずにガンガン描く。この段階では自分さえ理解できればよい。ある程度アイデアが固まってきたら「手早く」清書する。清書はチーム共有やテスト、プレゼンのた
アプリのプロトタイピング用ノートを作成しました | fladdict
スマホアプリのペーパープロトタイピング用のノートを作成＆販売開始いたしました。アプリのプロトタイピングにPOPアプリとかを使っている場合、相性抜群です。iPhone実寸のグリッド入り＆各種ガイド線付なのでNavigationBarやTabBarなども簡単に線を引けます。 DeNA様のUI/UXチームがダンボール1箱（160冊）ほど導入してくださいました！ほんとうにありがとうございます。 THE GUILDでは「アプリはプロトタイピングが9割」という信念のもと、自社でプロトタイピングツールを作成しています。また、チーム内だけでなく、クライアントからパートナーまでツールやメソッドの標準化することを目標としています。 業界全体でメソッドやツールを標準化することで、みながノウハウを使い回せてものすごく生産効率と品質が向上するのではないか？と思うのですよね。初期フェーズでのプロトタイピングもっと流行
入れるべき機能と排除すべき機能の分類メモ | fladdict
クライアントプレゼン用の覚え書き。 「機能」のほとんどは以下の5種類に分類できるので、搭載するまえにどのカテゴリに属するかよく考える。 1:必須機能 メーラーの送信、CC送信、カメラの撮影、オートフォーカスなど。 ついていて当たり前、つけなければユーザーの不満が増加する機能。 必須機能が実装されていない場合、基本的に勝負の土俵には立てない。 予算をかけすぎても、べつにユーザーへのアピールにはならない。 2:訴求機能 なくても不満ではないが、あればユーザーの満足を増加させる機能。 ユーザー自身も無自覚的で、初期段階では実物を見るまで需要の存在自体が見過ごされている。 女子向けのポップな一眼レフや、（1979年当時）歩きながら音楽が聞ける機械など。 メリットは高いがそもそも発見するのが大変だったりする。 差別化機能のうち需要の高いものは、業界内で徐々にパクられ必須機能にシフトしていく。 3:沼
一眼レフで超高速撮影をする方法など（多分弾丸も撮れる） | fladdict
連休中の遊びにハイスピード撮影に挑戦＠お風呂。 ヤバイ、すげぇ面白い。 昔からハイスピード撮影やってみたかったのですが、ハイスピードカメラは一千万円クラス。正直諦めてました。水滴ですらシャッタースピードが1/4000〜1/8000秒、弾丸や風船だと数万分の1秒必要なんですよね。 普通の一眼で、f.13のシャッタースピード1/8000以下とか無理ゲーです。 そしてそもそもの話、一眼のシャッターは1/1000秒単位のタイミングで誤差なしで被写体を狙えるほど精度が高くない。 ところが調べてみると、一眼レフで擬似的に限界以上のシャッタースピードを出す方法確立されてたり。世の中には頭のいい人がいるものです。 それはシャッターでなくフラッシュで、ハイスピード撮影するということ。 もうシャッターは開きっぱなしにして、フラッシュを超速で点灯させて写真撮る。 暗闇で長時間露光をしてフラッシュを1/20000
新Google Mapsアプリ採用のフレームワーク NimbusKit がいい感じ | fladdict
iPhoneの新しいGoogle Mapsのアプリ、色々弄り倒してますがステキな感じ。 でこれひょっとして、「NimbusKit使ってない？」って思ったら、案の定で使ってた。 NimbusKitはiOS用のヘルパークラスと、コンポーネントと、デバッグツールの集合体。 以下のような機能がサクサクとつけられる。 CSSスキニング インターフェースの外見にCSSを適用できる。ビューのカスタマイズがラクチンに。 TextLabel iOSの微妙なTextLabelにリッチテキストやリンクがつけられるように。 バッジ 通知件数などのバッジを簡単に作成。 他アプリとの連動 他アプリ・・・マップ、ストア、電話、SMS、FB等の連携をラクチンに。 アプリ内ホーム画面 ホーム画面的なUIをアプリ内に簡単に追加できる。 キャッシュ／非同期通信つきのImageView 画像ローダー付きのImageView拡張。
Amazon流の開発術では、まずプレスリリースを作る | fladdict
Amazonでは製品開発をするとき、まず最初にプレスリリースを書くらしい。これは”Working-Backwards“と言うデザイン手法。面白げなので色々と調べてみた。 Working-Backwards法の商品開発では、お客様の視点をスタート地点にするため、開発前にプレスリリースを作成する。プレス内容は、既存プロダクトの問題点と、それを新製品がどう解決するかが中心になる。 プレスがユーザーに響かなかった時点でプロジェクトはボツ。そもそもその商品は作らない。これにより見当違いな商品を作るリスクを、一番最初の段階で低コストに回避できる。 このWorking-Backwards法で書くプレス内容は主に以下のとおり。 見出し 顧客が商品を理解できるタイトル 副題 ターゲット層と、彼らのメリットを1行で。 概要 商品の特徴と利点をまとめる。この段落で全てを理解できるように。 課題 このプロダクトが
iCloudハック事件の手口がガード不能すぎてヤバイ | fladdict
GizmodeのライターがiCloudのアカウントを乗っ取られ、iCloud消滅、iPad, iPhone, Macのデータワイプ、Gmail, Twitterの乗っ取りを食らった件について、ハッキングを本人が語ってらっしゃる。 手口としては典型的なソーシャルエンジニアリングによる、複数サイトから得た情報のギャザリングを用いたハック。 だがこのハッキングのプロセスが鮮やかすぎてヤバイ。ツールを一切つかわず電話だけでハッキングしてる。 Twitterアカウントに目をつける 元々クラッカーは、Gizライターの持っていた「３文字のTwitterアカウント」が欲しくてアタックをかけたらしい。 Twitterプロフィールから、本人のウェブサイトへ 本人のウェブサイトからGmailのアドレスを発見 Gmailで「パスワードがわからない」から再発行 再発行メール用のアドレスが画面に表示される。この m*
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3Dプリンタを使った現実ハックがステキ | fladdict