レスポンシブレイアウト どもども、ドモドモ(^^)v

BLISKというWEBブラウザを使い始めた。なにが便利かというと、スマホ画面とPC画面の両方が同時に表示されて、上下のスクロールも同期するので、PCとスマホの画面チェックにはとても便利なのである。
利用にはダウンロードしてインストールする必要があるが、GoogleChromeと同じエンジンを使っているようなので、Chromeを使っているPCだと問題なく利用できる。基本的には無料で利用できる。ログインして有料版にして使うとスクリーンショットのクラウド保存など種々の高度な機能が付加されるが、とりあえずは無料版で十分。なので、ログインを求められてもログインせずに使うとよい。

スマホの検索結果に「スマホ対応」という文字が表示されてるだろうか？
Googleは2014年12月からスマートフォンの検索結果でスマートホン対応ができているWEBサイトには「スマホ対応」という文字を表示するようになった。スマホ対応できていないWEBサイトはなにも表示されずに従来どおりである。この変化には検索結果でもスマホを優先する姿勢が現れている。
この措置はこれから数年の過渡的なもの。いずれ、「スマホ対応」が当たり前になればこのような表示されなくなるだろう。そしてそのときはスマホ対応されていないWEBサイトは「スマホ不適正」などという表示になり、そしてそのようなサイトは検索結果の順位が低下し、事実上検索結果から消えていくことになるのかもしれない。スマホ対応が遅れている企業は対応を急ごう。

WEBサイトのレスポンシブデザインをチェックする便利なツールがあった。WEBサイトをパソコンやタブレット、スマフォで閲覧した場合にどのように見えるのかを一度に調べることができる「WebDeveloper」というアドオンである。これまでファイヤーフォックスでは使ったことはある。しかし、今はメインのブラウザがクロームになっているのでしばらく使っていなかった。それが、クロームのアドオン（拡張機能）に「WebDeveloper」があり、「WebDeveloper」で「view-responsive-layouts」というボタンをクリックするだけで、今閲覧しているWEBサイトのPC画面やスマフォ画面の一覧を表示してくれるという優れた機能があった。

マメジン「http://www.mamejin.com/」のWEBサイトリニューアルを実施した。これまでのWEBサイトはMovableType4で構築されていたが、急増するスマートフォン（スマホ）での閲覧には最適化されていなかった。今後スマホでの閲覧はパソコンでの閲覧数を逆転すると見込まれるので、スマホ対応は必須だった。そこでスマホでもパソコンでも可変幅で表示されるレスポンシブデザインのテーマで運用することとした。選択肢としてはMovableType5.2xかWordPressだったが、レスポンシブデザインテーマが豊富なWordPressにすることにした。

movabletype6はレスポンシブデザインに対応したブログシステムである。レスポンシブのデザインテーマを選択しておけば、スマホで閲覧したときの画面表示が可変幅なので、サイズが最適化表示してくれるのがメリットだ。実は管理画面もスマホに最適化されていた。スマフォでブラウザを開きログインしてみると、いつもパソコンの画面で見慣れたMovableType6の管理画面がスマホ用で表示された。WordPressではスマホ用のアプリを使うので、MovableType6用のアプリを探していてもないわけである。movabletype6の管理画面はスマフォでもアプリなしで使えそうだ。

問い合わせメールフォームを入れ替えた。これまでのメールフォームはパソコンからの送信を前提にしていたため、スマフォや携帯からだと画面が小さくて送信しにくかった。WEBサイト自体をスマフォでも閲覧しやすいようレスポンシブデザインに変更しているので、メールフォームもレスポンシブデザインに変更したかったのだが、あまりよいメールフォームが見つからなかった。今回実装したのは無料提供されているうえ、設定もわりと楽で一旦インストールすると後の変更はWEB管理画面からできるという親切な設計のCGIである。

この画像は「tohdamikio.com」のリアルタイム検索。グーグルアナリティクスでは今どれくらいのアクセスがあるかがリアルタイム検索でわかる。その内容はモバイルの増加を示している。現在１０名がこのブログを閲覧していて、その内訳は、パソコンからのアクセスが５名、携帯やスマートフォンからのアクセスが４名、タブレットが１名ということである。半数が携帯やスマフォかタブレットからのモバイルアクセスだということだ。この状況はすでに特別なことではない。昨年からモバイルアクセスが増加しており、いくつものWEBサイトではPCよりもモバイルアクセスのほうが多いという状況になっている。

レスポンシブWEBデザインとは、１つのhtmlでパソコンでもタブレットでもスマートフォンでも最適表示をしてくれる可変幅対応のデザインCSSである。エージェントで切り替えてパソコン用やスマートフォン用に作成された別々のhtmlを見せる方式は複数のhtmlが存在してしまうため管理がややこしい。これからはレスポンシブ対応を主にしていきたい。
アクセス解析を見ていると、今年に入ってから急激にスマートフォンユーザーのアクセスが増加しており、すでにパソコンユーザーの閲覧数を超えているWEBサイトが多い。この急激な変化にネットショップやブログなどのWEBサイトがまだ対応できていないという例も多い。レスポンシブ対応の近道として、WordPressやMovableTypeなどのブログで、レスポンシブ対応のデザインテーマを選択することである。

ドモドモコーポレーション公式サイトとPRサイトをリニューアルしてMovableType6で再構成した。今年はパソコンからスマートフォンやタブレットへとデバイスが本格的に移転した節目の年である。いつまでもパソコン表示に照準を合わすのではなく、スマフォやタブレットでの表示でも対応可能な可変幅（レスポンシブデザイン）に転換する必要を感じていた。当ブログは９月にMovableType6のベータ版でテスト後に正式にMovableType6に移行した。そして、本日、株式会社ドモドモコーポレーション公式サイト「dm2.co.jp」もドモドモコーポレーションPRサイト「domo-domo.com」もMovableType6に移行した。