f:id:KAI-YOU:20190722150714j:plain

カイユウ開発部のニンジャです。

近年、レスポンシブレイアウトやマルチデバイス表示に対応しているWebサイトを多く見かけるようになりました。

今回は、なぜこれらが有用なのかについての考えと、実践する際に必要な下ごしらえなどについて簡単にまとめてみたいと思います。

レスポンシブレイアウトのメリット

レスポンシブレイアウトは、HTMLをワンソースで管理し、ブラウザのサイズによってデザインやレイアウトをCSSで切り替えるという手法です。日本でもかなり一般的なページ設計の手段になってきました。

デザインパターンとしてGoogleからも推奨されていて、

ファイルがひとつに統一されるため、メンテナンスが容易（修正漏れやPC/SPでの齟齬も減る）
マルチデバイスに対応しやすい

などというメリットもあります。

ただし、PCやスマートフォン、タブレットなど様々なデバイスの機能や特性を踏まえたうえでの設計が必要となるため、開発時に要求される技術や知識はより高度になります。

KAI-YOU.netはどうなの？

f:id:KAI-YOU:20190722150747p:plain

弊社が運営しているポップポータルメディア「KAI-YOU.net」は、2013年3月15日に公開されました。

その頃からレスポンシブレイアウトという概念は知られていました。けれどレスポンシブルレイアウトというのは、最適化については諦めて、どこか平均値をとるような無難な回答をする設計というイメージを抱いていました。

そこで当時は、PC／スマホサイトを完全に分け、それぞれの最適解を模索していく手法を選び、開発を続けてきました。

見えてきた課題

二年半の開発や運用を振り返ってみると、PC／スマホサイトを分けて開発すると、それぞれが別タスクとして進みがちで、思っていたよりも開発コストが高かったような印象があります。

また、ユーザーから見たときにPCだけ/SPだけに存在するページが発生してしまい、不便さを感じさせてしまったこともあるかもしれません（現在もサイトの構成に微妙な違いがあったりします；；）。

今後のあるべき姿を模索する中で、より多くのデバイスでユーザーが満足できる形の体験を提供することが、かなり優先度が高い事項なのではないかと考え、レスポンシブなWebデザイン設計（ワンソースでのhtml管理）を視野に入れるようになりました。

レスポンシブレイアウトのおおまかな設計

CSSメディアクエリの利用

レイアウトや要素のサイズの切り替えには、CSSのメディアクエリという機能を利用します。表示しているブラウザの幅や高さをみて、適用するCSS（Sass）を切り替えるというものです。

アプローチとしては、ファイルを分けて作るか、パーツごとに都度記述していく方法が考えられます。

Sass

ファイルを分けて作る場合

//768px以上979px以下の場合
@media (min-width: 768px) and (max-width: 979px)
  .wrap
    width: 100%

//767px以下の場合
@media (max-width: 767px)
  .nav
    display: none

@media (max-width: 480px)
@media (max-width: 979px)
@media (min-width: 980px)

//高さについても指定が可能
@media (min-height: 980px)

パーツごとに記述していく場合

.wrap
  width: 980px
  @media (min-width: 768px) and (max-width: 979px)
    width: 100%

.nav
  display: block
  @media (max-width: 767px)
    display: none

前者はファイルの行き来が多くなり、だんだんと思考停止で上書きしがちです。ただスピードは出やすいです。（代わりにぐちゃぐちゃになる。）

後者の場合は、一箇所でまとまりを考えながら記述できるので、こちらのほうがおすすめしたいです。複数人での開発も視野にいれると、まとまりがあって読みやすいことがかなり大事になってきます。

マルチデバイス表示への対応

マルチデバイス表示への対応には、レイアウト以外にも考慮すべきことがあります。それは、デバイスやブラウザの性能によって、実現できる機能やインタラクションが異なる場合があるということです。

デバイスのOS／ブラウザの機能を判別しておくことで、JavaScriptやCSSでの記述を分岐させやすくします。

デバイスのOS判別

フロントエンド側で対応するには、ブラウザが持っているuserAgentという情報をJavascriptで取得します。

JavaScript

var ua = window.navigator.userAgent.toLowerCase();
console.log(ua);

consoleでは、筆者の環境だと以下の様な情報が出力されます。

"mozilla/5.0 (iphone; cpu iphone os 7_0 like mac os x; en-us) applewebkit/537.51.1 (khtml, like gecko) version/7.0 mobile/11a465 safari/9537.53"

この文字列に含まれる情報をもとに、モバイル端末なのか、それ以外のものかという判別をします。

JavaScript

if (ua.indexOf('ipad') != -1) {
  // iPadだったら実行
  $('html').addClass('ipad');
} else if (ua.indexOf('iphone') != -1) {
  // iPhoneだったら実行
  $('html').addClass('iphone');
} else if (ua.indexOf('android') != -1) {
  // Androidだったら実行
  $('html').addClass('android');
}
...

この場合はhtmlタグにiphoneというclassが付与されます。

ブラウザの機能判別

ModernizrというJavaScriptのライブラリがあります。このModernizrを読み込ませると、ブラウザの機能を判別し、htmlタグにブラウザが持つ機能に応じたclassを追加してくれます。

Html

<html class="js flexbox canvas canvastext webgl touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
</html>

また、JavaScriptでも正負を判別可能です。

Javascript

if (Modernizr.webgl){
  //ブラウザがWebGLに対応していたら実行される
} else {
}

まとめ

ざっとレスポンシブレイアウトのメリットや、マルチデバイス表示に対応する際の下ごしらえについてみてきました。

どんな環境でも同じ機能を利用でき、同じ体験を得られるということは、ユーザーにとっても非常にメリットがあることです。また、複雑さをなるべくシンプルに解決しようとするレスポンシブレイアウトは、開発者として目指すべき方向のひとつでもあります。

今後も、ユーザーにとってのメリットを考えながら、様々な角度から知見を深めていければと思います。

最後に

株式会社カイユウでは、レスポンシブレイアウトでWebサイトをつくりたいデザイナー・エンジニアを募集しています。

あなたの力で、メディアやコンテンツの未来を明るくしていきましょう！＼＼(۶•̀ᴗ•́)۶//／／

KAI-YOU Lab.

すべてのデバイスで同じ体験をつくる　レスポンシブレイアウトの有用性