レスポンシブWebデザインに対応しました

レスポンシブWebデザインとは何ぞや？という方もいらっしゃるかと思いますので、まずそこからお話したいと思います。

レスポンシブWebデザインとは、簡単に言ってしまえばデバイスの種類(PC・スマホ・タブレットなど)や画面サイズ、ウインドウサイズに応じて自動的に最適化されるウェブデザインの事です。

当サイトはJIMDOというホームページサービスの「Helsinki」というテンプレートデザインを使っているのですが、このテンプレートはもともとレスポンシブWebデザイン対応ではなくPC用表示とスマホ用表示が分けられ、PC用のページを作ると自動的にスマホ用のページも生成されるとともに、スマホからアクセスするとurlの末尾に?mobile=1の付いた専用ページに飛ばしてくれるというものでした。

なのに何故、いま現在このサイトがレスポンシブWebデザインになってしまったのか、これから事の顛末をお話していきたいと思います。

JIMDO公式からは何の告知もない(いつもここの公式の告知は遅い…いつも事後報告)のですが、つい最近新しく「Tokyo」というテンプレートが追加されたらしいと聞き、どんなデザインか見てみようと今日ログインしてみたのでした。

するといま使っている「Helsinki」に新しいバージョンがあるとの表示。本来の目的だった「Tokyo」というテンプレートそっちのけで試しに「Helsinki」新バージョンのプレビューを見てみると、パッと見そんなに見た目は変わらない。なのであまり深く考えずに新バージョンに変更してしまいました。

その後サイトを良く見てみると微妙な色の違いとともに、今までのレイアウトとも少し違う…崩れている(と言うほどレイアウトに気を使ったサイトではないですが)という事に気がつきました。

今まではウインドゥサイズを小さくするとはみ出ていたのにレイアウトが可変してウインドゥ内に収まるようになっている…これはもしかして…。

JIMDOさんが各テンプレートのレスポンシブWebデザイン化を進めている事は知っていましたので、ここでピンときました。そうです「Helsinki」もレスポンシブWebデザイン対応になったんですね(ほんと告知はちゃんとしてほしいです)。

「Helsinki」がレスポンシブWebデザイン化され一番大きく変わった部分は今までのスマホ専用表示では存在が無視され一切表示されていなかった右カラムがスマホから見た場合ページの末尾に表示されるようになった事ですかね。

このせいで今まではリンクボタン各種(FacebookとかTwitterとかのアレ)をわざわざ全てのページに個別に設置していた(こうしないとスマホから見ている方はリンクボタンが使えない)のですが、今回の変更によって右カラムにリンクボタンを設置しておけばPCからでもスマホからでも、どのページを見てもリンクボタンが使えるようになりました。

また、せっかくサイトを訪れて下さった方の直帰率を改善する為、サイト内の他コンテンツに誘導するべくメニュー的なものを記事を読み終わった後に目にするページの下部に、これもわざわざ全てのページに置いていたのですが、変更後は右カラム内にひとつ置いておけば事足りるようになりました。

また、レスポンシブWebデザイン化によって従来のようにurlの末尾に?mobile=1を付けても変化が無くなったので、今まで右カラムに置いていた「スマートフォン表示」ボタンは撤去しました。

以上が、今回のサイト更新、レスポンシブWebデザイン対応の顛末となります。

(追記)

せっかくですので、レスポンシブWebデザインっぽくトップページだけサイドバーを消してそれっぽくしてみました。アイキャッチ画像に迫力が出たでしょうか。

何故トップページだけかと言いますと、この「Helsinki」というテンプレートのどこが気に入っているかといえばサイドバーがあるところなので…。

それに殆どの方が検索から直にコンテンツへといらっしゃる今の時代、トップページというものの存在意義が良く分からないわけでして、インパクト重視にしてみました。

このサイトを初めて作る前はみんなトップから辿るものだと思い込んでいたのですが実際は全然違いました。今後はトップページの目次としての機能を高めて存在意義を持たせるようなレイアウトも考えていきたいと思います。

そしてまだ、ほとんどのサイト構成は従来通りのままですし、とりあえずやってみただけですので、今後はこのレイアウトの特性を生かしたサイト構成を考えて、また更新していきたいと思います。