2016年8月14日 UXデザイン, Webデザイン, スマートフォン 私の母は某アーティストの大ファン。20年以上ファンクラブにも入り続けている熱狂っぷりです。過去記事「シニア層のためのWebサイトユーザビリティ」では、そのアーティストのグッズを購入しようと奮闘していた母ですが、今度は別の目的でスマートフォン版のそのサイトを操作したみたいです。今回は私がそれを横目に見ていて感じたことを書いてみます。 ↑私が10年以上利用している会計ソフト！ ライブチケットの当選確認をしたかった母 ここ数年はMacを触る機会もほとんどなくなり、スマートフォンでWebサイトの閲覧をしている母。そして秋に行われる某アーティストのツアーのチケットに応募しており、その当選発表があったので確認がしたかったようです。 それを聞いて「私がやるよ〜」と申し出たものの、娘に頼ってはいけない！という母の思いからか、何度手伝う

スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは

と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view

クライアントワークなどで、PCとスマホをわけて表示したいときに利用します。 PCとスマホのテーマを別々に用意し、スイッチするようにするプラグインです。 スマホ対応プラグインのように、ビューを自動生成（というか、標準テーマが入っている）ものではありません。 ・「スマホ・タブレット・携帯・ゲーム系」の各端末に対して任意のテーマを適用できる ・各端末のUA設定を管理画面から変更可能 ・「PC Switcher」＝「　PC版　｜　スマホ版　」みたいに フッターに入っている切り替えボタンを自動で挿入可能で、もちろんカスタマイズも可能 ・スマホ表示を用意していないページなど、一部のページに切り替え無効設定ができる

「スマホしか持っていない」が高じて、「スマホ以外触らない」という10代が増えてきた。高校生や大学生には、「フォルダ」「クリック」「ドラッグアンドドロップ」などは知らない、分からないという人は多い。 「10代だけでなく、新入社員も同じようなもの」という話を聞いた。ある会社では、新入社員のほぼ全員がPCが使えないため、最初の1週間はキーボード練習やPCの使い方講習に明け暮れたという。IT関連部門の新入社員も例外ではない。「現在のスキルではなく将来のポテンシャルを見込んで採用した」と人事採用担当者は言う。 ジャストシステムの「モバイル＆ソーシャルメディア月次定点観測（総集編）」（2015年2月）によると、15～19歳における12月の主要メディアの平均接触時間は、「スマートフォンからのインターネット接続」が135.3分でトップ。「PCからのインターネット接続」（104.1分）、「テレビ」（101.

[レベル: 初・中・上級] Googleは、スマホ対応しているかどうかをモバイル検索のランキング要因として使用することを発表しました。 4月21日からの導入を予定しています。 またApp Indexingに対応したアプリコンテンツもランキング要因として利用するようにしました。 こちらは今日（現地時間の2月26日）から導入されています。 モバイルフレンドリーが単なるラベル表示からランキング要因に 昨年11月に、そのページがスマートフォンに対応しているときに、「Mobile-friendly」（モバイル フレンドリー）というラベルをGoogleはモバイル検索結果に表示するようにしました。 日本には、翌月の12月に導入されました。 「スマホ対応」というラベルが付きます。 導入時点では、「スマホ対応」ラベルは単純に表示だけの仕様でした。 スマホ対応しているかどうかはランキング要因にはなっていません

[対象: 初〜中級] この記事では、モバイル向けサイトのユーザビリティやユーザーエクスペリエンスの向上に役立つ、Googleが提供する公式ツールを5つ紹介します。 Chrome PageSpeed Insights Mobile-Friendly Test Fetch as Google モバイルユーザビリティ レポート 順に説明します。 Chrome Google Chromeの「デベロッパー ツール」では、スマートフォン端末で見たときのそのページの表示をエミュレーションできます。 「デベロッパー ツール」は次の手順で起動します。 [Google Chromeの設定]（右上の3本バー） − [その他のツール] − [デベロッパー ツール] Ctrl + Shift + i (Windows) / Cmd + Opt + i (Mac) スマホを表すアイコンをクリックするとスマホでの表示モ

スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に

WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場

CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a

1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる なぜ、スマホ未対応のホームページは時代遅れなの？ その答えは非常にシンプル。 なぜなら、今が「ほとんどの人がPCではなくスマホでホームページを見ている時代」だからです。 この数字が何を表しているかご存知でしょうか？ スマホ： 83.4% パソコン： 69.1% これは、「総務省」が発表した2019年のIT機器の世帯保有率です。（詳しいデータはこちら） なんと、パソコンよりスマホを持つ人のほうがはるかに多いんですね！ こんな世の中ですから、よりたくさんの人にホームページを見てもらいたいなら、スマホサイト

あんどろいど速報＠管理人さん@android_sokuho どうも、2012年12月23日に2周年を迎えたあんどろいど速報の管理人です。 Twitterは、更新情報だけツイートする@androidkenと更新情報としょうもないことを垂れ流す@android_sokuhoがあるよ。 あんどろいど速報＠管理人さん@android_sokuho 2周年ということで、せっかくだし何か特別記事を作りたいなぁということで登場しました。 ちなみに、去年は特に何もやってなかったようですね。 あんどろいど速報＠管理人さん@android_sokuho 「あんどろいど速報管理人が見るこの2年間のAndroidとこれからのAndroid」みたいな誰得記事を書こうと、スマートフォンを発売日順に並べたリストを眺めていたんですが、小学生並みの感想しかでてこなさそうだったので辞めました☆（ゝω・） あんどろいど速報＠管

アプリで朝まで無料通話、メールは「使わない」――女子高生が語る、今どきの“スマホ事情”（1/2 ページ） 「プリクラ帳は作らなくなりました」「デコメも使わなくなりました」――。 友達と撮ったプリクラを交換し合い、絵文字たっぷりのメールを延々と交わす――そんな“女子高生像”はもう古いのかもしれない。サイバーエージェントが自社サービスユーザーを対象に行った座談会と調査から、今どきの女子高生のスマートフォン事情が見えてきた。 調査は、利用者の95％が女性で13～19歳が過半数を占めるという“ホムペ”（個人サイト）作成アプリ「Candy」上で実施。また7月にはCandyユーザーの女子高生を対象に、座談会形式のヒアリングを開催。アドレス交換の方法やスマートフォン上でのお金の使い方など、5人の現役女子高生の口から率直なスマートフォン事情が語られた。 スマホにしてから「メールを使わなくなった」 座談会に

PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります PC用のサイトでは、スマートフォンで見た場合のみ表示される「スマートフォンサイトを見る」なリンクが設定可能で、これがクリックされるとスマートフォン用のURLに転送され1の機能が復活します。 個々のページでどのPCページとスマートフォンページが対応