スマホ向けサイトの最適化レベルを自動チェックするグーグル公式ツール2種 など10+3記事 | 海外&国内SEO情報ウォッチ
こちらはあらかじめクロール時にチェックしているので、サイト全体のなかで問題があるページを探すなどの用途で使える。 チェックは、PageSpeed Insightsのユーザー エクスペリエンスでチェックできる項目が対象で、Mobile-Friendly Testとだいたい同じような項目を確認している。 この2つのツールに関してこんな質問が公式ヘルプフォーラムにあった。 片方では問題はないが、もう片方では問題を指摘されている。 どちらのツールに合わせてモバイルサイトを最適化してくべきか？ 答えは「両方」になるだろう。 Mobile-Friendly Testがチェックする項目とモバイルユーザビリティレポートがチェックする項目は同じではない。また共通した項目であっても、基準が同じとは限らない。 しかしどちらのツールもモバイルサイトのユーザビリティやユーザー体験に重要な要素をチェックしてくれること
モバイルブラウザでもサクサクに動作する最適化6つのノウハウ
「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
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
スマホサイト制作センスをアップする！見本・素材・WPテーマ・JS・その他全部丸ごとまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターの内藤です！ 前回の記事（美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ）ではWebデザインのタイプ別にわけた見本サイトのまとめを行いました。 今回はその続編として、スマホ・タブレット最適化サイトのデザインまとめをご紹介致します。 目次 ※もちろん順番に読む必要はありません。 スマホ専門デザイン見本 部品別に見られるサイト その他スマホサイトの部品作りの参考になるサイト スマホサイト素材になるキット フリック用JavaScriptプラグイン スマホ対応の無料WordPressのテーマ スマホサイト制作参考 スマホ専門デザイン見本 iPhoneサイトデザイン集のiPhoneデザインアーカイブ http://iphonedesignarchive.jp/ 登録数が半端ないです。 カテゴライズは業種別のみですが、年月アーカイブがあるので、い
スマートフォンサイトを驚くほど速くする！高速化9つのポイント | Find Job ! Startup
回線が細くCPUも弱いスマートフォンは、リッチなWebサイト表示が苦手です。しかし、地道な対策で表示速度が驚くほど変化するのも事実。 今回はスマホのWebサイト表示の高速化手法をまとめました。もちろんPC向けにも効果バツグンのTips集です。 Webサイトを劇的に高速化する9つのポイント １.画像を圧縮する ２.画像はサイズを指定して使う ３.画像は適切なサイズで使う ４.CSS/JavaScriptを圧縮する ５.CSSスプライトを使う ６.不要なCSS/JavaScriptを読み込まない ７.CSS/JavaScriptをまとめる ８.CSSセレクターを最適化する ９.mod_deflateでgzip圧縮する １.画像を圧縮する 画像を最適化することは、フロントエンドの高速化に絶大な効果を発揮します。Photoshopを使って圧縮しても良いのですが、もっと手軽に圧縮
[JS]スマフォアプリのように左右にスライドしてコンテンツを表示するスクリプト -mmenu
mmenuの使い方 スクリプトの使い方は下記ページにステップごとの解説があります。 tutorial Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。 <head> <script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript" src="jquery.mmenu.js"></script> <link type="text/css" media="all" rel="stylesheet" href="jquery.mmenu.css" /> </head> Step 2: HTML コンテンツの基本構造は、下記のようになります。
PCからワイヤレスでAndroidのファイル・メール・カメラ操作＆位置情報確認ができる無料アプリ「AirDroid」
microUSBケーブルでの接続なしに、Wi-Fi・3G・LTE経由でPCからAndroid端末に接続し、スマートフォンに保存されているファイルを閲覧・操作したり、長文のメッセージをコピペしたり、紛失時にスマートフォンの場所を確認・カメラを起動してどこに落としているかまで見ることができるなど、とにかくスマートフォンで可能なあらゆる操作をPCからリモートで行えてしまうアプリが「AirDroid」です。 AirDroid - Google Play の Android アプリ https://play.google.com/store/apps/details?id=com.sand.airdroid まずはアプリをAndroid端末にインストール。 アプリを起動すると、以下のような画面が出てくるので、「サインインまたは登録」をタップします。 メールアドレスとパスワードを記入し、「登録」をタッ
[CSS]デスクトップ・スマフォ・タブレット向けの美しいUIエレメントを簡単に実装できるスタイルシート -TopCoat
クリーンなHTMLを使い、レスポンシブを念頭においたUIエレメントを簡単に実装できるオープンソースのライブラリを紹介します。 TopCoat TopCoat -GitHub TopCoatのセットアップ 当スタイルシートを外部ファイルとして配置するだけです。 <link rel="stylesheet" type="text/css" href="css/topcoat-desktop-min.css"> TopCoatのスタイルシートは2種類あり、デスクトップ用（24KB）、スマフォ用（20KB）となっています。 それぞれのデモを見てみましょう。 TopCoat for Desktop TopCoat for Mobile TopCoat for Desktop デスクトップ用のデモです。 デスクトップでご覧ください。 TopCoat for Desktop
いまさら聞けないRetina対応のための「ピクセル」の話
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
旧型Androidに保護機能を追加する「ミマモール」（1）
子供用のケータイとして、親のお下がりをあげるというケースは昔から存在した。うちの上の娘も、初めて持ったケータイは、筆者のお下がりのウィルコム“京ぽん”こと「AH-K3001V」であった。 昨今は、新しもの好きのお父さんのせい（?）で、子供に旧モデルのAndroid端末を持たせるケースも少なからずあるようだ。ただ前回、前々回と取り上げた子供用スマートフォンではあるまいし、フルスペックむき出し状態で使わせるのには、不安もあるだろう。さらにAndroid 2.2.x（Froyo）や2.3.x（Gingerbread）あたりの端末は、すでにメーカーのサポートが終了したものもあるはずだ。 こういった古いAndroidスマートフォンを子供向けに安全に使わせるサービスとして、今年3月1日にリリースされたのが、「ミマモール」（http://www.mimamorl.com）である。開発したのは、ユニリング
「jQuery Mobile」を活用したスマートフォンサイト作成（前編）
はじめに 今回は、簡単にスマートフォン向けサイトを作成するために活用できるjQuery Mobileを紹介します。jQuery MobileはjQueryと同時に読み込んで使用するもので、スマートフォン向けサイトでよく使われるスライダースイッチなどのフォームを簡単に呼び出すなど、スマートフォン向けUIサイトが簡単に作成できます。今回はjQuery Mobileとは何かを解説し、ごく簡単なスマートフォン向けサイトを作成してみます。 対象読者 jQuery mobile、スマートフォンに興味があり、使ってみたい方 必要な環境と準備 今回使用したjQuery Mobile1.2.0がサポートしているjQueryのバージョンは1.7.x、1.8.xで、1.6.x以前のバージョンと1.9.xはサポート外となっています。このため、今回のサンプルスクリプトで使用しているjQueryのバージョンは1.8.
レスポンシブ時代のビューポートチェックWEBサービス「Responsive.is」
現在では様々な端末がリリースされ、その全てで最適な表示をさせるためにレスポンシブなWEBサイトが求められていますが、端末ごとのチェックはとても面倒なもの。今日紹介するレスポンシブ時代のビューポートチェックWEBサービス「Responsive.is」は、WEB上で様々なビューポートをシュミレートしてくれるものとなっています。 PC、タブレット縦、タブレット横、スマートフォン縦、スマートフォン横と様々なビューポートが確認でき、全体のどの部分を表示しているのかも分かるようになっています。下記は様々なビューポートで同一のサイトを表示したものとなります。 詳しくは以下 WEB上で完結し、URLを入力するだけで利用できるのは良いですね。最終的には実機で行わないとはいけないのですが、構築途中や様々なサイトの対策の検証用には良いWEBサービスだと思います。 Responsive.is – Display
Androidの調子が悪い時の最終手段！初期化の手順 – スマホで仕事効率化！ビジネスアプリのお仕事アプリ.com
[特集記事] Androidの調子が悪い時の最終手段！初期化の手順 | 仕事効率化に役立つiPhone・Android向けのおすすめビジネスアプリのレビューサイト ツイート Android端末を使用していて、重くなってきたり動作が不安定になったり、といった不調がある時、Androidを初期化しリセットすると不調になる前の工場出荷時の状態に戻してくれます。 これまでにインストールしたアプリのデータや、カスタマイズ設定などがすべて削除されてしまいますが、不要なデータが削除され動作が軽くなるので、最近、調子が悪いと感じたら初期化することをおすすめします。また、スマホ購入時にプリインストールされているアプリを一斉に消したい時も便利です。 ※一部のアプリは初期化しても残ります。 今回はそんなAndroid端末の初期化する方法をご紹介いたします。 バックアップできるデータ データはAndroid側でバ
タッチデバイスにも対応したシンプルなLightboxを実装するjQueryプラグイン・Swipebox
タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox
スマートフォン向けWebサイトの表示速度 高速化手法
対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、
スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選
スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選：スマホ向けサイト制作で泣かないための秘伝ノウハウ（1）（1/2 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。第1回は、PCやケータイと比べて際立ったスマホの特徴2つや、スマホ向けサイト制作3手法の基礎知識と課題、iPhone／AndroidなどOS／機種依存でのハマリどころをサンプルを交えて3つ紹介 連載開始に当たって 初めまして。KSKの「フレックスファームビジネスユニット」でエバンジェリストをしている渡辺と申します。筆者の所属するフレックスファームでは、スマートフォン向けWebサイト構築支援ツールの開発・販売を行っています。国内で販売されて
Android LTE対応端末でLTEだけOFFにする設定方法 Approid大好き
スマホ等の商品レビュー、アプリの使い方、セール情報、お金や株のことなどを発信。旧ブログ名「Approid大好き」 Android LTE対応端末でLTE通信をOFFにし3Gだけの通信にする設定方法。 おそらくどの端末でも同じ操作方法で設定できると思います。 コメント欄で設定できない端末もあるようで、発売メーカーにもよるのかもしれません。 【１：電話からコマンド入力】 電話を起動しダイヤルから以下のコマンドを入力 *#*#4636#*#* 最後の「*」を入力した時点で携帯電話情報画面へ移行。 【２：優先ネットワーク設定の変更】 テスト中と表示されたテストモード設定画面が開くので「携帯電話情報」に入る。 開いた画面で少し下へスクロールさせると「優先ネットワークを設定」と表示された箇所があります。 その右横黄色が囲った部分をタッチすると別メニューが開きます。 GSM.CDMA auto (PRL
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
事例紹介 | 株式会社インフォバーン
IDEA * IDEA
