一番簡単な、Googleモバイルフレンドリー対応の方法
2015/4/21 より、ウェブサイトがモバイル対応しているかどうかが、モバイル検索のランキングを決定する要素となります。 Google 検索 – モバイルでの検索がさらに便利に 私が運営しているサイトのアクセスを調べてみると、どのサイトも、モバイルデバイスからのアクセスが半数を超えてきています。モバイル対応をしていないと、モバイルのランキングが下がってしまい、アクセス数が大きく減少してしまう可能性があります。 レスポンシブに対応したデザインを一から作るのがベストですが、もう時間がありません。とりあえず手っ取り早くモバイルフレンドリー対応をする方法をご紹介します。 サムリさんが紹介している方法が簡単です。 WPtouchはもういらない？プラグインに頼らずCSSの切替でスマホ対応サイトを用意する方法 1) ヘッダにviewportとcss切替えのタグを設置 下記コードをヘッダ<head>〜<
スマホのメニューデザインに悩んだらこれ！パターン別サンプル36選 | LISKUL
スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で
WEBサイトはスマホで見る時代！今後はスマホから見た時のデザインに注力をして、PC版はボロボロでも良いのかもしれません。 - クレジットカードの読みもの
毎回毎回、似たような記事を書いている感もありますが、最近はよりいっそう、スマホからのアクセス比率が高くなってきている印象を持っています。 もう言い切ってしまうのであれば、今やウェブサイトはスマホで見る時代。『PCからの閲覧が主で、携帯からのアクセスはオマケみたいなものだから、スマホ対策なんかせずにPC版を見せておけばいい！』…なんて私もちょっと前までは考えていましたが、仮にこの考えのままだったら今頃、痛い目にあってしまっていたかもしれません。 統計データもスマホ比率が高い： 実際、当サイト『クレジットカードの読みもの』における過去30日のアクセスデータを解析してみても、PCからのアクセスはわずか35%程度です（下記の画像参照*1）。 残りの65%はスマートフォンやタブレット端末から見られているわけですから、どちらに重きをおいて対策をしていくべきかは、もう…言うまでもないですよね。 ボロボロ
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
スマホサイト最適化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 の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
ライバルを出し抜け！スマートフォンサイト制作でコンバージョン率を上げる7つのポイント｜MarTechLab（マーテックラボ）
LPO研究所所長の鎌田です。 今回は「スマートフォンサイトでコンバージョン率を上げるための重要ポイント」をお伝えします。 レスポンシブデザインだの、HTML5だのといった技術的な話は一切しません。あくまで「コンバージョンに直結するスマートフォンサイト制作の考え方、施策」についてお伝えします。 時代はスマートフォンだ、マルチデバイスだと騒がれてはいるものの、実際のところ、Web上でスマートフォンからのコンバージョン獲得を意識して対策できている会社はまだ多くありません。今のうちにしっかりと対策をすれば、PCでは激戦区のジャンルであっても、スマートフォンサイトで出し抜ける可能性は大いにあります。 それでは早速いってみましょう。 目次 スマホユーザビリティは右手親指を意識しろ スマホサイトは読み込み速度を重視しろ リスティングもスマホ向けに最適化しろ スマホサイトではオファーを下げろ スマホではス
PC版とスマートフォン版サイトを自動で切り替える方法 [ホームページ作成] All About
スマートフォンは、PC用に作られたウェブサイトでも表示できます。しかし画面サイズが小さいため、そのままの状態では読みにくい可能性があります。その場合の対策としては、 レスポンシブWebデザインを採用する スマートフォン専用サイトを作る などの方法があります。 ■更新や管理が楽なのはレスポンシブWebデザインだが…… 更新や管理の労力を考えれば、レスポンシブWebデザインを採用する方が楽でお勧めです。その方が、同じ情報を掲載したページを複数用意する必要がありませんし、新しい端末が登場しても(おそらくは)何もせずに対処可能ですから。 (参考) ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選 しかし、既存のPC用サイトがレスポンシブ化しにくいデザインな場合や、スマートフォンの特性を活かしたウェブサイトを用意したい場合では、PC版サイトとスマートフォン版サイトを分離する方が望ましいこ
![PC版とスマートフォン版サイトを自動で切り替える方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/38b8297bdad222f2431f20c9f03f3e35419e4f37/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F8%2F6%2F4%2F8%2F3%2F201510301459%2Ftopimg_original.png)
これからはスマホ対策ではなく、スマホ・ファーストになるという話｜More Access! More Fun
最近、「Webでの集客が最近とても厳しくなった」というお問い合わせとか、メルマガのご質問を結構いただくのだが、共通して言えることがございまして、それは「スマホ対応してない」というのが明らかな原因のケースがよくある。 PCでの表示だけでスマホに適正化されてない場合、そしてトップがやたらごちゃごちゃしている場合、トップページだけ見てそのままページ遷移をせず(ほかのページを見ないで)に帰ってしまう人が多いんだろう。特に飲食店やサービスなど野外から見ることが多かったり、顧客の層がPCよりスマホが圧倒的多数だったり(年齢的に若かったり)するのに、これに対策してないサイトは致命的なアクセス低下や、問い合わせ数の激減を招いている場合が多くある。 このブログはとりあえずスマホ対応しているテーマだが、上位階層は対応してません。というか顧客のサイト制作で手一杯で自分のなんてやってる暇が無いんです(言い訳)。い
スマホサイト制作センスをアップする！見本・素材・WPテーマ・JS・その他全部丸ごとまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターの内藤です！ 前回の記事（美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ）ではWebデザインのタイプ別にわけた見本サイトのまとめを行いました。 今回はその続編として、スマホ・タブレット最適化サイトのデザインまとめをご紹介致します。 目次 ※もちろん順番に読む必要はありません。 スマホ専門デザイン見本 部品別に見られるサイト その他スマホサイトの部品作りの参考になるサイト スマホサイト素材になるキット フリック用JavaScriptプラグイン スマホ対応の無料WordPressのテーマ スマホサイト制作参考 スマホ専門デザイン見本 iPhoneサイトデザイン集のiPhoneデザインアーカイブ http://iphonedesignarchive.jp/ 登録数が半端ないです。 カテゴライズは業種別のみですが、年月アーカイブがあるので、い
スマートフォンサイトを驚くほど速くする！高速化9つのポイント | Find Job ! Startup
回線が細くCPUも弱いスマートフォンは、リッチなWebサイト表示が苦手です。しかし、地道な対策で表示速度が驚くほど変化するのも事実。 今回はスマホのWebサイト表示の高速化手法をまとめました。もちろんPC向けにも効果バツグンのTips集です。 Webサイトを劇的に高速化する9つのポイント １.画像を圧縮する ２.画像はサイズを指定して使う ３.画像は適切なサイズで使う ４.CSS/JavaScriptを圧縮する ５.CSSスプライトを使う ６.不要なCSS/JavaScriptを読み込まない ７.CSS/JavaScriptをまとめる ８.CSSセレクターを最適化する ９.mod_deflateでgzip圧縮する １.画像を圧縮する 画像を最適化することは、フロントエンドの高速化に絶大な効果を発揮します。Photoshopを使って圧縮しても良いのですが、もっと手軽に圧縮
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
スマホデザインの参考に！アプリやスマートフォンサイトのギャラリーサイトまとめ | creive
※この記事は、2013年2月05日に公開された記事を再編集したものです。 こんにちは。creive編集部です。 今回は、スマートフォンサイトやアプリをデザインするときに参考にしたい、ギャラリーサイトを紹介します。 iPhoneデザインボックス 国内のスマートフォンサイトが中心のデザインギャラリーサイト。 このサイトの特徴は、スマホ表示とPC表示の画面がそれぞれ紹介されているので比較することができることです。 それぞれでどのように表示を出し分けているかも一目瞭然！ http://design.web-hon.com/ sps collection 国内、海外問わず紹介されています。 ジャンルごとや色などから細かく検索できるので、探したいイメージのサイトを見つけやすいです。 会員登録なしでブックマークしておけるのも気軽で便利です。 https://spscollection.com/ Resp
スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選
スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選：スマホ向けサイト制作で泣かないための秘伝ノウハウ（1）（1/2 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。第1回は、PCやケータイと比べて際立ったスマホの特徴2つや、スマホ向けサイト制作3手法の基礎知識と課題、iPhone／AndroidなどOS／機種依存でのハマリどころをサンプルを交えて3つ紹介 連載開始に当たって 初めまして。KSKの「フレックスファームビジネスユニット」でエバンジェリストをしている渡辺と申します。筆者の所属するフレックスファームでは、スマートフォン向けWebサイト構築支援ツールの開発・販売を行っています。国内で販売されて
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
NTTドコモ ホーム
お客様の設定により、お客様情報が「非表示」となっております。お客様情報を表示するにはdアカウントでログインしてください。 お客様情報表示についてへ お客様情報表示についてへ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめ
カロリーメイト公式サイト | 大塚製薬
omotan.com
サイトをスマホに最適化するとコンバージョン数がどれだけ増えるかを予測できませんか？ | 誰もが受けたい！アクセス解析5分クリニック
