第2回 イケてないスマートフォン対応7つのパターン | gihyo.jp
前回はスマートフォン対応をしていないサイトの話でしたが、今回は「せっかくスマートフォン対応をしているのに、対応方法が微妙なために、ユーザビリティが低下している」という例をいくつか見ていくことにしましょう。 もちろん、ここで紹介している点を解消すれば最高に使いやすいスマートフォンサイトになるわけではありませんが、「こういうサイトでイライラさせられる」という具体例を確認することで、改善への第一歩を踏み出すことができるでしょう。 スマートフォン対応しているのはトップページだけで、ほかのページは未対応 タイトルですでにすべてを語り尽くしていますが、「トップページにアクセスしたらスマートフォン対応されているのに、深い階層のページにアクセスすると普通にPCページになってしまう」というタイプのサイトです。最近減ってきている……気もするのですが、探したらまだけっこう見つかりました。 たとえば以下は、大
ブログのスマートフォン対応の際に考えたこと
遅ればせながら、2014年8月にこのブログのスマートフォン対応を行いました。 iPhone, iPod touch, Android, Windows Phone, BlackBerry などの各種スマートフォンのほか、 Kindle, Sony Tablet, Nexus 7 などのタブレットではスマートフォン用のテーマで表示されるはずです。 iPad は、PC 用のテーマのほうが見やすいと感じたのでそのままにしています。 なぜ今までスマートフォン用のテーマを作っていなかったのか 一番大きな理由は「見づらいというご意見をいただかなかったから」です。 また、昨年まではスマートフォンからのアクセスは 10% ちょっとしかなかったため、それほど必要性を感じていませんでした。 とはいえ全く何の対応もしていなかったわけではなく、iPhone や Android の場合は、本文のフォントサイズが少し
flipsnap.jsというのを書いた - Webtech Walker
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
高品質なものを探すのが難しい、タッチデバイスのジェスチャーをイラスト化したアイコン素材 -Touch Gesture Icons
タッチデバイスで人気が高いジェスチャーをイラスト化したアイコン素材を紹介します。 作者の方より、既存の30種類から新たに18種類のジェスチャーを追加したよ、と連絡を受けました。 Touch Gesture Icons ダウンロードできる素材のフォーマットは、PSDもベクターも揃っています。 .png（すぐ使う用） .psd（ウェブ制作用） .eps（紙用、いろいろ変更したい用） PNGは48, 64, 128, 256, 512pxの5種類のサイズが用意されており、PSDは.aiがスマートオブジェクトとして使われています。 利用にあたっては個人でも商用でも無料、とのことです。 詳しくはダウンロードファイルの「License.txt」をご覧ください。 ジェスチャーは、全部で48種類。 まずは、既存の30種類。タップ・ピンチ・スワイプなどが揃っています。
Android・iPhoneをノートPCのように使える「ClamBook」
スマートフォンに搭載されたプロセッサの処理能力を借りることで、スマートフォンをノートPCのように使えるようにするデバイスが「ClamBook」です。 ClamBook Android and iPhone Laptop Dock by Clamcase http://clamcase.com/clambook-android-and-iphone-laptop-dock.html アルミ筐体でできたClamBookは一見すると非常に薄く作られたノートPCのように見えますが、実際にはプロセッサやストレージを内部に持っていません。ClamBookを使うためにはスマートフォンと接続し、そのプロセッサのパワーを借りる形でノートPCのように使用できるようになるのです。 本体はアルミ製 ディスプレイは16:9のフルHDパネルを搭載。フルサイズキーボードとマルチタッチ対応のトラックパッドを使って操作や入
ECはもうスマホの時代。楽天もZOZOも売上げの４割へ | O2OとオムニチャネルならスマートフォンECラボ
矢野経済研究所の発表によると、スマートフォンによる国内EC市場の市場規模は2012年には8450億円でした。 これが、2013年には、１兆3,469億円と159％成長する見通しだそうです。 国内スマートフォン・コマース市場規模予測（矢野経済研究所） 自分の周りを見渡しても、スマートフォンの普及率の上昇とともに、スマホでECをする人が増えている実感があります。 そこで、国内主要ECサイトの動向をみてみると、かなり驚きの数字がでてきます。 ■国内メジャーECサイトはスマホへシフトが鮮明 ZOZOTOWNを運営するスタートトゥデイ決算説明資料によると、2014年第第一四半期で売上げの4３％がスマートフォンからとなっています。 モバイル（ガラケー）がどんどんへりスマートフォンが急拡大。 じりじりPCが減ってきている感じですね このままの推移でいくと、PCを逆転するのは時間の問題です。 スタートトゥ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
