[ レスポンシブWebデザイン現場のメソッド – レイアウト・UI のマルチデバイス対応手法 ] に参加しました #wmsp21

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

2016年8月5日（金）16:15～19:15 に、有限会社ヘルツ セミナールームで行われた Webridge Meeting SP21　レスポンシブWebデザイン 現場のメソッド　レイアウト・UIのマルチデバイス対応手法 に参加しました。

以下はメモ書きです。

1-1 レスポンシブWebデザインのWhyとHow（前川昌幸さま）

• レスポンシブ・ウェブデザインは脱PCのため

• 総務省の情報通信白書の普及状況

  • 10代・20代はスマホの利用率が高い。

  • ここの白書は宝の山なので見る

• 作る環境と見る環境が違う

  • 見る側はスマホ

  • 作る側はPC（依頼者を含め）

• RWDメリット

  1. 制作運用の工数削減

  2. SNSからの流入のURLが統一できる。

  3. Google のインデックスで「スマートフォン対応」が付く。

• モバイルスタートが合理的

  • デスクトップスタートだと何かしら無理がかかることが多い

  • 工数増大の要因

  • でも、実案件ではデスクトップスタートが多い。

• マークアップから受託するとコントロールが難しい。

  • 対処法 → 実装力と見切りで対処する

1-2 [ How ] どうやって実装する

viewport

下記が王道パターン。公式みたいなもん。

<meta content="width=device-width, initial-scale=1.0">

拡大できないような指定を指定しまうと使いにくい。

• ヘッダー固定などで問題が発生した場合は、拡大機能をオフにする場合がある。

• インプットフィールドにフォーカスして拡大する場合は、フォントサイズを１６ｐｘ程度に拡大する。

fluid grids

• 可変性のあるグリッド

• 比率でレイアウトを構成する

• リセット CSS を利用している場合は、下記の指定をしておく。

• 左右のマージンなどは、全てを比率で構成する必要はない。

*, *::befor, *::after { box-sizing: border-box; }

そろそろ利用してもオッケー

calc
下記みたいな計算ができる。

width: calc((100% - 20px) / 3); 

flex box
あとから中村様のセッションで説明。

flexible image
サイズが可変する画像

.flexible-img {
    max-width: 100%;
    height: auto;
}

Responsive Image
srcset 属性。1倍レティナ用、2倍レティナ用、３倍レティナ用の画像を別々に指定できる。
picture 要素。スマホ用にトリミングした画像に差し替える。
レティナ対応は srcset 属性で十分かと。

media queries

@media screen and (max-width: 768px)

screen and を省略すると all になる

px or em
em が正解かも。でも、現場では px を使っている。

ブレークポイントは

• スマホ 768px 未満

• タブレット 992px 未満

1-3 製作時の確認環境

1. Choromeのデベロッパーツールで確認

2. 必要であればエミュレーター

   • android はGenymotionが便利

   • ADB というChrome拡張をインストールするとUSBで繋いだデバイスを直接デバッグできる

3. 実機

現場あるあるから学ぶレスポンシブWebデザイン（中村真己さま）

レスポンシブウェブデザインの理想

• ワンソース管理でメンテナンス性の向上

• デバイスごとの設計不要・情報設計が行い易い。

• デバイスごとのデザインを基本的に考えなくと良い

• 工数を抑えられて単価も安い

レスポンシブウェブデザインの現実

• デバイスごとに情報の出し分け

• PC・スマホごとに画面設計がある

• デバイスごとのデザインが出来上がりマークアップが大変

• 単価がお得が思われがちだが工数が増える

現場は戦場である

• 案件を納品する必要がある

• 正しい知識・理解の元に要望が来ることは少ない

• 前線で生き残るには技術や武器を身につけよう

よくあるご要望

1. テキストの改行位置がデバイスによって違う。→ br 要素に display:none にする。または span で囲って display:block にする。

2. PC の見出し画像をスマホではデバイスフォントにしたい。→ jQuery で画像の alt 属性を取得しテキストで書き出す。

3. デバイスによって要素の順番が変わってる。→ flexbox の order 属性で対応。

4. スライダーの数がデバイスで変わってる。→ slick というプラグインを使う。

5. 情報量の多いテーブル → 行列を入れ替えたり、はみ出した部分はスクロールでき見せるようにする。

6. スマホの写真はモーダルで開かないように。→ PC 幅の時だけモーダルの起動コードを書く。

7. 画像の上のデバイステキストサイズはデバイスの幅に合わせて変えて欲しい。→ ビューポートの幅を基準とする vw という単位を使う。

8. 背景指定されたブロック要素の比率を変えずにサイズ変更してほしい。→ パディングのボトムを%で指定する。

受託制作現場のレスポンシブWebデザイン：パネルディスカッション

内容に聞き入っていたため、ほとんどメモが取れませんでした。スミマセン。。。

• ポリフィルとは、CSS の新機能に対応していないブラウザでも新機能が使えるようにする無理やり実装するもの。

• 複数人で開発するときは、腕の良い人がデザインパターンを網羅したモジュールリストを作成する。

感想

レスポンシブWebデザインを実現するための具体的な手法が理解できました。 また、実際の現場での対応方法があるあるで面白かったです。講師の皆さまありがとうございました！(^^)

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。