はじめに
わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。
興味があれば、ぜひ Google UX Design Certificateを受講してみてください。
これまでの振り返り
知らないうちに、レスポンシブWebデザインを見ている
前回に引き続き、レスポンシブWebデザインについて、ご紹介していきます。
こんな経験ありませんか？
- インターネットブラウザのサイズを変更すると、Webサイトのレイアウトが変わってしまう。
- モバイル端末でWebサイトを見たとき、デスクトップのレイアウトが違っている。
理由は、そのWebサイトがレスポンシブ・レイアウトで構築されているからです。
『レスポンシブWebデザインは、デバイスのサイズに応じてWebサイトが自動的に変化すること』
UXデザイナーは、各ページの要素が異なるサイズのスクリーンでどのように表示されるかを考慮する必要があります。
なぜレスポンシブWebデザインがそれほど重要なの？
理由①
レスポンシブWebデザインは、どのような画面にも簡単に適応します。これにより、ユーザビリティが向上し、Webサイトを訪れる人々にとって良いユーザーエクスペリエンスが生まれます。
理由②
レスポンシブWebデザインは、モバイルトラフィックをあなたのWebサイトに誘導します。結局のところ、すべての人がデスクトップコンピューターからWebサイトを訪れるわけではないので、すべてのWebサイトのレイアウトが、ユーザーがどのデバイスを使用していても機能するようにしたいのです。
理由③
レスポンシブWebデザインは、すべてのデバイスサイズに対応したWebサイトを設計する必要がないため、コストと時間の節約にもなります。
レスポンシブWebサイトのサンプル
- デスクトップでは、大きな画面を生かした4カラムのレイアウトになっています。
- モバイル端末では、より使いやすいように1カラムのレイアウトに切り替えています。横向きにすると、ページのレイアウトも変わります。
とてもすてきでしょう？ これがレスポンシブデザインのマジックです。
UXデザイナーとして、どのようにレスポンシブWebデザインをウェブサイトに適用するの？
それは、ワイヤーフレームから始まります。
それをドットペーパーの上にプロットして、モバイル端末でのデザインの見え方の感覚をつかんでみます。
デスクトップはモバイルよりも明らかに大きいので、ワイヤーフレームをモバイル用の約3分の1のサイズに縮小してみます。
完成しました。
左がデスクトップと右がモバイルのウェブサイトのワイヤフレームです。
グリッド用紙に自分のデザインをプロットし、さまざまなスクリーンサイズに合わせてレイアウトを変更しながら、次のような質問を自分に投げかけてみてください。
-
ページ内の要素の位置を移動する必要があるか？大きなスクリーンサイズから小さなスクリーンサイズに移行するとき、デザインのどの部分が折り目の上に留まる必要があるのか？ページの下の方に移動できるものは何か。
-
画像はどのように拡大縮小する必要がありますか？ヒーロー画像のように、すべての画面サイズで大きく表示する必要がある画像はありますか？
-
画面サイズの変更に伴い、ページのナビゲーション要素をどのように調整するか（例えば、トップナビゲーションバーからハンバーガーメニューへの移動など）。
すべてのデバイスと全ての画像サイズに対して、異なるデザインを作成するの？
レスポンシブ・レイアウトでデザインする場合、すべてのデバイスとすべての画面サイズに対して異なるデザインを作成する必要がないのは良い点です。その代わり、コンテンツが画面サイズに適応できるようなフレームワークで、いくつかの主要なサイズに対応するデザインを行います。
ウェブサイトのコードの背後には、ブレイクポイントと呼ばれるパラメータがあります。
『ブレイクポイントとは、レスポンシブ・レイアウトがすべての要素やコンポーネントに適切にフィットするよう変更するタイミングを決定する視覚的な限界のこと』
つまり、デスクトップでブラウザーのウィンドウの形を縦長の長方形に調整すると、最終的にウェブサイトはモバイル版に移行します。