パソコン優位主義は今すぐ捨てるべき【コンテンツが画面横幅を超過する場合の対処】

パソコン優位主義は今すぐ捨てるべき【コンテンツが画面横幅を超過する場合の対処】

カスタマイズ
2017/12/14 10
vanillaice (Akira)
vanillaice (Akira)
Education Responsive MFI SEO 初心者向け

なかなかみなさんね、パソコン画面サイズとスマートフォン画面サイズが 全く違うんだ という意識が薄いように思います。
古参ブロガーさんほどそういう方が多い。

ここらで一旦「古い常識」を破棄してですね、スマートフォンを最重要とする考え方 を改めて身につけた方が良いと思います。
これから MFI のローンチも控えていますので、パソコン第一主義はもう捨てなければいけません。

MFI関連記事はコチラ ↓

コンテンツ超過対策はおまけ的に最後に記します。

webレイアウトの変遷

黎明期の固定幅(ソリッド)デザイン

ブログ黎明期当時のブログテンプレート(スキン)というのは固定幅が当たり前でした。
記事(コンテンツ)の表示横幅を予め決めてしまい、パソコンの画面幅よりもその既定値が大きい場合には 横方向のスクロールバーが出る
これもう物理的に当たり前のことなんですよね。
そしてそれを「当然」だと思ってさほど気にも留めていなかったのではないでしょうか。

流動幅(リキッド)デザイン・テーブルレイアウトの流行

かつては「横幅の設定値」というのがとっても重要で、1300pxにすると大抵のパソコンで収まらないから最も多く出回っているパソコンなどを基準として大体 全体幅950px というのが多かったですよね。
950pxで作っとけばまぁ大体どのパソコンでも煩わしい横スクロールにならずに済むかな、みたいな。

その後出てきたのが リキッドデザイン です。
パソコンの横幅も多様化してきたのでなかなか全体幅を決め兼ねてしまう。
ならばある程度は コンテンツが伸縮するように作れば良いのではないか という考え方です。
こういうのがまさしく進化ですよねー (´・ω・`)
そこでよく使われるようになったのが tableレイアウトであり、数値設定に於いては pxでなく%を使う という試み。

tableレイアウトの流行は ホームページビルダー の流通が一役買ってます。
私自身は利用したことがないのですが、ビルダーはtableが基本ですし、ホームページ製作という括りがなくともMicrosoftの Word とかもそうですよね。
Wordの技術を拡張するとビルダーが出来る、みたいな。

tableレイアウトについては現在ではもうダメね。ダメ。
何故ってtableというhtmlタグは デザインに使うためのものではないから です。
<table> はhtml定義で「表(ひょう)」です。
みなさんのブログは表ですか?

スマートフォンの台頭・スマートフォン専用版

イマココ。
ご存知の通り スマートフォン という新デバイスが世の中を席巻しているのが現在です。
そしてマークアップ言語的には html4からhtml5へ
スマートフォンの技術はhtml5とも深い関わりがあります。
なにせhtml5を強く推したのがスティーブ・ジョブズその人であり、スマートフォンを世に送り出した功労者でもあります。

パソコンレイアウト的にはあまり進化がありません。止まってます。
固定幅の採用もあればリキッドの採用も見られます。

ところがスマートフォンという未知のデバイスに対し、リキッドレイアウトではもう間に合わなくなったんですね。
だってどう考えても無理でしょう。 パソコンとスマホは画面の大きさが全く異なる 物理的にこんなに大きさが違う。これを一体どう扱ったら良いわけ??? と(笑)
いくらリキッドで伸縮するといってもカラムが横に並んでたりする場合、画面が320pxしか無いのにどうやって並べるんや、と。
いやいやそれは無理でしょう。

そこで登場したのが スマートフォン専用版 です。
スマホではパソコンと同じものを見せず、特化・最適化で見てもらいましょうという試みですね。
つまりパソコン版テンプレートとは全く別のものを用意する という考え方です。
現時点でのFC2ブロガーさんのほとんどがこの方法を取っています。

でも 別のテンプレートだということは、htmlも別物 だという点。
そして URLも違う という点。
FC2ブログ的にはダイナミックサービングというシステムですからURLが完全に違ってしまうことはありませんが、テンプレート種の切り替えパラメータを利用すると条件が同じになります。
つまり 同一記事なのに2つの異なるURLが出来てしまいます。
それに加え デザインの統一感が無い ですよね。
同じデザイナーがお揃いで提供してくれれば良いですが、そうでない場合 パソコンとスマホではサイトの見た目や印象や使い勝手が全く違う といったことが起こります。
FC2ブロガーさんのほとんどがこれに該当します。

スマートフォン全盛・レスポンシブデザイン

トレンド的にはイマココ。
スマホ版の難点である

  • SEO的に不利(重複URL)
  • デザインの統一感が失われる
  • html管理が大変

これらを解消できるのが レスポンシブデザイン です。
旧来のリキッドレイアウトに加え、画面サイズに応じたカラム変更など。
狭いスマホ画面では横並びカラムは無茶ぶりなので、シングルカラム(左右並びから上下並びに変更)を行います。
たまに「カラム落ちします…。」というお問い合わせ(クレーム)が届きますが、それこそがレスポンシブを知らない・理解していない証拠でもあります。
別に知らなくても恥じるようなことでもないが (´・ω・`)

レスポンシブを採用するとURL重複が起こりません。
デザインの統一感もバッチリです。同じものが表示されるわけだからそりゃそうだ。
htmlの管理も一本化されて楽ですね。
パソコン版に何か追加・編集を行えばそれがそのままスマホ閲覧時にも適用されるのだから楽。
ただしFC2ブログでは スマートフォン版を非表示にする ことが絶対条件です。
スマホ版を表示している限りこれらの問題が解決することはありません。

レスポンシブデザインとはパソコンのレイアウト進化であり、スマートフォンのレイアウト進化でもあるわけです。
スマートフォン専用版というのは 最適化・特化 の試みです。
最適化というのは場合によっては内容が全く変わってしまうことを意味します。
対してレスポンシブというのは 汎用化 です。
パソコンとスマホを別物と区切るのではなく、もっと大きな括り「デバイス(パソコン, タブレット, スマートフォンなど全て含む)」という捉え方ですね。
汎用化とは「広く適応できるようにすること」を指します。最適化とは全然違う。

>webの最強選手はスマートフォン、パソコンは二番手

これからはそうですよ。MFIはそのための施策です。
Googleの検索ロボット(bot, クローラー)は パソコン版を(ほとんど)見なくなります。
ですから SEOもデザインも全てスマートフォンでの内容が最重要 となります。

多くのFC2ブロガーさんの状態は以下のような形(無料アカウントの場合)
(パソコン版 + スマホ版)

脇役(パソコン) 主役(スマートフォン)

レスポンシブデザインの方(無料アカウントの場合)
(パソコン版レスポンシブデザイン一本)

脇役(パソコン) 主役(スマートフォン)
sample

MFI導入後はこうなるわけなんですよ。
みなさんが嫌だろうが、スマホ非所有だろうが考慮してはもらえません。こうなることが既に確定しています。

カスタマイズするならスマホ版の方

レスポンシブの方はこの章は該当しません。
パソコン・スマホ共通なので、お使いのレスポンシブテンプレートへのカスタマイズはパソコン・スマホ双方に有効です。
何度も言いますが、パソコン版がレスポンシブテンプレートでもスマホ版を 表示 させている人は正しいレスポンシブ設定ではありません ので、この章の該当者です。

カスタマイズを行う理由は「見た目を好みにしたい」「使い勝手を良くしたい」「SEOの対策をしたい」
こんなところでしょうかね。
でも今後はスマホ優位なのですから いくらパソコン版でそれをしたところで徒労です。
特にSEO。Googleはもうパソコン版を重視しませんので対策すべきは寧ろスマホ版です。
見た目のカスタマイズにしても、ほとんどの閲覧者はスマホからアクセスしています。
みんなが見ているのはスマホ版の方ですよ。いくらパソコン版の方をカスタマイズしても見てもらえる確率は激低。

私個人の話しをしますけれども、テンプレートのカスタマイズのご相談が来ますよね。
で、確認してみるとスマホ版を表示している。
そんな場合には「… 別にやらなくても良いんじゃね? (´・ω・`)」
と思っています。正直言うと(笑)
スマホ版非表示の方へのお返事と気合の入り方が違います。本音です(笑)
スマホ版非表示設定 = 正しいレスポンシブ 採用者は即ち サイトの顔をカスタマイズしている ことになるわけですから、これはもうちゃんとサポートしないといけないなぁ、なんて思うわけなんです。

まとめ

以前チラっと「スマホ版併用者さんへのサポートはお断りしようかなぁ(意味が無いから)」などとボヤいたことがあります。
その際に数名のテンプレユーザーさんが「たぶんそれは「知らないから」「わかってないから」だと思いますよ。」とアドバイスをくださったんですね。
ですから啓蒙をしていくべきだろう、と。
時に疲れますけども、今後もこうして定期的に記事にしていこうとは思っています。
ということで、既に何度も掲載していますがブログカード貼っておきます(笑)
とてもわかりやすいと思いますので是非ご参照ください。

FC2ブログのレスポンシブテンプレートで誤った設定をしておりませんか? - レスポンシブ

来年からのスタートがかなり濃厚になって来たGoogleの モバイル ファースト インデックスそれに向けて、既にご自分のFC2ブログを旧来のテンプレート(HTML4)から HTML5+CSS3 のWeb技術を利用するレスポンシブテンプレートでの運営に切り替えた人も大勢おりますよね。...

おまけ「コンテンツ超過」

中身が画面幅を超えてしまう、という状態ですね。
中身 = 記事内容
画面幅 = スマートフォンの画面

はみ出しのパターンはたくさんありますけども、今回のオマケで取り上げるのは以下のようなもの。

Lorem ipsum dolor sit amet, stet comprehensam vel eu, quo aliquip mandamus ut, ea virtute voluptua eam. Tempor scribentur te duo. Erant mollis vim ea, per fuisset fabellas consectetuer at. Ut nam modus movet scriptorem, duo in possim animal. Dico urbanitas ex eam, ex eam urbanitas conceptam, ad reque simul nam.

例えばこんな風に周りを囲ったりだとか。
大抵の方はこんな風にhtmlを書いてしまうんですね。

<div style="width: 横幅px; border: dotted 2px rgb(51,51,51); padding: 10px;">
<p>内容</p>
</div>

これ ダメ ですよ。
横幅の数値が200pxなど小さければセーフなんだけれど、300px以上を指定していたら スマホで確実にはみ出します。

ビューポートを超過するナビゲーション こういう状態を overflow (おーばふろー) と言いますが、みなさんも経験ありますよね。
上下スクロールを行う度に画面が左右あっちゃこっちゃ移動してしまう。
嫌になって離脱することもあるでしょう。
これはパソコン的に言うと「横スクロールバーが出ている状態」です。
スマホはスクロールバーが目視できないだけでそれと同じ状態。

レスポンシブであろうとスマホ版を併用していようと等しく起こります。
テンプレート内容は製作者が極力こういう事態を避けるように配慮しますが、記事内容についてはどうすることもできないんですね。
ユーザーが任意で書くhtmlを制御するのは越権だと思いますし(笑)
対策がしてあるとしても「はみ出した場合は見られなくする(overflow: hidden;)」ぐらいです。
見切れた部分は見ることができないよ!ってことですね。
コンテンツ超過 = NOTモバイルフレンドリー ですから、Googleに正当に評価してもらえないページとなってしまいます。
SEO的な意味で見切れ非表示を行うのが良いのか、それとも画面がグラつくとしても内容が見られるようにしておくのが良いのか。
まぁこの辺は難しい選択です。
つか、そもそもはみ出させなきゃ良いんだよ。

<div style="max-width: 100%; width: 横幅px; border: dotted 2px rgb(51,51,51); padding: 10px;">
<p>内容</p>
</div>

横幅の指定に px などの絶対単位を利用したならば max-width: 100%; を必ず書く、と。
それだけで防げます。

 10

There are no comments yet.
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/12/15 (Fri) 09:07
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/12/15 (Fri) 11:31
vanillaice (Akira)
Akira
To 毎度の内緒さん

実はですね、夜中(3時とか4時とか)にベッドの中で気づいたらスマホ開いたままで内緒さんのページをタブでめっちゃ開いてたんですよね。私(笑)
これがどんなカウントになってるのかわかりませんが、気持ち悪くなかったですか。すみません ^^;
10タブぐらい開いてた(笑)
内緒さんの記事はいつも拝見してますよ :)

これはマズイよ〜の件ですが、内緒さんに対しては無いけれどもこのページの「オマケ」に該当する方が内緒さんのコメント欄にいらっしゃることに気づいた。
内緒さんからコソっと伝えてもらうと良いかもしんない ^^;

2017/12/15 (Fri) 13:04
Akira
To スマホ版の件 内緒さん

こんにちは (o'ω')ノ

> その白い背景のが私の〜

いえ。そういう意味ではないです。サンプルに使っただけで。
今デフォルトだとこのスマホ版じゃないですかね。
使用率がとても高いところからしてそうだと思います。
別のスマホ版をDLしているのであれば、そのテンプレートです。

> どんな感じに見えているのか〜

全体的にもやーんとした印象ですかね (´・ω・`)
この記事の前に「画像がぼやける」というのを書きましたが、FC2ブログのスマホ版で使用されているサムネイル画像というのは72×72が実寸で、そのまま72pxの正方形表示です。
なのでぼんやりとした印象になってしまうのは仕方がないように思います。
私はこのデフォルトスマホテンプレが嫌いですね。
ブログでやってほしくない「無限スクロール」ですし、ブログタイトルが一行に限定されているので長いブログタイトルの方は後方が省略されてしまいます。
ブログタイトルが全表示になるページがどこにもないなんてありえないと思いますけどどうなんでしょう(笑)

2017/12/15 (Fri) 13:10
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/12/15 (Fri) 14:33
Akira
To max-widthの件 内緒さん

はい。お願いします。
あと伝え忘れましたが、同じ方、吹き出しの閉じタグが足りませんのでレイアウト崩れてます(シンタックスエラー)
記事下のSNSアイコンに本来出てはいけないリストマーカーが表示されてます。
最新ページと一番古いページとで見比べるとわかると思いますー。

2017/12/16 (Sat) 00:24
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/12/16 (Sat) 16:12
Akira
To max-widthの件 内緒さん②

伝書鳩みたいに使っちゃってすみません(笑)

なんだか改行についての疑問をお持ちの方が多いようで。
ちょっと記事にしてみようかと思います。

2017/12/16 (Sat) 17:47
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/12/17 (Sun) 09:44
Akira
To 記事の書き方の件 内緒さん

こんにちは ('0')/

それも一つの方法ではあるんですが、それやってしまうと結局「スマホで文章がおかしい」が直ることはありません。
一番の原因は段落を意識した作業をしていないこと、スマホの画面幅を意識した作業をしていないところにあるので、根本的に考え方を変えていかないといつまで経っても同じ状態を引きずりますよね (´・ω・`)
そもそも一文ごとに改行を行う、ということ自体が文法的な誤判断でもあるわけですし。

日本語は英語のような「単語の区切り」という概念がありませんので、その辺りが改行文化の背景なのかもしれない(笑)

とりあえず、テンプレートでなんとかしよう、というのは根本的な原因解決にはなりませんので、別のアプローチで行きたいと思います。
記事幅の縮小についてはもとより「記事内」という範囲で縮小可能なDOM構成なってますので、もう個人カスタマイズで。
ただ風潮としては全体幅が広いのがトレンドですけどね。

2017/12/17 (Sun) 14:47

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ