ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
富士通らくらくホンに見る高齢者に使いやすいUIのあり方 - A Successful Failure
2013年10月02日 富士通らくらくホンに見る高齢者に使いやすいUIのあり方 Tweet 高齢者にも使いやすい携帯電話といえば、富士通のらくらくホンシリーズが有名だが、総務省のICT超高齢社会構想会議の第4回WGにて、富士通研究所の石垣一司氏が高齢者のICT活用について 富士通（研究所）の取組ご紹介と題し、同社の取り組みの紹介を行っている。 非常に示唆に富んだ良い資料であるので、本エントリでは同資料を引用して、高齢者に使いやすいUIの勘所について考えてみたい。本エントリ内の図表は同資料からの引用である。 加齢に伴う身体機能の低下 加齢に伴い身体能力が低下することは誰もが体感することだが、具体的には次のような形として現れる（高齢者にとってのユーザビリティ）。 視覚機能の低下 老眼による近視力の低下 暗順応の低下 視野の狭まり 短い波長の色（青、緑）の感度低下 聴覚機能の低下 高い周波数帯の
３連休の間にチェックしておきたい、アプリのマーケティングツールまとめ30選(だいたい無料)。 | GrowthApp
３連休の間にチェックしておきたい、アプリのマーケティングツールまとめ30選(だいたい無料)。アプリのマーケティングツールやサービスをざっと３０個ほど載せてみました。 やりだしたら結構な数になったので、２回に分けてお送りします。 今回は、リリース前や直後に使いそうなものを紹介。 ▶市場分析 ・AppAnnie：全世界のアプリのランキング推移。 ・Distimo：全世界のアプリのDL数と売上データ。 ・Xyo：各アプリのざっくりとした総DL数。課金がないアプリの方が正確。 ・apptrace：AppAnnieと基本同じ。ちょっと見やすい。 ・Google’s Keywords Tools：検索ボリュームをチェック。 ・Google トレンド：今日の急上昇ワード。江角さん４６歳ってまじすか。 ▶モックアップ/プロトタイプ ・FLINTO：画像だけでプロトタイプを作成。画像をリンクできる。 ・PO
ソシオメディア | フラットデザインはUIを進化させるか
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
未来の技術が目の前に。ついにオープンソース化·SixthSense MOONGIFT
SixthSenseは現実世界にデジタルデータを照射し、操作を行うARデバイスです。 SixthSenseという未来的デバイスが発表されたのは2009年のことでした。ARとは異なり、現実世界にプロジェクターを通してデジタルデータを配信し、そこに対するアクションを感知するシステムです。元々オープンソースにする予定でしたが、ついにその実態が出てきました。 現実とデジタルが見事に融合しています（公式サイトより）。 空中で構えるのが特徴的です（公式サイトより）。 カメラとプロジェクターそしてカラーマーカーが基本構成になっています（公式サイトより）。 紹介動画 TEDでの発表 SixthSenseはハードウェアとソフトウェアの二つが合わさって提供されるテクノロジーです。近い将来、設計図を元に汎用化されるかも知れませんね。 SixthSenseはGPL v3のオープンソース・ソフトウェアです。 MOO
Firefox 10、「→」ボタンを非表示へ | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable 主要ブラウザのデザインは、なるべくコンテンツの表示領域を増やし、かわりに利用頻度の低いUIを表示しないようにして、シンプルな見た目を実現するという方向に進んでいる。特にiPadに代表されるタブレットデバイスが普及するにつれ、こうしたUIの必要性が強くなりつつある。 そうした流れのひとつとして、Firefox 10のナビゲーションから「進む」ボタンがデフォルトでは表示されないようになったようだ。最新のFirefox 10 ナイトリー版をインストールすると、デフォルトでは「進む」ボタンが表示されなくなったことに気がつく。 ナビゲーションバーに変更が加わる前のFirefox 10 Nightly ナビゲーションバーのUIが変更されたあとのFirefox 10 Nightly。「進む」
晴読雨読＠エンジニアライフ: 『iPhoneアプリ設計の極意』――「iPhone、開発、すべての極意」＝44
iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン Josh Clark,（著）、深津貴之（監訳）、武舎広幸,、武舎るみ（翻訳） オライリージャパン 2011年6月 ISBN-10: 4873115027 ISBN-13:978-4873115023 3570円（税込） ■「人生、宇宙、すべての答え」＋2 「人生、宇宙、すべての答え」をご存じだろうか。Googleで検索すると電卓機能が答えを返してくれる。すべての答えを知りたい人は、ぜひ試してみてほしい。 ……無事に計算結果は出ただろうか？ さて、本書『iPhoneアプリ設計の極意』には「iPhone、開発、すべての極意」が出てくるが、計算結果は「人生、宇宙、すべての答え」とちょっとだけ違う。2を足せ。それですべて分かる。 ■「デザイン」という言葉にまつわる誤解 副題「思わずタップしたくなるアプリのデザイン」からも分かる
緩募 - 「ハーフスクリーン」ブラウザー : 404 Blog Not Found
2011年09月23日15:00 カテゴリiTech 緩募 - 「ハーフスクリーン」ブラウザー OS X Lion といい Windows 8 といい、フルスクリーンはどうやら「未来にある普通のもの」となるみたいなんだけど、これって最近のデスクトップで当たり前のフルHD画面とかだとえらい間抜けなことになる。 こんな風に。間抜けというより端抜け。 こんな風にならないか。 http://dl.dropbox.com/u/188965/js/dualbrowser.html とりあえず上のはtableタグとiframeででっち上げたモック。「二画面ブラウザー」とかでぐぐるといくつかは出てくるんだけど、私の欲しいのはただ二画面になってるのではなくて… 左画面のリンクをクリックすると、右画面にリンク先が表示されて、 右画面のリンクをクリックすると、その右画面が一つ左にシフトして新たに右側にリンク先が
ここ1年くらいで見られた素晴らしいインターフェイスデザイン 12選
Tweet 『fastcodesign.com』に見ているだけで楽しくなる記事が出ていたのでご紹介。 2010年に出てきたプロダクトのうち、インターフェイスのデザインが素晴らしかったものを12個ほどピックアップしてくれています。 以下、ちょっとづつ解説をば。 1. FLUD まず1番最初に紹介されていたのは、iPhoneアプリ、『FLUD』。素晴らしくデザインされたRSSリーダーアプリです。アイコンもイケてます。 2. Cortex 『Cortex』はChromeで機能するExtension。Facebook, Twitter, Tumblr, or Instapaperにマウスジェスチャーだけで瞬時に投稿できるスグレモノです。 3. IOBR 『IOBR』は幼児のためのソーシャルメディア。（というよりはコミュニケーションツールですが。）幼児は上のように、ボックスに三角や四角のブロックを入
細部にこだわったUIエレメントをPhotoshopで作成するポイント
ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、
コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」:phpspot開発日誌
コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 2011年04月06日- ChocolateChip-UI コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 ダウンロードしたサンプルにはかなりの量のiOSアプリ風のUIが含まれていて、これスマフォサイト用のインタフェース作成には困らないんじゃないかという感じです。 リストのUI 読み込み画面 アイコン付きテーブル ちょっとUIを変えてみる例 サムネイル付きリスト ちょっとデザインを変える 普通のリストも。 デザインを変えたリストも ラベルつきのリスト ボタンや、ON/OFFも スライダーも 背景の模様も自由に変えられます ボタンも豊富 ツールバーデザイン。アイコンを入れたり色々 更にカラフルなボタンやアイコンのみのボタンも。 タブも作れます
画面展開の表記方法 – capeknote
iphoneアプリの画面設計をしていて、画面フローの表記をしようとして普通の画面フローチャートだとUIインタラクションを表記しにくいよね、と思ったので考えてみた。 画面フロー図の限界webの画面フロー図は以下のことができないなー、不便だなーと思ってた。 画面展開を表記する記法がない。webだと_blankくらいしかないけどアプリだと不便 画面が内包しているコンポーネントを表記できないので、画面のどのボタンが次の画面につながっているのかわからない。 ↑レベルのを練ろうとするとワイヤーフレーム/プロトタイプをつくる作業になってしまう。プロトタイプだと逆に画面のつながりや展開の法則性がとらえにくく、整合のとれたインタラクションデザインが試行錯誤しにくい そもそも画面展開の種類って網羅的に把握されてる？ 構造化寄りの表記方法は「情報アーキテクチャ、インタラクションデザイン記述のためのビ
第8回 Webサービスをマネタイズするノウハウ（前編） | gihyo.jp
今回は、2009年7月に東京証券取引所マザーズ市場へ上場した「クックパッド」の商品部長大野晋一氏をゲストに迎え、「Webサービスのマネタイズ」という切り口とともに、Webサービスの本質、Webサービスの姿についてキーパーソン3名と熱く語っていただきました。 大野 晋一（OHNO Shin'ichi） クックパッド株式会社 商品部長オンライン・ニュース・メディアの編集デスクなどを経て、2007年にシーネットネットワークスジャパンに入社、builder by ZDNet Japanの立ち上げやZDNet Japanの編集長などを経たのち2009年に退社、同年クックパッドに入社し、8月より現職。 阿部淳也（Abe Junya） 1PAC. INC.代表取締役 クリエイティブディレクター自動車メーカにて電装部品のユーザインターフェース設計を8年間手がけた後、IT事業部異動。約4年間Webデザイン
nanapiのデザインプロセス（その１） - エスカフラーチェLLC
9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。 制作過程みたいなものを書いてみたいと思います。 ロケットスタートに全力投球を誓った、けんすうさんからのご依頼 ある日、ロケットスタートの社長、けんすうこと古川健介さん（以下、けんすうさん）から ：HOWTOサイトをつくりたいからデザインを依頼したい！ ということで早速じっくりとお話を伺うことにしました。 ベンチャーだからこそできる！？合宿的制作スタイル 以前けんすうさんと一緒にお仕事させていただいたときに双方にとってよかったことがあります。 それは、デザインカンプができあがるまでのプロセスの段階で、短期間ながらじっくり直接やりとりする時間をつくる、ということでした。 宿泊こそ伴わないものの、合宿に似たようなスタイルです。 長い時
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
TechCrunch
iPhoneアプリのUIパターンを集めた『Mobile Patterns』 | 100SHIKI
TechCrunch | Startup and Technology News
使いやすさ日記: 539. 各社バラバラ！ブログのページ送り文言とルール』