モバイルでピンチ、拡大/縮小、左右スクロールを行う時代は終わりました。今日のユーザーはモバイルでの滑らかな体験を期待しています。この記事では、Framerがコードを修正することなくユーザーに完璧な体験を提供する方法を示します。

レスポンシブデザインの進化

レスポンシブウェブデザインは、どのデバイスやブラウザでも自動的に調整されるウェブサイトを意味します。スマートフォンを使っても、デスクトップコンピュータを使っても、顧客は一貫した体験を得られます。

レスポンシブデザインの初期には、ウェブデザイナーはデスクトップバージョンから始め、モバイルとタブレットに合わせてデザインを調整していました。デスクトップ、モバイル、タブレットに対するブレイクポイントを使用することは、依然としてレスポンシブデザインの重要な要素ですが、今日ではデバイスの種類が多様化し、すべての解像度に合わせてデザインを調整するのは現実的ではありません。

2018年には最も広く使用されていた解像度（360x640）をユーザーの23％が使用していましたが、現在では単一解像度の市場シェアは8％を超えていません。

出典: Statcounter

スタックを利用した自動サイズ調整が一つの代替策です。デザインをスタックに変換すると、レイアウトが変更に応じて自動的に調整されるため、手動でブレイクポイントを調整する必要がありません。フレキシブルなグリッドレイアウト、相対的な位置指定、レスポンシブな画像とタイポグラフィなどのツールも、この環境に利用できます。

Framerでレスポンシブウェブサイトの制作

Framerは、レスポンシブデザインをより直感的に実現するための多様な機能を提供しています。

1. ワイヤーフレーム作成から始める

Framerのワイヤーフレーム作成は、従来のデザインツールとは異なります。様々な画面サイズに合わせて後で再作成するモックアップフレームを作るのではなく、Framerのコンポーネントは初めからレスポンシブに作られています。プラットフォームのコンポーネントライブラリーには、様々な画面サイズに自動的に適応するビルドイン要素が用意されています。

• ナビゲーションはモバイルビューに合わせて自動変換可能

• ヒーローセクションは画面サイズに合うよう自動調整可能

• コンテンツブロックは空きスペースに応じて再配置可能

ワイヤーフレームを構築する際には、以下の点を考慮して制作してみてください。

• ナビゲーション機能をシンプルで直感的に作る

• ユーザーが最初に見るべきことを考え、コンテンツの階層構造に焦点を当てる

• 小さい画面で要素がどのように積み上がり再配置されるかを考える

• プロセスを加速するためにFramerのビルドインコンポーネントを使用する

基本的なコンテンツブロックから始め、徐々に複雑さを加える方法がおすすめです。

これにより、技術的な細部に縛られず、デザインの構造と階層に集中することができます。また、ナビゲーションはモバイルとデスクトップ環境で大きく異なるため、Framerを使用すると様々な画面サイズに合わせた多様なバージョンを簡単に作成することをお勧めします。

2. ブレイクポイントを設定する

ブレイクポイントはレスポンシブデザインの核心です。ただし、CSSメディアクエリを扱ったことがある人なら、ブレイクポイントは扱いにくい場合があることをご存じでしょう。768pxできれいに表示されるものが、767pxや769pxでは崩れる可能性があるのです。

Framerはこのような既存の技術プロセスを直感的で視覚的な体験に変えることができます。例えば、Framerのブレイクポイントエディタを使えば、ハンドルをドラッグしてブレイクポイントを設定し、デザインがリアルタイムで変更されるのを確認できます。さらに、Framerのレスポンシブプレビューモードを使用すると、様々な画面サイズでデザインがどのように見えるか即座に確認できます。

Framerの最も強力な機能の一つは、ブレイクポイントが変更されると自動的に適用されることです。動作の仕組みは次のとおりです。基本レイアウトを変更すると、その変更が他の画面サイズにも自動的に適用され、反復作業を大幅に削減できます。

3. モバイルファーストアプローチを採用する

モバイルトラフィックがウェブトラフィックの61％を占める今、デスクトップを優先してデザインする従来の方法が意味をなさなくなっています。代わりに、モバイルファーストでデザインを行い、その後デスクトップに合わせてデザインを調整する方が良いです。小さい画面用にデザインすると、後でスペースが不足するため、デザインプロセスの初期から何を含めるべきか戦略的に決定する必要があります。

Framerを使うと、モバイルを基本レイアウトとして簡単に設定し、その後に大きな画面に合わせてデザインを漸進的に向上させることができます。以下の点をご参考にしてください。

• 単一カラムレイアウトを複数カラムに拡張可能

• 大きな画面で追加コンテンツを表示

• デスクトップユーザー向けにより洗練されたインタラクション機能を追加

• モバイルナビゲーションをデスクトップに適したものに変換

• 可読性を高めるためにタイポグラフィのサイズを画面ごとに調整

• 異なる画面サイズに合わせて画像のレイアウトとクロッピングを最適化

モバイルレスポンシブデザインでナビゲーションは最も難しい部分の一つですが、Framerを使うと簡単に管理できます。ハンバーガーメニューやボトムナビゲーションバーのようなモバイルパターンを、デスクトップでフルメニューバーに簡単に実装でき、ブランドの一貫性とユーザー体験もそのまま維持できます。

4. 流動的なグリッドレイアウトを作成する

Framerのグリッド機能は、レスポンシブグリッドシステムを直感的に提供します。自動レイアウト機能を活用して、間隔、要素間の一貫した間隔の維持、レイアウトサイズの変更時の適切な配置の維持など、レスポンシブデザインでよく発生する様々な問題を自動的に処理します。

Framerのグリッドシステムを使用すると、次のことが可能です。

• 様々なブレイクポイントごとにカラム数を指定可能

• 要素がカラムにまたがってどのように拡張されるか調整可能

• 要素の流れとサイズ調整を管理可能

• 間隔の自動調整が可能

Framerのグリッドシステムの最も強力な機能の一つは、CMSコレクション、ユーザー作成コンテンツ、動的画像など動的コンテンツを処理できることです。新しいアイテムをアップロードすると、Framerのグリッドシステムはレイアウトを初めてデザインした時と同じ状態に保ちます。

5. スタックと相対的な位置を活用する

グリッドが全体的なページ構造を担当する一方で、Framerのスタックは構造内の要素が互いにどのように関連するかを管理します。スタックは、要素間の間隔と配置を自動的に処理するインテリジェントなコンテナです。要素を横（行）または縦（列）に配置でき、画面サイズが変わってもスタックは適切な間隔を維持します。

要は相対的な位置指定です。要素を特定の座標に固定する代わりに、スタックを使用すると要素がコンテナおよび隣接する要素に応じて位置を調整することができます。

スタックの一般的な使用状況は次の通りです。

• デスクトップとモバイルでシームレスに切り替わるナビゲーションメニュー

• コンテンツに関係なく一貫した間隔を保つカードレイアウト

• 入力とラベルを完璧に整列するフォームインターフェース

• あらゆる画面サイズにクリーンに適用されるコンテンツセクション

スタックの真の力は、互いにネストされるときに発揮されます。横および縦のスタックを組み合わせることで複雑なレイアウトを作成でき、各スタックには「コンテナフィル」や「コンテンツラップ」といった独自の自動レイアウトプロパティが備わっています。スタックとグリッドの違いについてはFramerのアカデミーで詳しく学ぶことができます。

6. 画像とタイポグラフィの最適化

Framerのレスポンシブイメージアプローチは単なるサイズ調整だけではありません。レイジーローディングを通じて画像配信を最適化し、反応的な画像ソースセットを自動生成し、画像サイズ変更時に主要部分に焦点を当てる自動クロップツールが利用できます。Framerのツールは以下の機能を通じて、どんなサイズでも画像を魅力的に見せる手助けをします。

• さまざまなデバイスに適した画像サイズを提供

• 可能であればSVGを使用してシャープに拡大縮小

• 調整可能な位置とサイズを提供

• デバイスごとに適切な画像サイズを提供

• SVG利用により鮮明なスケーリングをサポート

• レイジーローディングと動的クロップ機能を提供

Framerのタイポグラフィシステムを使用すると、様々なブレイクポイントでフォントサイズ、行間、間隔を管理できます。また、フォントロードを最適化してレイアウト変化を防ぎ、カスタムフォントがロード中でもテキストの可読性を保ちます。

レスポンシブデザイン関連の問題を防ぐためには、滑らかに拡大される流動的なフォントサイズを設定できます。また、最小および最大サイズを有効にして、テキストが小さすぎたり大きすぎたりしないようにできます。Framerのテキストフィット機能を利用すると、ブラウザやセクションに合わせてサイズを調整する目を引くヘッダーと段落をデザインすることができます。

リリース前のレスポンシブテスト

Framerはリリース前にサイトのレスポンシブ性をテストするための2つの強力な方法を提供しています。

1. プレビューモード: 内蔵されたプレビューモードを使用すると、エディタを離れずに様々なデバイスでデザインを確認できます。様々なデバイス環境をエディタ内で即座に確認可能

2. 実際のデバイステスト: Framerの共有リンクを通してスマートフォン、タブレット、モニターなど様々な環境で直接テストできます。様々なスマートフォン、タブレット、モニターでデザイン作業を行うことで、すべてが想定通りに動作するか確認し、新しいウェブサイトを公開する前にバグを見つけられます。

すべての画面で美しく動作するウェブサイトを作成しよう

レスポンシブウェブデザインは必須の要素となり、Framerはこれを簡単に実現できるツールを提供します。静的なレイアウトではなく、柔軟で拡張可能なウェブサイトを製作してみましょう。

Framerのテンプレートをチェックしてレスポンシブデザインを試してみてください。ギャラリーを訪問いて他のユーザーが作成したレスポンシブウェブサイトを見て、Framerの無料アカウントに登録して今日からレスポンシブウェブサイト作成を始めてみてください。

このブログ記事は、Framer公式ブログの‘How to design responsive websites without code’を翻訳・アレンジしたコンテンツです。