【BONO UIデザイン】 UIビジュアル基礎 課題「TRY5:レスポンシブなホームUIをデザイン！」にチャレンジしてみた
前回のnoteはこちら
【BONO UIデザイン】 UIビジュアル基礎 課題「TRY4:デザイン動画共有サービスのSPサイズ動画詳細UIをリデザイン！」にチャレンジしてみた
BONOというUIデザイン学習コミュニティサービスにてUIデザインを学んでいます。こちらはその学習記録となります。
TRY05の課題の概要について
今回の課題はレスポンシブデザイン（情報機器の種類や画面サイズなどの多様な表示環境に対応できるようにする設計方法）について。Try02で作成したデザイン動画投稿サービスのホームUIをPCブラウザサイズからTablet及びSP（スマホ）サイズにデザインし直す課題でした。
現状の課題
・PCブラウザサイズのデザインをTablet及びSPサイズにデザインしたい
Table/SPサイズにリデザインしたい
さらに作ってほしい見た目の基本として以下の3点が提示されていました。
1：ブレイクポイント(サイトのコンテンツとデザインの表示切り替えポイント)
スマホ／タブレットの基本サイズを意識する。
また参考のデザインも探し、デバイスサイズごとの基本的なレイアウトを試す。
2：可変/不変
基本は％で幅を考える。
また、同じメーカーのスマホでもモデルによっては微妙に解像度や画面サイズが違うこともあるため、その時のデザインの状態を考えて組む。（例：iPhoneなど）
どこが可変してどこが不可変なのか考えて設定する。
3：ブロック意識
可変する時はブロック毎が基本。
レスポンシブになるとレイアウトが少し変わったり、各ブロックの積まれる順番が変わったりするのでブロックを意識して組んでいく。
これらの注意点を踏まえての完成画面一覧がこちら。
Tabletサイズを3パターン、SPサイズを1パターン作成作成しました。
完成画面一覧
作業行程について
上記の完成画面に至るまでの作業行程を説明していきます。
①リデザイン前及び参考資料の構造分析
まずリデザイン前：PCブラウザサイズにどんなブロック要素が組み込まれているかを分析するためにブロック要素の色分けをし、また参考資料にも同様の色分けを行いました。色分けをすることでリデザイン前及び参考のデザインにどんなブロック要素がどういった構造で組み込まれているのかが把握しやすくなりました。
またそれらの色分けを参考に、ブロック要素の色分けのみ使用してレスポンシブレイアウトの構想。この段階ではSPサイズを1パターン（ボトムナビ）、Tabletサイズを2パターン（ナビゲーションドロワーとボトムナビ）思案しました。
ブロック要素の色分けを使用してレスポンシブレイアウトの構想
この段階ではSPサイズを1パターン、Tabletサイズを2パターン思案
②集めた参考資料及びGoogle Material Designを参照しつつデザイン
①で行ったブロック要素の色分けを下地にして、参考を見ながらデザイン。さらにGoogleのMaterial Design 3 から起こしたレイアウトグリッドで幅を揃えつつ、各要素のサイズもそちらのガイドライン等を参考にデザインしていきました。またPCブラウザサイズからTablet/SPサイズにリデザインすると、ボタン等を指でタップしやすいかどうかも重要になってくる為、そちらの操作の違いも意識してデザイン行いました。
PCブラウザサイズからTablet/SPサイズに変更した際の主な変更点がこちら
1.参考資料やGoogleのMaterial Design 3を参照しつつ各要素を調整
Tablet／SPに合わせて各要素のサイズを調整。特にコンテンツである動画グループの縮小や拡大を行い、なるべく動画等の要素が見切れないように調整を行いました。
動画グループサイズ：PCブラウザ＜Tablet＜SP
一度に表示する動画グループ数：PCブラウザは4つ・Tablet3つ・SPは1つ
と動画グループを見やすい大きさと表示数に変更している
デバイスごとに表示できる幅や高さが異なる為、ブロック要素の組み直しやコンテンツサイズの縮小等をして、どのデバイスを使用してもコンテンツが見やすいデザインにしていくことを意識しました。
2.PCブラウザサイズ：ナビゲーションドロワーの変更
PCブラウザサイズ：リデザイン前ではナビゲーションドロワーだったものを
Tablet：ナビゲーションドロワー（縮小版）／ ナビゲーションレイル／ボトムナビ、SP：ボトムナビに変更。
今回の課題はデザイン動画投稿サービスのホームUI画面のレスポンシブ化。
メインとなるデザインについての動画を内包しているブロックをより見やすくするために、ナビの幅の縮小やナビの下部への移動を行いました。
これら①から②までの行程を経て完成画面一覧がこちら
完成画面一覧
課題を終えて
ディスプレイサイズを意識してUI作成
近年、非常に安価な4KディスプレイやAppleのStudio display のような5Kディスプレイ等も登場する中で理解しておきたいのが、ディスプレイごとの解像度の違い。今回の課題を通して今まで意識できていなかった、デザイン時の高解像度ディスプレイへの対応について学ぶことができました。解像度と表示サイズの違い、データの書き出し時に素材を解像度に合わせ二倍、三倍の解像度で書き出す・ベクターデータであるSVGを使う等、レスポンシブデザインへの対応や実装時のトラブル回避のためにも普段から気をつけていきたいです。
ガイドラインを活用しよう
今回も以前作成したレイアウトグリッドが役に立ちました。事前にFigmaで各デバイスに対応するレイアウトグリッドを作っておけば、フレームごとにパネルから設定できるので、今回のようなレスポンシブデザインをする際のレイアウトの手間を減らすことができるかと思います。
また、今回はGoogleのMaterial Design 3 のガイドラインを参照しつつ、各要素のサイズ等を決めていきました。英語で記載されているため内容の全てを理解し実践するのは難しいですが、こうしたガイドラインを下地にデザインしていくことでより分かりやすい・使いやすいデザインを作ることにつながると改めて感じました。適宜参照してデザイン改善に役立てていきます。
ブロックで考える
ブロック要素で考えるために簡易的な色分けを行い、レイアウトを思案・再構築を行いましたが、後述する解説のようにブロック要素ごとの意味を考えられるとPCからTablet/SPに再構築する際にあまり悩まずに済んだと思います。
比率 % でレイアウトする
iPhoneの幅だけでも320/375/414…と種類があるので、比率％でレイアウトを組んでどこを可変させるかどこが不変か考えて設定。また絶対値で組む際にもレスポンシブ対応をどうするかまで考えてデザインデータを作ることを学びました。
以前Webサイトを作った際にPC/Tablet/SPとレスポンシブデザインの作成を行いましたが、絶対値でデザインを組んでおり且つこの点を考慮しきれていなかったために、途中でサイトが崩れるなど後から修正をしなければならなかったことが多々ありました。今後はレスポンシブを考慮してのデザインや比率%でレイアウトをしていき、実装もしやすいシームレスなレスポンシブデザインのサイトを作っていきたいです。
解説と解答を見て
特に学びになったのがこの二点
・各ブロックの関係性を考える
・ナビとアクションとコンテンツでレイアウトを考える
1.まずUIの基本構造である①グローバルナビゲーション、②ホーム：ヘッダーやナビ内のアクション、③ホーム：コンテンツという区分：ブロックでレスポンシブを考える
色分けを行いブロックで捉えようとしていたのは良かったのですが、少し細かく区分し過ぎていたので、この三つの区分で分けられているとよりレイアウトしやすかったかなと思いました。
2.操作する部分と表示する部分を二つに区分して関係性を組む
PC/Tablet/SPと共通しているサービス全体の操作部分：ナビと表示する部分：アクションやコンテンツで区切るとさらに全体像が見やすくなり、操作する→表示が変わるの流れが掴みやすく且つレイアウトを組み変えやすくなると思いました。
例：ナビの探すをタップすると、表示部分も探すのページに遷移する
ホームというボタンを押したら、ホームという項目に移動しヘッダーにホームときちんと表示されるなど
3.またPCやTablet等からSPなど小さな画面サイズにレイアウト変えるにあたっては、ブロック同士を組み合わせて、新たなブロックとして表示し直す。
例：PC／Tabletでは履歴・お気に入り・自分の動画と三つの項目に分かれていたのを→SPではマイページにまとめている
ユーザーに見えないものは、ないものとして扱われるので出来る限り表示しておく。
4.コンテンツとアクションの関係性
ナビ／アクション→コンテンツと作用する流れが決まっている。
サービス全体に作用するグローバルナビとの違いに注意する。
例：課題だと投稿するボタンは、コンテンツ部分に対するアクション、
切り替えタブはコンテンツに対する切り替えアクションになっている。
そのブロックごとの意味や各ブロックの関係性がどんなふうになるかを考えてレイアウトを組む、というのが大事だと自分で課題に挑戦し解説を見ることで今回学ぶことができました。スマホファーストとスマホサイトを先行して作る場合もあるそうなので、PCブラウザサイズのレイアウトだけでなくTabletやSPサイズでのレイアウトも学び、シームレスで使いやすいサイトを作っていきたいです。
最後まで読んでいただき、ありがとうございました。
引き続き学習を続け、Web・UIデザイナー目指して邁進していきます。
この記事が気に入ったらサポートをしてみませんか？