タグ

ブックマーク / fladdict.net (12)

  • iPhone X対応におけるデザイン上の注意ポイント | fladdict

    iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ

    iPhone X対応におけるデザイン上の注意ポイント | fladdict
    imu16
    imu16 2017/09/13
  • よくわかるマテリアルデザインの設計コンセプト | fladdict

    iPhoneAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた

    よくわかるマテリアルデザインの設計コンセプト | fladdict
  • JSでアメーバのシミュレーション作ってみた | fladdict

    jsでアメーバのシミュレーションを作ってみるなど。ブラウザで5分ほど放置しておくと自然淘汰でなんか生まれます。要HTML5環境(iPhoneだと重すぎる)。 スケッチの製作環境を、Flashからprocesing.jsに移動しようかなぁというテスト。「x‐DESIGN――未来をプロトタイピングするために」の一章を読んだら、なんか無性になにかを作りたくなったので、作ってみた。 processing.jsライブラリの勉強に、アメーバのシミュレーションを作成。 今までJavaScriptでのスケッチには、creative.jsを使ってたんですが、簡単なスタディにはprocessingのほうがいいかもしれない。 Daniel ShiffmanのFlockingとかを脳内イメージしながら、適当に書いてみた・・・はずが完成したら別物に アメーバは、細胞が単体のうちはブラウン運動する程度しかできない。と

  • どんなに頑張っても、出版社は電子書籍の価格を防衛できない | fladdict

    Kindleストアを見て思った。無理だ。 3〜5年のタームで見た場合、出版社がどんなに足並みをそろえて防衛線を貼っても、電子書籍の価格を維持することは難しい。 なぜならば電子書籍ストアにおいて、最大のライバルは同業者ではないからだ。 電子書籍の最大の特徴は、「印刷、複製のコストが0になったこと」だ。これは参入障壁の劇的な低下と同義であり、3種類の危険な新規プレイヤーを呼び寄せる。 新しいプレイヤーの参入 出版のコストが限りなく0に近づく時、新たに参入してくるプレイヤーとは誰か? では、その新規プレイヤーは何なのか? まず第一に「ギャンブルのできる、失うもののないプレイヤー」、そして第二に「金銭的な利益を求めないをプレイヤー」、そして第三の、最大の競合が「書籍以外に収益モデルのあるプレイヤー」の参入である。 第一の「失うもののないプレイヤー」とは、いわゆるインディペンデントや新規参入の出版社

  • アプリをiPhone5に対応する場合の地雷ポイント一覧 | fladdict

    地雷キャッチャーとして定評のあるfladdictですが、今回も大量の地雷を踏み歩いております。 とりあえず、解決方法を知らないとハマるポイントを色々とピックアップ。自分では直ったけど一般化できてない現象もあるので、間違い勘違い等ありましたら、コメント欄でビシバシご指摘ください。 iPhone5対応すると、iOS4.3以前では動かなくなる 最新のXCodeがarmv6のコンパイルをしてくれないので、ご臨終となります。 公式じゃないほうほうで無理矢理バイナリをビルドすればhogehoge。 サードの静的ライブラリが入ってると、コンパイルできない場合が 最新XCodeからコンパイルに、armv7sという新アーキテクチャが必須となってますが、ビルド済み静的ライブラリにはむろん入っていないのでコンパイルできません。対策は2つあって、ひとつは対応ライブラリが出るまでリリースを見送ること、もう片方はXC

  • Amazon流の開発術では、まずプレスリリースを作る | fladdict

    Amazonでは製品開発をするとき、まず最初にプレスリリースを書くらしい。これは”Working-Backwards“と言うデザイン手法。面白げなので色々と調べてみた。 Working-Backwards法の商品開発では、お客様の視点をスタート地点にするため、開発前にプレスリリースを作成する。プレス内容は、既存プロダクトの問題点と、それを新製品がどう解決するかが中心になる。 プレスがユーザーに響かなかった時点でプロジェクトはボツ。そもそもその商品は作らない。これにより見当違いな商品を作るリスクを、一番最初の段階で低コストに回避できる。 このWorking-Backwards法で書くプレス内容は主に以下のとおり。 見出し 顧客が商品を理解できるタイトル 副題 ターゲット層と、彼らのメリットを1行で。 概要 商品の特徴と利点をまとめる。この段落で全てを理解できるように。 課題 このプロダクトが

  • http://fladdict.net/exp/fitc/14/

    imu16
    imu16 2012/02/19
  • fladdict » スマホのUI考 〜 ボタンについて

    SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ

  • fladdict

    人の生産性の低さが嘆かれる今日この頃、fladdictさんとしてはAmazon Dashを万能化して、現代のサイバー貴族となる方法を模索しております。 Google Home Assistantや、ザッカーバーグのAIホーム計画など、面白そうだなぁと思いまして、自分も色々と実験。 結論からいうと、AIやハイテクなど使わなくても、ほんのわずかの工夫があれば、誰でも自宅にスーパーアシスタントを構築して、サイバー貴族となれる。 IT質は、貴族に占有された封建システムを、テクノロジーによって庶民に解放することだと思うんですよね。なんで実際にやってみました。Amazon Dashボタンを改造して、出前、家政婦、タクシー送迎から、リアルアシスタントさんの御用聞き呼び出しまで、あらゆるものをワンプッシュ化!生産性バカ上がりです。 これで日の生産性も回復するはず。 人機一体の、スーパー・アシスタ

  • HTMLで文字詰めするタイポグラフィー用JS | fladdict

    HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する

  • 読書日記 – iOS開発におけるパターンによるオートマティズム | fladdict

    「iOS開発におけるパターンによるオートマティズム」は、HMDTの木下さんによる、2/9日発売のiOS開発。 超オススメ。 来なら、僕がレビューするのもおこがましいですが、BNNさんから献を頂いたので役者不足ながら。 実はこの、タイトルに反して「デザインパターン」や「自動化」の話でない。ここがちょっとややこしい。このでは、スニペットとコーディングガイドラインを組み合わせたような、開発の作法のテンプレ化を「パターン」、そしてそのパターンに従いながら車輪の再発明を避けつつ効率よく組み上げて行くことを「オートマティズム」と呼んでいる。 ようは空手の型とか将棋の定石の、iPhoneアプリ版といっていい。 RSSリーダーの開発を例題にし、MVCの構成、Retainの考え方、DB制御、シングルトンの書き方。。。といったアプリ開発に必要な様々なものの設計、記述作法を扱い。パターンの考え方とその

  • WWDC雑感 その1 ー iADで生計は成り立つのか? | fladdict

    無事WWDCからサンフランシスコから帰宅。ぼちぼちWWDCの基調講演の雑感でもあげていこうかと。 まずは新たなる収入源iADについて。とりあえず、できるだけ中立的に考察してみた。 iADの利益率について ちまたで流れている説としてはCPC(1回クリック)が$2らしい。 <注:開発者の取り分$2と、出向者の支払いが$2の諸説ありますが、ここでは開発者取り分を$2と仮定)。 市場規模 基調講演で発表された下半期の広告は6,000万ドル。開発者取り分は3600万ドルとなる。 AppStore開設から2年間で開発者に支払われた総額は10億ドル。つまり下半期だけでiPhoneAppの総利益の403.6%にあたる金額が、iADから支払われることになる。 これはローンチ当初の金額なので、場合によっては今年中に10億ドルぐらいあっけなくいってしまうかもしれない。ごめん。 これは市場としては非常に大きい。。

  • 1