16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
Reapp
React UI Kit A set of components for beautiful interfaces on any platform. Optimized for mobile and fully customizable. Packages Everything you need to build apps from day one, from animations to routing, requests to data management. import Component from .css'reapp-component'; import Request from .css'reapp-request'; import reducer from .css'reapp-reducer'; import UI from 'reapp-ui';
スマホUIの際限ないレベルアップ - ワザノバ | wazanova
http://blog.brianlovin.com/design-details-pinterest-for-ios/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約1時間前 Brian LovinのUI分析シリーズは継続して紹介してきましたが、前回のFoursquareのポストでは、「確かに各社ともレベルが高いけど、さすがに似たようなものが増えて飽きてきたな。」と感じました。しかし、今回のPinterestのiOS版については、「ここまで工夫するのか。」と関心させられるものもあり、UIの競争はまだまだレベルアップしていきそうな気がしてきました。 原文で全体をチェックしていただくのがよいかと思いますが、個人的に気に入ったのは、 4) Pull to refresh ビデオ この効果を自社オリジナルのもので作
モバイル向けUI/UXデザイン10のポイント デザイン会社 ビートラックス: ブログ
日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル
Prott - Prototyping tool for Web iOS Android apps
Design awesome products, with your team. Maximize your team’s superpowers and keep everyone engaged - from first idea to pixel perfect.Get started now!Get started now!Get started now! HAVE FUN! Make your process as awesome as your product. Keep miscommunication, technology failures and folder chaos from spoiling the fun. Enjoy the process, with Prott! Get the best out of your team Within every tea
入会フローを磨くこととモバイルファーストの意味付け - ワザノバ | wazanova
https://tech.dropbox.com/2014/08/building-dropboxs-new-user-experience-for-mobile-part-1/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 User Onboardingというサイトは、web/スマホアプリの入会フロー、ユーザ登録やチュートリの画面遷移を、ページごとに解説してくれてるサイト。 サイトの文言やボタンの内容 / 配置 / 色選択、スペースの取り方、ページごとの意味付けなど、ビジュアルのデザイン以外についても、何をどのように修正すべきか（たまに褒めてもいますが。）を詳細に説明してくれてます。UIデザイナーだけでなく、サービスづくりに関わる人全ての参考になると思います。 サイトの存在には気づいていたのですが
HTML5を使ったハイブリッドアプリ開発に使えるUIライブラリまとめ | BACKEND AS A SERVICE mbaas BLOG
PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。 そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得
ChocolateChip UI
How to Print a Test Page on Epson Printer? What is a Printer Test Page? Printer Test Pages are used for checking several things with your printer for maintaining and resolving the troubleshooting issues with the ink cartridges on your printer or just in the general maintenance of your printer. What Problems will a Test Page Resolve? A printer test page will detect and […] Continue reading Document
アプリUI/UXデザイナー必見！「ハンバーガーボタン」ナビゲーションを使うとユーザーエンゲージメントが半減することが発覚 | ゴリミー
あなたが作っているナビゲーションボタンは今流行りの「ハンバーガーボタン」、またの名を「ナビゲーションドロワー」を採用しているだろうか。それとも一覧で表示している「タブボタン」を採用しているだろうか。 クリーンでシンプル、メインコンテンツの表示領域が最も広く確保できるなどいいこと尽くしの「ハンバーガーボタン」ナビゲーション。一方で、常にボタンが表示されメインコンテンツの表示領域が必然的に狭くなってしまう「タブボタン」ナビゲーション。見た目のデザインとしては当然「ハンバーガーボタン」の方が良い。では実際にユーザーとしても同様の見解なのだろうか。 クリーンでシンプルだが、ユーザーは操作方法を覚えられない 「ハンバーガーボタン」もしくは「ナビゲーションドロワー」と呼ばれるナビゲーションUIは数多くのアプリに見られる。Googleもアプリデベロッパー向けにオススメのデザインパターンとして推奨している
App.js | Mobile webapps made easy
Mobile webapps made easy. Download Get Started App.js is a lightweight JavaScript UI library for creating mobile webapps that behave like native apps, sacrificing neither performance nor polish.
伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから（前編）～Salesforce Developer Conference Tokyo 2013
伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから（前編）～Salesforce Developer Conference Tokyo 2013 いま多くの開発者が取り組もうとしているモバイルアプリケーションの開発は、経験の面でも技術の面でも、コンシューマ向けの開発現場が大きく先行しています。 9月6日開催されたSalesforce Developer Conference Tokyo 2013のセッション「B2Cからみたモバイルアプリケーション開発のいまとこれから」では、コンシューマ向けサービス開発の現場に身を置いてきた伊藤直也氏が、モバイルアプリケーション開発を成功させるための方法を、これまでの経験や現在の開発現場で得たノウハウなどを基に語っています。 試行錯誤の回数を増やす、iOSとAndroidは同じように作ってはいけないなど、モバイルアプリケーション開発に関わるエンジ
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
Ratchet
Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.Getting started Once you've downloaded Ratchet, here's what to do next. 1. Create your pages Use these docs as a reference for all the available components and piece together the pages of your app. Customize the style too - make the prototype all your own. 2. Connect pages with push.js Read about push.js then start connecting y
モバイルサイトデザインの考え方 : LINE Corporation ディレクターブログ
こんにちは。ケータイlivedoorを担当してます多留です。 今回は、私がモバイルサイト作りでいつも意識して取り組んでいる "配色の仕方"、"メリハリの重要性" についてお話させていただきます。 モバイルサイトと配色 モバイルサイトは、PCのようにガンガン画像を使うとか、JavaScriptを使って動きをつけるとか、まだまだできないこと、制限のあるところが多々あり、線や細かい背景色・文字色・絵文字の使い分けなどでページを構成する必要があります。 配色や見せ方に関してはセンスが問われるところで、特にモバイルサイトのように凝縮されたスペースでの表現は難しく、苦手な人はホントに「いつまでたっても苦手」という方も多いと思います。 私個人としては、PCよりもモバイルサイトで全てを済ませようとしていて (つまりは携帯依存症……) いろんなジャンルのモバイルサイトデザインを見ているおかげで、配色や見せ方
ユーザビリティを考慮した文字サイズ指定&ナビゲーション設計のポイント（第2回） | モバイルサイト構築のユーザビリティいろは
サイト全体のナビゲーションコーナー間での移動ナビゲーションアクセスキーの使い方はじめに――モバイルサイト構築前のルール作り1. 対応端末とマークアップ言語について3キャリア共通のモバイルサイトを構築する場合、サイトのマークアップ言語を大きく分けると、第二世代端末はHTML（CHTMLなど）、第三世代端末はXHTMLに分けられます。 モバイルサイトを構築するときには、世代別のマークアップ言語を把握したうえで、サイトの目的やターゲットとするユーザーによって、HTMLかXHTMLのどちらかを採用します。また、第二世代、第三世代の両方に対応する場合は、HTMLとXHTMLそれぞれで記述したサイトを用意し、アクセスしてきた携帯端末（ユーザーエージェント）に応じて振り分けるシステムを利用することが一般的です。では、具体的にどういった場合にHTMLとXHTMLを選択すればいいのか、いくつか紹介しましょう
モバイルユーザーインターフェイスの追求〜まずはページング〜 : LINE Corporation ディレクターブログ
こんにちは、モバイルディレクターのカワムです。 自社サービスのコンテンツをいかに盛り上げるか日々試行錯誤を繰り返している我々ディレクター陣にとって、他社の動向はとても気になるものです。 しかし、業務の合間を縫って他社の動向を全て把握することがとても厳しいのも現状です...... そこで弊社のモバイルグループでは様々な分野ごとにチームを編成し、モバイル業界の動向を調査しています。 動向調査の結果を「モバイル研究会(通称：モバ研)」と呼ばれる会議で共有していきます。 会議は週1〜2回のペースでモバイルディレクター、デザイナーを中心に開催されています。 内容によってはプログラマーにも参加してもらいます。 現在、モバイル研究会で市場調査のために編成しているチームは以下の５チームです。 モバイルメディア研究会 モバイル端末情報研究会 モバイルユーザインターフェース研究会 モバイルクリエイティブ研究会
ビジネスリサーチの心得
コラム〜リサーチャーの日常 人生を通じてマッチクオリティーを追求する 知識の幅が最強の武器になる という本で初めて知った「 マッチクオリティー 」という言葉は、経済学の用語で、ある仕事をする人とその仕事がどれくらい合っているか、その人の能力… 2021.05.04 2021.05.13 311 view 1．ビジネスリサーチの基本・心構え すべては「依頼」から始まる〜社内リサーチャーと社外リサーチャ… 【 リサーチャー とは 】企業で企画系の仕事をしていると、上司の依頼で調べものをして資料にまとめるという仕事が多いと思います。企画系の業務では課長クラスまではこうしたリサ… 2021.01.18 2021.05.13 340 view 2．ビジネスリサーチの情報収集 デスクトップ調査 の基本〜アニュアルレポートなど公開情報から… デスクトップ調査 とは、主にインターネットなどを使用して、公開
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ZEROICHI
GitHub - jakiestfu/Snap.js: A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)
http://shi3z.blog.so-net.ne.jp/2008-02-28-1