2019年度目白祭研究

　外出中、スマートフォンからWEBサイトを開いて何か調べ物をしようとしたとき、当たり前のように映し出された画面に違和感を持ったことはありますか？ PCと比べてとても小さな画面の中に、情報が綺麗にレイアウトされていると思います。

　私たちは授業での制作を通して、普通に作っただけではスマートフォン上で綺麗に写らないことを知っています。どうやったら対応してくれるのか、そこに着目して「Responsive Design」というものの研究をしました。

1.Responsive Design とは？

　近年、私たちがWEBサイトを見るときに使うデバイスの種類は、PC、タブレット、スマートフォンとたくさんあります。それによって、WEBサイトはどのデバイスからアクセスしても見やすくて使いやすいものでなければならなくなりました。そこで必要とされたのが、Responsive Design（レスポンシブデザイン）です。

　レスポンシブデザインとは、デバイスの画面サイズに responsive(良く反応)して、見やすい表示に自動で切り変えてくれる仕組みを持つデザインです。このデザインを導入すると、PCサイトとモバイル用サイトを別に作る必要がなく、ページごとに一つのHTMLとURLだけで済みます。どうやって対応させていくかというと、CSS（cascading style sheets）でコントロールしていくのです。

では、実際にどのようなコードを書くのか紹介します。

2.メディアクエリ

　メディアクエリとは、表示された画面環境に応じて適用するスタイルを切り替える仕様のコードです。「表示サイズの幅がこれ以上ならこのスタイルを適用」という具合に、ブレイクポイントでレイアウトを変化させるためのもので、書き方は２種類あります。

○１つのCSSファイル内で指定する

@media screen and (min-width:1025px){
	header h1{
		font-size: 55px;
	}
}

CSSにこのコードを入れると、画面幅が1025px以上の時にフォントサイズが55pxになります。

@media screen and (max-width:600px){
	header h1{
		font-size: 20px;
	}
}

こちらの場合は、画面幅が600px以下の時にフォントサイズが20pxになります。

○デバイスごとにCSSファイルを用意する

HTMLファイルのhead部分にこのコードを書きます。

<link rel="stylesheet" href="a.css" media="(min-width: 740px)">
<link rel="stylesheet" href="b.css" media="(max-width: 740px)">

この場合はa.cssとb.cssの２つのcssファイルを用意して、740px以下か以上かで切り替わるようになっています。

3.Viewport

　ところで、スマートフォンデバイスに関しては上で記したメディアクエリを指定しても何も起こりません。もう一つ設定が必要な部分があります。それがViewportです。Viewportとは表示領域のことで、ブラウザにおけるカンバスサイズを仮想して、サイトの表示の仕方を制御してくれます。

<meta name="viewport" content="width=device-width">

このタグをHTMLファイルのhead部分に挿入します。"width=device-width"と指定すると端末やブラウザに合わせた値を返し、モバイル端末の幅よりもViewportの幅のほうが小さいか同じであれば、スマートフォンサイトとしてストレスなく閲覧することができます。

このように、CSSでメディアクエリを、HTMLでViewportを両方設定しておくことでレスポンシブデザインが実現します。

4.メリットとデメリット

　もはや必要不可欠に思えるレスポンシブデザインですが、当然メリットとデメリットの両方の側面があります。

○メリット

1.管理がしやすい

PCサイトとモバイル用サイトが別々に作られていないため、サイトのメンテナンスを行うことが容易になります。デバイスの数だけサイトを作ると、更新や修正を行う時にその分だけ作業が増えてしまいます。

2.新デバイスにも対応できる

デバイスの画面サイズに依存しないことから、今後将来的にどのような端末が普及してもしっかりと対応することができます。

3.SEOに効果的

　モバイルフレンドリーという、2015年4月21日にGoogleが全世界で実装したアルゴリズムがあります。これはスマートフォンでの閲覧に適していないページの順位を引き下げる仕組みです。レスポンシブ対応したサイトを作ることで、Googleの検索エンジンの上位に表示されることが可能になるのです。

○デメリット

1.スマホ表示が重くなる

実際に画面に表示されなくても、ソースコード上ではPCサイトに使用する大きなサイズの画像等も読み込んでいるので、モバイルサイト上で表示速度が落ちてしまうことがあります。

2.構築が複雑になる

サイトの運営・管理は楽になりますが、制作段階でありとあらゆるケースを想定しながらデザインとコーディングをして進めていくので時間と頭をすごく使います。

3.デザインに制限がかかる

スマホやデザインでは小さな画面で指を動かしてサイトを観覧することが多く、ユーザビリティが高くなるようなデザインが必須となります。そしてまたHTMLが一つなので大幅にレイアウトを変えることは不可能で、全てのデバイスにおいて満足のいくデザインを実現することは難しいかもしれません。

5.まとめ

　あらゆるデバイスに対応したWEBサイトを作る手法は他にもあります。リキッドデザインやフレキシブルデザイン、アダプティブデザインなど。そしてまたこれらの要素を組み合わせてコーディングすることもあります。それぞれのデザインにメリットデメリットがあり、顧客の要望や、作り手の技術によって採用するデザインを変えていくことが大切です。

　このサイトは最もデバイスごとの変化がわかりやすいレスポンシブデザインを土台とし、その他諸々を組み合わせて制作しています。別のページで制作工程や使用した技術なども掲載していますので、ぜひご覧ください。

2019年度 目白祭研究