iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho
スマホのメニューデザインに悩んだらこれ！パターン別サンプル36選 | LISKUL
スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で
Googleアナリティクスでスマホだけを計測するビューを作る方法
スマホだけの訪問を見るって？ Googleアナリティクスで、スマホだけのアクセス状況をすぐに見られると便利です。 たとえば、こんな感じにすると、スマホだけの訪問をすぐに見られて効率的です。 なぜスマホだけのビューを作るといいの？ 理由１：すぐに見られる これはそのまんまです。そのレポート画面をブックマークしておけば、すぐにスマホだけ見られます。リアルタイム解析も、メニューですぐにスマホオンリーです。 理由２：1段階掘り下げた状態から分析できる スマホだけでそもそもビューを作っておきますと、さらに深堀りしたいとき便利です。 たとえば、ピボットテーブルでも「オペレーティングシステム」を選んだとき、Windowsなどを除外しなくても、すぐにAndroidとiOSが上位に出ます。 理由３：セグメントづくり工程も1段階減らせる セグメントを作るときも、そもそもモバイルに絞り込む必要がなくなります。
How speeding up your mobile site can improve your bottom line
Marketing is at an inflection point. Here’s why that’s an opportunity
淡路ハイウェイオアシス 〜 おいしいもの、たのしいこと、淡路島のいいところ、ぎゅっとまるごと 〜
--> お知らせ（2024/01/16更新) 平素は、ご利用いただき、誠にありがとうございます。 淡路ハイウェイオアシスは、お客様及びスタッフの安全を考慮し、営業してまいりますので 何卒ご愛顧いただきますようお願い申し上げます。 【オアシス館営業時間】 平日9時～19時 休日9時～20時 今日も、食べて、遊んで、おいしい島時間が流れています。 「淡路ハイウェイオアシス」アカウントでは、 四季折々にあふれる淡路島の”今が旬”をリアルタイムで発信中。 いろんな魅力をチェックして、淡路島をもっと楽しもう！
スマートフォンサイトのデザインリンク集 sps collection
sps collectionは技術的・デザイン性に優れたスマートフォンサイトを掲載しているデザインリンク集です。スマートフォンからも閲覧可能です。
『スマートフォンからHTMLソースを表示するスマートな方法』
佐渡の洋食屋店長のブログ佐渡の洋食屋店長のマニアックなブログです。 グルメネタは少なく、マニアックなネットTEC的なネタ、佐渡ネタが豊富なブログです。 ■めっちゃ簡単！これだけでソースが見れます 開発者ならスマホからもソース確認がしたい！！って思ったことありませんか？ホームページ制作者なら、ちょっとした不具合確認の為、スマホからソース確認したい！って思ったことありませんか？ そんなあなたは今日の情報はブックマークしておくべき情報かもしれません(笑) Androidならすぐ出来ます。iOS系からはもしかするとまだ出来ないかも？？ まずはGoogleChromeアプリをダウンロードしましょう。 https://play.google.com/store/apps/details?id=com.android.chrome 実は準備はこれだけでOKです。 ■ソースを見る方法 まず、Chromeア
株式会社モバイルコマース 携帯サイト公式化 携帯ショッピングサイト作成
これまでに約300の携帯サイトをドコモのiモード、auのez-web、ソフトバンクのYahoo!ケータイに公式サイト化した実績を持つ株式会社モバイルコマースです。企画の立案からキャリアの承認まで全てサポートいたします。ショッピングサイトの公式化、売上を上げるコンサルティング業務を行います。もちろん、コマース以外のジャンル（ニュース、金融、雑誌、TV, 音楽、ゲーム、趣味、エンタメ系等）の公式化・企画・設計・開発も自信を持ってご提供させていただきます。 サイトの公式化に絶対の自信があるので、万一サイトの公式化ができなかった場合は、一切の料金をいただきません。 代表飯野が２０００年にモバイル業界へ入り、上場会社の役員時代にモバイルコマース市場の大ブレークを予測、２００４年に設立いたしました。 携帯サイトは「設計書（画面遷移）」が命だという信念のもと、徹底的にユーザー視点と現場を重視した「設計
HTML［meta要素］電話番号の自動リンクを無効にする - TAG index
iPhoneのSafariには、文書内の電話番号を検出して自動的にリンクする機能が備わっています。（電話番号以外の番号もリンクされてしまう場合があります） この自動リンク機能を無効にしたい場合は、name属性の値に format-detection、content属性の値に telephone=no を指定しておきます。 <meta name="format-detection" content="telephone=no"> 電話番号にリンクを設定したい場合は、a要素の tel: （スマートフォン向け）を使用した方が確実です。（Androidでもリンクされるようになります） その他の自動リンクも無効にする Androidでは、メールアドレスや住所が自動的にリンクされてしまう場合があるそうです（自分の端末では確認できず）。これらも含めて自動リンク機能を無効にしたい場合は、次のように指定して
CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
もう逃げない。HTMLのviewportをちゃんと理解する
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view
【最新版】 2015年「モバイル×SEO」の基礎知識 Webディレクター向け | SEKAI LAB TIMES（セカイラボタイムス）
ヴォラーレ株式会社の角谷と申します。 今回は最近Googleの発表もあって話題になっているモバイル (スマホ) SEOについてご紹介します。 ▼Googleの公式発表 検索結果をもっとモバイル フレンドリーに *1 ・モバイルフレンドリーかどうかを4月21日からランキング要素に適用します。 ・App Indexingを2月27日よりランキング要素に適用します。 モバイルSEOってどんなことをすればいいのか? 対策する必要があるのか? と疑問を持っている方や気になっている方も多いと思います。ここではモバイルSEOについて現状でわかっていることについて紹介し、 ウェブサイトのモバイル対応を考えている方の参考にしていただければと思います。 モバイルSEOの新しいランキング要因と変化について これまでは、 ウェブマスターツール上でモバイル対応していない点について警告メッセージを送るだけで、スマホな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ライフネット生命保険｜お手頃な生命保険・医療保険はネットで！
スマホのパンくずリスト19選＋α！あのサイトからあのサイトまで！