スマホのメニューデザインに悩んだらこれ！パターン別サンプル36選 | LISKUL
スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で
Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ
スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しかし分かりにくい、使いにくいといった問題点があります。ハンバーガーメニューに代わる、より分かりやすく使いやすいスマホ向けのナビゲーションを紹介します。
モバイルファーストインデックスについてGoogleに何でも聞いてみた #inhouseseo ―― 内部リンクの評価は? 導入時期は? 分割数が異なるページネーションは? など
In-house SEO Meetupが主催したGoogle MFI Nightで、Google社員にさまざまな疑問を質問するAMA with Google セッションを先週金曜日の記事でレポートしました。 日本語検索独自の品質評価アップデートがテーマでしたが、このイベントのメインテーマはモバイル ファースト インデックス (MFI) です。 当然AMAもMFI関連の質問が大部分を占めていました。 そこでこの記事では、Googleの金谷さんと長山さんを相手にしたMFIについてのQ&Aをレポートします。 MFIに関して2人のGoogle社員に何でも質問してみた [質問に答える長山さん] Q. 内部リンクの必要性 モバイル向けページではUXを考慮して、内部リンクをPC向けページよりも減らしている。 しかし、内部リンクが評価（ランキング）にも影響するなら、PC向けページと同じリンクをモバイル向け
レスポンシブWebデザインで成功するUI／UXのポイント5つ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。 これまでのWebにおけるUI／UX これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基本になっていました。 当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで対象を動かしたりする動作がメインになります。 UI／UXで言えば、ボタンをクリックするにしても、マウスでカーソルを移動させればボタンの色が変わったり、カーソルの矢印が人の指に変わったりするマウスオーバーアクションと言われるものです。 テキストリンクであれば、カーソルを対象に持って行くと、テキスト下線が消え、カラーが変わるなどの変化が当たり前になっていました。すべてはマウスでの移動させることが中心に
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
スマホサイトUI改善を通じてわかった、CVR向上の5つのポイント
ジョブセンスではユーザーの半数以上がスマートフォン経由であり、スマートフォンサイトのUI改善に力を入れています。 その中の取り組みの一環として、データアーティスト株式会社様にご協力いただき、スマートフォンサイトを対象に、多変量テストを行いました。多変量テストとは、複数の要素を組み合わせ、どの要素の組み合わせが最も効果が高いかをテストするものです。本取り組みでは、まず各エリアごとにクリエイティブのA/Bテストを行い、次に、成果の良かったクリエイティブの組み合わせを多変量テストで決定しました。 今回はそこで得た学びをご紹介したいと思います。1～3で個別のA/Bテストについて、4で多変量テストについて、5で本取り組みを通じて得られた全般的な学びについて述べてまいります。 1. 導線周りのコンバージョン率改善度は大きいジョブセンスでは、求人案件への応募をコンバージョンに置いています。 今回のA/B
【UI/UX改善】CVRを向上させるスマホサイトのポイント10選 | LISKUL
「PCやサイトのスマホ版を作ったけど、思うように成果が上がらない・・・」「どうすれば成果の上がるスマートフォンサイトを作れるのだろうか・・・」とお悩みのweb担当者の皆様へ。 その答えは、「UI/UXの改善」にあります。 多くの企業がスマホサイトで成功していない原因としてありがちなのが「PCサイトを安易にスマホサイト風に変換しているだけ」というパターンです。 そのため、スマホとPCの違いを考慮して、スマートフォンでのユーザー行動を意識したUI/UXに改善するだけでも、CVRは簡単かつ速攻でアップするんです！ そこで、今回はCVRを向上させるためのスマホサイトのUI/UXを改善するためのチェックポイントをご紹介いたします。ぜひ皆様のWebサイトの改善にお役立てください！ サイトUIを改善するための分析手法を知りたい方は、こちらの資料を手元に置いてみてみてください。 ※本記事は2014年7月8
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
スマホサイト最適化25の最新ルール | グロースハックジャパン | growth hack japan
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
米国市場の高校サイトでは、今、何が起きているのか？
ブログサービス「マーケター通信」をご利用の皆さまへ 平素はITmedia マーケティングをご愛読いただき、誠にありがとうございます。 当サイトではこれまで、関連ブログサービスとして「マーケター通信」を長年にわたり運営してまいりましたが、全体的な利用の減少を鑑み、2020年9月30日にサービスを終了させることになりました。 このような結果になり残念ですが、何卒ご理解いただけますと幸いです。これまでご利用いただきましたことに対し、あらためてお礼申し上げます。 尚、ITmedia マーケティングは従来通り更新を続けますので、引き続きよろしくお願いいたします。 サービス終了までのスケジュール、および、これまで登録していただいたブログ記事の取り扱いにつきましては、以下の記載をご確認ください。 スケジュール 2020年9月25日（金）
スマホデザインで見やすいサイズ、行間は？デフォルトのアプリ等を調べてみた｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot
Googleが調査したスマホサイトで重要な25項目！サイトの収入、アクセスアップを狙うなら必見
どうも。スズキ（@TwinTKchan）です。Googleが提唱するモバイルサイト25の指針がサイト運営者にとって、必読だと思ったので紹介します。 これから、モバイルサイトへの流入はさらに増えていきますので、サイトのKPIを高めるためにもぜひチェックしておきましょう。ブログでアフィリエイト収入を得たいなら、必見ですよ。 Googleが教えてくれるモバイルサイト25の指針 Google Logo in Building43 / Robert Scoble Google先生がユーザーの利便性を高めるために25個の教えを共有してくれました。 あらゆるサイズのデバイスを通じて、ユーザーに最適な閲覧環境を提供することは、長期的にユーザーを増やし、コンテンツを収益化していく上で大変重要なポイントです。これを受けて Google では、119 時間にわたるユーザビリティ テストを行い、モバイル サイト設
ライバルを出し抜け！スマートフォンサイト制作でコンバージョン率を上げる7つのポイント｜MarTechLab（マーテックラボ）
LPO研究所所長の鎌田です。 今回は「スマートフォンサイトでコンバージョン率を上げるための重要ポイント」をお伝えします。 レスポンシブデザインだの、HTML5だのといった技術的な話は一切しません。あくまで「コンバージョンに直結するスマートフォンサイト制作の考え方、施策」についてお伝えします。 時代はスマートフォンだ、マルチデバイスだと騒がれてはいるものの、実際のところ、Web上でスマートフォンからのコンバージョン獲得を意識して対策できている会社はまだ多くありません。今のうちにしっかりと対策をすれば、PCでは激戦区のジャンルであっても、スマートフォンサイトで出し抜ける可能性は大いにあります。 それでは早速いってみましょう。 目次 スマホユーザビリティは右手親指を意識しろ スマホサイトは読み込み速度を重視しろ リスティングもスマホ向けに最適化しろ スマホサイトではオファーを下げろ スマホではス
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
スマートフォン向け検索でのランキングの変更について
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
[B! スマートフォン] ike_aijiのブックマーク
2012年7月、ウィスコンシン州のマディソンという美しい街で開催されるUXMadと呼ばれる会議に出席するために、熱心なUXの専門家集団が集結しました。講演者の1人であるHampton Catlin氏は、「モバイルデザインの6つのお約束」についての講演を行いました。今回、私は彼の6つのお約束と、私が改良を加えた自由なヒューリスティック・アプローチについて、皆さんと情報を共有したいと思います。 Hampton氏が提唱しているモバイルデザインのお約束は、彼が手がけたウィキペディアモバイルのデザインや、Moovwebにおけるデザインでの経験に基づいています。以下に彼の法則についてまとめました。 I. シンプルであること 画面のサイズや帯域、処理速度などのモバイルデバイスの制約を考慮すると、読みづらい複雑なページは問題外です。要素、画像、または選択肢が増えるほど、1つのページで読み込まなければならな
実例に見る スマートフォン対応サイトの６つのポイント | Web担当者Forum
2012年 - スマートフォンの「スタンダード化」の年会社の中でも、街を歩いていても、スマートフォンを使う人が珍しくなくなりました。 既に出荷台数はいわゆる「ガラケー」を追い抜いており、 2015年にはスマートフォンからのネット利用がパソコンを上回るとの 予測もなされています。 そんな中、事業を営まれている方なら誰もが気になるのが、 ホームページのスマートフォン対応ではないでしょうか。 「スマートフォンって、パソコンのサイトも見れるんじゃないの？」 間違いではありません。一部のサイトを除き、概ね見ることはできます。 しかし、「見れる」ことと、「読んでもらえる」「興味を持たれる」 「活用される」こととは、別次元の問題です。 では、スマートフォン対応とは具体的に何をすれば良いのでしょうか。 実例に見るスマートフォン対応サイトのポイント大阪のとある法律事務所様のホームページを例に挙げて、 スマー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エイチームLSのグロースハックチームが語る、スマホサイト改善を高速に進めるポイント | 【レポート】Web担当者Forumミーティング 2016 Autumn
iPhoneデザインボックス
sp-web.jp