COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.
2017
23
JAN
CATEGORY:
イベントレポート
エンジニア目線で学ぶ!レスポンシブデザインのポイントとは?
こんにちは、デザイナーの野辺地です。

弊社では、Webにアプリにサイネージに...と、日々さまざまな制作に勤しんでおりますが、近頃のWeb制作ではモバイルからのアクセスが8〜9割を占めるという案件も珍しくなくなってきました。
そんな中で「レスポンシブ対応」が必要とされる場面もとても多くなっています。

そんな折、社内のエンジニアから上がってきた声をきっかけに、エンジニアが講師となり、デザイナーとエンジニアがもっとスムーズに制作を行うための「レスポンシブについての勉強会」を開催しました!

「今更なにを」と思う方もいるかもしれませんが、デザイナー目線・エンジニア目線それぞれの意見を、一度に集まって共有しあう機会は案外少ないもの。
この機会に一度みんなの足並みを揃えよう!というスタンスで実施しました。

その様子や内容を一部ご紹介いたします。




レスポンシブの実装とデザインのポイント


ブレイクポイントとデバイスの解像度


レスポンシブサイトをデザインする際に悩ましいことの1つは、ブレイクポイントとPSDのサイズ。デバイスの増加、Landscape時の考慮......デザインデータは何種類用意すればいいのか。

そんな時の指標にと、Stat Counterというサイトをもとに解説をしてくれました。

参考:http://gs.statcounter.com/

主流な解像度は上記のとおりですが、とは言ってもブレイクポイントを何pxにするという決まりは特にないもの。単純に一番シェア率の高いサイズを基準に3種デザインを作るというのはOKですが、「モバイル端末はLandscape時にどうするのか」を念頭に置いてブレイクポイントを決定するのが必須のようです。

しかし、デザイン上では良いものの、実装されてデバイスの幅が変われば、画像や文字の見え方や印象が変わってきてしまいますよね...。特に多く挙がったフォントサイズの悩みについては、後ほど触れていきます。


実装の手順とデザイン


レスポンシブサイトは、HTMLが1ソースというのが大原則。その上でスタイリングを行うCSSは スマートフォン→タブレット→PC の順にレイアウトをしていきます。


デザインをする上で注意すべき点は、PC・スマートフォン間で矛盾が起こらないこと。1ソースで管理する上で、要素ごとの構造や順番などがちぐはぐになっていると手間がかかってしまいます。


不安であればデザインFIX前に確認をしたり、デザインは3デバイス分一式で受け渡すことで、早い段階で矛盾に気づくことができ、状況に応じた対応も検討することができます。

また、可能であればCSSの設計と同様にスマートフォンのデザインから入って展開をしていくと、実装する上でも設計がしやすくなるようです。



どうする?フォントサイズ問題


可変フォントサイズのススメ


先にも触れましたが、レスポンシブサイトで悩まされることのひとつとして「フォントサイズの問題」があります。ブレイクポイントを決めて実装を進めるも、320〜768pxの振り幅は結構大きく、その狭間の調整まで検討していくとなかなか時間もかかります。

そこで、元SONICJAMのエンジニアで、現在はフリーランスとして活動している池田が、便利な自作ツールを紹介してくれました。


実装あるあるの以下2つ。

img-responsive06-v2.png
これらを解消するにあたって、全てのデバイスサイズでデザインを考えるのも大変ですが、とはいえ無視はできないものです。

そこで「vw(viewport width)」という、画面幅に対して可変する単位を採用して、フォントサイズを決めてしまおう!というお話。

img-responsive07.jpg
池田が自作した「vwフォントサイズチェッカー」は、デザイン上では再現の難しい"可変"をシミュレートできるため、デザイナーからエンジニアへ指示をするにあたって大いに参考になる優れもの。

各案件ごとに適切なシミュレータを用意できればベストかもしれませんが、これだけでもデザイナーは感覚が掴みやすくなりそうです。


スマートフォンの最小フォントサイズ


ブラウザにおける最小フォントサイズは決まっており、Chromeは10px、Mobile Safariは9px、Android標準ブラウザは8pxとなっています。これはあくまでも「最小」のサイズであり、可読性を考慮すると、標準のサイズとしては以下のように推奨されているようです。

  • ●Goolgeは、フォントサイズ16px、行間1.2em を推奨
  • ●Androidは、標準フォントサイズ18sp を推奨
  • ●Appleは、極小で14.6px 以上を基準にフォントサイズを決定することを推奨

出典:http://sinap.jp/blog/2015/04/mobilefriendly02.html

上記を鑑みると16〜18pxが妥当なラインのようですね!
文章の読みやすさは大きさ以外にも1行の文字量や行間にも影響されるため、標準サイズを意識しながら、デバイスの幅に柔軟に「vm」で設計をしていくのが良さそうです。



こうだと助かる!デザイナーからエンジニアへの引き渡しポイント


これまでにご紹介した内容や、紹介しきれなかった内容も含めて、意識しながらデザインをするのはもちろんですが、やはりそれだけでは実装時に迷いが生じてしまうこともたくさんあります。

そこで、「こうしておくとスムーズになる!」という引き渡しのポイントを教えてもらいました。



可変レイアウトと固定レイアウト


「レスポンシブ」と一言でいってしまいがちですが、実装するにあたっては以下のように常時可変レイアウトの場合や、ブレイクポイントに応じて可変/固定が切り替わる場合など、実はさまざまな実装パターンがあります。


常時可変レイアウトの例(PEARLY GATES



PC→スマートフォンまで一貫して各カラムがリキッドになっており、ブレイクポイントに応じてカラム数が変化。


可変/固定が切り替わる例(A MAN of ULTRA


img-responsive04.jpg
PC→タブレット間は固定幅となっており、タブレット用にブレイクポイントから可変レイアウトに。

実装方法によって作業ボリュームにも変動があるため、エンジニアにデザインを受け渡す際には、どの想定でデザインをしているのかを明確に伝えて、無駄な工数を減らしましょう。


SVGの受け渡し


さまざまな解像度に対応しなければならない昨今、ロゴや頻出するアイコンなどはSVGやWebフォント化することが当たり前になってきました。
データ上、パス状態になっていれば積極的にSVG化をしてくれているそうですが...ここはやはりデザイナー側でしっかりと「SVG一式」のデータを用意する方が効率的です。


作ったアイコン一式をまとめてWebフォント化できる「icomoon」といったサービスもあるので、適宜活用していくとみんなが幸せになれますね。


あると嬉しいデザインガイドライン


レスポンシブの可変/固定レイアウトについてもそうですが、同様にデザインを制作していく中で出来上がっていくルール(フォントサイズ・色・marginなど)は、自分の中のルールに留めず、ガイドラインとして用意してあることが理想とのこと。

とはいえ、細かく準備するにはスケジュール的にきつい...という時もありますよね。しかし、時には「タブレット用のデザインを作るよりルールだけ決めてしまった方が早い!」という時も往々にしてあります。
エンジニアからは「タブレットデザインが必須、ガイドが必須、ということではなく、要はどうしたいのか分かることが大事」との声も。

やはり最終的にはお互いコミュニケーション取りながら、案件ごとに、臨機応変に対応するのが何よりといったところですね!



それぞれの発表のあとはレスポンシブに限らず、この機会にエンジニアに聞いておきたいことを質問する時間へ。かなり細かい話が主だったので割愛しますが、お互いに意見交換をすることのできる良い機会となりました!

SONICJAMでは職種毎やチーム内ではもちろん、垣根を越えての勉強会・講習会などが大小さまざま行われていますので、また他の勉強会の様子も少しずつご紹介できればと思います!

CATEGORY

×
CATEGORY
COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.