モバイルフレンドリーとは？条件、確認方法、対応方法を解説 | 株式会社フルスピード - Growth Seed
モバイル端末からウェブへのアクセスが増加モバイル端末からウェブへのアクセスが増加しているというのが背景にあります。 2010年代初めごろモバイル端末（ここではスマートフォンを指します）のユーザーが増加するのに伴い、Webサイトはモバイル環境で見られる機会が増えてきました。しかし、当時はモバイル端末に適したページを作らず、PC用ページしか用意していないケースが多かったです。 そして、モバイル端末でPC用ページを表示させた場合、「文字が小さすぎる」「ボタンが押しづらい、間違って押してしまう」「横スクロールが見にくい」など、さまざまな不便さを感じるユーザーがいました。その結果、Webサイトからの離脱につながり、コンバージョンにつながる可能性が低く可能性もありました。 PCよりモバイルを利用するユーザーの割合が多くなったスマートフォンの普及により、2015年ごろからWebサイトを閲覧する端末は、P
横にはみ出すナビゲーション
今回(2014年9月)のAppleのウェブサイトのリニューアルにはいくつもの興味深い点がある。ナビゲーションの二本線とバツ印が共にインラインのSVGなことなどもそうだし、多くのポーションがモダナイズされたにも関わらずPrototype.jsを継続利用したこともすごく気になる。その中でも一番気になったのは狭い画面向けの横にはみ出すナビゲーションだ。 これまでの通常は隠されている狭い画面向けのナビゲーションの多くは、次の3つに大別されていた。 ドロップダウン オーバーレイ ドロワー 極稀にアイコンのみのコンパクトに横へ並べたものもあったが、いずれの場合もナビゲーションの項目は縦に並んでいることがほとんどだ。一覧性に富み、アクセス性が高く、ユーザーの学習コストも低い。 これに対して横にはみ出すナビゲーションは、項目を画面外にはみ出すように横に並べ、スワイプでスクロールして探させるという形のものだ
寸法と解像度のチートシート
その他の寸法 ハガキ … 148 mm × 100 mm (A6 より横が 5 ％程度短い) 名刺 … 91 mm × 55 mm (B8 より横が 1 割程度短い) レター … 279 mm × 216 mm (A4 より縦が 1 割程度短く，横が数％長い) 新聞 … 開いた状態で 813 mm × 546 mm (A1 に近いが少し小さめ) クレジットカード … 85.6 mm × 54.0 mm 磁気カード … 85.0 mm × 57.5 mm テレホンカード … 86.0 mm × 54.0 mm CD … 直径 120 mm (穴は直径 15 mm，印刷可能範囲は直径 46 〜 116 mm の範囲) 証明書の写真の寸法 パスポート … 縦 4.5 cm × 横 3.5 cm 履歴書，TOEIC … 縦 4 cm × 横 3 cm TOEFL，英検 … 縦 3 cm × 横 3
Google Webmaster Help Center - I have a mobile site. How can I add it to Google's Mobile index?
Send feedback Stay organized with collections Save and categorize content based on your preferences. Mobile site and mobile-first indexing best practices Google predominantly uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking. This is called mobile-first indexing. While it's not required to have a mobile version of your pages to have your conte
これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先月LIGブログがリニューアルされました。僕はメインでコーディングを担当していたのですが、いつものようにスマホでの不具合には悩まされました。 とくに今回焦ったのは、直前でiOS8がリリースされたことでした。まだ情報がない中で、こいつで起きた不具合を解明するのには手こずりました（’ー’） そこで今回は、スマホのコーディングで僕が詰まったポイントとその解決方法について、実例を踏まえながら紹介していきたいと思います！ 1. iOS8でz-indexを使っている要素をJSで操作すると、重なり順がおかしくなる こちらのページ（SP）では、社員の写真要素をスワイプすると画像が反転する、という動きを実装しています。 position:absoluteで表の写真、裏の写真を重ね、z-indexで重なり順を設定していた
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
iPhone, iPad, iPod touchの画面サイズまとめ | noriaki blog
cc licensed ( BY ) flickr photo shared by GONZALO BAEZA 必要だったのでまとめた。 必要だったのでまとめたシリーズその2はiPhoneホーム画面のアイコンとバッジ配置仕様チートシート作った。 iPhone, iPad, iPod touchの画面サイズまとめ デバイス Retina? 画面サイズ（縦x横px） 解像度(ppi) iPhone5 Retina 1136×640 326 iPhone4S Retina 960×640 326 iPhone4 Retina 960×640 326 iPhone3G 480×320 163 iPhone3 480×320 163 iPad mini 1024×768 163 iPad Retina 1 Retina 2048×1536 264 iPad2 1024×768 132 iPad 10
スマホサイトが嫌われる理由と改善方法
作る前に始めておきたいコンテンツ設計ですが、あまり注視されていない『未開の地』。パソコン向け Web サイトからの『資産』を散らかしたままサイトを作り続けても、ますます利用から遠い存在になる可能性があります。実は結構やることが多くて大変なコンテンツ設計のノウハウの紹介と、明日からできる改善策を紹介します。
モバイル版Webサイトの完成度はなぜ低い？ | スラド IT
モバイルデバイスからのアクセスが大幅に増加しているにもかかわらず、できの悪いモバイルサイトが多いことが素人の私には理解できない。これには何か正当化できる理由があるのだろうか。/.erの会社のモバイルサイトの完成度はどの程度だろう。モバイルサイトの開発が遅れたり、進めることができていないなら、何が障害となっているのだろう。プラットフォーム間の互換性が問題なのだろうか。
スマホ経由のアクセスはPCの65％に 食品、服飾、美容などはすでに逆転
ニールセンが、PCとスマホそれぞれのネットサービス利用動向の違いを分析した。スマートフォンからのアクセスはPC利用の65％に達し、コミュニケーションや地図のほか、食品や服飾、美容のジャンルはスマートフォン利用の方が多かった。 ニールセンが12月19日発表した、PCとスマートフォンそれぞれのネットサービス利用動向の分析結果によると、スマートフォンからの利用が多かったのは、SNSや天気予報など一般的に相性がいいと言われているサービスのほか、「食品、料理」「服飾、美容」などだった。 調査協力モニターの実際のアクセスログをもとに、PC／スマートフォンそれぞれの利用動向を把握するネット視聴率調査で算出。10月におけるスマートフォンからのインターネット利用者は3500万人で、PC利用者（5380万人）の65％の規模になった。 カテゴリ別に見ると、スマートフォンからの利用が多かったのは「コミュニケーショ
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Xamarin で Prism を使いたい！ ～「正式対応」 まで待てない人のための Prism 利用 Tips～Tatsuji Kuroyanagi
WPスマホ用テーマで『PC版への切り替えボタン』を実装できるプラグイン「MW Theme Switcher on WPtap」の使い方
Home > WordPress > WPスマホ用テーマで『PC版への切り替えボタン』を実装できるプラグイン「MW Theme Switcher on WPtap」の使い方 先日お仕事で、株式会社ひつじぐも様のスマートフォンサイトを制作させていただきました。 こちらのサイトはWordPressで構築されていまして、今回あらたにjQuery Mobileを使ったスマホサイト用のテーマを作成し、プラグインを用いてユーザーエージェント別にテーマを自動で切り替えるという案件でした。 で、その際に「PC用サイト」と「スマホ用サイト」への切り替えボタンを実装したので、おさらいがてら当ブログのスマホサイトにも実装してみました。ということで、その方法についてシェアしたいと思います。 はじめに… 私のブログのように、もともとコンテンツの少ないサイトでは、スマホサイトからPC版への切り替えはさほど必要ないかと
マルチデバイス時代に知っておきたい、ウェブ・コンテンツに対する2つのアプローチ
前回の投稿「レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみた」に対して、「覚え書き@kazuhi.to」で「続・レスポンシブWebデザインとかアダプティブWebデザインとか」として、再度レスポンシブとアダプティブについての木達さんの解釈をまとめています。記事中でおっしゃっている通り、僕とは見解が違うところもありますが、特に図解の部分はウェブ制作に関わる人には必見だと思ったので、こちらでも共有させていただきます。マルチデバイス時代のウェブ制作において考慮すべき技術的な制作手法の分類がすっきり整理されています。 ※上図は「続・レスポンシブWebデザインとかアダプティブWebデザインとか」の2013/6/23の時点のものを内容を変更せずに、そのまま掲載させていただいています。（木達さん、ありがとうございます！） 「レスポンシブ」や「アダプティブ」という言葉の扱いはとりあえずわき
レスポンシブだけじゃいられない？時と場合によるユーザーエージェント判別の方法
レスポンシブだけじゃいられない？時と場合によるユーザーエージェント判別の方法 2013.06.14 | 初心者向け | 覚えておきたい 先週、某iPhoneアプリをリリースした際に公式サイトを担当したネイビーです。 iPhoneアプリだから公式サイトはiPhoneで見れればいい！というわけではないんですね。知りませんでした。だったらレスポンシブで！と行きたいものの、ニョーンと伸び縮みするスタイルが万人受けするものでもありません。 iPhone向けとPC向けのページを作ってユーザーエージェントで振り分ける方針が決まりつつ、いつどこで判別したらよいものか？リリース前日まで悩んでしまいました。 PHPによる判別 スマホ向けとPC向けのコンテンツを振り分ける際にまず思いつくのは、サーバ側のプログラムでユーザーエージェントを判別して処理を分岐する方法です。端末によってコンテンツの種類や量を調節したり
[解説] 米Google、技術的問題のあるスマホ向けサイトの順位を下げる方針を発表 ::SEM R (#SEMR)
[解説] 米Google、技術的問題のあるスマホ向けサイトの順位を下げる方針を発表 グーグルが技術的問題を持つスマホ向けサイトの順位を調整する方針についての補足解説記事。トップページにリダイレクトしているのはそれなりに理由があるので、その理由別の対応方針。 公開日時：2013年06月12日 14:57 本日未明に公開した記事「Google、スマホ向け検索ランキング変更を発表」について、別記事として補足解説を少し。 まず、Googleが具体的な例として挙げた、「スマホユーザーからの全てのアクセスをスマホ向けトップページに転送している」ですが、これは様々な理由により起きています。 「知らなかった」「考えたことがなかった」ケース まず第1に、「単に知らないだけの人」。つまり何も考えていないだけのケースですね。検索ユーザーは、検索キーワードと言う形で何を探しているのかという「インテント」を明確にし
![[解説] 米Google、技術的問題のあるスマホ向けサイトの順位を下げる方針を発表 ::SEM R (#SEMR)](https://cdn-ak-scissors.b.st-hatena.com/image/square/571c1fec2fe73c3a13b702681e7a8d32f18a18c2/height=288;version=1;width=512/http%3A%2F%2Fwww.sem-r.com%2Fimages%2Fse%2Fsemr-logo-fb-150x210.jpg){kind=logo}
[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 コンテンツの基本構造は、下記のようになります。
いまさら聞けない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
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
モバイル系ブラウザのUA文字列 - fragmentary
何の役に立つか自分でもさっぱりわからないと思いながら、ここ1年半ほどGoogle Spreadsheetsにブラウザのアップデート情報を記録している。 Browser Updates できるだけ情報を入れてるけど、抜けも結構ある。ChromeはStable Channelが入ったマシンがないので細かい情報はないし、Firefox ESRとかは要らんだろうと思って入れてない。 さて、もともとデスクトップだけだったんだけど、最近Chrome for AndroidとOpera Beta（Chromiumベース）が出たので追加し始めた。Opera Betaには chrome://versionみたいなのがなくてしんどい…… それで、UA文字列にバリエーションがけっこうあって複雑だなあと思ったので、ちょっと書いてく。 スマートフォンとタブレット まず、スマートフォンとタブレットでUA文字列が少し違
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
