モバイルSEOに役立つGoogle純正ツール×5
[対象: 初〜中級] この記事では、モバイル向けサイトのユーザビリティやユーザーエクスペリエンスの向上に役立つ、Googleが提供する公式ツールを5つ紹介します。 Chrome PageSpeed Insights Mobile-Friendly Test Fetch as Google モバイルユーザビリティ レポート 順に説明します。 Chrome Google Chromeの「デベロッパー ツール」では、スマートフォン端末で見たときのそのページの表示をエミュレーションできます。 「デベロッパー ツール」は次の手順で起動します。 [Google Chromeの設定]（右上の3本バー） − [その他のツール] − [デベロッパー ツール] Ctrl + Shift + i (Windows) / Cmd + Opt + i (Mac) スマホを表すアイコンをクリックするとスマホでの表示モ
スマホ向けサイトの最適化レベルを自動チェックするグーグル公式ツール2種 など10+3記事 | 海外&国内SEO情報ウォッチ
こちらはあらかじめクロール時にチェックしているので、サイト全体のなかで問題があるページを探すなどの用途で使える。 チェックは、PageSpeed Insightsのユーザー エクスペリエンスでチェックできる項目が対象で、Mobile-Friendly Testとだいたい同じような項目を確認している。 この2つのツールに関してこんな質問が公式ヘルプフォーラムにあった。 片方では問題はないが、もう片方では問題を指摘されている。 どちらのツールに合わせてモバイルサイトを最適化してくべきか？ 答えは「両方」になるだろう。 Mobile-Friendly Testがチェックする項目とモバイルユーザビリティレポートがチェックする項目は同じではない。また共通した項目であっても、基準が同じとは限らない。 しかしどちらのツールもモバイルサイトのユーザビリティやユーザー体験に重要な要素をチェックしてくれること
モバゲータウンのノウハウ満載！ フレームワークMobaSiFを使おう！：第1回 ケータイ向けWebアプリケーション開発特有の技術要素｜gihyo.jp … 技術評論社
はじめに iモード／EZweb／Yahoo!ケータイなどで利用されるケータイブラウザは、極端な言い方をするとPCブラウザやフルブラウザとは「まったくの別物」です。今回はまず、ケータイブラウザ向けWebアプリケーションを開発する際に考慮すべき技術要素の説明を行います。次回以降は、そういった技術要素を共通的に処理できるフレームワークとして、筆者たちの所属する株式会社ディー・エヌ・エー（DeNA）がオープンソースソフトウェアとして2008年5月に公開したMobaSiF（Moba Simple Framework）を解説していきます。 本特集は、WEB+DB PRESS Vol.45の特集1「[イマドキ]ケータイ開発実践入門」の第2章、第3章を再構成したものです。なお、紙面の都合上で省略した説明も補っています。 各キャリア端末の世代分類 NTTドコモのiモードが開始されたのは1999年2月で、すで
第3回 携帯サイトの文字コードに気をつける | gihyo.jp
上記はキャリアが対応を発表している文字エンコードであり、機種によっては公式に発表している文字エンコード以外にも対応している場合もあります。上記の表から、携帯サイトで共通に使える文字エンコードは「Shift_JIS」であることがわかります。このことから携帯サイトでは基本的に「Shift_JIS」を使って画面の入出力を行うことになります。ちなみにSoftBankの3GC型などの端末では、「Shift_JIS、EUC-JP、ISO-2022、UTF-8」のそれぞれに対応していますが、「EUC-JP、ISO-2022」はキャリアのゲートウェイを通過するときに「Shift_JIS」に自動的に変換されてきます。そのため出力はできますが取り扱いはShift_JISとなるため、SoftBankのみの携帯サイトの場合はShift_JISかUTF-8に絞って対応するとよいでしょう。 絵文字を考慮に入れた文
【PHPで作る】初めての携帯サイト構築 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
iPhoneからサイトを作ることに特化したアプリ『Zapd』 | 100SHIKI
もうモバイルからWebサイトをつくる時代かもしれない、と感じさせるサービスのご紹介。 ZapdはiPhoneからサイトを作ることに特化したアプリだ。 PCでサイトを作って、それをモバイルに対応させるサービスはたくさんあるが、Zapdではあくまで「モバイルだけで作る」ことにこだわっている。 モバイルから作るだけあって操作は簡単だ。 まずはテーマを選び、写真をアップし、テキストを追加していくだけだ。そうすればシンプルなTumblrみたいなサイトが出来上がる。あとはそれをお友達に紹介すればいいだろう。 主にモバイルだけしか使っていない、という人も多いだろう。そうした人がサイトを作って楽しむには良いのではないだろうか。
モバイルファーストの本当の意味と、実践方法
Web製作の現場で、まず先にモバイルサイトから着手し、そのデザインが固まった後にPCサイトをデザインする「モバイルファースト」。日本マクドナルド、ANA、飲食店の事例も交えて実践方法を分かりやすく紹介する。 「モバイルファースト」という言葉は2009年にルーク・ウロブルスキー氏（Luke Wroblewski、以下ルーク氏）によって提唱され、その後 グーグルやアドビシステムズ、フェイスブックなどのカンファレンスで言及され、北米で認知が広がりました。2012年にWebDirectionsEastでルーク氏が来日して講演したこともあり、日本国内でもさまざまなメディアでこのキーワードを目にするようになりました。この記事では、モバイルファーストの本来の意味と実践時の注意点をお伝えします。 1分－モバイルファーストは、イノベーションをもたらす スマートフォンの市場はこの2、3年のうちに急速に普及し、
携帯サイトの作り方 第1回 作成方法の基礎 [ホームページ作成] All About
携帯サイトの作り方 第1回 作成方法の基礎携帯電話などから閲覧できる「ケータイサイト」を作ってみましょう。携帯端末に搭載されているブラウザに関するいくつかの制約を押さえておけば、あとは簡単に作成できます。まずは、携帯サイト作成の基本をご紹介。 (注) 本記事の解説は、ガラケーサイトの作成方法です。 本記事は、ガラケー(フィーチャーフォン)端末向けのウェブサイトを作成する方法の解説です。スマートフォン端末向けのウェブサイトの作成方法ではありませんのでご注意下さい。スマートフォン向けモバイルサイトの作成方法に関しては、下記の記事などをご参照下さい。 スマートフォン対応サイトを作る際の注意点 レスポンシブ・ウェブデザインの簡単な作り方 レスポンシブCSSで使うブレイクポイントの決め方 モバイルファーストでデザインする際のCSSの書き方 ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選
![携帯サイトの作り方 第1回 作成方法の基礎 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/99ea29bf657cd4dbe096c25bd4423077e189e7a5/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F9%2F9%2F201610192029%2Ftopimg_original.jpg)
jQuery Mobileページの基本構造を理解しよう（1/3） - ＠IT
これらのフレームワーク／ライブラリを利用することで、デバイスの違いを（全くでないにせよ）あまり開発者に意識させることなく、標準的な枠組みでスマートフォン対応のアプリケーションを開発できるようになる。 スマートフォン対応のフレームワークは歴史も浅く、まだまだデファクト・スタンダードといえるものはないものの、現時点で最有力候補の一角と目されるのが、本連載のテーマでもある「jQuery Mobile」だ。 ■jQuery Mobileとは？ jQueryそのものについては本稿の読者諸氏であれば、すでに既にご存じであろう――JavaScriptライブラリのデファクト・スタンダードだ。「Write Less, Do More（よりシンプルなコードで、より多くの処理を）」をモットーに、シンプルな構文でありながら機能性も高いことから、近年急速にユーザー数を増やしている。何千、何万にも及ぶプラグインによっ
jQuery Mobileでサクッと作るスマートフォン向けWebアプリの基本 ─ ＠IT
大日本印刷 森川 裕美 2011/9/29 jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介します おばかアプリの開発にjQuery Mobileを使ってみました 先月8月20日に開催されました「第5回おばかアプリ選手権（見よ！ コレジャナーイアプリの数々を！）」にて、jQuery MobileとHTML5の要素を使用した、iPhoneのMobile Safariで動作するミニアプリiBooNを紹介させていただきました。本記事では、jQueryMobileを使って、お手軽にスマートフォン向けのWebアプリケーションを作成する方法をiBooNを例に紹介します。 iBooNは、iPhoneの傾きに応じて車の音が変わるミニアプリです。まず、Color Select画面から好きな色の車を選びます。ミニカーの画像が表示された画面
gooモバイル - 携帯サイトビューワ
２０２２年６月３０日（木）モバイルgooの終了に伴い、サイトビューワの提供を終了いたします。 長年のご愛顧、誠にありがとうございました。 上記期間後はご利用ができなくなりますので、ご注意ください。 URLを入力して表示
2時間で作るカスタマージャーニーマップ――実例とともに考える新しい「おもてなし」のカタチ | 顧客の行動パターンを理解するためのカスタマージャーニーマップ入門
カスタマージャーニーマップを使う3つのメリット顧客体験の分析にカスタマージャーニーマップを使うメリットとして、次の3つが挙げられます。 視野が広がるWeb担当者が考える施策は、PCやモバイルなどの媒体に視線が向きがちです。しかし、顧客の行動文脈から施策を考えるようにすると、もっと広い視野で施策を検討できるようになります。PCやモバイルだけにとどまらないリアルとの連携や、普段はあまり思いつかないような施策の立案が可能になります。 複雑なデータが直感的に把握できる顧客の体験は、「目的」「行動」「タッチポイント」「思考・感情」など、さまざまな要素の集合として構成されています。これらのすべてを把握することは非常に困難ですが、カスタマージャーニーマップを活用することで全体を見渡せるシンプルな形に整理できます。 施策立案が考えやすくなるカスタマージャーニーマップは、顧客の体験の中でも特に「行動と媒体」
AdSense収益アップの秘訣をグーグル日本法人で聞いてきたよ
グーグルのセミナー「楽しみながら収益アップ！AdSense Partner Day in 東京」に参加してアドセンスについて勉強してきましたよ。 ライブ最適化講座 まず最初に、ゲストのサイトに対してアドバイスを行うライブ最適化講座がありました。 一人目 ログハウス.com－ 建築とログハウスキット ビッグバナーとコンテンツのリンクの距離が近すぎる。誤クリックする可能性があるので離した方が良い。 ビッグバナーとリンクユニットの場所が近すぎて食い合っている。離した方が良い。 右サイドバーのスカイスクレーパーを無くして300×250に代えた方が良い。 情報をカテゴリ化してもう少し分かりやすくすると良い。 検索ボックスを設置する。 二人目 シェアーズカフェ・オンライン 右カラムの一番上に300×250を置きたい 特に日本では記事下が収益性が高いので、そこに300×250を2つ並べる。 ランキングの
携帯サイト向けCMS厳選8製品ガイド | Product Showcase
携帯サイト向けCMS厳選8製品ガイド このコーナーでは、ネットビジネスを強力に支援する製品について、それを支える技術や市場動向を説明し、さらに各社から提供されている製品を紹介する。競合ひしめく市場で、他社に差を付けるための武器として、ぜひ導入を検討してみてほしい。今回は、ケータイ向けの公式サイトやキャンペーンサイトを自社で構築・管理・運用するための「携帯サイト向けCMS」だ。 福永 充利（株式会社シンクウェア） 企業は当然携帯サイトの時代 ケータイCMS選定のポイントは？ケータイの普及台数は9000万台を超え、ケータイを取り巻く市場規模も7,000億円を超える勢いだ。今やパソコンのみでインターネットを利用しているユーザーよりも、ケータイのみでインターネットを利用しているユーザーのほうが多くなった。すでに携帯サイトは、すべての業界、企業にとって無視できない存在である。特にケータイ検索サービス
ユーザビリティを考慮した文字サイズ指定&ナビゲーション設計のポイント（第2回） | モバイルサイト構築のユーザビリティいろは
サイト全体のナビゲーションコーナー間での移動ナビゲーションアクセスキーの使い方はじめに――モバイルサイト構築前のルール作り1. 対応端末とマークアップ言語について3キャリア共通のモバイルサイトを構築する場合、サイトのマークアップ言語を大きく分けると、第二世代端末はHTML（CHTMLなど）、第三世代端末はXHTMLに分けられます。 モバイルサイトを構築するときには、世代別のマークアップ言語を把握したうえで、サイトの目的やターゲットとするユーザーによって、HTMLかXHTMLのどちらかを採用します。また、第二世代、第三世代の両方に対応する場合は、HTMLとXHTMLそれぞれで記述したサイトを用意し、アクセスしてきた携帯端末（ユーザーエージェント）に応じて振り分けるシステムを利用することが一般的です。では、具体的にどういった場合にHTMLとXHTMLを選択すればいいのか、いくつか紹介しましょう
スマートフォンからの検索流入キーワードが物語るユーザーの検索行動
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
被リンクを増やすための賢いサテライトサイトの作り方 など10記事（海外&国内SEO情報） | 海外&国内SEO情報ウォッチ
日本語で読めるSEO/SEM情報サテライトサイトの大量生成ほど無駄なことは無い （京都のSEOコンサルタント松尾茂起のブログ）メインサイトの順位を上げるために、自作自演で作ったバックリンク用のサイトを、「サテライトサイト」と呼ぶ。中心となる惑星の周りを回る衛星になぞらえているのだ。 SEOに強いサテライトサイトを作成するための10個の法則を、松尾氏が解説している。しかし、結論としては、サテライトサイトといえども、少数精鋭でメインサイトに劣らないくらいにコンテンツを充実させることが、最終的には強いのだと述べている。 松尾氏の言葉を借りれば、「サテライトサイトの大量生成ほど無駄なことは無い」そうだ。 Googleパーソナライズ検索で利用されている履歴情報は? （SEMリサーチ）当サイトでも紹介のあったグーグルサーチクオリティチームのアダム・ラズニック氏へのインタビューに同席した渡辺氏が、グーグ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: 携帯サイト コーディング&デザイン: 高木悠介: 本
キャリア6社の絵文字がついに統一