UX/UIデザインにおける アスペクト比 のベストプラクティス
画像の適切な表示は、良いUXデザインの重要な要素です。不適切なトリミングや歪みは、訪問者に悪印象を与え、エンゲージメントに悪影響を及ぼします。
デバイスごとに最適なアスペクト比を決めるのは手間ですが、レスポンシブデザインツールや無料のアスペクト比計算ツールを活用すれば簡単に最適化可能です。
画像が満載の Web サイトやアプリをデザインしていますか？それなら UXPin でプロトタイプを作成しましょう! UXPin は、デザインプロセス全体をカバーするエンドツーエンドのソリューションで、デザインハンドオフにプラグインは必要ありません。無料相談およびトライアルはこちらから。
アスペクト比 とは
最も基本的な方法でいうと、アスペクト比は画像の縦と横の関係です。 アスペクト比は画像のサイズではなく比率を反映するため、サイズに関係なくアスペクト比は変わりません。例えば、正方形の画像は縦横が同じなので、アスペクト比は１：１であり、この比率は、画像がどんなに大きくても変わりません。なので 320 x 320px の画像も、1080 x 1080px の画像も同じ アスペクト比 で１：１になります。
正方形でない画像、つまり様々なサイズの横長や縦長の長方形の場合だと、アスペクト比は様々です。写真、ビデオ、その他の画像ベースのデザイン作業で使われる一般的なアスペクト比には、４：３、３：２、１６：９ などがあり、テレビやデスクトップパソコンなど、多くのワイドスクリーンデバイスの基本比率となっています。
横長や縦長の画像には、4:3、3:2、16:9などの一般的な比率があり、これらはテレビやワイドスクリーンデバイスでよく使われます。アスペクト比を基に、さらに細かい比率の調整も可能です。
ピクセルのアスペクト比
ピクセルアスペクト比（PAR）とは、画像を構成する個々のピクセルの比率のことをいいます。 ピクセルは通常正方形で、ピクセルアスペクト比は１：１となりますが、ある種のディスプレイ用に最適化された画像だと、アスペクト比が４：３などの長方形のピクセルになることもあります。
ディスプレイのアスペクト比
ディスプレイアスペクト比（DAR）は、デザイナーにとって最も関連性の高いアスペクト比の種類であり、一般的な用語として最もよく使われるものです。 DAR はその名が示すように、さまざまな種類のスクリーン上に表示される画像の比率のことをいいます。
カメラやテレビなど、一部のデバイスは DAR が固定されているため、そのデバイスで画像をうまく表示するには、特定のアスペクト比に最適化する必要があります。例えば、モニターやテレビ画面に表示されるワイドスクリーン映像の典型的な表示アスペクト比は１６：９ですが、さまざまなアスペクト比の画像をこのようなデバイスで表示すると、歪んで見えます。ちなみに、デジタル一眼レフカメラのセンサーにも固定表示アスペクト比があり、カメラで撮影した画像の保存や表示の方法をコントロールしています。
ストレージのアスペクト比
ストレージアスペクト比（SAR）は、特にエンコードされたデジタルビデオファイルに関連するアスペクト比の公式であり、ビデオフレームサイズの幅と高さの関係を指し、完全なビデオを適切に表示するために、すべての個々のフレームで一貫している必要があります。一般的に使われている計算式だと、ワイドスクリーンビデオは大抵 SAR x PAR = DAR となります。
アスペクト比が UI/UX デザインに与える影響
アスペクト比は、写真、ビデオ、その他の種類の画像ベースのファイルを正しい方法でキャプチャして表示するあらゆる種類のプロジェクトで重要な役割を果たします。 カメラの固定アスペクト比は、写真家にとって、写真の構図や他のデバイスでの表示に大きな影響を与えるものであり、ビデオグラファーやスライドショー、アニメーション、その他のモーション・プロジェクトに携わる人にとっても、アスペクト比はワイドスクリーンやモバイル・デバイスで正しく表示するための重要な要素となります。
どんなデバイスでもコンテンツが適切に表示されるようにするレスポンシブ Web デザインへの移行によって、個々の画像のアスペクト比の設定に関する多くの問題が解決されますが、そのような環境であっても、画像の内容や品質が損なわれることなく表示を調整できない場合などの問題が生じることがあります。 簡単な例としては、アスペクト比１：１の正方形の画像を、Web サイトページの長方形の枠に収める必要がある場合が挙げられます。さまざまな画像サイズの要件に対応するには、サイズだけでなく比率の調整も必要な場合があるのです。
画像主導のデジタル化が進む中、動画や画像の比率が少しでもずれていると、訪問者の Web サイトに対する印象は悪くなり、明らかに間違った構成に押し込められた動画や画像だと、サイトのユーザビリティが阻害されることさえあります。
比率の悪い製品画像や、引き伸ばしすぎてよく見えないユーザーガイド動画は、訪問者の意欲とサイトの利用能力の両方に影響を与えることから、デザイナーやデベロッパー、画像を扱う人は、アスペクト比がどのように機能し、どのように操作すれば最高の視覚効果が得られるかを知っておく必要があります。 そしてそのプロセスを効率化するのに、有料無料を問わず、多くのアスペクト比計算ツールが Web 上に出てきています。
レスポンシブ デザインにおけるアスペクト比のベスト プラクティス
レスポンシブデザインでは、画像、動画、UI 要素のアスペクト比の正しい維持が、さまざまな画面サイズにわたってコンテンツをきれいでプロフェッショナルに見せるのに不可欠です。適切に維持されたアスペクト比で、ビジュアルの完全性が維持されるだけでなく、さまざまなデバイスでの歪みやぎこちないトリミングの防止になることで、UX（ユーザーエクスペリエンス）が上がります。そこで、レスポンシブデザインでアスペクト比を扱う際に従うべきベストプラクティスを以下で見ていきます：
１．アスペクト比の維持に CSS を使う
CSS は、さまざまなビューポート間で一貫したアスペクト比を簡単に確保できるツールを提供しています。例えば、aspect-ratio プロパティ（CSS レベル4 で導入）だと、コンテナ、画像、動画の縦横比を定めることができることから、画面サイズに関係なく正しい比率を維持することができます。このプロパティが広く対応されるようになる前は、コンテナやメディア要素の比率の維持に、デベロッパーは多くの場合 padding-topトリック（padding のパーセンテージが幅に基づく）を使っていました。
２．主要なメディア要素の アスペクト比 を維持する
画像、動画、インタラクティブな要素はユーザー体験の鍵となるため、さまざまなデバイスで閲覧する際に歪んだり見切れたりしないことが非常に重要です。例えば画像が引き伸ばされたり縮小されると、プロらしくないデザインになり、それでユーザーがウンザリしてしまう可能性があります。
正しいアスペクト比を維持することで、画像や動画では意図した寸法が維持され、画面サイズに合わせて適切に拡大縮小されます。その実現には、CSS のメディアクエリで、アスペクト比を維持したままさまざまなビューポートに対応できるようにしておきましょう。
３．パフォーマンスの最適化のためにレスポンシブ画像を使う
レスポンシブデザインでは、特に接続速度の遅いモバイルデバイスだと、パフォーマンスが重要な役割を果たします。レスポンシブ画像を使うのは、パフォーマンスとビジュアルクオリティのバランスをとるための鍵となり、HTML で srcset 属性を使えば、ユーザーの画面サイズに応じてさまざまな解像度の画像を提供することができます。
４．デバイス間でテストする
レスポンシブデザインの基本原則のひとつに、さまざまなデバイス間での徹底的なテストがあります。アスペクト比が保たれていないと、デスクトップではきれいに見えても、携帯電話ではズレてしまうかもしれません。Chrome Developer Tools やオンラインのレスポンシブデザインテスターのようなツールを使って、さまざまなデバイスや画面サイズをエミュレートしましょう。
１６：９や４：３など、アスペクト比が固定されている画像や動画の場合、必ずデザインが歪むことなく、すべての画面サイズにうまく適応するようにしましょう。そして動的なリサイズはすべて元の比率を尊重するようにしてください。
５．流動的なレイアウトで アスペクト 比を扱う
レスポンシブデザインでは、画面の幅に応じて要素が動的にサイズ変更される可変（フルード）レイアウトがよく使われます。このような場合、アスペクト比の設定は、画像やコンテナの幅や高さが狭くなりすぎるなどの問題を防ぐのに非常に重要であり、パーセンテージベースの幅と高さを使うことで、アスペクト比を崩すことなくコンテンツを適切に拡大縮小することができます。
たとえば、１６：９の動画コンテナはモバイル画面に合わせて縮小されるかもしれませんが、全体のレイアウトがどんなに変わっても、常に１６：９の比率は維持されるべきです。流動的なレイアウトと柔軟なアスペクト比を組み合わせることで、あらゆるデバイスで一貫した視覚的に魅力的なデザインを保つことができるのです。
アスペクト比計算機
確かに、簡単な数学の助けを借りて、画像のアスペクト比を計算し、手動でサイズを変更することは可能ですが、複数のソースからの多数の画像を扱うとなると、面倒になります。ただし、数多くあるオンラインのアスペクト比計算ツールの１つを利用すると、さまざまな形式の画像に最適なアスペクト比を決定でき、それでデザイナーは各画像を最適な表示に完全に最適化できます。
基本的なアスペクト比計算機を使うには、ピクセル単位の画像解像度を知り、HDTV など画像が表示される環境の種類を選択する必要があります。 計算機で、最適なアスペクト比が出されますが、これは、ビデオ編集でビデオにさまざまなソースからのさまざまなサイズのスライドや画像が含まれる場合に特に便利です。
UX/UI のアスペクト比ツール
他の画像管理ツールでもアスペクト比を正しく設定することができます。Photoshop や Canva などの画像編集ソフトには、最適なアスペクト比を考慮してデザインされたテンプレートが用意されており、Web サイトのバナーや見出し、SNS のプロフィールなどの一般的な場面での使用に適しています。 また、大抵の標準的なビデオ編集ソフトでは、ビデオの個々のフレームとして含まれる画像のアスペクト比の決定や調整ができます。
正しく表示され、正しく機能する正しい比率の画像は、あらゆる種類のビジネスにとって強力なツールです。アスペクト比が正しければ、画像はどこに表示されてもきれいな見栄えになります。そして 商品の販売やサービスの提供、オンラインコースの作成など、どのような場合でも、写真やイラスト、動画は訪問者を惹きつけて飽きさせません。
UXPin の機能で、画像のサイズと比率が正しいかどうかを簡単に確認できます。また、Image fill（画像の塗りつぶし） 機能で、さまざまな設定から選択して、画像のサイズを調整したり、アスペクト比を維持しながら画像をトリミングして完璧な位置に配置したりできます。
UXPin は、デザイナーとデベロッパーを結び、より速く優れた製品開発を実現します。無料相談およびトライアルはこちらから。
