実践レスポンシブデザイン速習会に参加してきました
レスポンシブをおさらい
Wantedlyさんにて社内向け勉強会として開催されたイベントに参加してきました。 ギリギリ補欠だったのでいつ繰り上がるかわからないのと、きっとドタキャンがあるだろうとのことで駄目元で訪問しました。結果、参加者がこなかったのか無事に参加させていただきました。ありがとうございます。
レスポンシブデザインの手法
Fluid grids
- width:~pxって書かない。%で指定する
Flexible images
- やっぱりwidth:~pxって書かない。max-width:100% みたいに記述する
Media queies
- 画面幅によって適用するスタイルを動的に変更する
- @media only screen and (max-width:640px){...}
viewport
- viewport 設定しないとモバイルで動かない！
- <mata name="viewport" content="width=device-width,initial-scale=1.0">
ハンズオン
レスポンシブデザインがされていないサイトを対象に、レスポンシブデザインを当てていきましょう、というハンズオン。 先ほどの手法を順に当てていくことで少しずつレスポンシブになっていき幸せになれる過程を経験しました。
デザインする際の勘所がわかった気がします。作成したPCサイトをレスポンシブデザインにするのは、単純に移行するだけなら割といけるかもしれない。
あと、Media queryでゴリゴリ書いていく感じですね。ちょっと辛さがある。なんかライブラリとかできないかな。Media queryも記述する順番でうまく動作しなかったりするトラップがあるので、最小〜最大サイズできっちり分けたほうが良さそう。
質疑応答
WebサイトはPCサイトから作る？モバイルサイトから作る？
実際レスポンシブだけでいける？
- 結局、PCとモバイルで見せたいコンテンツが異なることも多いため、PC用とモバイル用でHTMLファイルを分けてしまうのが楽かも
- WantedlyのサイトはPCサイトとモバイルサイトで見せるコンテンツが異なるためHTMLをUAで分けている
例えばコンテンツが少ないサイトはレスポンシブデザインが向いているのかなと思いました。企業HPとか。
懇親会
ピッツア！ありがとうございます。つい食い過ぎました。
Wantedlyの方と色々話せて大変面白かったです。みんなすんごい若い…。若くて優秀な人が揃っている会社でした。
UI/UXデザイナの方に「未だに設定アイコンはハンバーガーなのはどうにかならないの？」と聞いてみたところ、ハンバーガーは代替案が現状無いとのことでした。 Android勢はハンバーガーがあると何らかの設定だろうとタップする習慣があるというお話も興味深かったです。 確かにハードウェアにハンバーガーボタンがありますしね。
社内勉強会として速習会開くのいいなあ。社員みんなが技術を共有できるの素晴らしいですね。発表することで成長もできるし。また機会があれば参加したいと思います。
