必ず押さえておきたい！iPhone、Androidのフォーム標準UIまとめ | UI改善ブログ by f-tra
スマートフォン端末の普及で、PCだけでなくスマートフォン向けにもフォームを最適化する必要性が高まっています。 そこで今回は、iPhoneとAndroidでフォームを表示した際の標準的なUIについてお話しします。 PCとの違いはもちろん、iPhoneとAndroidの間でもUIには差がありますので、 基本のフォームパーツごとにその特徴・違いを紹介していきます。 スマートフォン向けのEFOを考えるうえで大前提となるポイントですので、 この機会にしっかりとおさえておいてはいかがでしょうか。 ※検証について 今回検証に使用した端末は、iphone5、Sony Xperia GX（それぞれ標準ブラウザ）です。 それぞれ装飾をできるだけ施していない状態のUIを用意しました。厳密には使用ブラウザやデバイスのバージョン、メーカー等によりUIに変化が生じるとは思いますが、今回は割愛とします。
もう遅いとは言わせない！Google推奨の「Above The Foldの1秒表示」とは？ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
もう遅いとは言わせない！Google推奨の「Above The Foldの1秒表示」とは？ 2014.09.24 2021.02.15 おすすめ 猶予時間は「僅か1秒」 – 読み込み速度と「Above the fold」 スマートフォンでサイトを見ると、いつまでたってもページが表示されないという経験はありませんか？スマートフォン・タブレット等、モバイル回線でWebにアクセスする機会が増えたことから、「ページの表示速度」への注目がより高まっています。 今回は最適なページ表示速度と、Googleが公式にコメントしている速度改善方法をご紹介します。 Webサイトは神速を貴ぶ 1993年、ニールセンが「人間が我慢できる時間（応答時間に対する限界）」についての調査を実施しました。 その時の調査結果では、 0.1秒以内に反応があれば「瞬時に反応した」と感じる 1.0秒以内のレスポンスは、「処理待ち」と
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
スマートフォンサイトのコーディング 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 の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
スマートフォン時代のWebサイト制作 第4回 画像の扱いと最適化 | デベロッパーセンター
スマートフォン向けサイトでは、デスクトップに及ばないスペックや接続回線を考慮し、いかに「軽い、表示が速い」サイトを作るかが重要です。一方で、様々な画面解像度の端末があり、高解像度の画面を搭載した端末向けには、そのサイズに対応した大きな画像が必要となる場合もあります。画像の扱いひとつをとっても、「パフォーマンス」と「見栄え」の双方を考慮しなければいけない難しさがあります。そこで今回は、前回のサンプルサイトを元に、画像関係の扱いや最適化などを解説します。 スマートフォンブラウザーはPNGに対応しています。デスクトップブラウザーでPNGを使う場合、Internet Explorer 6などの古いブラウザーに気をつける必要がありますが、スマートフォンブラウザーの場合は気にする必要がありません。 PNGは圧縮率が高く、容量を抑えることができます。また、アルファチャンネル（透過機能）を持つので、半透明
背景画像の拡大・縮小 → background-size ! - シンプルシンプルデザイン CSS
W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されていますので、あらためてまとめてみます。 拡大・縮小による画像劣化が気になるところですが、許容できるかどうかの判断は個人差があると思います。近頃のブラウザは優秀で、いい感じでスムージングされるので「OK！」とぼくは判断しました。 さすがにIE6の拡大・縮小したときのジャキジャキ感は堪えられませんが、そもそも「background-size」は適用されず無視されるので、IE6では背景画像は拡大・縮小されません。 Safari、Google Chrome、Operaですでに実装されています。 Firefoxもプリフィックス「-moz-」で適用されます。 IE8では残念ながら未実装でした。。。この辺はプログレッシブエンハンスメントで乗り切り
スマートフォンのラジオボタンを使いやすいサイズにしたい | 株式会社シンメトリック公式ブログ |
スマートフォンのラジオボタンを使いやすいサイズにするには？ 2011.06.14 2020.09.08 Webサイト開発 HTML demo スマートフォンは画面をタッチして操作をするので、フォームを使ったページではラジオボタンとチェックボックスのサイズは入力のしやすさに大きく関わってきます。 情報を入力しているときにボタンサイズが小さくてタッチしにくいと、イライラしてしまったり入力を諦めてしまったりするので、ECサイトなどでは購入機会の損失につながる深刻な問題になりかねません。 それを防ぐ為にも、ボタンは最適サイズにしておきたいものです。 そこで、どのようなCSSプロパティを使うとiPhone、Android端末でボタンをタッチしやすいサイズに調整出来るのか実際に確認してみます。 iPhoneとAndroid端末では結果が少し違っていたので、その結果をまとめてみました。 関連記事： 画像
MdN Design｜総合情報サイト
iPhone 4はiPhone 3GSと同じ画面サイズのまま、2倍の解像度となった。 Androidでは機種により異なるが、1.5倍のものが多い。 同じ画面サイズで表示できるピクセル数が増えたため、細かい文字もくっきりとして読みやすくなった。 しかし、コンテンツの1pxをデバイス上の1pxとしてそのまま表示すると、全体的に小さく表示されてしまうことになる。 そこで、WebKitをベースとしたブラウザには「devicePixelRatio」というプロパティが用意されている【1】。 devicePixelRatioとは、直訳すると「デバイスのピクセル比率」で、コンテンツの1pxを実際のデバイス上で何pxとして描画するかを示すものである。 【1】スマートフォンのdevicePixelRatioと解像度の一例
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利！
2012/10/18：画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display:
Juicebox - The Ultimate HTML5 Image Gallery
Spectacular Web Image Galleries Made Easy Use Juicebox to create responsive JavaScript image galleries for your web site, blog or portfolio. Juicebox is a complete web image gallery solution. Use Juicebox to create spectacular web image galleries for your web site with no coding required. Juicebox is simple to set up and use, and includes complete browser and mobile device support. View demos Get
スマートフォンサイトで好まれるユーザーインターフェイス【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch
jQuery UIをタッチデバイスに対応させる ライブラリ・jQuery UI Touch Punchの ご紹介です。いつか使うかも、と思った ので備忘録。これを見て、そういやスマ フォでjQuery UIを試したことが無いこと に気が付いた次第です・・ jQuery UIのドラッグとかリサイズとかソートとかをiPhoneなどに対応させるためのライブラリです。そういやjQuery UIはタッチデバイスで動くのか試したことありませんでしたが、ドラッグやリサイズはそのままでは使えませんでした。 これは需要あるんじゃないですかね。このライブラリでタッチデバイスに対応させられるのは以下の通り。 DraggableDroppableResizableSelectableSortableAccordionAutocompleteDialogProgressbarSlider 実機でテストしましたが、ド
ThemeRoller | jQuery Mobile
/*! * jQuery Mobile 1.4.5 * Git HEAD hash: 68e55e78b292634d3991c795f06f5e37a512decc <> Date: Fri Oct 31 2014 17:33:30 UTC * http://jquerymobile.com * * Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors * Released under the MIT license. * http://jquery.org/license * */ /* Globals */ /* Font --------------------------------------------------------------------------------------------
スマートフォン向けサイトのラジオボタンを良さ気な感じに。
昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。 なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。 ラジオボタンといえば、よく見かけるのは性別の選択とかでしょうか。 何にせよ、下記のような感じです。 ラジオボタン1 ラジオボタン2 んで、これをiPhoneとかで見ると、何の変哲もない普通のラジオボタンですが、iPhoneってラベル部分をタップしても選択できなかったりして使い勝手が悪いと思ったりしませんか？ ボクが持ってる、iPod Touch では反応してくれなかったです。 そこで、ラジオボタンをもっと良さ気なボタンっぽくしてみたら良いんじゃないかと思ったのでやってみました。 サンプルはiPhoneかwebkit系ブラ
Live Commerce ! for iPhone ショッピングカート - iPhone対応ECサイトが簡単に作れる
iPhoneに対応させたLive Commerceショッピングカートです。iPhone対応ECサイトが簡単に作れますLive Commerce for iPhone とはオープンソースで配布されるECサイト構築ソリューションLive Commerce をiPhone専用のデザインに対応させたテーマのことです。このテーマをインストールすることで、iPhone端末からもネットショッピングができるようになります。 iPhoneショッピングカートの背景 30代以上のビジネスユースにとってiPhoneの購入目的はPCの代用的な使い方が多いようです。 男性はPC、女性はケータイでネットショッピングという調査結果から分かる通り、iPhoneをPCの代用として利用しているユーザーにとっては今後iPhoneに対応したECサイトが増えれば、男性のネットショッピングのあり方が大きく変わる可能性があります。
Announcing jQuery Mobile 1.1.0 | jQuery Mobile
The jQuery Mobile team is excited to announce the release of version 1.1.0. This release has been a real labor of love, with hundreds of improvements, big and small, to make jQuery Mobile feel faster, smoother and more polished across the board. The most notable improvements in 1.1.0 are true fixed toolbars, completely re-vamped animated page transitions and AJAX loader, refined form element desig
jQuery Mobile 1.1、正式版が早くも登場！
昨年11月にjQuery Mobile 1.0として最初の正式版が登場してからわずか5カ月。最初の大きなバージョンアップとなるjQuery Mobile 1.1.0がリリースされました。 jQuery Mobileは、HTML5のタグを書くだけでプログラミングをせずにモバイルアプリケーションが作れるJavaScriptのフレームワーク。開発されたアプリケーションは、iOS、Android、WebOS、Windows Moblie、Symbianなどさまざまなモバイルプラットフォームで動作します。 jQuery Mobile 1.1では、画面上部もしくは下部につねに表示されるFixed Toolar（固定ツールバー）のちらつきがなくなった点、画面遷移がよりスムーズになった点などの改善が行われています。 固定ツールバーがCSSベースに モバイルデバイスのユーザーインターフェイスとして、画面上部
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
info-architecture.jp
http://www.responsivewebcss.com/
1一日5分から実践可能！セミナー映像視聴ページ | 一日5分から実践可能！PCアフィリ・携帯アフィリ・スマホアフィリを同時に行う！新型アフィリエイト