面倒くさがりの為のレスポンシブデザイン入門
はじめに
ある日唐突にレスポンシブデザインについて説明する機会があったけど、ネットを探してもちょうど良い塩梅の説明資料が見つからなかったので自分で書く事にしました。対象としては非UIUX担当者向けでWEBサイト自体は作れるけど、レスポンシブデザインとはなんぞや？みたいな感じのレベル感を対象にしています。
また本記事ではアプリとブラウザにおけるUIUXの違いについては意図的に言及しません。面倒なので
あとUIUXの間にある"/"も省略してます。面倒なので
著者のレベルについて
UIUXが大好きなソフトウェアエンジニア。UIUXについて専門的な教育を受けた訳ではないものの何故か部署内にまともなデザイナーが居ない＆外注する予算も無いという理由からUIデザイン1000本ノックを強いられUIUXを体得した人間。特にiOS(MacOS)のメモ帳と楽天とSpotifyのUIUXが好き。
何故レスポンシブデザインが必要なのか
極論を言うとデザインの不一致による不快感を減らす為です。
かの有名な阿部寛のホームページ（https化すらされてない！！）はレスポンシブデザインに完全非対応ですが、それを問題視する人間はいません。これは何故かというと……まあ実際のWEBサイトを見たらご理解いただけるでしょう。
このように古いデザインであればレスポンシブ対応は後回しでも全然大丈夫なのですが、モダンなUIUXを採用しようと思うと少し話が変わってきます。「一番良いUIUXは一貫性のあるUIUXだ」という言葉がありますが、僕も実際その通りだと思っていて、モダンな見た目で表示が崩れていたり、内容が冗長だったり、操作が複雑だったりするととても微妙な気持ちになります。
まあそういう余談は置いておくとしても、今日日WEBページ等はPCよりスマホで見る（見られる）機会が多いわけでレスポンシブデザインの入門的な部分について整理しておいて損はないと思います。
レスポンシブデザインって一体何をすればいいの？
これは求める要件によります。
というのもレスポンシブデザインを取り巻く環境というのは滅茶苦茶エッジケースの塊みたいな所あり、モバイル優先でPCはついでという思想もあれば、逆にPC優先でモバイルはついで、いやデバイスに関係なく共通のUIUXを提供するべきという思想もあり、全てに異なるメリットデメリットが存在します。
一応トレンドで言えば、コンテンツの提供が主軸な場合はモバイル寄り、コンテンツの作成はPC寄りという法則性はあるものの、UIUXって別にこれが正解って内容あんまり無いので気にしなくても良いです。
もっと具体的に教えて
まずは偉大な先達の参考文献（WEB）
MDN Web Docs レスポンシブデザイン
Google Web Designerヘルプ レスポンシブ レイアウトの概要
Adobe 初心者のための、レスポンシブデザインの基本とベストプラクティス
ヤマト運輸 レスポンシブデザインとは？特徴やメリット・デメリットを紹介
デジタル庁デザインシステムβ版 v2.3.0
GOV.UK Design System レイアウト
USWDS
他に参考になるサイトだとこういうのもあります。
その上で著者の経験を述べると以下の内容が基礎的な部分かなと思ったりします。
- みだりに改行しない
- サイズ調整を多用しない
- ピクセル決め打ちをしない
- モバイル向けはとにかく省く
- PC向けは情報量増やす
- 内容にレイアウトを合わせるのではなく、レイアウトに内容を合わせる
- 究極的に言えばケースバイケース
「1.みだりに改行しない」は基礎中の基礎です。サイズが可変な要素（フレックスビュー、流体グリッド等）に埋め込んだテキストは表示サイズによってどこでどう改行されるか厳密には分かりません。その為、本文や見出しに含まれる改行はなるべく省く必要があります。
「2.サイズ調整を多用しない」は本とかに書いてないことが多いですが実戦的なテクニックです。というのもデバイスの物理サイズによってサイズ調整されたコンテンツというのは見づらい事が多く視認性を損ないます。まあYoutubeとかTwitterとかコンテンツが強ければUIUXの問題とかぶっちゃけ全部些事なんですが、実際そうも言ってられないことの方が多いので気を付けるに越したことないです。詳細は後述しますが、増やす減らすの対応が取れなくなった時に消極的に用いるぐらいがいい塩梅だと思います。
「3.ピクセル決め打ちをしない」というのは古のエンジニア（デザイナー）が忘れがちなので警句として入れました。そも今の時代PCに限定しても横向き16:9とは限らない場合が普通にあるので、要素の位置は普通にポイントとかパーセントで指定してください。
「4.モバイル向けはとにかく省く」モバイルの画面はとにかく狭い。しかもモバイルでWebサイトを見る人間はとにかく時間に追われていることが多いので、作り手側が「シンプルにし過ぎかな？」と思うぐらいでちょうどいいことが多々あります。UI要素が絞れない時はMVP部分だけシンプルな構成で作ってしまって、残りを全てハンバーガーメニューや折りたたみに放り込むのも全然アリ。どうせ細かい所は全然見られないです。
「5.PC向けは情報量増やす」というのは上記の逆バージョンですね。4とも関連しますがスマホで見る人はスマホで見るし、PCで見る人はPCで見るし、そこら辺の移動ってあまりないので異なるデバイスで厳密に同じUIUXを提供するのって割とYAGNIというか、誰も得しなかったりします。
「6.内容にレイアウトを合わせるのではなく、レイアウトに内容を合わせる」実際これが今回の話のサビみたいな所はあって、僕がUIUXやってても”内容だけが先に決まってて”それに合わせてレイアウトやデザインは全部自由に考えてよみたいな仕事が圧倒的に多いんですが、これはバチバチにアンチパターンなんですよね。
（何故なら適切なレイアウトが自然と思い描けない時点でコンテンツの内容が全然ダメなことが多い為）
なのでまあ、ちゃんとUIUXやろうと思ったら自然とコンテンツ内容にメスを入れないといけないことが多いんですけど、まあこれがバチクソに揉めます。やれ「お前が指図するな」とか「（UIUXの付帯作業だから）無料で責任持ってやれ」とか色々色々……なのでまあそこら辺の塩梅って難しいねとしか言いようがないのですが、誰かがそれをやらないとUIUX的にいい物って永遠に出来ないという事だけが分かっており、ただひたすらに面倒です。
「7.究極的に言えばケースバイケース」最後はガチ余談ですね。というのもUIUXの本質的な部分は"ユーザに対して適切な形式で情報を入出力する"という一点だけでして、レスポンシブとかユーザカスタマイズというのはその切り口の１つとして定義されてるだけでUIUXデザインの枝葉末節に過ぎません。そしてその本質はシンプルに使い勝手の話だけ……というよりかはソフトウェア開発全体を見据える必要があってコストとか保守性とか色々色々、ちゃんとUIUXをやろうと思うとそういう非機能要件にも向き合う必要があります。ABテストとかヒートマップとか枝葉末節だけで語られがちなUIUXの世界ですが、いずれこれらの内容がコモンセンスになる日が来れば嬉しいです。
おわりに
ここまで色々言いましたが、UIUXについては（他分野もそうかもだけど）実践と実戦が一番早い学習法です。人件費（とイニシャルな機材代書籍代）さえ踏み倒せば"コストはゼロに等しい"ので、とりあえず作って壊して色々やってみるが最適解みたいな所あります。あと余談ですがデザインの話をすると個人的には手引書や技術解説を読み漁るのと同じぐらい身の回りを見渡してみたり街中を歩いてみたり珍しい場所やイベントに行ってみたり、いろんな場所でプロダクトやサービスに溶けてるUIUXを探してみるのがお勧めかもです。バランス大事！！
UIUXは楽しい世界です。みんなUIUXをやろう！！
Discussion