スマートフォン、タブレットPC対応にしたい

日本とは反対に今週に入り、ここシドニーは非常に寒いです。
寒いのも後2カ月くらいらしいので、上着は買わない方向で行こうという僕の決心が崩れてしまいそうです。

前置きもほどほどに前回の「Flashを使わずに動きのある表現を！」に引き続き、Studio SPECのコーポレートサイトリニューアルにおけるポイントを紹介させていただきたいと思います。

シリーズStudio SPECホームページリニューアルのポイント紹介

スマートフォン、タブレットPCに対応

皆さん、持っていますか？スマホ。
これ本当に便利ですよね！
そんなスマホの存在も今では当たり前ですが、10年も前にコレをみたら原始人が火を見た如く驚くと思います。

ちょっとした検索だけなら、わざわざPCの前に座り起動させてなんて面倒な事をせずにスマホでサクッと調べたいですよね。
第1回の「Flashを使わずに動きのある表現を！」でも触れましたが現に我が、Studio SPECのホームページへのアクセスの20%弱をiPhone, iPadが占めています。

見解としてスマホからのアクセスは初回の訪問者の確立が高いです。なぜなら前途したとおり、ちょっとした検索からサイトに訪れるユーザーが多いからです。
現代人の行動として日中スマホで検索し、気に入ったサイトを帰宅後PCでじっくりと閲覧すると言ったパターンが多いと言われています。

これはもうスマートフォン、タブレットPCに対応させるしかないですよね！

もちろん何も手を加えない状態のサイトをスマートフォンなどで閲覧したら、単純にサイトのサイズが小さくなるだけでとても見辛いです。

そこで今回、レスポンシブレイアウトという技法を取り入れました。
これはスマートフォンでサイトに訪れたらスマートフォン用に、タブレットPCならタブレットPC用に見た目を最適化させる手法です。
要は変形ロボットみたいな感じです。
空を飛びたい時は飛行機に、戦いたい時は人型に、走りたい時はライオン型に？etc…

なんだかワクワクしてきますよね！

この手法のほか、別途スマートフォン用のサイトを作成しスマートフォンからのアクセスがあった場合はそちらに転送させるといった手法などもあります。

難しい事はさておき、それぞれのメディアで閲覧した際の見え方を紹介させていただきたいと思います！

トップページは左側にナビゲーションが無く解り辛いので、グラフィックデザインサービスのページを例としたいと思います。

ちなみに検証用の実機を使用して撮影したかったのですが、そんなカメラのスキルは持ち合わせていないので、僕がスマートフォンサイト等を作成する時、よく使用しているシュミレーションサイトを利用してご説明させていただきたいと思います。

※外部サイトに飛びます。便利なレスポンシブシュミレーションサイト

通常のPC

PCで閲覧されている方はおそらくこの形で見えているのではないでしょうか。
一般的なウェブサイトです。とくに言う事はありません。

タブレット

メインのナビゲーションの位置をロゴの下に移動させて窮屈にならないようにしています。
右側のナビゲーションのサイズも小さくして画面内に収まるようにしました。
メインコンテンツも縮小しています。

スマートフォン

メインのナビゲーションを折りたたんでいます。現れた格子型のボタンをタップするとナビゲーションが開きます。

右側のナビゲーションはページ下部に移動してもらいました。
横並びになっていたコンテンツも縦に整列させることでスマートフォンの小さな画面に収まるようにしてみました。

これらの見え方を一つのページで行っている訳です。
更新も楽ですしSEO的にも有利です。

しかしながら今回取り入れたレスポンシブレイアウト、これが正解と言う訳ではなく、あくまでも選択肢の一つです。
PCサイトにはPCサイト、スマートフォンにはスマートフォン、それぞれの仕様を尊重したコンテンツ作りが大切という意見もあります。これも勿論のことでそれぞれメリット、デメリットがあるのは事実です。
現状のStudio SPECのアクセス解析からみると現状の仕様が最適と考えましたが、今後アクセスの割合が変わってきたりした場合はまた検討が必要とも思います。

すこし話がややこしくなりましたが、スマートフォンの普及率は伸びる一方な世の中。
スマートフォンサイトの制作や既存のページをスマートフォンに対応にご興味がありましたら、お気軽にお問い合わせください。

次回は「更新情報を楽しく掲載したい！」です。