iPhoneアプリの画面遷移をイメージしやすくするペーパープロトタイピング用アプリ「POP」 | sense of medium
Some rights reserved by Rosenfeld Media ウェブサイトやアプリを設計する際に多くの方は紙とペンを使い、スケッチをしながら画面繊維などを考えるといいます。これは「ペーパー・プロトタイピング」とよばれる開発手法。プロトタイプを作ることで、どのようにユーザーに使ってもらうのかをイメージしながら開発が行なっていくことができるというもの。 僕がエディターとして関わっているStartup Datingでは、以前こんなワークショップも開催しています。興味のある方は以下のレポートをご覧ください。 ユーザが使いやすいインターフェースをペーパープロトタイピングを通して考える「画面遷移ワークショップ」レポート | Startup Dating [スタートアップ・デイティング] このペーパープロトタイピングの手法をさらに簡単なもの、イメージしやすいものにするためのアプリが「
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
Almost Flat UI
Provides extra visual weight and identifies the primary action in a set of buttons
クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
iPhoneアプリのようなリッチなUIをブラウザで実現！Web 2.0 Touchが凄すぎる！ » SHINGOLOG
iPhoneアプリのようなリッチなUIをブラウザで実現！Web 2.0 Touchが凄すぎる！ 2011年8月25日 in iPhone, Web Web 2.0 Touchは、WebKitエンジン上で動作するJavaScriptライブラリです。 2011/8/22に公開されたばかりの模様。 iPhoneアプリのようなリッチなUIをブラウザでも簡単に作ることができます。 iPhone・iPad・Androidに対応しています。 どんな動きが出来るのか、これを見ると一目瞭然です。 アニメーション 上下左右のフリップ(画面が反転する動き)、ポップイン、ポップアウト、上下左右のスライドが出来ます。 テーブル表示 お馴染みのテーブル表示もこの通り。角丸タイプのテーブルも作れるようです。 ボタンやタブ表示、吹き出し タブ表示は便利な機能ですが、自分ではとても作れないところなので、需要ありそう
Google+が日本で流行らない理由 - ぼくはまちちゃん！
こんにちはこんにちは！！ いよいよ公開されましたね…Google+！ で、タイトルのGoogle+が日本で流行らない理由。 これなんだけど、 「UIが洗練されすぎている」 きっと、これに尽きますね！ 設計もそうだし、画面もそう、 トモダチの振り分けなんか、ブラウザなのにドラッグ＆ドロップでできちゃう。 これすごい。 だから流行らない。 え、なんでかって？ ふつうの人には、ブラウザ上でドラッグ＆ドロップで、 操作できるなんて思わないよ。 ぼくですら、すぐにわからなかった。 いや、ちゃんと文字では説明書いているんだよ。 「ユーザーをサークルにドラッグ＆ドロップしてフォローできます」 ってね。 でも読まない。 読んでも意味わかんない。 同じ洗練されたUI(?)でも、twitterくらいのコンセプトのシンプルさでギリギリかなって思う。 検索エンジンGoogleもそう、コンセプトがシンプルだからこそ
ここ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』は幼児のためのソーシャルメディア。（というよりはコミュニケーションツールですが。）幼児は上のように、ボックスに三角や四角のブロックを入
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
『iOSヒューマンインターフェイスガイドライン』はUI解説書の枠を越えている ：国内・海外情報から見える『企業のWEB活用法』：ITmedia オルタナティブ・ブログ
中小企業がITを活用して売り上げにつなげるにはどうしたらいいか？WEBマーケティングとWEB戦略コンサル実績350社50業種以上の実績とノウハウで、海外の最先端情報を中心に、噛み砕いてご紹介。 作成者：中山陽平 iOS、実質的にはiPhoneのアプリケーションを作る際に参照してくださいと言う事で配布されている「iOSヒューマンインターフェイスガイドライン（以下iOS_HIG）」 弊社のシステムを真剣にスマートフォン対応にするために読み始めたのですが、この内容が、ただのインターフェイスのガイドラインだけではなく、さらに踏み込んだ内容になっていて驚きました。 Appleのサードパーティアプリに対する姿勢、サードパーティアプリケーションがiPhoneの大きな魅力であるという認識が、このガイドラインからはにじみ出ています。 App開発者以外もぜひ見ておくべき これはぜひ、WEBに関わる方は見て頂き
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
ウェブサイトのユーザビリティ、とっても大切な20のポイント
ウェブサイトに最も大切なのは、ユーザービリティです。 どんなにかっこいいデザインでも、どんなに重要なコンテンツを掲載しても、それを使うことができないのであれば意味はありません。 ウェブサイトのユーザビリティを向上する20のポイントを紹介します。 The Ultimate 20 Usability Tips for Your Website [ad#ad-2] 下記は各ポイントを意訳したものです。 最新の情報を中心にウェブサイトのデザインを組み立てる もし新しいコンテンツをあまりリリースしないのであれば、スタティックなコンテンツに重点をおいたデザインにします。更新頻度が高いようであれば、ブログ風に新着が目立つデザインにします。 ロゴは左上、メニューは右か下 ロゴは左上に配置し、メニューは右か下に配置します。ロゴはクリックして、サイトのトップページにリンクするようにします。このことはたいていの
スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 （jQuery Mobileなどを利用した開発方法は置いといて） HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです(￣▽￣;) 今回は、僕が知ってる大きな２つの注意点を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
純利益をあげているEコマースTOP100サイトに見る、購入フローの全ステップをキャプチャでおさめたまとめ
layer8.sh
まだ仮想通貨持ってないの？
TechCrunch | Startup and Technology News
| blog.ryow.net
https://jp.techcrunch.com/2011/02/22/20110221will-you-miss-the-browser-address-bar-if-google-kills-it/