Web App ManifestでWebアプリをインストール可能に - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを冬休みに作った際に、Web App Manifestを登録することで、このWebアプリを簡単にインストール(ホーム画面に追加)できるようにした。このWebアプリはService Workerを使ってオフラインでも動くようにしているので、ホーム画面から起動し、ネイティブアプリと同等の体験を提供できる。もちろん、Manifestを使っていない通常のページでも、メニュー画面から「ホーム画面に追加」を選ぶことで同様のことはできるが、下の動画のように、下から出てくるAppインストールバナーのボタンを一回タップするだけ登録できるのは利便性が高い。 Appインストールバナーの出し方 Google Developersのこの記事によるとAppインストールバナーを出すには下記の条件を満たす必要がある。 Web App
「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう
「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。 WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイトではPCとモバイルからのアクセス数が逆転してるWebサイトも多く、「モバイルファースト」な開発も当たり前になりました。 しかし、2009年の「モバイルファースト」と、今の「モバイルファースト」は大きく中身が成長しました。モバイルフレームワークであるIonic 2も先日リリースされましたので、ここで改めて「モバイルファースト」とは何かを考え、モバイルの設計を見直していきます。 レスポンシブとモバイルファースト モバイルファース
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
PageSpeed Insights でのモバイル分析 | Google for Developers
PageSpeed Insights でのモバイル分析 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 PageSpeed Insights は、ページを分析して、モバイル ネットワークでページを 1 秒未満で表示するための推奨事項にそのページが準拠しているかどうかを確認します。調査によれば、1 秒を超える遅延があるとユーザーの思考の流れが中断し、ユーザーの利便性が低下します。Google では、端末やネットワークの種類に関わらず、ユーザーのページへの関心を持続させ、最適な利便性を提供することを目標としています。 1 秒という時間の制約を満たすのは簡単ではありませんが、この時間内にページ全体を表示する必要はありません。代わりに、スクロールせずに見える範囲（ATF）のコンテンツを 1 秒未満で配信し表示します。こうすることで、ユーザーは可能な限り早くページの
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
スマホ対応のキモ。スマホサイトのナビゲーションメニューが悩ましい。
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる スマホサイトのナビゲーション。どーいう感じにしようか、いつも悩みます。 最近、よく見られるのは、こういう「ハンバーガーメニュー」。試しに、右上の「三」をクリックしてみると、
PCサイトのデザインをスマートフォンサイトに移植しようとして苦労した話 - クックパッド開発者ブログ
クックパッド検索・編成部の須藤耕平です。 昨年の夏に担当した、PCサイトのトップページリニューアルに引き続き、今年の２月にスマートフォンサイトのトップページをリニューアルしました。 前バージョンのスマートフォンサイトは、設計時から約１年半が経過していたため、コンテンツが増えた現在では全体的にかなり煩雑になっていたこと、また、PCサイトでの成功事例をスマートフォンサイトにも取り込むことを主眼として取り組んだリニューアルでした。 本エントリーでは、今回のリニューアルにあたって、主にデザイン的な面で工夫した点、及び、それにまつわる苦労話を、具体的な事例と合わせて紹介したいと思います。 PC版をそのまま移植したらものスゴイ長いページになった 今回のケースでは前述のPCの事例が先行してあり、結果も概ね良好であったため、当初は特にコンテンツを絞らず、PC版とほぼ同内容を移植する形で進めていたのですが、
『スマホサイト VS アプリ』どっちで作る！？WEBとネイティブアプリの違いとは - セルバマーケティングブログ
スマホからのアクセス急増に伴い、近年ウェブサイトで重要とされているのが、スマホに対応したサイトをまず構築する「モバイルファースト」。そのため、スマホ対応したウェブサイトが増えているのですが、そこから更にサービスをアプリ化する流れが多くなっています。既にスマホ対応しているにも関わらず、アプリ化するメリットとは？そのポイントを解説します。 １）強力な「プッシュ通知」が使える ウェブサイトにはないアプリの特徴的かつ効果的な機能として、プッシュ通知が挙げられます。これまでは、店舗からの情報発信としてはメルマガが利用されてきました。しかし最近では、特に若者の間でキャリアメールよりもLINEといったアプリを利用する割合が高くなっており、メルマガの開封率は平均で10％前後。最も多い分布帯は0〜5%と、決して高いとは言えない状態です。その点、アプリのプッシュ通知は視認率としては100%。開封率も6割前後と
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
スマホ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
スマホサイトのEFO（フォーム最適化）で爆発的成果を出すための５原則 | LPO研究所
LPO研究所所長の鎌田です。 スマホサイトを用意するのがもはや当たり前になりつつある昨今ですが、スマートフォン対応を急ぐあまり、問合せフォームのユーザビリティがないがしろになってしまっているサイトをよく見かけます。 スマホユーザーの環境は、PCユーザーに比べてあらゆる点でシビアです。いい加減なスマホ対応をしただけでは、そうそうコンバージョンのアップにはつながりません。 下記の事例をご覧ください。 これは、あるブライダル系サービスのPC向け問合せフォームをスマホ最適化したところ、スマートフォンからのコンバージョン率が３倍以上になった事例です。このように、スマホユーザー向けに問合せフォームを最適化するだけでも、コンバージョン率はしっかり上がるのです。 今回は、弊社でスマホ向けフォーム最適化を行う際にいつも心がけている「５つの原則」について、具体例を交えてご紹介します。あなたのスマホ向けフォーム
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/tyfkda/items/a50fe679654a6b33fbd7