あなたのウェブページはモバイル フレンドリーですか？
状態:調査中
閲覧数:2,544
投稿日:2015-02-20
更新日:2017-11-29
モバイル フレンドリー テスト
Web Components
・Web Componentsの基本的な使い方・まとめ
Chrome Dev Editor
・ワクワクする Chrome Dev Editor - 話題の Material Design も！
・Chrome Dev Editor で JavaScriptアプリの開発記
・Polymerを実際に使ってみた
モバイル フレンドリーではありません
このページがモバイル対応ではない理由
コンテンツの幅が画面の幅を超えています
リンク同士が近すぎます
このページがモバイル対応ではない理由
コンテンツの幅が画面の幅を超えています
リンク同士が近すぎます
技術
Web Components
・Web Componentsの基本的な使い方・まとめ
エディタ
Chrome Dev Editor
・ワクワクする Chrome Dev Editor - 話題の Material Design も！
・Chrome Dev Editor で JavaScriptアプリの開発記
・Polymerを実際に使ってみた
viewport設定
現在推奨されている記述
<meta name="viewport" content="width=device-width, initial-scale=1">
・Web Fundamentals・Bootstrap
調査履歴
サイト毎に推奨記載例が異なる
・「Google Developers」の中でも異なるし、「Google Developers」の同じページでも、日本語訳したサイトではまた記載が異なる
・「Google」以外のサイトではもっと異なるし、ネット情報によれば「Google」が以前推奨していたviewport設定は、現在とは異なるみたい
上記ページの公式日本語訳ページ
・記述内容が、1から1.0へ変更されている
<meta name="viewport" content="width=device-width, initial-scale=1.0">
・ビューポートを設定する — Web Fundamentals「Google Developers」の別サイト
・"viewport"ではなくviewport
<meta name=viewport content="width=device-width, initial-scale=1">
・ビューポートを設定する - PageSpeed Insights — Google DevelopersMaterial Design
Guide
Material Design とは？
・Googleが発表したビジュアル、モーション、インタラクションのプラットフォームやデバイス間の包括的なガイドライン
・現実世界の素材をメタファーとすることでユーザにとって分かりやすく表現するための視覚言語
特徴
・インタフェースはシンプルに、タイポグラフィはどのデバイスでも見やすく、クロスプラットフォーム・マルチデバイスを意識して設計されている
・Material Designの目指すところとAndroid側の変更点
・Google の新しいデザインガイドライン「Material Design」
フレームワーク
Bootstrap
・v3.3.2
Onsen UI
・HTML5ハイブリッド型モバイルアプリに特化したUIフレームワーク
polymer
・Web Components
・Material design
・誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer
・はじめての Polymer アプリケーション
・でも、それでも、Web Components with Polymerに全力で投資する
・ユーザーに分かりやすいサイトをPolymerとMaterial Designで表現しよう
・Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう
・Polymer と Web Components の違い9選（もとい Polymer の便利機能）
Material UI
・Material design
MUI
・Material design