16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
NameBright - Coming Soon
silverflows.com is coming soon This domain is managed at
Googleが119時間のテストをしてわかった「モバイルサイト設計25の指針」｜男子ハック
@JUNP_Nです。GoogleがGoogle AdSenseに関する最新情報を伝える公式ブログ「Inside AdSense」にて、119時間にもわたるユーザービリティテストを行った結果をまとめて公開しています。詳細は以下。 モバイルサイトの最適化は必須！モバイルの特性を理解したサイト設計が必要img via：モバイルサイト設計の指針 Googleがシカゴとサンフランシスコで119時間にもわたるユーザービリティテストの結果をまとめています。調査対象はAndroid、iOSの両方のユーザーで、商品の購入やサイト内を調べるなどの操作を行い、各サイトでの体験を調査委とともに評価したそうです。 関連：スマホに特化したアクセス解析「Pt engine」スマートフォンサイトのヒートマップが凄い！ この調査の結果で明らかになったことをまとめたものが「モバイルサイト設計を成功させる25の指針」となってい
第2回 イケてないスマートフォン対応7つのパターン | gihyo.jp
前回はスマートフォン対応をしていないサイトの話でしたが、今回は「せっかくスマートフォン対応をしているのに、対応方法が微妙なために、ユーザビリティが低下している」という例をいくつか見ていくことにしましょう。 もちろん、ここで紹介している点を解消すれば最高に使いやすいスマートフォンサイトになるわけではありませんが、「こういうサイトでイライラさせられる」という具体例を確認することで、改善への第一歩を踏み出すことができるでしょう。 スマートフォン対応しているのはトップページだけで、ほかのページは未対応 タイトルですでにすべてを語り尽くしていますが、「トップページにアクセスしたらスマートフォン対応されているのに、深い階層のページにアクセスすると普通にPCページになってしまう」というタイプのサイトです。最近減ってきている……気もするのですが、探したらまだけっこう見つかりました。 たとえば以下は、大
スマホ大画面時代、親指リーチ範囲が鍵となる新たなインターフェースデザイン
スマホ大画面時代、親指リーチ範囲が鍵となる新たなインターフェースデザイン2014.09.25 21:0010,005 そうこ 片手で扱うならば、親指がスマートフォンの鍵となる。 スクリーンの巨大化ーー賛成反対と意見がわかれつつも、アップルがiPhone 6／6 Plusをリリースしたことで、ついにスマホ大画面時代が一気に花開きました。初動で歴代予約記録を更新した新型iPhone、つまり世の中もこの時代の流れを受け入れたのではないでしょうか。 3.5～4インチのディスプレイは、急激にその姿を消しています。Adobeによるモバイルベンチマーク2014年レポートでは、4インチ以下のスマートフォンでのWeb観覧は11％も減少しているのです。 時は大画面。とはいえ、はてしなくディスプレイが大きくなるわけでもありません。大画面時代を先行してきたAndroid端末でも、最も好まれているのは5.1～5.7
スマホWebサイト/ハイブリッドアプリ開発を高速化するJavaScriptフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
デスクトップ向けのWebサイト開発ではjQuery/Backbone.js/AngularJS/Ember.jsなどを採用するケースが多いのかなと思います。しかしスマートフォン、タブレット向けのWebサイトとなるとまた勝手が違います。特にUI周りの取り回しであったり、タッチ/マルチタッチイベント、スマートフォン特有のAPIなどを適切に扱えなければなりません。何よりハードウェアの性能がデスクトップより低いので高速にストレスなく動作させるためには軽量でなければなりません。そこで今回はスマートフォン、タブレット向けのWebサイトを構築したり、HTML5によるハイブリッドアプリを開発するのに使えるJavaScriptフレームワークを紹介します。ぜひ皆さんの開発に役立ててください。mBaaSお役立ちブログ トップ> ブログ> Tips> スマホWebサイト/ハイブリッドアプリ開発を高速化するJava
スマホ初心者の母にスマートフォンサイトのUIについて色々聞いてみました | AOGIRI.net（アオギリネット）
おそらく自分の母親世代である方も対象になるであろうスマホサイトを制作するために、母に色々と意見を聞いてみました。 母は、スマートフォンで私のインストールしたアプリでレシピ見たり、天気予報を見たり、ニュースを見たりするぐらいで、積極的にネットで検索はしないけど、必要に迫られると見るというぐらい。 そこでいくつか驚いたこと、なるほどと思ったことがあったのでご紹介します。 右上の三本線はメニューとは認識しないどころか、「メニュー」という文言すら何を指しているのか分からない 最近、スマートフォンサイトではヘッダの右上に「三本線＋メニュー」のボタンが配置されることが多くなっています。三本線だけ、というサイトもありますが、万人がターゲットのようなサイトは、「メニュー」「MENU」の記載が大体あります。 しかし、私の「このメニューっていうボタンを押したらメニューが表示されるって分かる？」という質問に返っ
Mobile Angular UI - Angular JS Mobile UI framework with Bootstrap 3 Css
Mobile Angular UI is a mobile UI framework just like Sencha Touch or jQuery Mobile. If you know Angular JS and Twitter Bootstrap you already know it! Awesome Mobile ComponentsMobile Angular UI provides essential mobile components that are missing in Bootstrap 3: switches, overlays, sidebars, scrollable areas, absolute positioned top and bottom navbars that don't bounce on scroll. It relies on robu
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
Webサイト・モバイルのUIに便利なデザインセットのまとめ「45 Fresh Web And Mobile UI Kits With PSD Files For Designer」 | DesignDevelop
Webサイト・モバイルのUIに便利なデザインセットのまとめ「45 Fresh Web And Mobile UI Kits With PSD Files For Designer」 Webサイトやモバイルサービスの開発において、UIは品質と統一感を求められる重要なもの。0から作ることもできるけれど高品質なデザインセットがあれば、迅速かつ効率的に開発を進めることができるのではないでしょうか。今回はそんなシーンに是非オススメのUIデザインセットのまとめ「45 Fresh Web And Mobile UI Kits With PSD Files For Designer」を紹介したいと思います。 （45 Fresh Web And Mobile UI Kits With PSD Files For Designer | Free and Useful Online Resources for
UXArchive - Made by Waldo
Introducing Sessions: the latest product from Waldo!
Mobile UI Design Inspiration #4
UI and UX design plays a huge role in whether people adopt your mobile apps. Here, we roundup 7 mobile UI design inspiration part 4 are compiled to give inspiration to you and other UI/UX designer out there. Enjoy and share this roundup of mobile ui that we put together for you. See also: 20 Best Instagram WordPress Plugin 30 Free Coming Soon and Under Construction HTML Templates Mobile UI Desig
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
Junior - A front-end framework for building HTML5 mobile apps with a native look and feel.
A front-end framework for building HTML5 mobile apps with a native look and feel. CSS3 Transitions optimized for mobile performance. Swipable carousels using flickable.js. Integration with backbone.js views and routers. Ratchet CSS UI components. Try loading this page on a mobile phone or try our "simulator" to the right. Download Installation Javascript Dependencies modernizr zepto zepto flicka
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Googleの［モバイルフレンドリーテスト］をやりまくって理解したこと
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
ブレないアプリデザインのすすめかた
http://flippinawesome.org/2013/12/23/parallax-ui-for-phonegap-and-mobile-web-apps/
Home | OnsenUI
ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめ