16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
AMPの対応方法まとめ
Googleが「Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)」という目的で始めたAMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。 Q&A対応するとどうなるの？カルーセルに掲載されるモバイルでのGoogleの検索結果にカルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。 AMPのマークが付くモバイルでのGoogleの検索結果に雷のマークが付きます。そして検索結果からのアクセスは全てAMPのページになります。開発者もユーザーも、通常のページかAMPのページかを選択することができません。 アクセスは増える？増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その
PCページがスマートフォンやタブレットで崩れているときの対策まとめ
で、実際にスマホ版を用意していないWebサイトであったとしてもPCサイトは大抵スマートフォンの画面サイズに合わせた形で普通に表示されるわけですが、サイト、端末によっては微妙に崩れたりしてしまっていることもあると思います。もうリニューアルする意義がない、もしくはいずれするけど今とりあえずこれだけは直したい！というサイトを持っている人のために症状別に解説、対処法を紹介したいと思います。 フォントが変わる まずは凡ミス的なものから。PCサイトではゴシック体で表示されていたものが、スマートフォンで見ると明朝体（とか丸ゴシックとか）で表示されるという場合ですね。 ただbody内のp要素にテキストを入れただけのものをブラウザーに表示させた場合、例えばPCブラウザーでは大抵ゴシック体で表示されますが、新しめのiPhoneでは明朝体、Androidの一部の機種では丸ゴシックで表示されたりもします。これはフ
しろココ
タグ 20代大学生制作編集口コミ増えすぎ売上の高い会社売上高外資系企業多い大手出遅れ女性安い将来性就活就活サイト就活時期就職平均年収初心者内定出るのが早い後悔レバテックキャリアメーカー系メールメイテックネクストやばいやめとけランキングランクレバテックルーキー入校面談レベルワークポート上場企業中小企業人気ベンチャー作り方信頼できる儲かる職種平均転職回数情報システムマイナビIT AGENT超大手種類稼げる仕事第二新卒給料編集制作落ちた評判転職社内SE転職エージェント転職サイト転職ドラフト辛い辞めたい闇隠れた優良企業離職率社内SE転職ナビ相談先指名なし株式会社キャリアデザインセンター文系料金断られた新卒既卒早期選考企業未経験株式会社クリーク･アンド･リバー社登録方法機械学習エンジニア比較派遣社員炎上無謀特定技術派遣独立系理系大学院マスメディアンホワイト企業30代アプリWEBエンジニアWebデザイ
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
サイトをモバイル対応化させたら良い事しか無かったのでまとめてみた！[WordPress]
4/21以降、グーグルがスマホ対応サイトの優遇化政策をするということで、慌ててサイトをスマホ対応化させてから約１ヶ月半経ちました。今回はサイトをモバイル対応化したことで変化した事について数字を見ながら紹介してみようかと思います。結果的にはほとんど「良い事しか起こらなかった！」と言って良い感じです。 順位をガッツリ落とされる？？ ２月末にGoogleから非常に重要なアナウンスがありました。 -(参考)Google、「スマホ対応」をランキング要因に利用することを決定。4/21から導入。 簡単に言えば、「4/21以降、モバイル端末での検索結果はモバイル対応化しているサイトを優遇しますよ！（=モバイル対応してないサイトは順位落とすからな！）」ということです。 結構前から本家のブログであるstudio9もモバイル対応化しないとなぁと思いつつも重い腰が上がらない状態が続いていたのですが、上記アナウンス
![サイトをモバイル対応化させたら良い事しか無かったのでまとめてみた！[WordPress]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9145897df30d90f484a030669895987ff25a3a89/height=288;version=1;width=512/https%3A%2F%2Fpersonal-studio9.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fth02-570x680.jpg)
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 | アプリマーケティング研究所
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 今回は350万ダウンロード突破、家計簿アプリの「Zaim」さんにお話を伺いました。ユーザーが伸びたタイミングや、UI改善の失敗談など。 ※株式会社Zaim 代表取締役 閑歳 孝子さん。 「Zaim」の近況について 「Zaim」のユーザー数は今どのぐらいですか？ 閑歳： 2011年7月にリリースして、350万ダウンロードを超えています。OSで言うとiOSの方が多いですが、最近はAndroidも伸びています。今も広告費は使っていません。 今までに、ユーザーが大きく伸びたタイミングはありますか？ 閑歳： 去年はダウンロード数がグッと伸びた印象があります。2013年の終わり頃から、スマホをみんなが本当につかうようになって、すごく高齢者と若年層が増えました。 データ
【楽天ショップ担当者必見!!】スマホ商品ページに、PC版商品ページをまるっと載せる方法
【楽天ショップ担当者必見!!】スマホ商品ページに、PC版商品ページをまるっと載せる方法 2013 12/27 カテゴリー : 楽天Tips . 楽天販促ノウハウ スマホ . 楽天ページ編集 . 楽天販促ノウハウ コメントを書く こんにちは。身体を曲げるとたまに、肋骨が重なった感覚になり、うっ、となるオガリア中村です。共感できる方探しています。 本日は、楽天ショップのスマートフォン転換率向上施策について書きます。 スマホとなると、ページ制作に必要なスキルやかかるコストがあやふやで、足踏みされている店長様も多いのではないでしょうか？ そこでまずオススメしたいのが、どなたでも今すぐ出来る「PC版商品ページのキャプチャ画像貼付け」です。 LPを移植するだけで、転換率が劇的UP！ そんな単純な事だけで効果はあるのか？と思ってしまいますが… 実際にこの施策をスマホ広告で実践した弊社店舗では、スマホの転
Yahoo!ニュースの見出し行間「5ピクセルの差」に見えた光～ヒートマップでUI改善
社長の宮坂がゲスト出演した、11月27日放送のテレビ東京系「カンブリア宮殿」。Yahoo!ニュースの裏側にも触れられており、ご覧になった方もいらっしゃるかもしれません。 （放送バックナンバー：爆走する国民的サイト！これがネットの底力だ！－ テレビ東京） 公式ブログ新コーナー「news HACK」ではこれまで、Yahoo!ニュースにおけるスマホ利用の成長などをお伝えしてきましたが、今回は、同番組の中でも登場したYahoo!ニュースのUI改善事例について、番組で触れられなかった部分も加えて詳しくお伝えしたいと思います。 これからご紹介するのは、スマホブラウザ版Yahoo! JAPANトップページのA/Bテスト事例（※Yahoo!ニュースのアプリ版との違いなどについては、こちらの記事をご参照ください）。 テスト結果は現在のスマホ版トップページに使用されているものと同様ですが、まず具体的な説明に入
iPhone 6でのスマートフォンデザイン
iPhone 6でのスマートフォンデザイン iPhone 6の発売日を明日に控え今後のスマートフォンサイトデザインをどのようにしていけばよいかSNSで見かける悲鳴を拾い上げながらQ＆A形式で答えて見たいと思います。(実物を手に入れて間違っていたら後日修正します) Q.1 iPhone 6の解像度が750×1334でdevice-pixel-ratioが2だとCSS解像度は375×667だけど横幅320pxでデザインしても大丈夫？ A.1 横幅320pxでデザインしても大丈夫。基本最近のスマホ対応では多解像度に対してリキッドでフィットするようにするのが主流。 リキッドの場合ベースデザイン320pxを375pxに広げて表現するのは難しくないが、ベースデザイン375pxを縮めて320pxで表現するのは至難の業なのでスマートフォンデバイスでの最小幅である320pxでのデザインは当分続きます。 Q.
【★★★ - ｊＱｕｕｅｒｙ】 - クリックで開くアコーディオンメニュー
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
.htaccess(mod_rewrite)でスマートフォン向けページへリダイレクトさせる方法 | Another Sky
.htaccess(Apacheのモジュールmod_rewrite)を利用して、スマートフォンでWebサイトにアクセスされた時に、自動でスマートフォン向けページにリダイレクトする方法を検討してみたので、記録しておくことにします。 前提条件 同一ドメイン内にスマートフォン向けページのディレクトリを用意する スマートフォン向けページのディレクトリを「/spn」とする ユーザーの希望に応じてPC向けサイト・スマートフォン向けサイトを選択して閲覧できるようにする .htaccessの設定例 RewriteEngine On RewriteCond % !^/spn/.*$ RewriteCond % (iPhone|iPod|Android.*Mobile|BlackBerry|Windows.Phone) [NC] RewriteCond % !iPad [NC] RewriteCond % !
JavaScriptで振り分けてスマホサイト完成！ (1/5)
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。 ページ内リンクを張る 今回制作しているスマートフォンサイトは、ページ内の各コーナーに移動できるナビゲーション（ジャンプボタン）を設置しています。まずはジャンプボタンにページ内リンクを設定しましょう。ページ内リンクは、PCサイトと同様、リンク先の要素にID属性を振り、a要素を次のように記述します。 <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul> ボタン全体にリンクを貼る ページ内リンクを設定したサ
これがスマートフォン向けサイトを作るときの 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>に見えるのが隠し味になっていま
これさえやれば1.X倍!?実際に効果が出たEFOオススメ施策ベスト10 | エフトラEFOブログ
EFOは、実際に施策を実行し、改善を繰り返すことが重要です。 当社でも、運営メディアのフォームで常に効果分析と改善を繰り返しています。 以前発表したスライドの中でもお伝えしたのですが、 今回は、当社運営メディアや当社EFOツール「エフトラEFO」をご導入いただいた企業様のフォームで実際に効果のあった施策を、その改善率とともにランキング形式でご紹介したいと思います。 まずは10位から6位のご紹介 それではさっそく、紹介していきます！ 10～6位目次 10位 住所自動入力 9位 スマートフォンに適した入力支援 8位 ガイド表示 7位 初期文言表示 6位 リアルタイムアラート 10位 住所自動入力 住所自動入力とは、郵便番号を入れると住所が自動で入る機能のことです。 郵便番号で住所を入力してくれるタイプのフォームはたくさんありますが、郵便番号入力後、検索ボタンなどを押下する必要なものがほと
ライバルを出し抜け！スマートフォンサイト制作でコンバージョン率を上げる7つのポイント｜MarTechLab（マーテックラボ）
LPO研究所所長の鎌田です。 今回は「スマートフォンサイトでコンバージョン率を上げるための重要ポイント」をお伝えします。 レスポンシブデザインだの、HTML5だのといった技術的な話は一切しません。あくまで「コンバージョンに直結するスマートフォンサイト制作の考え方、施策」についてお伝えします。 時代はスマートフォンだ、マルチデバイスだと騒がれてはいるものの、実際のところ、Web上でスマートフォンからのコンバージョン獲得を意識して対策できている会社はまだ多くありません。今のうちにしっかりと対策をすれば、PCでは激戦区のジャンルであっても、スマートフォンサイトで出し抜ける可能性は大いにあります。 それでは早速いってみましょう。 目次 スマホユーザビリティは右手親指を意識しろ スマホサイトは読み込み速度を重視しろ リスティングもスマホ向けに最適化しろ スマホサイトではオファーを下げろ スマホではス
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
jQuery（JavaScript）でiPhone、iPad、Android向けにアラートを表示してURLをリダイレクト（選択）させる方法｜BLACKFLAG
少し前に「jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別して URLをリダイレクトする方法」と題して、 スマホ系のデバイスを判別してURLをリダイレクトさせる方法を紹介しましたが、 ユニクロさんやほぼ日さんのサイトではスマホ系デバイスでアクセスすると アラートでスマホ向けのサイトがあることをメッセージで促し、 どっちのサイトへアクセスするかユーザーに選択させる方式をとっており このUIがおもしろかったので試しにｊQueryを使って同じ動作を作ってみました。 例として、サイト構成が以下の様なURLとします。 ——————————————————- 【PC向けサイト】 ｈｔｔｐ：//black-flag.net/sample/ 【スマートフォン向けサイト】 ｈｔｔｐ：//black-flag.net/sample/sp/ ————————————
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
グーグルで「スマホ対応」ラベルを出すために僕がやった3つのこと | 初代編集長ブログ―安田英久
