$swiper.update())" x-swiper="{freeMode: true,roundLengths: false,slidesPerView: 'auto',watchOverflow: true,}" @swiper-init="$swiper.slideTo($swiper.slides.length - 1, 500, false)" data-area="nav-bar" data-app-hidden x-lazyload> $swiper.update(), 300);},close() {this.isOpen = false;setTimeout(() => $swiper.update(), 300);}}" @keyup.escape="if (!$event.defaultPrevented) {$event.preventDefault();clos
[レベル: 中級] レスポンシブ ウェブ デザインが選択すべき構成だ (Responsive Web Design is the way to go.) Google の Gary Illyes（ゲイリー・イリェーシュ）氏は、8月22日に開催された ISM Spin-off #2 で、このようにレスポンシブ ウェブ デザインをかつてないほどに推奨しました。 これまでは、「動的な配信」と「別々の URL」を含めた3つのモバイル構成のどれを選択しても構わないと言っていました。 しかし方針を変えて、レスポンシブ ウェブ デザイン1本に絞ったのです。 動的な配信と別々のURLが抱える問題 レスポンシブ ウェブ デザイン（以下、RWD）をゲイリーが強く推奨する最大の理由は、モバイル向けサイトと PC 向けサイトに差異がないことです。 見た目は違っていたとしても、同じ HTML を配信しているので、コ
+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
[レベル: 中級] モバイルサイトの構成において、「別々のURL」から「レスポンシブ ウェブ デザイン」への移行を計画しているなら、モバイル ファースト インデックスが導入される前に完了させたほうがいいと、Google の John Mueller（ジョン・ミューラー）氏は推奨しました。 MFI 後は正規 URL の移行になってしまう モバイル ファースト インデックス（以下、MFI）導入前に移行を完了するようにミューラー氏が勧める理由は、インデックス対象になる正規 URL の入れ替えが発生するかしないかの観点からです。 別々の URL で構成するモバイルサイトの URL が現状では次のようになっていると仮定しましょう。 PC 向けサイト => https://example.com モバイル向けサイト => https://m.example.com 現在は、PC 向けページがインデック
レスポンシブ・ウェブデザインで作ったサイトは、グーグルがサポートするほかの2つのモバイル構成（PCとモバイルで別URL、同一URLでサーバー側で出し分け）よりも順位が高くなると聞きました。これは、本当のことですか？ Google+のハングアウトオンエアを利用した英語版のモバイルサイト向けオフィスアワーで、グーグルのジョン・ミューラー氏がこの質問に回答した。 そんなことはない。（レスポンシブ・ウェブデザインだからという理由だけで順位が上がると考えているのならば）それは正しくない。 レスポンシブ・ウェブデザインがランキング要因にプラスに働くことを、明確に否定した形だ。 この発言に関してGoogle+では次のようにコメントしている。 これは（レスポンシブ・ウェブデザインを優遇しないことは）、私たちが複数の構成をサポートする理由の一部でもある。自分のサイトとユーザーにとって最も良く機能するものを選
レスポンシブウェブデザインまたは動的配信への変更にともない、モバイル向けサイト用に割り当てていた別URLを、PC向けサイトと統一したURLに変更する場合は302リダイレクトを利用します。 301リダイレクトではありません。 ドキュメントどおり302が正しい Googleは、スマートフォン向けサイトの移転の注意事項を解説したドキュメントを先日公開しました。 そのなかで、次のように説明しています。 サーバー サイドの 302 HTTP リダイレクトおよび Cache-Control: private ヘッダーを使って別個のスマートフォン向け URL をデスクトップ向け URL にリダイレクトします ※強調は僕による これを読んだとき、「301じゃないのか？ 」と僕は疑問に思いました。 同じ疑問を抱いたのは、きっと僕だけではないはずです。 そこで、GoogleのMaile Ohye（マイリー・オ
[SEO] レスポンシブウェブデザインと別サイト(URL)、どちらが検索順位が上がりやすい？ スマホ対応サイトの構築方法として、CSS3メディアクエリ等用いるレスポンシブウェブデザイン、同一URLながらUAで別コンテンツ配信などの手法があるが、どの手法を用いても検索順位そのものには影響しない。 公開日時：2013年07月02日 16:10 先週開催した「SEO for スマートフォンセミナー」より。過去に記事にしたことも、講演でお話したことも、また、こういう質問を前提とした話をしたこともなかったのでメモとして記事にしておきます。 Q) レスポンシブウェブデザインと、デバイス別に別サイトを構築する（つまり別URL）のは、どちらの方が検索順位が上がるのか？ 実はこの質問を過去に受けたことがなく、想定もしたことがなかったので、最初に伺った時は？？？となったのですが、すぐに意図を理解して、回答をし
![[SEO] レスポンシブウェブデザインと別サイト(URL)、どちらが検索順位が上がりやすい？ ::SEM R (#SEMR)](https://cdn-ak-scissors.b.st-hatena.com/image/square/571c1fec2fe73c3a13b702681e7a8d32f18a18c2/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fwww.sem-r.com%2Fimages%2Fse%2Fsemr-logo-fb-150x210.jpg){kind=logo}
今日は、レスポンシブWebデザインでのスタイルシートを書く順番について。CSSを書く順番が、デバイスごとの表示速度に関係するのかを検証してみた話題です。 レスポンシブWebデザインでは、モバイル向けのCSSを先に書くほうが、モバイル端末で早く表示される 以前に、そんなことを耳にしました。「んー、どうなんだろう」と思ったので、実際に検証してみました。 仮説では、「ブラウザはDOM要素を構築してからレンダリングするだろうから、モバイル向けとPC向けでCSSを別にしてlink要素で読み込めば、たしかにそれも有り得る」でしたが、実際にはどうだったのでしょうか？ テスト用に、専用のスクリプトを用意しました。いろんなパターン（link要素とか、style要素とか、style要素で@importとか）のCSSを、head内・body上部・body下部に出力できるようにして、モバイル向けCSSを出力して数
お仕事でもインターネッツでも頻出するようになった「レスポンシブ」ウェブ。 それにあたりまして、若干お仕事な上で「レスポンシブ」がイコール「リキッド（可変）フレーム」だと思ってる方がいて、制作を進めるうえで話が噛み合わなくて「ん？」ってなったりするので、説明の手間をはぶくためにココにメモがてら書きます。 レスポンシブってなんじゃ まず「レスポンシブ」とは1つのHTMLで、端末や解像度によってCSSで見た目を切り替える手法を指します。HTMLは1つで、対応したい解像度に対して対応してるCSSが1つ以上ある形。 「あなたがレスポンシブさんですよね？」って勘違いされるヤーツ で。よく「これレスポンシブだね！」って勘違いされやすいヤーツなのが、画面解像度によって横幅がうにうに伸び縮みしたり、ボックスが下に自動的にまわりこむヤーツですね。Pinterest的なのとかがわかりやすく一般的でしょうか。 し
レスポンシブWebデザイン（RWD）で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いた本でもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要？」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び気になったので自分の考えをまとめてみました。 モバイル版ブラウザの「デスクトップ表示」機能 たとえばDolphinやChromeといったモバイル向けブラウザにはデスクトップ版を表示するための機能が用意されています（FirefoxやMobile Operaにもついてるそうです）。わざわざこういうった機能が装備されているということは、これがユーザに求められる機能だからだと思います。（以下はiPhone
This is a Hangout on Air in Japanese. For Hangouts in other languages, please see our Office Hours schedule: https://sites.google.com/site/webmasterhelpforum/en/office-hours For the next Hangout on Air Japanese, please see our Google+ page: https://plus.google.com/+GoogleJapanBusiness 日本でおこなわれた第 3 回目のウェブマスター ハングアウトです。 実施日時 : 2013 年 3 月 26 日（火） トピック : 携帯端末（主にスマートフォン）向けサイトの構築方法の基本的な考え方について Webm
流行りのレスポンシブ・ウェブデザイン！ よく使われるデザインパターンを集めてみた！ 2013.01.18 | この方法お勧めです！ | サイト推薦！ tips | WordPress | ほらみんなも！ | デザイン | レスポンシブ あけましておめでとうございます！ 今いる場所がシアター！Huluの動画サイトにはまり、かなり引きこもりがちなブラウンです。 超寝不足。。。やばいです。。。 今回は流行りの【レスポンシブ・ウェブデザイン】について、デザイナー目線の記事を書こうと思います。 少し前までは『レスポンシブ！？そんなんいらんわっ！！無視や！無視っ！！』って思って勉強することから逃げていました。しかしもうダメのようです… もうIT業界では、レスポンシブ・ウェブデザインは当たり前って流れがきてます。確かにアクセス解析ではPCよりスマホやタブレットからの方が多いですし。 とにかく、今回レスポ
+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
SEO for スマートフォン [2] レスポンシブWebデザイン スマホと検索のお話。SEO for スマートフォンのお話2回目。今回はレスポンシブWebデザインについて。 公開日時：2013年01月04日 14:57 前回記事『SEO for スマートフォン [1] Google のモバイルに対する考え方』の続きです。今回はレスポンシブWebデザインに対する考え方について。 レスポンシブWebデザインは検索順位的に有利なのか？ Googleが2012年6月に「Building Smartphone-Optimized Websites」という文書を公開して、スマートフォン対応サイトを検索エンジンに最適化させる方法についての Google の意見が表明されました。 この文書について、「Googleで検索順位を上げるためにはレスポンシブWebデザインを採用しなければならない」あるいは「レス
はじめは今までと同じように、カンプを作ってからコーディング、というやり方でした。 しかし、そのやり方だとトラブルが多いんです、なぜか。 ブレイクポイントとかで揉めたりすることが多いです。 早い話が、いままでの制作のやり方は、レスポンシブWebデザインでは無理だということです。 allWebクリエイター塾の菊池 聡さんは、「レスポンシブWebデザインでは、いままでの仕事のやり方は通用しない。いずれはブラウザでデザインする時代がくる」と、某セミナーで言っていました。 実際、最近は、ブラウザでデザインする、いわゆる「インブラウザ・デザイン」で制作することが多くなってきています。最近は、ほぼ7割くらいです。 最近、久しぶりにFireworksでカンプを作りましたが、「以外とPhotoshopやFireworksでカンプを作るのが面倒だな」と感じました（ちょっといらついていたような気がするのは気のせ
最近、個人的に不便に感じているのが、同じコンテンツにも関わらずアクセスするデバイスに応じてURLを変えているコンテンツだ。スマートフォンからのアクセスだと、"m"*1などの文字が前後いずれかに付与されたURLなどにリダイレクトされる。 そのデバイスからのみコンテンツをアクセスしている分にはさほど不便を感じないのだが、私はChromeのデバイス間タブ同期機能のヘビーユーザーであるため、頻繁に同じコンテンツをMacやWindows、そしてAndroidデバイスで見る機会に遭遇する。結果、何が起こるかというと、Androidからアクセスしていたスマートフォンに最適化されたコンテンツをMacやWindowsで見ることになり、なんとも不恰好なデザインで見させられることになる。 悪い例として出すことになってしまい申し訳なく思うが、このブログを再配信しているBLOGOSというブログメディアがある。このB
前回の記事では、ぼくらの自社サイトリニューアルがいったん失敗に終わり、ゼロから作り直す羽目になった顛末をお話しました。失敗はつらくて、恥ずかしい。今も、こうして記事を書いている中で、「できれば失敗せずに済ませたかったな」という複雑な思いが胸にこみ上げてきます。 せめてその失敗を反省し、「繰り返すべきでないこと」と「今後も継続すべきこと」をきちんと言語化しておくことで、失敗の経験を「成長」につなげたい。そういう思いから、こうして失敗談を記事にさせていただくことにしました。 今回の後編では、その失敗から得られた5つの気づきをお話ししたいと思います。もし、これらの気づきがみなさんを楽しませたり、お役に立てたりすれば幸いです。とは言えたった一度の経験から得られたものですので、まだまだ洞察が深まっていないところもあるかと思います。至らぬ点や誤りなどがあったら、@Shumpeiまでお気軽にご指摘くださ
Stay organized with collections Save and categorize content based on your preferences. Mobile site and mobile-first indexing best practices Google 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 Sear
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
