16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
2015年版: ホームアイコンの指定方法まとめ - console.lealog();
調べては忘れを毎回繰り返すのもなんだかなーと思ったので、まとめておきます。 ちなみに、iOS/Androidのことしか書きません。 iOSは5以上、Androidは4以上のOSバージョンを対象としてます。 OperaとかMetroとかFireFoxとかは知りません！もっと頑張ってください！ あくまでこの記事を投稿した時点でのものです！ 全般 拡張子はpng 勝手に角丸になるので四角のまま書き出してOK Safari(iOS) いちおう公式のドキュメントはこちら。 Configuring Web Applications で、実は指定方法が2つありまして、 HTMLで指定する方法(おそらく一般的) ドキュメントルートに画像を配置する方法 以下それぞれ。 HTMLで指定する場合 <link rel="apple-touch-icon" href="/path/to/icon.png"> ってr
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
子供へのネット規制の歴史（2）
永らく続いた本連載も、今回をもって終了である。最終回となる今回は、前回に引き続き、子供へのネット規制の歴史をまとめておこう。 2008年に、ネット事業者を巻き込んで大激論となった青少年インターネット環境整備法（以下、環境整備法）だが、初期の私案はかなり無茶なものだった。2008年2月、最初に打ち出したのは当時の民主党 高井美穂衆議院議員だが、大枠を定義しただけで、まだ細かいところは詰まっていない印象であった。 一方自民党 高市早苗議員を中心とした一派が提示した議員立法案は、内閣府内に別途委員会を設置して、ネット上の全コンテンツについて有害か無害かの判定基準を作って運用するというものだった。有害判定を受けたサイトは、サイトを会員制に移行するか、自分でフィルタリング会社にアクセス制限を申請することを義務化する。ISPや携帯キャリアには、18歳未満にフィルタリングを義務化し、是正されない場合は罰
Google Chrome のUser Agent 偽装機能は今どこに？（Google Chrome 32.0.1700.76）｜TechRacho by BPS株式会社
2014.01.15 Google Chrome のUser Agent 偽装機能は今どこに？（Google Chrome 32.0.1700.76） スマートフォン用のサイトを作成しているともちろん実機で表示や動作の確認をすることが最重要ですが、でも毎回実機を触るのはちょっと面倒だったりしますよね。そういう時にGoogle Chrome のDeveloper Tools は便利です。 Windows ではF12 キーを押すことで表示できるこの機能はその名の通り様々な開発に便利な機能を備えています。その中の1 つにUser Agent を偽装して、しかも画面サイズも変更できる機能があります。オーバーライド機能です。とはいえこの機能は結構ネット上では有名なものかと思います。 User Agent偽装機能が見当たらなくなった しかしこの機能、バージョンが31.0.1650.63 までは定位置に
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
利用者視点で見るレスポンシブウェブデザイン - Nothing ventured, nothing gained.
最近、個人的に不便に感じているのが、同じコンテンツにも関わらずアクセスするデバイスに応じてURLを変えているコンテンツだ。スマートフォンからのアクセスだと、"m"*1などの文字が前後いずれかに付与されたURLなどにリダイレクトされる。 そのデバイスからのみコンテンツをアクセスしている分にはさほど不便を感じないのだが、私はChromeのデバイス間タブ同期機能のヘビーユーザーであるため、頻繁に同じコンテンツをMacやWindows、そしてAndroidデバイスで見る機会に遭遇する。結果、何が起こるかというと、Androidからアクセスしていたスマートフォンに最適化されたコンテンツをMacやWindowsで見ることになり、なんとも不恰好なデザインで見させられることになる。 悪い例として出すことになってしまい申し訳なく思うが、このブログを再配信しているBLOGOSというブログメディアがある。このB
レスポンシブWebデザインの“現実的な”ワークフロー
レスポンシブWebデザイン案件のワークフローが従来通りではなさそうなことはなんとなくわかる。 でも、デザインなしでいきなりコーディングだとか、コーディングしながらデザインだとかは、Webにあまり詳しくないクライアントさんのお仕事で、デザイナーとコーダーも分業体制、という状況では、なかなか実現できない…… という、恐らく受託サイト制作では一般的であろうシチュエーション。 そんなときに、比較的スムーズにレスポンシブWebデザイン案件を進められるだろうフローを考えてみました。 ■最初にレイアウトパターンを絞る 画面設計の最初の段階で、サイト内のレイアウトパターンを決めます。 3パターンに収まるのが理想です。 メインページ：ヘッダ／フッタ、ナビゲーション、メインコンテンツ ┗見出し複数レベル、本文、箇条書き、表、画像配置例、リンク・ボタン例 付き 一覧系ページ：ヘッダ／フッタ、ナビゲーション、メイ
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
レスポンシブデザインのウインドウサイズの切替えについてまとめてみました
こんにちは。和田です。 ここ数日暑いですが皆様いかがお過ごしですか？ 私共は先日、アシアルのHP（ブログも）をリニューアルしました！ 皆さま見てていただけましたでしょうか？ まだの方は是非是非ご覧になってください。 http://www.asial.co.jp さて今回のアシアルHPはレスポンシブデザインを採用しています。 そこで今回はFireworksから離れて、最近なにかと話題のレスポンシブデザイン-特に最初に悩むウインドウサイズの切替えについて書こうと思います。 アシアルではウインドウサイズの切替えを、タブレットはPC版のHPをそのまま表示させ、スマホのみウインドウサイズを切替える。ということにいたしましたが、 皆様はレスポンシブデザインを作成される際どのようなウインドウサイズ（幅）で切り分けていますでしょうか？ 結構悩むところなのではないかと思います。 そこで、各デバイスのサイズの
スマートフォンサイトとSEO Q&A (中〜上級編) (2012.07版） ::SEM R (#SEMR)
スマートフォンサイトとSEO Q&A (中〜上級編) (2012.07版） スマートフォンとSEOについて、ちょっと複雑な質問とその回答。 公開日時：2012年07月19日 15:48 最近、スマートフォンサイト構築におけるSEO上の注意点について相談を受けたり、あるいはセミナー・講演などで本話題を扱う機会が増えているのですが、今回はその中から適当に印象に残っているものについて簡単にまとめます。 本日は時間の都合で文字だけで説明しますが、後日、図版を交えた解説記事を追加していきます。 Googleは説明時に "desktop" と "mobile" という表現を用いますが、本記事では「PC」と「スマホ」と表記します。 Q1) PC版サイトとは別にスマホ版サイトを構築した。まだすべてのコンテンツをスマホ展開できていない。このケースにおいて、スマホユーザーがまだスマホ版が用意されていないPC版
スマホサイト検索最適化の注意事項：通常Googlebotをスマホ版サイトでリダイレクトしてはならない ::SEM R (#SEMR)
スマホサイト検索最適化の注意事項：通常Googlebotをスマホ版サイトでリダイレクトしてはならない スマホサイト構築最適化において、デスクトップ版、スマホ版双方をUser-Agentで振り分けする場合の注意事項。Googleは、default-Googlebot（通常Googlebot）はすべてのバージョンにアクセスできることを前提としているので、スマホ版サイトで通常Googlebotを振り分けるのは推奨されていない。 公開日時：2012年07月02日 07:22 デスクトップ版サイトとスマートフォン版サイトを運用しており、後者を検索エンジンにも適切に掲載させたい、いわゆるスマートフォンの検索最適化を行う場合において、現時点（2012年7月1日時点）においてGoogle公式ヘルプには明記されていない、重要な注意事項について1つ紹介しよう。 デスクトップ版サイトとスマートフォン版サイトのコ
iPhoneのトラッキングは信頼できるか？ インタラクティブマーケティング統計データ 2012年05月度｜株式会社ユニメディア
一般にiPhoneのMobile Safariは3rdPartyCookieがセットされず、Cookieタイプのアフィリエイト・アクセス解析は正確な計測が出来ないことで知られています。 また現在、ユーザエージェントでSafariと検知するとcookieに情報を書き出さないような広告システムも一部に存在していると言われています。 巷でよく指摘される上記の内容が実際どのようになっているのか、弊社UMAPデータを元に分析したところ、実態が良く分かる大変興味深い結果が表れましたので、今回はこちらをご紹介いたします。 まず本レポートでのSPデータについて05月度コンバージョン比率及びCVRは相変わらずAndroidが活発でiPhoneが低調な流れが続いています。 しかし一方、流入比率はiPhoneがAndroidより多い傾向が見受けられます。この逆転現象は、Androidのシェアが優勢と言われる中で
スマートフォンに最適なウェブサイトガイドライン | アユダンテ株式会社
※この記事は英語文書を翻訳したものです。 Building Smartphone-Optimized Websites – Webmasters — Google Developers （訳者 2014/7/1追記：Googleのスマートフォンサイトの移行ガイドラインを元にしたスマホサイトの移行のポイントも合わせてご参考ください。） Googleがサポートするスマートフォンに最適なサイトの構成は以下の三通りあります。 【Google推奨】レスポンシブウェブデザイン。 これは、すべてのデバイスに同じURLを用いて、各URLにアクセスするとすべてのデバイスに同じHTMLが送信され、CSSのみを用いて各デバイスでページをどのように表示するか決める方法です。 ユーザーエージェントによるデバイスごとの出し分け。 これは、すべてのデバイスに同じURLを用いますが、各URLにアクセスすると各デバイスごと
GoogleはレスポンシブWebデザインを推奨 - F.Ko-Jiの「一秒後は未来」
PCサイトとスマホ向けサイトの表示分け方法にはいくつかあると思いますが、Official Google Webmaster Central Blogによると、GoogleはレスポンシブWebデザインの利用を推奨しているようです。 » Official Google Webmaster Central Blog: Recommendations for building smartphone-optimized websites そのうち日本語訳も出ると思うのでここではざっくりと。 レスポンシブWebデザインを使うと、「すべてのデバイスに対して同じURLとHTMLを提示し、見た目はCSSだけで切り替える」ということが可能になります。 Googleは「Building Smartphone-Optimized Websites – Webmasters — Google Developers」
Googleが正式回答したスマホサイトのSEO - ku-sukeのブログ
こちらの記事のざっくりまとめです Google Finally Takes A Clear Stance On Mobile SEO Practices Official Google Webmaster Central Blog: Recommendations for building smartphone-optimized websites （モバイル・スマホという言葉が出ますが、基本どちらもスマホを指しています。） 結論から言うとレスポンシブデザインがSEO上はオススメ あくまでSEOの観点ですが、スマホにかぎらず様々な表示領域をもつデバイスに対応するため、レスポンシブデザイン（画面幅に合わせてレイアウトが変わる奴。）が適用できるならそれが一番いいとのこと。 ※レスポンシブデザインに関しては、日本ではまだ定着していないため賛否両論があるようですが、個人的には本気でやるなら有りかな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
事例紹介 | 株式会社インフォバーン
スマートフォン対応、気をつけたいトラブル
