iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
スマート家電が実現する素敵なディス☆トピア | fladdict
スマート家電とIoT（インターネット・オブ・シングス）について、仕事の相談がくるようになり色々と基礎リサーチをした。しかしながら家電メーカーが好き勝手にやるとディストピアが到来する・・・という脳内シミュレーション結果が出た。以下はストーリー仕立てでまとめたプレゼン資料。 こんな未来は嫌なので、是非ともこの危機を回避していただきたく。解決編はまた別の機会に書く（あるいはクライアントにだけ提案する）。 fladdictさんの新居事情 fladdictさん（仮）は、UIUX系の会社に勤務するギリギリ富裕層のデザイナー。念願のマンション購入にあたり、�家をまとめてスマート家電�化することにした。 意識高い系であるfladdictさんは、未来の生活を調査すべく自ら人柱となったのである！ 新居は、大手建設会社と大手家電メーカーが共同開発したスマートマンション「スマートピア南平台」。具体的に何がスマート
ペーパープロトタイピング入門 – 第4回 見やすいペーパープロトの描き方 | fladdict
ペーパープロトタイピング講座シリーズ。第4回は清書の仕方。絵心なんて必要ない、エンジニアリング的アプローチからのデザインスケッチの描き方講座。チーム共有やプレゼン用に、スピーディーで効率の良い清書のしかたを紹介する。（第3回は準備に時間がかかりすぎたので、第4回を先に掲載） シャーペンでアイデアを練る サインペン3種類で太さに差をつける マーカー3種類で濃淡をつける ポップアップや状態変化をポストイットで作る シャーペンでアイデアを練る 最初の段階では高速に試行錯誤するのが重要。 紙に関しては、いつもどおりペーパー・プロトタイピング・パッドを使用する。 シャーペンで描いては消してを繰り返し、あらゆる可能性を広範囲に試していく。とにかく手戻りを恐れずにガンガン描く。この段階では自分さえ理解できればよい。ある程度アイデアが固まってきたら「手早く」清書する。清書はチーム共有やテスト、プレゼンのた
ペーパープロトタイピング入門 – 第2回 ペーパープロトタイピングに使う道具 | fladdict
ペーパープロトタイピング講座シリーズ。第2回は準備編。前回はこちら。プロトタイピングを始めるにあたって必要なものを列挙する。 必須ツール 紙 まず紙は大量に必要。A4コピー紙や大型のポストイットが一般的。スマホアプリの場合は、弊社が専用に開発したペーパープロトタイプ用ノートが便利。実寸で検証できるように心がけよう。 シャーペン 下書き用ペン。消しやすい芯がよい。個人的にはステッドラーを愛用。 サインペン 清書用のペン。チーム共有やテスト時に読みやすくするために使う。細い、普通、太いの3種類のペンがあるとよい。個人的には0.05mm、0.3mm、1.0mmの3本を使っている。オススメはピグマかコピックマルチライナー。 マーカー 清書用ツール。タップエリアや、注目させたいコンポーネントを面で見せる為に使う。最低限２色。薄いグレーと濃いグレーがあるとよい。可能ならばアプリとタップ色や警告色なども
ペーパープロトタイピング入門 – 第1回 どうして紙でプロトを作るのか | fladdict
ペーパープロトタイピング講座シリーズ。第1回は導入編。 第1回はの導入編。ペーパー・プロトタイピングとは何なのか、何故必要なのか。そして導入することで、どんな利点があるのかを説明する。 ペーパー・プロトタイピングって何？ ペーパー・プロトタイピングとは、紙で実際にアプリやサイトを「実装する」ことである。 通常の開発においてコンテンツが使いやすいかどうかは、開発が終盤になるまでわからない。このため「作ってはみたが使いにくい」や「いまさら後戻りできない」という問題が発生する。UIや手触りが重要なモバイル系のアプリにおいて、これは致命的な問題になる。ペーパープロトタイピングはこの問題を低コストで解決する。 紙とペンで動作モックを作成することで、本実装を行う前に、素早く手戻なく検証を行うことができる。これにより、仕様書策定や実装前にPDCAのサイクルを実現できる。作業負荷の高い本実装を行う前に軽く
入れるべき機能と排除すべき機能の分類メモ | fladdict
クライアントプレゼン用の覚え書き。 「機能」のほとんどは以下の5種類に分類できるので、搭載するまえにどのカテゴリに属するかよく考える。 1:必須機能 メーラーの送信、CC送信、カメラの撮影、オートフォーカスなど。 ついていて当たり前、つけなければユーザーの不満が増加する機能。 必須機能が実装されていない場合、基本的に勝負の土俵には立てない。 予算をかけすぎても、べつにユーザーへのアピールにはならない。 2:訴求機能 なくても不満ではないが、あればユーザーの満足を増加させる機能。 ユーザー自身も無自覚的で、初期段階では実物を見るまで需要の存在自体が見過ごされている。 女子向けのポップな一眼レフや、（1979年当時）歩きながら音楽が聞ける機械など。 メリットは高いがそもそも発見するのが大変だったりする。 差別化機能のうち需要の高いものは、業界内で徐々にパクられ必須機能にシフトしていく。 3:沼
スマホUI考（番外編） なぜ機能追加をし続けるとアプリが破綻するのか？ | fladdict
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
アプリ製作のための定義ステートメント共有シート
渋谷オフィスを作り社会復帰して以来、チーム内でUI設計を標準化したいと、暇をみては色々なツールを試作している。その中の一部をとして、アプリケーション定義ステートメントの共有ツールをテスト公開。 アプリケーション定義ステートメントとは 聞き慣れない言葉ですが、大雑把にいうとアプリの本質を一言であらわしたコンセプト宣言。 家訓や社訓、電通鬼十則のアプリ開発版みたいなものであり、Appleは自社のヒューマンインターフェースガイドラインで、アプリ設計の最初にこのステートメント作成することを強く推奨しています。ステートメントがチーム全体で共有されていると、アプリがふらふらとブレずにしっかり芯が通ったものになる訳です。 アプリケーション定義ステートメントは、アプリケーションの主要な目的とその対象を、簡潔かつ具体的に宣言したものです。 アプリケーション定義ステートメントを開発作業の早い段階で作成しておく
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
どんなに頑張っても、出版社は電子書籍の価格を防衛できない | fladdict
Kindleストアを見て思った。無理だ。 3〜5年のタームで見た場合、出版社がどんなに足並みをそろえて防衛線を貼っても、電子書籍の価格を維持することは難しい。 なぜならば電子書籍ストアにおいて、最大のライバルは同業者ではないからだ。 電子書籍の最大の特徴は、「印刷、複製のコストが０になったこと」だ。これは参入障壁の劇的な低下と同義であり、3種類の危険な新規プレイヤーを呼び寄せる。 新しいプレイヤーの参入 出版のコストが限りなく０に近づく時、新たに参入してくるプレイヤーとは誰か？ では、その新規プレイヤーは何なのか？ まず第一に「ギャンブルのできる、失うもののないプレイヤー」、そして第二に「金銭的な利益を求めないをプレイヤー」、そして第三の、最大の競合が「書籍以外に収益モデルのあるプレイヤー」の参入である。 第一の「失うもののないプレイヤー」とは、いわゆるインディペンデントや新規参入の出版社
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
Amazon流の開発術では、まずプレスリリースを作る | fladdict
Amazonでは製品開発をするとき、まず最初にプレスリリースを書くらしい。これは”Working-Backwards“と言うデザイン手法。面白げなので色々と調べてみた。 Working-Backwards法の商品開発では、お客様の視点をスタート地点にするため、開発前にプレスリリースを作成する。プレス内容は、既存プロダクトの問題点と、それを新製品がどう解決するかが中心になる。 プレスがユーザーに響かなかった時点でプロジェクトはボツ。そもそもその商品は作らない。これにより見当違いな商品を作るリスクを、一番最初の段階で低コストに回避できる。 このWorking-Backwards法で書くプレス内容は主に以下のとおり。 見出し 顧客が商品を理解できるタイトル 副題 ターゲット層と、彼らのメリットを1行で。 概要 商品の特徴と利点をまとめる。この段落で全てを理解できるように。 課題 このプロダクトが
オトナのシェアスペースを建立したい | fladdict
シェアオフィスやギークオフィス的な要領で、オトナのシェアな秘密基地が欲しい。 月額１〜２万円で、8〜10人をメンバーにして、渋谷のマンションの一室とかを借りるの。で、ゲームとか漫画とかDVDとか楽器とかを置いて、週末や仕事帰りに自由に遊べる。そういうのって需要あるのかなぁ。とりあえず需要あるのか知りたい。 っていうか、社会人は労働や家族の為の時間が多いので、趣味の為の空間は割りとデッドスペースだよね。だったらみんなでシェアして、20-30平米の空間を都心につくったほうがよくない？的な。 そういう人が多ければ、キャンプファイヤーとかで実際に作ってみたいなぁ。とりあえず、はてぶ数やらRT数やら、コメント数で需要を測ってみるテスト。
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
０円の広域負荷分散システムCloudFlareが素晴らしい件 | fladdict
fladdictの非公式プロジェクト（いわゆる裏dicct）に、posemaniacs.com というサービスがある。 絵のデッサン素材を無料配信するサイトだけど、いつのまにやら老舗サイトに。気がついたら1日の転送量が30〜40GBまで膨れ上がっていた。あまりの負荷にホスト元のhetemlさんでアクセス規制、あわや閉鎖の危機の大ピンチ。わりと本気で、Pixivとか星海社とかマール社にサービス譲渡とかしようか悩んだ今日この頃でした。 そんな折、@ku_suke さんのご了解で導入してみた、CloudFlareというサービスが、全ての危機を救ってくれた。マジ多謝です。 どういうサービス？ CloudFlareはCDN（広域負荷分散システム）。世界5カ所にデータセンターを有し、データをキャッシュして各地に配信するこで負荷分散してくれる。いわゆるAkamaiの同類だけど、ものすごい特徴が１つある。
iPhoneをアルミホイルで包むお仕事 | fladdict
面白い小ネタだけど、結構しらない人がいるみたいなのでメモ。 自分のiPhoneアプリを作るときに、iPhoneをアルミホイルで包む作業工程を行う。 iPhoneをアルミホイルに包むのと、包まないのでは、できあがるアプリの品質に圧倒的なクオリティの差が出るのだ。 何をデンパなお話をww と思った人はまさに正解で、本当にデンパなお話。 iPhoneをアルミホイルで包むと、電波が乱反射する為に、ネットワークの切断や障害のテストを簡単に行えるのだ。 Appleの審査規約の１つに、「通信を行うアプリがネットワークに接続できない場合、状態の通知あるいは、代替コンテンツを表示しなければならない」というものがある。 これを完璧にパスする為には、アルミホイルが大変重宝する。 地下鉄等を使うのは時間も手間もかかるし、機内モードも突然の切断は調査できない。そして電子レンジは突っ込んでしまうとなにも操作ができない
百度の電子共有サービスが無法アップ状態でヤバそう | fladdict
百度の立ち上げた、電子書籍共有サービスがスゴい。ヤバイ。 Baiduライブラリは、電子書籍をアップして共有するサービス。青空文庫と提携していて日本の名作文学がいっぱい掲載されてたりする。本来、日本の出版社がやるべきなんだろうなーと思うんだけど、中華系の外資に全部先にやられてしまった感。 というか、ブログでステキ♥って紹介しようとサービスを掘っていたら、逆にヤバかった。マジヤバ。 ぱっとみマッキンゼーのトレーニング用プログラムとか、千と千尋の神隠しの台本とか、漫画がいっぱいとか溢れてる。ドラゴンボール、聖お兄さん、京極夏彦、ハチクロ。。。とまさに無法地帯状態。 いかに中華系外資でも日本支社でこれはまずいんじゃないか。。。と思ういっぽうで、法律的には真っ黒ではあるけでお百度ライブラリの出現自体は、大きな流れでは日本のインターネットに変化をもたらしそう。 もう自炊だけではなく、出版社が後手にまわ
mixiは「ツブヤキ」とか商標とるより、「mlxl」って商標を抑えるべき | fladdict
mixiという会社が、色々と不穏な商標を取りまくってるのだとか。。。ソースはTAKA@P.P.R.S TECH!!!!。 「ソーシャルクーポン」、「ツブヤキ」が商標取得済、「イイネ」、「ソーシャルアド」、「ソーシャルアプリ」等が現在出願中らしいです。 なんかmixiもそういうことする情勢になったんだなぁと。最近の新サービスといい、なんかもうまったくネットの空気と乖離しだしたというか。 個人的にはmlxlって商標が無防備なので、こっちを先に取った方がよくないかと思うのですが、どうでしょうか。 ＜追記＞ ドメインまでノーガードだったので、mlxl.jp を取得しました。使い道はありませんがとりあえず。
無印良品のiPadアプリ、MUJI Calendar をリリースいたしました | fladdict
無印良品から突如リリースされたiPad Appシリーズより、MUJI Calendarをやらせていただきました。 半年ぐらいの長丁場でしたが、大分いい感じのものになったかと。 個人の新作アプリがしばらく沈黙ぎみだったのは、ずっとこれやってたからです。 今回、無印良品からは3つのコンセプトなアプリがリリースされて、それぞれスタンダードなCalendarが僕(Art&Mobile), チャレンジな機能を盛り込んだNoteがタクラムさん, 旅行を体現したブランドコンセプトアプリのMUJI to Goが日本デザインセンターさんメインで制作されました。全体のグラフィックのトーン&マナーは、日本デザインセンターさん主導です。 主なウリ ・Google Calendar との同期 ・カワイイ ・左右スワイプで過去や未来に移動したり ・ピンチでつまんで、月から週に移動したり ・スケジュールがドラッグで、日
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サブディスプレイにメニューバーを出せるようにするアプリ、SecondBar(MAC) | fladdict