レスポンシブデザインの実装とHTMLコーディング

tsuruno26_TP_V

既存のwebサイトがすでに運営をしていて、軌道に乗っている場合、その元サイトを上手に生かしながらレスポンシブ対応させたいと考えるのが当然の流れです。
しかし、すでに運用しているwebサイトのコーディングやレイアウトによっては、レスポンシブ対応が難しい場合があります。
実際には、HTML5とCSS3のバージョンで本格的なマルチモバイル対応が可能となるコーディングを記述するのが、今後の運用を見越した時に有利となります。
とはいえ、すでに検索ランキング上位に表示する為に行ってきたマーケティングやコンテンツの更新を無駄にするのはもったいないですね。

○レスポンシブwebデザインってなに?

4589b40b9674046e4f434d827cb5dfb4_s
レスポンシブwebデザインという言葉がweb業界で使われ始めたのは、なにも最近の事ではありません。
スマートフォンやタブレット等、さまざまな形のモニターサイズが登場し、その型も端末メーカーが発売する物によって色々です。すでに動き出して時間が経過しているwebサイトは、それまでのインデックスやサイトのランキング評価を残す場合(URLをそのまま利用する場合)、全てに共通して同じデザインスタイルのwebサイトを表示する為のコーディングが必要になります。
一番の問題点は、画面サイズ。しかもwidth(横幅)が問題の起点となります。PCモニターであればwidthが長くなりますが、スマートフォンやタブレットはおおむね縦スクロールで閲覧する方法をとり、widthが短くなるのです。
あらゆる端末でデザインと挙動を統一し、最適化された形を作り出すためには、HTML並びにCSSの各ファイルを作り、コーディングを行ったうえでアクセスを振り分けるという方法が取られます。
●基本となる構造部分は同じ
簡単に、レスポンシブwebデザインを作る手順を紹介します。
まずは、サイトの体裁をつかさどるHTMLコードを一つ制作実装してフォルダ化しておきます。この中の記述は、あらゆるモバイル端末もPCでの表示の際も共通して使用するコーディングフォルダです。
装飾をくわえるためのCSSコードが必要になりますが、この際に、各モバイル端末にそれぞれ対応するように複数のCSSフォルダを制作しておきます。
どの端末を使っても、それぞれがきちんと表示されるように、コンテンツやレイアウト毎の装飾と幅高を指定しておき、閲覧する端末によって異なる反応をするようにリダイレクトなどで振り分けます。
●最重要コード メディアクエリ
メディアクエリのタグは、フォントや画面サイズにフィックスさせるための記述ですので、CSSフォルダに追記していきます。
記述の方法は
@media screen and (max-width; 480px){ ●●●●●
 }
※例:480ピクセル以下の横幅であるモバイル端末(スマホ)で閲覧している時に、別のCSSを使う という意味の指示になります。
先にお話ししましたが、webサイト文書構造の基本となるHTMLは一つだけです。
CSSの{●●●●●}の部分に、PCの場合をまず前述コードの前に記述し、スマートフォンの場合を●部分に入れ子にします。それぞれの文字の大きさや文字色の指定をすることで、フレキシブルに対応させることができるようになります。

○まとめ

あらゆる端末を想定して、端末ごとのサイト制作を個別に実装すると、URLが複数に散ってしまい、検索ランキングで統一した順位を付けられなくなります。レスポンシブ対応しているタブレット検索について、現状グーグルは端末のランキングと既存PCのランキングを別々に結果として反映していますが、今後の動向とアルゴリズムの追加変更によっては、全てが一つに統一される可能性も充分にあり得ます。
レスポンシブ対応をさせておけば、URLが複数に散らずに、ひとくくりとしてランキング評価を得ることができますし、コンテンツ追加や更新の漏れ・落ちを防ぐこともできます。
コーディングを複雑にしないためにも、記述をくわえたら要所で不要タグが無いか、確認するようにしましょう。

お問い合わせ

CONTACT
Copyright 2017 IMGINOTE INC.