アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？
Googleが開催した「Google I/O」では多くの新デバイス・サービスが明らかになりましたが、その中で次期Androidの「L」に採用される新しいUXの体系「Material Design」も発表されました。Googleのプラットフォームを統一するアニメーションを使った新たなデザイン「Material Design」とはどんなものなのか、ムービーが公開されています。 Google Design http://www.google.com/design/ Material designがどのように端末に採用されるのかは、以下のムービーを見るとよく分かります。 Material design - YouTube 例えば、以下の受信箱ではメッセージが「今日」「昨日」に分けられています。 そのうち1つのメッセージをタップ。 すると夏のバーベキューに関しての2人のやりとりが表示されました。 間
オライリーさんから発売の「モバイル デザインパターン」監訳いたしました | fladdict
オライリーさんからでる、「モバイル デザインパターン」という本の監訳いたしました。まさかの動物本デビュー。9月24日発売ですが、Amazonの在庫は少なめと思われるのでご予約をおすすめしたり。 本書は、iPhone/Androidの定番インターフェースを分類した、インターフェース図鑑。 「このUIには、こういう意図があって、こんなシチュエーションで使うといいですよ！！」というのが、ざっと100パターンほど紹介されています。 企画を考える時、ワイヤーフレームを作る時、あるいは直面している問題の先行事例がないか調べるとき、この本はとっても大活躍。パラパラめくって気になるパターンを読むだけでも、色々と新発見ができます。 営業的に、カンペや目録っぽい売り方がされると予想される本書ですが、実際はどちらかというと、将棋の定石や空手の型に近い感じの本。 まずは型を覚え、自然に繰り出せるようになる為の本で
スマートフォンアプリデザインに役立つ 基礎のまとめ！
スマートフォンアプリデザインに役立つ 基礎のまとめ！：一撃デザインの種明かし（14）（1/4 ページ） 各キャリアが新Android携帯を続々と発表し、スマートフォンへの注目がますます盛り上がる中、アプリケーションも、iPhone／Androidともに展開するものが増えてきました。 そういった中で、本稿ではスマートフォンアプリのデザインのコツをまとめてみます！ iPhone／Androidともに展開しているアプリ3例 まずは、iPhone、Androidともに展開している有名アプリを3つ紹介します。それぞれのスクリーンショットを見ながら違いを探してみてください。 【1】クックパッド レシピの投稿と検索ができるアプリです。PCサイトの雰囲気はそのままに、トップ画面を旬のキーワードと履歴、検索ボックスのみに絞ったシンプルなUIになっています。要素とコンテンツを極力減らすことで、レシピ検索に集中
PhotoshoperにAndroidアプリのデザインをお願いする際の失敗例 - ReDo
伝説のSHARPハッカソンに参加してきました。 3月10日-11日に第4回SHARPハッカソン@東広島が開催されます http://d.hatena.ne.jp/bs-android/20120309/1331256472 ハッカソンそのもののなんたらはもうみんな書いてるので、僕が一番失敗した点のみピックアップしてご説明します。脳内垂れ流しなのでみんなはマネしないでね！ 会場で一番シェアの端末はぶっちぎりでGalaxy Nexus/ICSだったわけですが、ターゲットのシャープ端末はそんなことはないよねー、と。 参考：Android 通信キャリア 2011-2012秋冬春モデル一覧 http://greety.sakura.ne.jp/redo/2011/10/android-2011-2012.html そんなわけで、qHD（960x540）のhdpi端末をターゲットにお願いしちゃったわけ
国内のiPhoneアプリでデザインが参考になったWebサイトいろいろ - かちびと.net
以前からちょいちょいブックマーク していたんですが、いつの間にか増 えてたので一覧化してみたいと思い ます。国内のiPhoneアプリサイトで Webデザインが参考になったサイトの まとめ。あんまり無いですが・・ 個人的な備忘録とメモ書きです。探し方も悪いと思いますので数はさほど網羅していません。「あそこ凄い素敵なのに載ってない」みたいなご意見ありましたらコメント欄にてご教授頂けますと幸いです。 この記事で見たいのはアプリではありませんのでWebサイトへのリンクしかありません。順不同となっています。シェア系アプリが多いです。 MogSnap 食べたものを写真で評価、共有するiPhoneアプリ。写真系なのでこういったスライドがあるとアプリの概要をイメージしやすいですね。無料であること、キャプチャ、アプリダウンロードのボタンが分かりやすく明示されています。 MogSnap 大辞林 言わずと知れた
ソーシャルメディアとスマートフォンに共通する関係の設計
10月12日にロフトワークが主催するいまさら聞けない！？ 企業のスマートフォン対応というセミナーで登壇をしました。スマートフォンがテーマですが、今回の参加者は制作者よりマーケッター、ディレクター、プロデューサー層が多い集まりだったこともあり、コミュニケーションの変化をテーマの基盤にしてスマートフォンではどのような見せ方や運営の仕方が最適なのかを解説しました。 今年は「ソーシャルメディア」という言葉が IT/Web 業界だけでなく、他のシーンでも耳にする場合があるほど流行しました。こうした言葉があるからこそ、より多くの方に興味をもってもらえるキッカケになるわけですが、本質が見え難くなる場合があります。ソーシャルメディアにしても「メディア」というフレーズを強調して理解すると、Facebook や Twitter は数々存在する情報配信チャンネルに過ぎなくなります。実のところ、ソーシャルメディア
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
jQueryMobileを使ってのスマートフォンサイトの構築メモ at HouseTect, JavaScriptな情報をあなたに
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンサイト開発に使える！Tipsやフレームワークのまとめサイト「Mobile Tuxedo」 | Web活メモ帳
Webデザイナーのためのandroid用レイアウト講座