Animaのブレークポイント: Figmaのデザインをレスポンシブなウェブサイトに変換1 min read

Animaを使えば、ユーザーはブレークポイント（メディアクエリ）を設定することで、Figmaのデザインを簡単にHTMLやReactのコードに変換できます。

あなたは何時間もの時間を費やしてFigmaで完璧なウェブサイトを作成したとしましょう。デスクトップでみると、ウェブサイトはとても美しく見えます。しかし、その後スマートフォンの画面でも確認してみると、画面が縮小されて、文字が小粒のようになっています。そこで、この問題の解決策をデバイス別にそれぞれ複数のプロトタイプを作り、意思決定者およびエンジニアと複数のリンクを共有しました。特定の解像度では正しく画面を表示することができますが、他の解像度ではピクセルパーフェクトにはほど遠い見え方になっています。このようなシチュエーションは、デジタルデザインの世界ではよくあることで、複数の解像度をサポートすることは、あればベターということではなく、必須なのです。そこで、ブレークポイントの出番です。
Animaでブレークポイントを使えば、コンパクトなスマートフォンでも、タブレットでも、ワイドスクリーンのモニターでも、デザインが自動的に最良の状態で見えるように調整されます。正しいレイアウトが表示できるようになります。

FigmaのAnimaプラグインを入手

ブレークポイントとは？

ブレークポイントとは、ウェブサイトのコンツとデザインを、表示中のスクリーンのサイズや解像度に合わせて調整される特定のポイントのことです。
現在、デスクトップ、モバイル、そして時にはタブレットやワイドスクリーンのデスクトップ用のページレイアウトを表す異なるアートボードを用意するのが一般的になっています。これらのアートボードはそれぞれブレークポイントを示しています。

ブレークポイントを使うべき理由とは？

1.  ユーザーエクスペリエンスの強化 – ウェブサイトやアプリがどのデバイスでもきれいに表示され、きちんと機能するようにすることで、より多くのユーザーに対応し、インクルーシブでユーザーフレンドリーなデザインにすることができます。
2.  読みやすさとわかりやすさの向上 – ブレークポイントを使うと、デザイナーは単に要素の拡大縮小だけではなく、配置、視認性、コンテンツ、機能性までデバイスの解像度に応じて調整することができます。ランディングページを作成しているなら、これらすべての要素がコンバージョンの向上へとつながるでしょう。
3. SEO – 検索エンジンはモバイル端末で使いやすいウェブサイトを好みます。レスポンシブデザインは検索結果で上位に表示される可能性が高く、知名度とトラフィックが向上します。
4.  意思決定者や顧客とのコミュニケーション – デザインの過程においても、ブレークポイントはすべての解決策をひとつのリンクでシェアすることができるので、エンジニアを巻き込むことなく営業をクロージングできたり、意思決定者を納得したりすることができます。

ブレークポイントは現代のデザイナーにとって欠かせないツールであり、どのような画面でもレスポンシブでユーザー中心のデザインを作成することができます。デバイスの種類に限らず、完成したプロダクトがすべてのユーザーにとって利用でき、魅力的であることを保証できるのです。

ブレークポイントの使い方

ブレークポイントの使い方と、Figmaでレスポンシブなウェブサイトを作成する方法をご紹介します。

1. 複数のレイアウトでデザインする
   まずはFigmaでデザイン作成をはじめましょう。デザイナーはさまざまな画面サイズに対応するページのバリエーションを作成します。通常、モバイル、デスクトップ、タブレットなど、少なくとも2つか3つのバージョンを作成します
2. Animaのブレークポイント機能をアートボードに接続する
   同じページのアートボード（「ホームページ モバイル」と「ホームページ デスクトップ」など）をすべて選択する。それから、Figma用のAnimaのプラグインを使用して、「Responsive pages（レスポンシブページ）」→「+」→「Save（保存）」をクリックします。
3. パブリックリンクもしくはエキスポートコードをパブリッシュする
   o Animaでブレークポイントを設定し、デザインをHTMLもしくはReactのコードに変換する準備をする
   o 「Get code（コードを入手）」をクリックして、HTMLもしくはReactのコードパッケージをダウンロードする。生成されたコードパッケージには、ブラウザのウィンドウサイズに合わせて自動的にレイアウトを調整し、ウェブサイトをレスポンシブにレンダリングするためのすべての必要なコードとアセットが含まれています。このコードはFigmaのデザインをすべての指定したブレークポイントで正しく反映できるように設計されています。
   o もしくは、「Publish（パブリッシュする）」をクリックして、animaapp.ioもしくはユーザー独自のドメインでパブリックリンクを入手する。

ブレークポイントのもっと詳しい情報

• 複数の画面とFigmaリンク – Animaは、Figmaのプロトタイプリンクをすぐにサポートし、複数のページにブレークポイントを設定することができます。
•  ブレークポイントとオートレイアウト – Figmaのオートレイアウトもサポートしています。さらに、ALを使用することで、さらに良いユーザーエクスペリエンスを提供することもできます。
•  バックグラウンドで機能するCSS – AnimaはCSSメディアクエリを使って、スクリーンの大きさに合わせて異なるレイアウト 間を移動できます。
• 最良のパフォーマンスのためにアートボードで作成すべき画面サイズとは？
  •  アートボードの幅は、このレイアウトの最小の幅を表示しましょう。
  •  つまり、1200pxのデスクトップパソコンと350pxのモバイル端末を使用する場合、幅が1200px以下の画面ではモバイルレイアウトが表示されます。350px以下の場合は、350pxの最小版をキープします（一般的にはモバイルブラウザの画面ではスクロールではなく縮小されます）。

FigmaのデザインをAnimaでレスポンシブなウェブサイトに変換することで、開発のプロセスが合理化され、デザイナーとデベロッパーは、初期デザイン段階からコーディング段階まで、綿密な意思疎通をしながら作業することができます。

おすすめの記事
FigmaのデザインのHTML/CSSへのエキスポート方法
無料でAnimaを使ってみる
Animaアカウント作成はこちら

FigmaのAnimaプラグインを入手