UIビジュアル基礎 TRY5 レスポンシブなホームUIをデザイン！
お題
リデザインするポイント
①ブレイクポイント
②可変/不可変
③ブロックを意識する
お題スライド
どんなの作った？
『最新の動画』というリストをいれたもの
画面下部のナビゲーションを削除して、右上のハンバーガーメニューを追加した
所感
UIビジュアル基礎 TRY5 完了
【作業時間】
動画視聴 65分
デザイン 220分（半分ぐらいは可変データが作れないかチャレンジしていた……）
リデザイン 30分
【所感】
・PC→スマホへの画面サイズの作成をした。
・レスポンシブデザイン作るのは難しいかもしれないとお題動画を観る前には感じていたが、画面を作るだけであればそれほど苦労はしなかった。
・可変を考慮して、デザインしデータを作るのはかなり骨が折れそう。
・解説動画の中で、可変データを作成するのはコストがかかるとカイクンが言っていたが、本当だった……身をもって思い知る。難しすぎて断念。 とはいえ、Figmaのサイズの表記である『Fixed=固定値』『Hug＝子の要素に応じて変化』ということを覚えることができた！！
・概ね、解答動画と同じような画面を作ることができた。
・UIビジュアル基礎も後半になり、この数日で大分基礎が身に付いていることを実感できた
【反省点】
・可変データを作らなくてもOK。好きな人はやってみて～という内容を聞いて、チャレンジして時間が大分かかってしまった。得られるものもあったのは良かった。 →一旦お題を作成した後に、リデザインするときに追加お題にチャレンジしていく。
・コンテンツのサムネイル画像の境界線が白のものを選んでしまい、境界線が曖昧で時間がかかってしまうことがあった。 →サンプルのサムネイルは、なるべく境界線が分かりやすいものを選ぶ。もしくは、枠線をつけてわかりやすくする。
・リデザインでは、ボトムナビを削除して、ハンバーガーメニューのUIを作成した。ボトムナビがないとパッと見スッキリしている。が、わかりづらい印象になった。 →ボトムナビを削除してハンバーガーメニューを作るのはそれほど作業時間もかからない。基本はボトムナビのパターンを作っていくのが良いと感じた。
・コンテンツのカテゴリーを切り替えるナビ/アクションは、改行していると見た目が整っていない印象になってしまった。 →改行ありのパターンとなしのパターンで検討していく。
知らないと怖い”高解像度"ディスプレイについて
UI作成を意識する上でのディスプレイの基本
・高解像度ディスプレイ
・レスポンシブ
・デザインデータ作成
知っておくメリット
○ ディスプレイ考慮がないと不完全なデザインを組んでしまう。・デスクトップ⇄スマホ：異なる画面幅に対応する・高解像ディスプレイへの対応・画像の扱い
○知識があるとUIデザインからヒントを得やすい
・実装しやすいデザインの作り方・どのデバイスでも綺麗に見えるデザインの作り方
知らないと困ること
・UIを作る画面サイズが選べない
・画像の処理がわからない
高解像度ディスプレイの仕組み
・1ドットあたり、何ピクセルが含まれるかで高解像度かわかる。
・1ドットあたり、ピクセルが多ければ多いほど高解像度
・目が細かいほどキレイに見える。（高解像度ディスプレイ）
・ディスプレイの解像度と実寸は変わることがある。
解像度とFlameサイズの選び方
・解像度通りのフレームにしてしまうと、サイズがでかすぎる可能性がある。
・解像度の半分程度のサイズでもOK
・Figmaであれば、Flameのテンプレから選んでもOK
画像を書き出すときの注意点
・エクスポートは、2倍以上のサイズで書き出すのが基本！
レスポンシブ5つのポイント
画面幅に対応するUIの基本
【動画概要】
レスポンシブデザインを始める前に知っておくべき前提知識を紹介しましたー！実践とは遠く感じるかもですが、レスポンシブデザインのベースの考えになっています。
・この考え方でいろんなサイトの横幅を変えてみる・アプリをデザインするときも同じ考え方で大丈夫です
５つのポイント
・レスポンシブデザインとは？
・UIブロックで考える
・モニタ/ブラウザサイズとレイアウト
・ブレイクポイント
・比率でレイアウト
①レスポンシブデザインとは？
・スマホとPCでレイアウトやUIを変化させるデザインのこと
②UIブロックで考える
・ヘッダーのグループ/ナビのグループなどのブロック単位で考える
・ざっくりナビとコンテンツでわける
③モニタ/ブラウザサイズとレイアウト
・モニタの基本的なサイズを知ると良い
・基本的なコンテンツ幅があるとしっておく
－960・1080などのサイズがある
・検証モードで参考サイトのコンテンツ幅を測るのもOK
④ブレイクポイント
・設定したpxごとにスタイルを切り替えられることができる技術
⑤比率でレイアウト
・固定幅と％をどうするか？を考える
・基本は％でデザインする
・アイコンは固定幅、テキストは可変など
・並列のレイアウトは、％で比率を考えるとやりやすい
異なるディスプレイサイズのUI作成
ポイント
・デザインデータの作り方
・可変/不可変を考えよう
・画像の扱い
・実装者に伝える
①デザインデータの作り方
画面幅ごとにデザインデータを作ろう
最小はPCとスマホだけでOK
キャンバスごとにデータを作る
基本はプリセットのサイズを使うでOK
PC : 1440pxぐらい / SP : 375px の横幅
まずはメインになる幅から作り込む
いきなり複数を同時に進行しない。
１番見られる/使われる画面から作成する
その後に別の画面幅を考えて、調整していく
②可変/不可変を考えよう
固定 / 可変 のUIパーツを考えよう
自分で考えずに、まずは世界的に使われているサービスがどう実装しているか調べて、参考にしよう
PCアプリを出しているサービスは参考になりやすいです。例：Spotify / Apple系
Google系もブラウザで観て参考になりそうです。
Figmaが好きなら可変に組もう
初心者はここまでやらなくてオッケーです。
会社に入ってデザインシステムやりたい人はやると良いかも
僕もここまでやらないです。（やらなくても伝わるため）
③画像の扱い
2倍〜サイズを用意
2倍のものを用意して使いましょう。
お手元のPCでもボケないと思います。
アイコン類はsvg形式のものを
可変で行えます
色も変えられます。
svgとは？：コードで出力する形式の画像ファイルなのです。
④実装者とコミュニケーションをとろう
データは完璧じゃない。コメント/コミュニケーションを取って共有
エンジニアさんには口頭でカバー
メモでも良いです
データだけ見て全てがわかる人は、それまでにコミュニケーションを築き上げた人です
解説
概要：レスポンシブはパターンとUI構造
レスポンシブは基本的に知識でカバーできる内容だったりします。今回あまりわからなくても心配ありません。これからいろんなサイトやサービスのレスポンシブを見るようにしていけばどうなっているのか？のパターンを増やしていけます。
レスポンシブの考え方はこの動画でも解説している通り”ブロック”で考えていくと良いと思います〜！
見どころ
・各ブロックの関係性を考えよう
・ナビとアクションとコンテンツでレイアウトを考えよう
①役割とブロック
・PC『ナビ』⇔スマホ『ボトムナビ』
・PC『アクション』⇔スマホ『トップ』
・PC『コンテンツ』⇔スマホ『コンテンツエリア』
スマホは、Webブラウザであってもボトムナビはあり！
ハンバーガーメニューもいいが、ボトムナビのように見えているものの方がユーザーの認識がしやすい。
②コンテンツの考え方
ナビ/アクション
※アクションエリアの『🔍』は、コンテンツに対しての検索
↓
コンテンツ
↓
ナビ
③フォントサイズの調整
・レイアウトグリッドを活用して、調整をする
・フォントもデバイスサイズに合わせて調整する
・スマホは特に操作感が変わる！！
・フォームなどのタップ範囲は40×40程度が、タップしやすい範囲
この記事が気に入ったらサポートをしてみませんか？