なかなかみなさんね、パソコン画面サイズとスマートフォン画面サイズが 全く違うんだ という意識が薄いように思います。
古参ブロガーさんほどそういう方が多い。
ここらで一旦「古い常識」を破棄してですね、スマートフォンを最重要とする考え方 を改めて身につけた方が良いと思います。
これから MFI のローンチも控えていますので、パソコン第一主義はもう捨てなければいけません。
MFI関連記事はコチラ ↓
The other way round
FC2ブログで使えるレスポンシブデザインテンプレートの製作及び配布やFC2ブログカスタマイズなどを記しています。
コンテンツ超過対策はおまけ的に最後に記します。
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ブロガーさんの状態は以下のような形(無料アカウントの場合)
(パソコン版 + スマホ版)
| 脇役(パソコン) | 主役(スマートフォン) |
|
|
レスポンシブデザインの方(無料アカウントの場合)
(パソコン版レスポンシブデザイン一本)
| 脇役(パソコン) | 主役(スマートフォン) |
|
|
|
MFI導入後はこうなるわけなんですよ。
みなさんが嫌だろうが、スマホ非所有だろうが考慮してはもらえません。こうなることが既に確定しています。
カスタマイズするならスマホ版の方
レスポンシブの方はこの章は該当しません。
パソコン・スマホ共通なので、お使いのレスポンシブテンプレートへのカスタマイズはパソコン・スマホ双方に有効です。
何度も言いますが、パソコン版がレスポンシブテンプレートでもスマホ版を 表示 させている人は正しいレスポンシブ設定ではありません ので、この章の該当者です。
カスタマイズを行う理由は「見た目を好みにしたい」「使い勝手を良くしたい」「SEOの対策をしたい」
こんなところでしょうかね。
でも今後はスマホ優位なのですから いくらパソコン版でそれをしたところで徒労です。
特にSEO。Googleはもうパソコン版を重視しませんので対策すべきは寧ろスマホ版です。
見た目のカスタマイズにしても、ほとんどの閲覧者はスマホからアクセスしています。
みんなが見ているのはスマホ版の方ですよ。いくらパソコン版の方をカスタマイズしても見てもらえる確率は激低。
私個人の話しをしますけれども、テンプレートのカスタマイズのご相談が来ますよね。
で、確認してみるとスマホ版を表示している。
そんな場合には「… 別にやらなくても良いんじゃね？ (´・ω・｀)」
と思っています。正直言うと(笑)
スマホ版非表示の方へのお返事と気合の入り方が違います。本音です(笑)
スマホ版非表示設定 = 正しいレスポンシブ 採用者は即ち サイトの顔をカスタマイズしている ことになるわけですから、これはもうちゃんとサポートしないといけないなぁ、なんて思うわけなんです。
まとめ
以前チラっと「スマホ版併用者さんへのサポートはお断りしようかなぁ(意味が無いから)」などとボヤいたことがあります。
その際に数名のテンプレユーザーさんが「たぶんそれは「知らないから」「わかってないから」だと思いますよ。」とアドバイスをくださったんですね。
ですから啓蒙をしていくべきだろう、と。
時に疲れますけども、今後もこうして定期的に記事にしていこうとは思っています。
ということで、既に何度も掲載していますがブログカード貼っておきます(笑)
とてもわかりやすいと思いますので是非ご参照ください。
FC2ブログのレスポンシブテンプレートで誤った設定をしておりませんか？
来年からのスタートがかなり濃厚になって来たGoogleの モバイル ファースト インデックス（MFI） それに向けて、既にご自分の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%; を必ず書く、と。
それだけで防げます。
There are no comments yet.