Mac用のiOSアプリのプロトタイプ作成ツールの決定版「Form」がGoogleパワーで無料解放！！ 2014 11/20 Mac用のiOSアプリのプロトタイプ作成ツール「Form」(以前の価格7800円)が無料化されました(iDownloadBlog、9to5Google)。ドラッグ＆ドロップで素早くアプリのプロトタイプを作成することができるツールで、今のところiOSアプリの作成に対応しています We're excited to announce that we're joining Google to continue working on Form! :) http://t.co/JvsloB5ba1 — RelativeWave (@RelativeWave) 2014, 11月 19 公式サイトによると開発チームがGoogleに買収され、その影響で無料化されたそうなので、期間限定
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
iPhoneの標準メールアプリは、優・良・可・不可で評価するとしたら可のレベル。基本的なメールの読み書きはできるけれど、便利な機能はこれといって搭載されていない。Macで人気のメールソフトのiPhone版として登場したSparrowは、定番不在のiPhone標準メーラーの有力候補。メールの読み書きと整理を素早く行うための機能があり、軽快に動作する。 基本的にはGmailのよくできたクライアントだと考えるとよいみたいだ（Gmail以外は試していない）。ラベルやスターなど多くの機能はGmailを踏襲しているようにみえる。Inboxのサブジェクト部分をスワイプすると、返信やスターやアーカイブなどメールに対して行う処理を一発指定できる。 Facebookに接続して、友人の顔アイコン画像を取得して、メールに表示してくれる機能がある。人間だけではなくAmazonストアからのメールにはAmazonのアイ
先日、以下の記事を書きました。 「AppStoreはほとんど死んだ」に隠された真の意味とは この中の注目キーワードの一つに「ゲーミフィケーション」があります。これが結構面白くて、これってiPhoneの人気の秘密なのかも？と感じたので、その色々調べてみたメモです。 ゲーミフィケーションとは 「ゲーミフィケーション」の意味は以下だそうです。 端的に言えば「なんでもゲーム化する」こと Google先生に聞いてみてもまだあんまり情報がないようで、それくらい新しいキーワードってことなんでしょう。以下の記事の内容も面白いです。 ゲームで社会をよくする「ゲーミフィケーション」 ：日本経済新聞 この記事の中に、これまた面白いキーワードがありました。それが「ゲームニクス」です。ゲーム的な方法論をゲーム以外の分野に持ち込もうとするアイデアは日本にもある。立命館大学のサイトウアキヒロ教授は「ゲームニクス」とい
flipboard iPhone はアプリの中で操作する分にはページめくりとスクロールだけなので、異なる操作しなくいで同じで楽。 タップすると、内容を表示して、右にスワイプすると戻る。内臓のブラウザからflipboard に戻るのも右スワイプ。 なので、真ん中だけで一番行う操作が完結するので使いやすい。 記事の見出し長押しでアクションシートの表示。（これはブラウザ、内蔵ブラウザの時は使えない。） 若干誤って戻りやすいのと頭出しが出来ないので、一回戻るとめんどくさいという問題があると思う。 pathは左右のスワイプでスライドできるけど戻すのに左右に指を移動する必要がある（真ん中から戻せない） Facebook のはスワイプ出来ない。左上でスライドさせても戻すのに右上を押すかニュースフィードを押す必要があるけど、再読み込みする。ちなみにpathはしない。 pathは左下のボタンが起点になるけど
iphoneアプリの画面設計をしていて、画面フローの表記をしようとして普通の画面フローチャートだとUIインタラクションを表記しにくいよね、と思ったので考えてみた。 画面フロー図の限界webの画面フロー図は以下のことができないなー、不便だなーと思ってた。 画面展開を表記する記法がない。webだと_blankくらいしかないけどアプリだと不便 画面が内包しているコンポーネントを表記できないので、画面のどのボタンが次の画面につながっているのかわからない。 ↑レベルのを練ろうとするとワイヤーフレーム/プロトタイプをつくる作業になってしまう。プロトタイプだと逆に画面のつながりや展開の法則性がとらえにくく、整合のとれたインタラクションデザインが試行錯誤しにくい そもそも画面展開の種類って網羅的に把握されてる？ 構造化寄りの表記方法は「情報アーキテクチャ、インタラクションデザイン記述のためのビ
スマホUI考１ 〜 ボタンについて スマホUI考２ 〜 フィードバックについて スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。 でも個人的には、ジェスチャーはほとんど要らないと思う。 ジェスチャ全般 ・ジェスチャは補助操作。メイン操作ではない。 ・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。 ・なぜならジェスチャの有無は視覚的にわからない。 ・ユーザーがジェスチャを理解しなくても操作できるのがよい。 ・またジェスチャー時に、画面のかなりの部分が指で隠れる。 ・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。 ・つまり予算や工数があまったときに入れよう。 タップ ・マウスクリックではなくタップ。 ・ボタンの精度は指のサイズに依存する。 ・細かい座標指定はできない。 ・ロールオーバーがない。 ・触ってみ
Stay ahead of the curve and become a better interface designer. With a Pttrns membership, gain access to thousands of curated mobile design patterns, get online advice, and connect with other designers from all over the world. What you get UX and UI Patterns Learn and follow industry best practices that can be applied to your app to help ensure the best user experience possible. App database Save
UIについて徒然と考える自分用メモ、２回目はフィードバック。ユーザーに「何かがおきたよ！」と如何に明解に知らせるか？１回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは？ ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、
「iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン 」という本に、監訳で参加させていただきました。TapWorthyという洋書の翻訳本ですが、いよいよAmazonで予約可能に。 翻訳は武舎広幸氏、武舎るみ氏のお二人。 6/18日にオライリーから発売されます。 この本はiPhoneアプリのデザイン、特にユーザーインターフェースに特化し、いかに使いやすく魅力的な「思わずタップしたくなるアプリ」を作るか？という点に主眼を置いたモバイルアプリインターフェースの入門本です。とりあえず７章のPDFがサンプルとしてDLできるのでご一読いただければと。 海外の色々と成功しているアプリを分析して、ここはこういう工夫がしてある、ここはこう注意している！みたいな事例をだしつつ、iPhoneアプリのインターフェースの文法を事細かに分析・紹介しています。 技術用語の一切ない技術本、ビジュアルセ
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
読者enthumbleさんからの投稿は、「きごう」「やじるし」など、矢印を入力するたびに3文字4文字入力している方にはうってつけ。フリック入力ならではの、直感的に矢印を入力できる方法です。 方法も至って簡単。必要なのは標準辞書の単語登録機能だけです。 以下のように、辞書登録をします。 -------- なか：↑ なは：→ なや：↓ なた：← -------- 見ての通り、 矢印をテンキーに合わせただけです。 登録すると、中央から上向きに指を滑らせると「↑」に、同様の操作で「→」「↓」「←」も出せるわけですね。これはとても便利。矢印入力に面倒くささを感じる方は、一度お試しあれ。enthumbleさん、投稿ありがとうございました！ 携帯電話（ガラケー・スマホ含む）での矢印記号の入力手法｜enthumbleのHatenaDiary （常山剛）
2011年4月26日から28日にかけて、スマートフォン分野のカンファレンス「スマートフォン2011春」が開催されている。最終日の4月28日は、はてなの開発者が講演し、スマートフォン用アプリ開発のポイントを解説した。題材は、ソーシャルブックマーク「はてなブックマーク」用に開発した、公式iPhone／Androidアプリケーションだ（写真1）。 登壇したのは、同アプリの開発を担当した、はてなの浅野慧氏（写真2）。仕様決めからユーザーインタフェース（UI）の設計、実装に至るまでの各プロセスや、iPhoneアプリとAndroidアプリ開発の違いなどを解説した。 浅野氏が協調したのは、UI設計の重要性。「iPhone、Androidそれぞれのプラットフォームで、『iPhoneらしいUI、AndroidらしいUI』を実装することが大切」と語る。また、はてな社内では、今流行しているiPhone／Andr
中小企業がITを活用して売り上げにつなげるにはどうしたらいいか？WEBマーケティングとWEB戦略コンサル実績350社50業種以上の実績とノウハウで、海外の最先端情報を中心に、噛み砕いてご紹介。 作成者：中山陽平 iOS、実質的にはiPhoneのアプリケーションを作る際に参照してくださいと言う事で配布されている「iOSヒューマンインターフェイスガイドライン（以下iOS_HIG）」 弊社のシステムを真剣にスマートフォン対応にするために読み始めたのですが、この内容が、ただのインターフェイスのガイドラインだけではなく、さらに踏み込んだ内容になっていて驚きました。 Appleのサードパーティアプリに対する姿勢、サードパーティアプリケーションがiPhoneの大きな魅力であるという認識が、このガイドラインからはにじみ出ています。 App開発者以外もぜひ見ておくべき これはぜひ、WEBに関わる方は見て頂き
こんにちは。スマートフォングループの石野です。 「ディレクターのためのスマートフォン講座」第3回目を担当します。 前回に引き続いて Android と iPhone の比較ですが、アプリについてもう少し突っ込んでみます。Android アプリを使ったことが無い方はぜひご覧ください。 はじめに / サンプル紹介 なるべく直感的に把握していけるよう、実際に iPhone / Android でアプリをリリースしている『LDNReader』を例に見ていきます。ニュースリーダー系アプリです。機能面はほぼ同一であり、比較しやすい対象です。 ※以下は iPhone / Android アプリを開発する上でのガイドラインではありませんのでご注意ください。あくまで『LDNReader』は一例にすぎず、Android の概念を学習するのが目的です。 ※実際にダウンロードする際は以下よりお願いします。 iPh
この三ヶ月ではてなブックマークiPhoneアプリの新バージョンとAndroidアプリを開発してきました。 両方共担当はエンジニアid:ninjinkunとデザイナーid:kudakurage、総合ディレクションid:nagayamaです。同じ開発者がiPhoneアプリとAndroidアプリ両方を作った事例として、なかなか面白いのではないかと思います。開発期間はちょうどそれぞれ一ヵ月半ずつでした。 自分にとってもブクマチームに移動してから初めての大きな仕事だったので、両方共思い入れがあるプロダクトです。開発話と一緒に、スマートフォンアプリを作る際の流れや、気を付けていることなどをまとめようと思います。（長いです） 開発プロセス iPhoneもAndoirdも開発の流れは基本的に一緒で、以下のような流れになります。 機能の検討 UIの検討 実装 ざっくり並べただけではWebサービス開発と変わり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
