[807] モバイルフレンドリーその3クリック可能な要素

~スマホが変えたHTML文【ピクニックを始めたコンテンツたち】~

「モバイルフレンドリーテスト」が修正を促してきた三要素。
今度は、「クリック可能な要素が近すぎます」だってさ。
指はマウスのポイントより大きいから、その分、クリックミスをする可能性が考えられるよと。
もっと繊細にというか、ある意味、がさつ向きに作っておけと。

もうね、この辺でウンザリしてきませんか。
なんで、そこまでスマホユーザーのことをチヤホヤせないかんのか。
まあ、でも、やっていることが「モバイルフレンドリーテスト」なんですから、従わざるを得ないわけです。

ところでグーグル嬢って、クリック要素の近さを、構文的に見ているんですかね。
それとも、見た目で離れていればいいのでしょうか。
前者なら、パディングという「隙間の設定」が必要になるでしょう。
後者なら、単純に「ボタンの間へスペースを打っておけばいい」だけの話。
ウンザリ感の反抗から、まず後者でやってみることにしました。

クリック要素の比較図
上は「旧・山ガハ」のくっ付いた仕様、下は「新サイト」のスペース挿入

結果、グ嬢は、後者の処理を「離れた」と見てくれました。
なんだ、見た目でいいんだね。
直しが簡単で良かった。
とはいえ、またまた全ページをやっつけなきゃいけないんですけど。

よし、「モバイルフレンドリーテスト」、オールクリア。
ところがですね・・・。
何をどうしていたらたどり着いたのか忘れてしまったんですけど、「メディアクエリ」なるものを見つけてしまったんです。

たびたびの繰り返しになりますが、今今のサイトは、ページごとのデザインをしないんだよと。
素材だけ置いておいて、その配置は端末に任せるんだよと。
そういうことでしたよね。

ところが、「メディアクエリ」という方法(?)なら、端末の幅によって、読み込ませるCSSを変えられるらしい。
つまり、PC用にデザインしたCSSと、スマホ用にデザインしたCSSを、併用することができるんです。
何それ、早く言ってよ。
「モバイルフレンドリーテスト」で嫌々やっていた修正は、片一方だけでいいってことじゃない。
それにさ、根源にあった「ユニバーサルデザイン」の発想って、ドコ行っちゃったわけ?
そもそもCSSって、素材をテーブル枠へ閉じ込めずに、ピクニックさせることが目的でしょ?
やってることが、訳わからん。

ということで、次回は「メディアクエリ」のお話です。
スポンサーサイト

[806] モバイルフレンドリーその2文字の大きさ

~スマホが変えたHTML文【ピクニックを始めたコンテンツたち】~

グーグル家のしきたりともいえる「モバイルフレンドリーテスト」。
主に3つのポイントから、ダメ人間度合いを判定してくれます。
前回は、「ビューポートが設定されていません」の話でした。
今回は、「テキストが小さすぎて読めません」について取り上げます。

いろいろと調べてみると、どうやら、最低でも16Qにしないといけないらしいですね。
旧・山ガハは、基本12Qでした。

ちなみに、この大きさが16pix相当
こちらが12pix相当

新サイトはCSSを導入しているため、スタイルシートの指定を変えるだけで、全ページに反映されます。
ビューポートのように、いちいちタグをヘッダーに挿入しなくてもいいわけです。
これは簡単・・・と思いきや、文字の大きさが1.3倍になったことで、こんな事態になってしまいました。

文字の大きさが変わる
すべてのデザインが狂って、余計なスペースが空きまくる

以前にも書いた通り、CSSでは、テーブルによってコンテンツを区切りません。
画やテキストの塊を「右から左」へ流し、いっぱいいっぱいになったら折り返しする。
このとき、[16Qイメージ]のようにはみ出た部分があると、「右から左」へ流れないんです。
・・・何を言っているのかわからなかったら、「とりあえず、文字のエリアが予想外に膨らんだ」ということだけご理解ください。

対処法は、あるっちゃあります。
でも、最初にこの状態を見て、かなり慌てましたね。
結局、CSSだけではなく、ページごとに修正作業をしていきました。

これで、3つのエラーのうち2つが完了。
残るは「クリック可能な要素が近すぎます」のみです。

[805] モバイルフレンドリーその1、ビューポートの設定

~スマホが変えたHTML文【ピクニックを始めたコンテンツたち】~

グーグル嬢は、スマホに優しくしないと、一人前として認めてくれない。
その結果、検索順位が低かったり、そもそも検索エンジンの対象にしてくれなかったりする。

そうなると、「PCユーザーだけを相手にしていればいい」とも言っていられません。
彼らだって、検索エンジンを利用するのですから。
つまり、ホームページを作成する際、もはや「スマホによる閲覧」は無視できないわけです。

じゃあ、何をもって「スマホに優しい」を判じればいいのか。
その答が、グーグル嬢の提供する「モバイルフレンドリーテスト」です。
任意のURLを打ち込むだけで、自動的に解析してくれます。

805.gif
現「山ガハ」の悲惨な現状・・・その前に、日本語としておかしいだろ

主に3つの要因から答を出してくれるようですが、今回は、このうちの、
「ビューポートが設定されていません」
について、対策を講じていきます。

必要なことは、すべてのページのヘッダーに、
meta name="viewport" content="width=device-width, initial-scale=1.0"
を付け足すだけ。(最初と最後に< >が必要です)
何も考えず、おまじないか何かのようにコピペしてください。環境ごとのアレンジも全く不要。
以上、終了です。

一応ですが、その意味するところは、
meta name="ビューポートについてお嬢がうるさいから、一応、気を配ってやったよ" content="コンテンツの配置は、デバイス幅に合わせてね。コッチじゃ、意図的なデザインをしないから, initial-scale=文字や画像の拡大倍率は1:1でお願いします。16Qの文字は16Qだし、300ピクセルの画像は300ピクセルで"
といった感じでしょうか。

ここで、不思議に思った方はいらっしゃいませんか?
なぜなら、同じことは、HTML文内でも行えるからです。
「width=100%」で、以上、終了じゃないですか。
ところが、さにあらず。
メタ属性で規定・・・つまり、ヘッダー内で宣言しないと、グーグル嬢は許してくれません。
たった70文字を入れるかどうかで、受ける扱いが全く違うのです。
お嬢・・・ちょっと、乱暴じゃないですか?

それはそれとして。
この呪文をすべてのページに貼り付け、再度「モバイルフレンドリーテスト」を試みたとろ、残り2つとなりました。
次回は、「テキストが小さすぎて読めません」について取り上げていきます。

◆ライターとしての蛇足
このページ「は」モバイル フレンドリーで「は」ありません
このページを分析した結果、モバイル フレンドリーと「は」いえません

このページ「は」、モバイル端末で「は」使いにくい可能性「が」あります
このページをモバイル端末で閲覧した場合、使いにくい可能性「が」あります。

お嬢、人のHTML文を指摘する前に、自分の日本語を学び直せ!

[804] プレゼントを拒否するグーグル嬢

~スマホが変えたHTML文【ピクニックを始めたコンテンツたち】~

サーチコンソールを利用してグーグル嬢とお付き合いし始めると、いろいろなプレゼントを要求してきます。
そのひとつが「サイトマップ」。

「アンタのサイト構造はどうなっているんだい。いちいち口で説明されてもメンドイから、紙で一括して提出しろ」

と言ってくるんですな。
Web上に無料で「サイトマップ」を作成してくれるサービスがあるので、まずはともあれ、利用してみました。
ところが、いつまでたってもプレゼントを受け取ってくれないのです。
再送付やテストなどを繰り返してみましたが、1カ月たっても「保留」状態が続行中。
なんで?

サーチコンソールの画面
右下の「保留」状態が解消しない

「あまり気にしなくていい」という意見もあるようですが、いわゆるシカトですからね。
シロートなりに、その理由を考えてみることにしました。

理由1.男として認めてくれない
「どこの馬の骨だ」と。若造が生意気に言い寄るなと。
これは対処法がないので、考えるだけムダ。

理由2.サイトマップの何かが間違っている
テストでは異常ナシと言っていたので、この可能性も除外。

理由3.グーグル家のしきたりに反することをしでかしている
これは大いに考えられるでしょう。
そこでサーチコンソールをいじくったところ、[検索トラフィック]の中に「モバイル ユーザビリティ」という項目を発見しました。

そう。この欄の2回目で、CSSによる「ユニバーサルデザイン」の話をしましたよね。
サイトのデザインは、もはや、作り手が決めないんです。
素材だけ載せといて、端末が決める。
そういう工夫をしていますか・・・という問いかけが、この「モバイル ユーザビリティ」のようです。

えぇ。もちろん、一切していません。
だって、「山ガハ」はPCで見るものだと思っていましたし、横幅を760ピクセルに固定しています。
ヘッダーのメタ属性も、スマホ登場前のままです。
この辺のダメダメさが、グーグル家のしきたりに反しているのかも。

どうやら、スマホユーザーを意識しないと、「けんもほろろ」の状態が続くのでしょう。
しょうがないので、本格的な「ユニバーサルデザイン」へ向けて、重い腰を上げることにしますか。
やっと次回から、「スマホが変えたHTML文」の話をしていきます。

[803] グーグルとのお付き合い開始

~スマホが変えたHTML文【ピクニックを始めたコンテンツたち】~

「山ガハとは別個のサイトを、またゼロから作ろう」

前回のあらすじは、そう、決意したところまででした。
その一方、いままでの自分は、まったく「Google嬢」のことを気にかけていなかったんです。
なぜなら、旧・山ガハが、ものすごいポテンシャルを持っていたから。

累計アクセスは200万超え、被リンクが1000サイト以上、週2回更新で10年以上の稼働実績・・・。
ここまで行くと、SEOなんて全く気にせずとも、好きなことを書いていれば良かったんです。
いつも「Google嬢」が勝手に見つけて、検索上位に乗せてくれていました。
いわば、モテてたんですね。
ところが新規サイトとなると、そもそも「Google嬢」にとっては赤の他人になります。

また、数年前から、アクセス解析ツールなどによるキーワードの取得ができなくなりました。
良く言えば、暗号化によるプライバシーの保護。
悪く言えば、SEOビジネスの寡占。
つまり、「どういうキーワードを載せるべきか」というキモが、全くわからない状態なのです。

アクセス解析のイメージ図
現在使用しているアクセス解析ツールの例

そこでいろいろ調べてみたら、新人は、正式に「Google嬢」へあいさつしなくてはいけないらしい。
「私はこういうものです。新たにあなたのショバへやって参りました。以後、お引き立てください・・・」と。
その方法が、「Google ウェブマスターツール」というブツ。
「サーチコンソール」という言い方もあるようですが、新人で専門知識がない自分の場合、「Google ウェブマスターツール」で検索したほうが、有用な情報を見つけられました。

で、特殊なHTMLファイル・・・いわば名詞のようなファイルを新しいサイトに上げれば、「Google嬢」と交流できるらしい。
禁断の検索ワードも教えてくれちゃう。
また、そうしないと、検索結果になかなか乗せてくれないとのこと。
やれやれ・・・山ガハとは打って変わって、お嬢のワガママに耐える必要がありそうですな。

さて、このテーマの主眼は、「スマホがインターネットの世界をガラリと変えた」ことでした。
でも、もう1回だけ、主眼と関係のない話をします。
なぜなら、「Google嬢」のワガママを聞き始めたのが、いろいろなことを気付くきっかけになったからです。

[802] ユニバーサルデザインとCSS

~スマホが変えたHTML文【ピクニックを始めたコンテンツたち】~

前回、
「スマホが登場するまでのホームページは、『テーブル』という見えない枠によってデザインされていた」
ことをお話ししました。
いわば、大きさの決まったキャンバスへ画を描くようにして、コンテンツが並んでいたのです。

ところがスマホの登場により、閲覧環境に変化が起きました。
横幅は、一般的なPCモニターの約3分の1しかありません。
スマホユーザーには、一枚の画の、わずか左上の部分しか見えていないのです。

そこで、CSSを使った「ユニバーサルデザイン」の必要性が問われ始めました。
これは、ホームページに文字と画像しか置かず、その配置を端末に決めさせるというもの。
視認性の悪い横スクロールを発生させないことで、ユーザビリティを高めたのです。
しかし、その代わりに、以下のような状況が起きてしまうことに。

ユニバーサルデザイン
山ガハで多用していた、横並び3コンテンツのイメージ

例えば、「ノーマル吉野家」「青い吉野家」「白い吉野家」の対比をしたかったとしますよね。
PS前提なら・・・というか、自分にはこの発想しかなかったのですが・・・横並びで表現できます。
ところが、画面幅を狭めていくと、「白い吉野家」だけ下に落ちてしまうのです。

これは自分に、強烈なアレルギーを引き起こしました。
そこまでして、スマホユーザーをちやほやすべきなのかと。
むしろ、「山ガハ」はPCで見ろと。
つまり、せっかくCSSを導入したのに、横幅を760ピクセルで固定してしまったんです。
もちろん、コンテンツの横幅を250にせず、「閲覧画面の3分の1」と指定することもできます。
これならデザインが崩れないものの、画像はかなり小さくなります。
ですから、パーセンテージの指定は行いませんでした。

もし、これ以上ページを増やすのであれば・・・。
お株だった「横並び3コンテンツ」という発想は、どうやら捨て去らないといけないようです。
であれば、いっそのこと、全くコンセプトの異なったサイトを一から立ち上げようか。
なんとなく「YMGH」を残したかったので、じゃあ、ライティングワークをテーマにした「YM我報」にしよう。
これが、現「山ガハ」です。
そして、横幅指定をなくした別サイトの建設を、新たに始めようと考えました。
お仕事のお問い合わせ
カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
プロフィール

てつまる

Author:てつまる
神奈川県を中心にフリーで活動しているライターです。
超IT系を除き、医療・各士業・経営者・アスリートへの取材、アーティストプロモート(情報発信)、イベントレポなどを手がけています。

最新記事
カテゴリ
お世話になっているサイト様
最新コメント
最新トラックバック
コトバカウンター
special thanks to
検索フォーム
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR