iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
乱数チューニングによる動きのコク
乱数チューニングによる動きのコク 1. 一様乱数 いわゆるMath関数による乱数。 雑味や臭みが強く、そのままでは使い物にならない。 2. 雑味を取り除いた乱数 下処理として臭みや雑味を取り除いた状態。一様乱数特有の発作的なガタツキがないのがわかるだろうか？ 過去2フレームに、距離33%以内の重複数が出ないようになっている。 シャッフルやスロットのアニメ処理など、2連続で同じ数字が重なるとバグって見える表現に有効。 3. コクのある乱数 乱数の旨味が濃縮された状態。中心極限定理により、自然な風合いに濃縮されている。 加算式による天然の正規分布は、ボックスミューラー法の養殖された乱数と違い、加算回数で生産者ごとの味わいが出せる。 パーティィクルや自然シミュレーションと相性が良い。 4. 芳醇なまろ味を出した乱数 口に含んだ後に、豊かな香りが広がる乱数。移動平均により連続性を出すことで、揺らぎ
プロジェクト炎上を防ぐ魔法のアイテム、100徳ナイフを買ったお話２ | fladdict
こんにちは、日本で唯一の100徳ナイフコレクター（推定）兼、UIデザインとかしてる fladdictです。 先日、会社の機材として新しい100徳ナイフを購入しました。 via mantiquesmodern ゾーリンゲンのナイフマイスター、P.LANGが自ら研ぎあげた、最高級の一品です。重量950g、お値段なんと120万円。今年のお小遣いが全部すっ飛びました。 馬鹿と思われるこのナイフ、実はサービスの炎上やデスマーチを防ぐ神ツールだったりします。 このナイフをクライアントの偉い人に見せると、あら不思議！ 「弊社のアプリをこうしては絶対にならない！」「この状況を脱しなければならない！」という号令が、ほぼ100%トップダウンで発動します。 一目瞭然なほど馬鹿で、巨大で、非実用的で、そして無駄に高価であればあるほどに意味がある。これを見せた時、「多機能もすぎれば毒となる」という言質に説得力が生ま
人を強制的に幸せにするデザインとインターフェース | fladdict
最近よく考えることに、人間を強制的に幸福にするユーザーインターフェースは作れないか、という着想がある。100万ユーザー級のアプリのUI改善に何本か関わった結論として、単に使いやすいインターフェースや、KPIアゲアゲの設計とかに飽きた。 むしろ統計、認知心理学、脳科学、行動経済学などをフル活用して、デザインで強制的に幸せを生産できないだろうかと考える。 幸せは生産できるか？ アメリカの哲学者、ウィリアム・ジェームズの言葉に、「私達は幸せだから笑うのではない。笑うから幸せなのだ」というものがある。日本にも類似の表現として、「笑う門には福来る」という諺がある。 両者で注目したいのは、因果関係の方向だ。どちらも方向として、「笑う」→「幸福」という因果関係を説いている。「幸福」→「笑う」ではない。 実は最近の脳の研究によると、とりあえず口角を持ち上げれば、人間の脳はドーパミンを生産するのだという。脳
ディープラーニングに頼らず、機械に絵を描かせる | fladdict
Processingで、自動絵画化してみるテクニカルスタディ。 最近だと、ディープラーニング系でやるのが流行りだけど、あえて手動アルゴで頑張るなど。流行に逆らって、素手で戦うのが美学だと思う！！ ファーストのスタディ。アインシュタイン。ドットをボコボコ置いただけともいう。いちおう画素の標準偏差などをとって、絵としての粗密を判定しながらドットを置いていく。 基礎理論ができたところで、ブラシのスタディ。とりあえずランダムな文字で配置してみた。もっとtypographyっぽくなるはずが思った通りにいかない。 セカンドのスタディ。モナ・リザの再絵画化。文字のかわりに筆パターンをテクスチャとして利用。細部がなかなかでない。 キツネの絵画化・・・筆テクスチャの大きさを絵の密度で制御する。色のゆらぎをRGBで表現すると虹色に歪む。 カラーをHSB空間に変更。だいぶいいかんじに。エッジ境界がガラスエフェク
Jackson Pollock的スケッチ | fladdict
アルゴリズムによるJackson Pollock的な世界観のスケッチ。processing3を使用。 フォースフィールドをつかった擬似流体アルゴリズムをベースにいろいろ小細工を重ねて制作。コンピューター・ジェネレートっぽさをなくした、オーガニックなノイズのスタディ。実際に動くJSバージョンは、もうちょっとスタディしてから公開予定。
GoogleがプロトタイピングツールPixateを買収。無料化される。オススメ。 | fladdict
Googleが、ローカルベースのプロトタイピングツールPixateを買収した模様。以後、Pixateアプリは無料となり引き続き開発が続けられるようです。 2013年頃、Pixateに$600払ってた俺は泣いた。おめでとうございます。 Invisionを主流に百花繚乱の分断化で割と困っていたプロトタイピング業界。Googleがこの分野に手を出したことで変動は起きるのだろうか。 これがプロトタイピングツールの決定版になるとよいですね。高性能だし無料だし。クラウド版も$5だし。 日本でプロトタイピングサービスばパッとしない究極の問題は、サービスがオンラインのことなんですよね。SI系の人たちは「セキュリティ的な事情でオンラインの共有サービスを使えない」という事情がありました。Pixateはローカルアプリなので、その辺の心配をする必要がないのがポイントですね。そのうち大手SIとかでもこういうツールが
スマート家電が実現する素敵なディス☆トピア | fladdict
スマート家電とIoT（インターネット・オブ・シングス）について、仕事の相談がくるようになり色々と基礎リサーチをした。しかしながら家電メーカーが好き勝手にやるとディストピアが到来する・・・という脳内シミュレーション結果が出た。以下はストーリー仕立てでまとめたプレゼン資料。 こんな未来は嫌なので、是非ともこの危機を回避していただきたく。解決編はまた別の機会に書く（あるいはクライアントにだけ提案する）。 fladdictさんの新居事情 fladdictさん（仮）は、UIUX系の会社に勤務するギリギリ富裕層のデザイナー。念願のマンション購入にあたり、�家をまとめてスマート家電�化することにした。 意識高い系であるfladdictさんは、未来の生活を調査すべく自ら人柱となったのである！ 新居は、大手建設会社と大手家電メーカーが共同開発したスマートマンション「スマートピア南平台」。具体的に何がスマート
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
Apple Watchアプリを作るべきかUIUX評価雑感 | fladdict
事前レビュー「UI考（番外編） AppleWatchについて、あまり語られてない視点」の続き、週末に使ってみた雑感。 通知マシーンとしての素晴らしさ 通知マシーンとしては文句なく素晴らしい。手首に対する自然なノックからはじまる通知と確認のプロセスは、ミニマルで合理的に設計されている。Facebookのメッセンジャーやカレンダーなどとの相性は抜群だった。 全てをぶちこわす致命傷 いっぽうアプリのプラットフォームとして考えた場合、これはまだ実用に達していないと判断した。おそらく一番致命的な問題はレスポンスの遅さだ。 Apple Watchの謳う最大の価値は、「携帯を取り出すより楽」なことと「グランサビリティ（一目瞭然性）」だった。ところが実際触ってみると圧倒的に遅い。これはiPhone本体とのBT通信が全てを台無しにしているためだ。 例えばグランスやアプリを使用する場合を考えてみよう。アプリ利
社員がフリーランスになる前に教えておきたいこと | fladdict
秘密結社THE GUILDも仲間が15人近くになり、僕の直轄チームも3人に増えた今日この頃。直轄チームのみんなには、できれば幹部になって欲しい。でも、翼を折って囲い込むのではなく、いつ独立しても恥ずかしくないように育てていきたい。っていうか、ここに書いたのできるまで、独立なんぞ許さんよ的メモ。新入社員は各自マスターしておくこと。 1: 収入の一定パーセントを貯蓄しなさい 収入の10%〜20%を、お給料日に自動振り込みで貯蓄しなさい。お金持ちになる唯一の方程式は「消費＜収入」。この方程式が強制的に維持される仕組みを作る。これが人生を安定させるために一番重要なことです。 2: 生活資金を半年分ためなさい まず無収入状態でも3〜6ヶ月生存できる貯金を作りなさい。生活費の安全バッファは大型案件や、お金にならないチャンス案件を手に入れる最低条件です。安全バッファがなければ、常に生活費のために自分を切
日本経済を回す気がない | fladdict
最近なぜだか消費に興味がわかなくなった・・・ もはや日々の生活においても消費がない。食費、家賃、移動等の経費意外を除いたのこりの出費うち、90%はAmazon、Apple、GoogleのIT3大外資に貢いでる。 学生のころは、「将来はピエール・ポーランのイスとか買って、打ちっぱなしの部屋に住むぞ！！」とか思っていたが、いざ買えるようになったら別に欲しくなくなっていた。 そもそも新品に興味がない。持ち家に興味ない。自動車にも興味ない。旅行もしない。ブランドにもそこまで興味ない。根本的に所有欲が少ないのか。 こういうと「よい品を知らないからだ」と言われる。でも自分もいちおうiPhoneバブルのピークでは、100万円ぐらいのレンズ買ったり、アフリカ旅行したり、数万円の食事やワインとか飲み食いと色々やってみたこともあった・・・その後iPhoneバブルは一過性で終わり収入も激減したけど、別に困らない
インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdict
巷では、スマホは「手触り」が重要・・・って話が持ち上がりつつあるが、使い易さと気持ちよさを両方できる人材が不足している。広告Flash業界で培われたインタラクションのノウハウは、だんだんと失伝しつつあり、ビジュアルや動きをちゃんとコーディングできるスマホ系の人材なかなかいない。新しく勉強するパスもほとんどない。 そんなわけでTHE GUILDの社員研修として勉強会をすることに。目標は1年ぐらいでこの程度のモリモリ動くものを作れるようにすること。で、2年目に動きや手触りに、合理性や必然性、使い易さを付加できるとこまでもっていく。 第1回はインタラクティブの根幹となる乱数について。 1: 乱数とは ランダムな値を返す関数、機能。 乱数はインタラクティブ・プログラミングの根源。静的な絵とは根本に異なる、永遠に定着しない絵を作り出す。 インタラクティブなプログラミングでは、知識以上にその応用力が問
THE GIANT MAP インスタレーションのメイキング | fladdict
フランスで展示してきたTHE GIANT MAP。いろいろ四苦八苦したので、制作忘備録。将来の自分と、今後こういうのやってみたい人用。 きっかけ 実はもともとはGoogle主催のアートコンペ、Google Dev Artエントリー用の作品だった。 このDevArtは、グーグルがスポンサーとなって行われるデジタルアート展覧会へに出品するための公開コンペ。たった1人の座を争っての世界中からのバトルロイヤル。条件は２つ。Googleのテクノロジーを使った、デジタルアート作品を作ること。そして、途中プロセスを全て公開すること（プロセスも審査に含む）。 ちょうど新しいことをやりたいなぁと思っていた僕は、無謀にもこのコンペにエントリーを試みる。 コンセプト設計 まずは何を作るべきか！？というところで、コンセプト設計から。ロンドン留学時代に学んだことは２つ。コンセプトのない作品は評価されないこと。ワール
タブレット向けのペーパープロト用ノートをリリースしました ＆ アプリ設計用ピクセル定規プレゼント | fladdict
iPhone版のペーパープロトパッドに続き、リクエストの多かったタブレット版が完成！iPad mini版実寸準拠のA4ノートです。増刷御礼のスマホ版ノートともども、THE GUILDストアから購入可能です。初回ロットは1000部限定生産。 このタブレット用パッド発売を記念して、ご要望の多かったTHE GUILDのピクセル定規（非売品）をプレゼント企画をしようかと。 THE GUILDピクセル定規は、iPhone、iPadのピクセル実寸やミリインチなどが刻印された万能三角スケール。アルミ製にレーザー刻印、100本だけがプロトタイプとして存在する激レア高級グッズ。残り十数本のこの定規を、今回バーンと放出しようかと。 応募方法 応募方法は以下のいづれか4通りから1つを行えばok。複数種を行った場合、当選確率は比例してアップします。 stores.jpから商品を購入する このエントリーをはてぶする
JavaScriptでゴリゴリ実験サイトを作ったよ | fladdict
fladdict.netのトップをリニューアル。JavaScriptの実験場にしてみた。久しぶりにゴリゴリJS書くと、かなり楽しい。 古き良きゼロ年代のFlash実験サイトはほぼ絶滅してしまったわけだけど、それを現代のJSとHTMLでやり直してみたらどうなるか？そんな感じのスタディ。使用ライブラリはpaper.jsとprocessing.js。時間があるときにcreate.jsも導入してみたいけど、ざっと見た感じcreate.jsは冗長すぎてスケッチには向かないと思う。スマホだと重すぎてだと動かないので、時間あるときに分岐するようにしたい。 最近はインターネットも成熟化したのか、グラフィック、インタラクション、プログラミングを三位一体でする人が減ってる気がする。分業化が進んでいるのだろう。インタラクション系がわかるエンジニアは需要があるわりに、新しい人が学ぶ機会が昔にくらべれば激減している
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
ペーパープロトタイピング入門 – 第4回 見やすいペーパープロトの描き方 | fladdict
ペーパープロトタイピング講座シリーズ。第4回は清書の仕方。絵心なんて必要ない、エンジニアリング的アプローチからのデザインスケッチの描き方講座。チーム共有やプレゼン用に、スピーディーで効率の良い清書のしかたを紹介する。（第3回は準備に時間がかかりすぎたので、第4回を先に掲載） シャーペンでアイデアを練る サインペン3種類で太さに差をつける マーカー3種類で濃淡をつける ポップアップや状態変化をポストイットで作る シャーペンでアイデアを練る 最初の段階では高速に試行錯誤するのが重要。 紙に関しては、いつもどおりペーパー・プロトタイピング・パッドを使用する。 シャーペンで描いては消してを繰り返し、あらゆる可能性を広範囲に試していく。とにかく手戻りを恐れずにガンガン描く。この段階では自分さえ理解できればよい。ある程度アイデアが固まってきたら「手早く」清書する。清書はチーム共有やテスト、プレゼンのた
ペーパープロトタイピング入門 – 第0回 | fladdict
先日リリースした、スマホアプリのペーパープロトタイピング用ノート。 商品として販売した以上、お客様のフォローアップは必須。ということで、ペーパープロトタイピング講座をはじめようかと。 全体構成は以下のような感じで、5回ほどにわけて解説していければと思います。 第1回、どうして紙でプロトを作るのか？ 紙で行うプロトタイピングの利点や特徴。ワイヤーフレームとの違いについて。 第2回、ペーパープロトタイピングに使う道具 自分でやってみるのに最低限必要な道具や、あると便利な小物などを紹介。 第3回、ペーパープロトタイピングの仕方 実際に紙をつかって、アプリケーションのプロトタイピングを行ってみる。 第4回、見やすいペーパープロトの描き方 チーム共有やプレゼン用に、見栄えのいいペーパープロトを手早く描く方法。 第5回、ペーパープロトから動作モックアップを作る POPなどのアプリを使って、紙のプロトタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
fladdict