モバイルUXデザイン６つの「お約束」＋α
2012年7月、ウィスコンシン州のマディソンという美しい街で開催されるUXMadと呼ばれる会議に出席するために、熱心なUXの専門家集団が集結しました。講演者の1人であるHampton Catlin氏は、「モバイルデザインの6つのお約束」についての講演を行いました。今回、私は彼の6つのお約束と、私が改良を加えた自由なヒューリスティック・アプローチについて、皆さんと情報を共有したいと思います。 Hampton氏が提唱しているモバイルデザインのお約束は、彼が手がけたウィキペディアモバイルのデザインや、Moovwebにおけるデザインでの経験に基づいています。以下に彼の法則についてまとめました。 I. シンプルであること 画面のサイズや帯域、処理速度などのモバイルデバイスの制約を考慮すると、読みづらい複雑なページは問題外です。要素、画像、または選択肢が増えるほど、1つのページで読み込まなければならな
Googleのマイリー・オイェが語るGoogleの大進化 ―― モバイル検索はここまで進んでいる #smxmilan
[レベル: 中〜上級] この記事では、SMX Milan 2015のレポートとして、GoogleのMaile Ohye（マイリー・オイェ）氏のキーノートスピーチを紹介します。 マイリーさんは、マーケティングからGoogle検索の発展、ウェブの高速化など多岐に渡るテーマについて基調講演しました。 そのなかから、僕たちが特に今注目すべき「モバイル」に密接に関係する部分をまとめました。 知らなかったことや、知っていたけれど再確認することがたくさんあるはずです。 では行ってみましょう！ イントロダクション 猿から人へと進化してきたようにコンピュータの世界も進化してきました −− デスクトップ、ラップトップ、スマートフォン、タブレット。 そして、マイリーさんは次のような最新のデバイスに触れます。 Internet of Things（インターネット オブ シングス） Smart Car（スマート カ
cr_spwuy8-4919
スマートフォンサイトのデザインを担当することになったけど、「どういうデザインにすれば良いの？」「PCサイトとどう変えれば良いの？」とお悩みの方も多いのではないでしょうか？ PCサイトと同じようにデザインしたのでは、 サイズも使用環境も異なるために、使い勝手の悪いサイトになってしまいます。 成果を上げるスマートフォンサイトのデザインに最も必要なことは、利用者の「ユーザビリティ」を考えることです。 本記事では、サイト制作やデザインなども含めて幅広くWebマーケティングを担当している私が、スマートフォンサイトで確実に成果を出すために押さえておきたい「ユーザビリティ」の8つのポイントを、初心者の方でも分かるようにご説明いたします。 ぜひスマホサイトの改良に「ユーザビリティ」の視点を活用していきましょう！ スマートフォンサイトを作成する意味まず、そもそもの話にはなりますが、スマートフォンサイトを作成
Google Webmaster Help Center - I have a mobile site. How can I add it to Google's Mobile index?
Mobile site and mobile-first indexing best practices Google predominantly uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking. This is called mobile-first indexing. While it's not required to have a mobile version of your pages to have your content included in Google's Search results, it is very strongly recommended. These best practices apply t
企業のWebサイトを効率的にスマートフォンに対応させる4つの方法 | Web制作の株式会社クライマークス
スマートフォンが爆発的に普及し、今や自社サイトをスマートフォンなどマルチデバイスへ対応させることは、Web担当者にとって無視できない課題となってきました。とはいえ、従来PC向けWebサイトや携帯電話（フィーチャーフォン）向けWebサイトのみを構築・運用してきた企業にとって、更にスマートフォンサイトを導入するのは、コストや運用負荷の面で悩ましい問題です。 そこでこのコラムでは、単にPC用サイトや携帯電話用サイトとスマートフォンサイトとを別々に構築・運用するという方法以外に、効率的・効果的にスマートフォンサイトを導入するための方法を、メリット／デメリットを挙げながらご紹介します。 (1) PC用／スマートフォン用別々のサイトを用意し、CMSでコンテンツを一元管理する PCサイトとスマートフォンサイトをスクラッチで構築し、双方を一元管理できるCMSパッケージを導入する方法です。 初期導入の手間や
今すぐ使える！スマホLP最適化Tips6選！ | LISKUL
Web上のビジネスで成果を上げるには、利用者数が右肩上がりで伸び続けているスマートフォンを抑える必要があります。 その現状は誰しもが理解していると思いますが、具体的にどのようなスマートフォンページを作ればいいのかがわからないという人が多いのではないでしょうか。 そこで、すぐに使えるスマートフォン最適化のTipsを、ウェブマーケティングのプロがお教えいたします。 スマートフォンのサイトも最適化することで獲得率が150％になったりするので、まずは基礎的な要素を抑えて、ストレスの無いサイトを作りましょう 参考記事）ProFlowers Boosts Conversions on Mobile by 20% to 30% with Mobile-Optimized Site http://www.thinkwithgoogle.com/case-studies/proflowers.html ※ラ
スマホサイト最適化25の最新ルール | グロースハックジャパン | growth hack japan
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
スマートフォンサイトのコーディング 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担当者にとってWebとは異なる悩みがあります。 本連載では、エキサイト株式会社の岡田さんが自社アプリの制作で培ったノウハウをもとに、「失敗しないスマホアプリ」のつくり方とマーケティング手法を紹介します（編集部）。 「ランキングが上がらない」「開発費が回収できない」アプリを作って終わりにしない現場のノウハウを凝縮。 「DL数が伸びない」「DAUが増えない」「課金されない」スマホアプリビジネスの悩みを、ASO、広告運用、内部改善など、豊富な事例をもとに解説。iOS/Androidマーケの全体像がつかめる国内唯一のアプリマーケ実践本です。連載時から大幅に加筆修正し、最新情報を盛り込みました！ 事例に学ぶスマホアプリマーケティングの鉄則87
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
コレを抑えておけばOK！スマホサイト制作に役立つ記事・サイトまとめ！ | PLUS
一般企業サイトでもスマートフォンに対応するサイトが増えてきました。ちょっと前までは提案しても、もうちょっと先でいいよという話に落ち着いていたんですが、ようやく身近なクライアントも導入をはじめています。そこで今回は実際にスマホサイトを作る立場から、役に立ちそうな記事やサイトをまとめてみました。 スマホサイトのギャラリー 絶対見ておきたい有名企業のスマホサイトまとめ 優れたiPhoneサイトデザイン集 – iPhoneデザインボックス スマートフォンサイト デザイン集 AGT thinkthing スマホ制作に役立つ情報 【スマートフォンサイト制作の総まとめ 第1弾】スマホサイトデザインの基礎知識 少しのコードで実装可能な15のスマートフォンサイト用小技集 200サイトのiPhoneデザインを見て感じたスマートフォンの最適化 Webサイトのスマートフォン対応 7つの基本ルール スマー
パフォーマンスは技術課題ではなくデザインの課題
人気デザインギャラリーサイトから幾つかモバイル向け Web サイトのパフォーマンスを検証してみました。以下が各サイトのリクエスト数とファイルサイズになります。 FELISSIMO 500色の色えんぴつ: 81リクエスト / 1.94MB 旅館 大村屋 55リクエスト / 1.52MB UR オンラインストア 90リクエスト / 705kb JiNS PC 78リクエスト / 1.39MB らでぃっしゅレシピ 69リクエスト / 987kb 明治北海道十勝カマンベールチーズ 54リクエスト / 1.12MB いずれもスクリーンショットでは素晴らしい見た目で使いやすそうに見えますが、中身はかなり重いことが分かります。1MB 以下に抑えているサイトもありますが、それでもかなりリクエスト数が多いのが分かります。リクエスト数が多いということは、回線が安定しない場合、すべての要素が読み込まれない可能性
ユーザーがスマホサイトに求める 21 の事 | グーグル アドワーズ ラボ
10月 4, 2012 | モバイル広告, 海外情報 日本でもスマートフォンの需要は増え続けていますし、それに伴いインターネットの広告業界でもスマートフォンの対応を迫られています。 そこで、 Google Mobile Ads Blog（英語） Marketing Land（英語） にてスマホサイトに関する調査の面白いデータが公開されていたので、このブログを読んでいる方々にもシェアしたいと思います。 . ① 96% のスマートフォンユーザーは、スマートフォンに最適化されていないサイトを開いたことがある [Twitter でつぶやく] . ② 67% のユーザーは、スマートフォンに最適化されたサイトの方が、商品を購入したりサービスの申し込みをする傾向にある [Twitter でつぶやく] . ③ 74% のユーザーは、スマートフォンに最適化されたサイトの方が、リピートする可能性が高い [Tw
UI : Digifiction WEBディレクターのチラシの裏
ここ最近スマホ用のUIフレームワークを比較検討をする機会があり、一言にスマホUIフレームワークといっても、各々一長一短があり、用途や目的によって使い分ける必要もあると感じましたので、本日はそれぞれのUIフレームワークを「導入の手軽さ」「カスタマイズ性」「動作の安定感」「デザインの美しさ」「対応範囲」の5軸で評価してみました。 今回比較するのは以下の4つ 1. JQueryMobile 以前のエントリーでも紹介した、言わずと知れたJQueyの正統なモバイル版フレームワークです。スマホのフレームワークではこれがデファクトスタンダードになりつつあります。 2. iUI これも以前のエントリーでも紹介しましたが、iPhone風のUIテイストのフレームワークです。もちろんiPhone以外にもAndroidやその他のプラットフォームにマッチしたテーマもいくつか用意されています。 3. Sencha T
スマホアプリ開発現場におけるUI採用の試行錯誤 - ロケタッチの場合 - : LINE Corporation ディレクターブログ
こんにちは、ユティです。ロケタッチを担当しています。 スマートフォンで展開するサービスの開発では、1つ大事なことがあります。それは、4インチ前後の画面にすべてを詰め込まなくてはいけないということです。これ以上、画面のサイズが大きくなると片手で持てなくなるので、この4インチ前後というサイズのトレンドはしばらく続くでしょう。アプリが複雑になればなるほど、この狭い画面に展開する UI で悩むことになり、その度に私たちはいろいろな方法でその壁を乗り越えていくことになります。 ロケタッチも、リリース以降機能がどんどんと増え、その度にアプリ内の UI、特にメニューのところをどうしようかという話になりました。今回は、そのメニュー周りのUIを中心に、近頃のロケタッチのUI事情についてご紹介したいと思います。 代表的なメニューUIと、トレンドのスライドメニュー まず、過去のロケタッチを例に、多くのスマートフ
2012スマートフォンサイト編｜Webユーザビリティランキング｜トライベック・ブランド戦略研究所
トライベック株式会社は、スマートフォンで主要サービスを展開している企業のうち、ポータルサイト、ECサイト、企業サイト、特定ジャンルの専門サイト（不動産、金融など特定ジャンルや用途に特化したサイト）の4分類30サイトを抽出し、対象となるスマートフォンサイトに対してユーザビリティ診断を実施しました。 ※ A軸:アクセス性、B軸:サイト全体の明快性、C軸:ナビゲーションの使いやすさ、D軸:コンテンツの適切性、E軸:ヘルプ・安全性 ※ 総合スコアは、5軸に傾斜配分をかけて割り出したものであり、5軸の単純平均ではありません。（満点＝100点） 順位 サイト名 総合スコア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Appealing | Mobile UI Animations
事例紹介 | 株式会社インフォバーン
WEBSITE.WS - Your Internet Address For Life™