柔軟なコンポーネントを構築するための開発者の決定

公開: 2022-03-10

簡単な要約↬フロントエンド開発者の重要なスキルの1つは、デザインを取得してコードに変換できることです。これらのデザインは、多くの場合、静的なモックアップとして提示され、Webサイトを閲覧する「理想的な」エクスペリエンスを視覚化します。

現実の世界では、コンテンツは、デザインで提示されるきちんとした、完璧にフィットするコンテンツとは大きく異なることがよくあります。それに加えて、現代のWebでは、ユーザーは、私たちが構築するサイトにアクセスする方法について、ますます多くのオプションを利用できます。

この記事では、ユーザーとコンテンツ作成者の両方のニーズを念頭に置いて、テキストとメディアコンポーネントの見た目がシンプルなデザインを採用し、それをコードに変換する最適な方法を決定するプロセスについて説明します。コーディング方法については詳しく説明しません。むしろ、開発の決定を決定する要因については説明しません。すべてのステップで、（私たち自身と他の利害関係者の両方に）尋ねる必要のある質問を検討します。

開発マインドセットの変更

「最適な」コンテンツやブラウジング条件のためだけにデザインや開発を行うことはできなくなりました。代わりに、Webに固有の柔軟性と予測不可能性を受け入れ、回復力のあるコンポーネントを構築する必要があります。静的モックアップはすべてのシナリオに対応できるわけではないため、多くの設計上の決定はビルド時に開発者に委ねられます。好むと好まざるとにかかわらず、UI開発者であれば、自分自身を設計者とは見なさなくても、設計者です。

WordPressのスペシャリストWebエージェンシーであるAtomicSmashでの私の仕事では、提供するコンポーネントから最大限の柔軟性を必要とするクライアント向けのWebサイトを構築すると同時に、どのようなコンテンツをスローしてもサイトの見栄えを良くします。時々、デザインを解釈することは、デザイナーに彼らのアイデアをさらに詳しく説明するように頼むことを意味します（あるいはそれらを再評価することさえあります）。また、その場で設計を決定したり、知識と経験に基づいて推奨事項を作成したりすることも意味します。このケーススタディでは、これらのアプローチが適切である可能性がある場合をいくつか見ていきます。

デザイン

まず、テキストとメディアコンポーネントのシンプルなデザインから始めます。これは、製品のランディングページでかなり一般的に見られるものです。これは、左側の画像またはビデオと右側の列で構成され、見出し、テキストの段落、および召喚状のリンクが含まれています。このデザインは、新しいスキルを学びたい人が家庭教師を見つけるのに役立つ（架空の）スタートアップ向けです。

テキストとメディアコンポーネントの初期設計 — テキストおよびメディアコンポーネントの初期設計。（大プレビュー）

注：コードに直接ジャンプして、このコンポーネントについて考えられるすべての解決策を確認したい場合は、このCodepenデモで見つけることができます。

ジャンプした後もっと！以下を読み続けてください↓

レイアウトと順序

設計者は、画像が右側に、テキスト列が左側になるように、他のすべてのコンポーネントのレイアウトを反転させる必要があると規定しています。

ただし、モバイルレイアウトでは、すべての場合で画像がテキストコンテンツの上にスタックされます。グリッドまたはフレックスボックスのいずれかを使用してこのレイアウトを作成すると仮定すると、 flex-directionまたはorderプロパティを使用して、2つおきのコンポーネントのレイアウトを並べ替えることができます。

 .text-and-media:nth-child(even) { flex-direction: row-reverse; }

これらはコンテンツを視覚的に並べ替えますが、DOMの順序は変更されないことに注意してください。これは、スクリーンリーダーを使用してサイトを閲覧している弱視の人には、コンテンツの順序が論理的に見えず、左から右へ、右から左へとジャンプする可能性があることを意味します。

個人的に言えば、いずれかの列のコンテンツが画像のみの場合、 orderプロパティを使用しても大丈夫だと思います。ただし、たとえば2列のテキストがある場合、CSSを使用して並べ替えると、混乱を招く可能性があります。そのような場合、他にもいくつかのオプションを利用できます。我々は出来た：

アクセシビリティに関する懸念事項を提示し、モバイルレイアウトの場合は、デスクトップの順序と一致するように視覚的な順序を変更することをお勧めします。
Javascriptを使用して、DOM内の要素を並べ替えます。

また、 :nth-childセレクターを介して順序を強制するか、クライアントが順序を制御できるようにするか（たとえば、コンポーネントにクラスを追加することによって）を検討する必要があります。各オプションの適合性は、プロジェクトによって異なる可能性があります。

さまざまなコンテンツの長さを処理する

デザインでは、画像と比較したテキストコンテンツの比率は非常に満足のいくものです。これにより、画像は理想的なアスペクト比を維持できます。しかし、テキストが提示されたものよりも長いまたは短い場合はどうなりますか？最初に前者に対処しましょう。

より長いコンテンツ

選択したCMSのテキストフィールドに文字数制限を設定できますが（そのように傾いている場合）、コンポーネントに少なくともある程度のバリエーションを考慮に入れる必要があります。より長い段落を追加すると、反対側のメディア列はいくつかの方法のいずれかで動作する可能性があります。

画像またはビデオは上部に残り、スペースは下部に追加されます（図1）。
画像またはビデオは中央に配置され、上部または下部にスペースが追加されます（図2）。
画像またはビデオの比率は、 object-fit: coverを使用して高さに一致するようにスケーリングされ、歪みを防ぎ、画像が使用可能なスペースを埋めるようにします。これは、画像の一部がクリップされる可能性があることを意味します（図3）。

画像または動画は上部に残りますが、下部にスペースが追加されます — 図1.（大きなプレビュー）

画像または動画が中央に配置され、上部または下部にスペースが追加されます — 図2.（大きなプレビュー）

画像またはビデオの比率は、歪みを防ぎ、画像が利用可能なスペースを埋めるように「object-fit：cover」を使用して、高さに一致するようにスケーリングされます。 — 図3.（大きなプレビュー）

オプション3が視覚的に最も魅力的であり、ほとんどの場合、コンテンツ作成者は少量のクリッピングが許容される適切な画像を調達できると判断しました。しかし、それは、重要な部分が切り取られる可能性があるというリスクがより高いビデオコンテンツにとってより多くの課題を提示しました。別のオプションを選択しました。これは、ビデオが元のアスペクト比を維持し、ページの端に揃えるのではなく、最大幅内に収まるように、デザインのさまざまなバリエーションを作成することでした。

ビデオは元のアスペクト比を維持し、ページの端に揃えるのではなく、最大幅内に含まれます。 — （大プレビュー）

コンテンツ作成者は、ニーズにより適している場合にこのオプションを選択できます。

さらに、この選択を、ビデオの代わりに画像が使用されたインスタンスに拡張することを選択しました。これにより、設計に悪影響を与えることなく、クライアントにさまざまなレイアウトオプションを提供できます。より広いページのコンテキストで見ると、これらのブロックのいくつかがページで使用されている場合、より興味深いページを可能にする改善と見なすことさえできます。

短いコンテンツ

より少ないコンテンツを扱うことは少し簡単ですが、それでもいくつかの問題があります。テキストコンテンツが短い場合、画像はどのように動作する必要がありますか？コンポーネントの全体の高さがテキストの内容によって決まるように、浅くする必要がありますか（図4）。または、画像がレターボックス化されないように、または画像が自然な本来の高さを占めるように、最小アスペクト比を設定する必要がありますか？その場合、テキストを中央に配置するか、上部に配置するかについても検討します（図5および5a）。

コンポーネントの全体の高さがテキストコンテンツによって決定される画像 — 図4.（大きなプレビュー）

見出しの長さ

さまざまな長さの見出しもテストする必要があることを忘れないでください。デザインでは、見出しは短くてスッキリしていて、2行目に折り返されることはめったにありません。しかし、見出しが数行の長さである場合、またはコンテンツが多くの長い単語を使用しているために、テキストの折り返しが異なる場合はどうなりますか？これは、たとえばドイツ語など、単語が英語よりもはるかに長くなる傾向がある言語では特に問題になる可能性があります。デザインの見出しフォントのサイズは、このレイアウトで使用するときに適切な行の長さを考慮していますか？長い単語は、折り返すときにハイフンでつなぐ必要がありますか？ Ahmad Shadeedによるこの記事では、コンテンツの長さの問題に対処し、CSSでそれを処理する方法に関するいくつかの便利なヒントが含まれています。

コンテンツの作者は、自分に合った見出しを完全に省略できますか？それは私たちを次の考察に導きます。

コンテンツの省略

このコンポーネントを可能な限り柔軟に構築するということは、コンテンツ作成者が特定のフィールドを省略しても、デザインの外観と機能を適切に保つことができるようにすることを意味します。このコンポーネントを実際に使用する場合、クライアントが本文、リンク、または見出しさえも省略したいと思うかもしれないことは合理的と思われます。コンポーネントがストレスを受けても壊れないことを確信できるように、考えられるすべてのコンテンツの組み合わせでテストするように注意する必要があります。フィールドコンテンツが存在しない場合は、空のHTMLタグをレンダリングしないようにすることをお勧めします。これにより、予期しないレイアウトのバグを回避できます。

本文を省略し、リンクを省略してコンポーネントをテストする — 本文を省略し、リンクを省略してコンポーネントをテストします。（大プレビュー）

CMSの「必須」フィールドでコンテンツ作成者を制限することはできますが、クライアントが画像を省略したり、逆にテキストコンテンツを使用しなかったりするシナリオも検討したいと思うかもしれません。これらのオプションを提供すると役立つ場合があります。これらの場合にコンポーネントをレンダリングする方法の例を次に示します。

テキストをもう少しインデントし、本文の幅を広げることで、画像がない場合でもバランスの取れた感じを保つことができます。

複数のリンク

コンテンツの省略は1つのシナリオです。しかし、Atomic Smashでは、クライアントがコンポーネントに複数のリンクを追加するオプションを望んでいることがよくありました。それは私たちに別の選択肢を提示します：複数のリンクをレイアウトする方法は？それらを並べて配置しますか（図8）、それとも垂直に積み重ねますか（図8a）？

長さが大きく異なるリンクタイトルをどのように処理しますか？良いトリックは、両方のリンクの幅を最長の最大幅に設定することです（図9）。（この記事ではそれだけを取り上げます。）これは垂直に積み重ねられたボタンに適していますが、水平に配置するとさらに多くの選択肢があります（図9a）。

両方のリンクの幅が最長の最大幅に設定されているコンポーネント — 図9.（大きなプレビュー）

それらを区別するために、セカンダリリンクスタイルが必要ですか？これらはすべて考慮すべき質問です。

リンクを区別するのに役立つ2つの異なるスタイルのボタン — リンクを区別するために、セカンダリリンクスタイルを追加することにしました。（大プレビュー）

また、（単一のリンクの場合）実際に、リンクのクリック可能な領域がコンポーネント全体を含む必要があるかどうかを検討する必要がある場合があります。これにより、ユーザーはリンクの任意の場所をクリックしてリンクをアクティブ化できます。その選択は、おそらくより広い文脈に依存するかもしれません。カードベースのUIでは確かに一般的です。

ビデオ

コンポーネントが静止画像ではなくビデオに使用されている場合、デザインでいくつかの重要な情報が省略されていることに気付く場合があります。ビデオの再生はどのように制御されますか？ホバーしますか？スクロールで自動再生されますか？ユーザーに表示されるコントロールがあるべきですか？

ビデオがホバーで再生される場合、ホバー機能のないデバイスのユーザーがビデオコンテンツにアクセスする方法を検討する必要があります。または、ビデオが自動再生される場合は、前庭障害に苦しむ可能性がある（または単に不快なアニメーションを避けたい）、動きを減らすことを好むユーザーに対してこれを防ぐことを検討する必要があります。また、すべてのユーザーが希望するときにビデオを停止する方法を提供する必要があります。

コンテキストに入れる

Webデザインに関して、コンポーネントに非常に密接に焦点を当てることに関する1つの問題は、構築するコンポーネントがWebページ全体のコンテキストでどのように表示されるかを考慮するのを忘れることがあります。同じタイプのコンポーネント間の間隔と、他のコンポーネントが散在しているページレイアウトの両方の間隔を考慮する必要があります。

これらのテキストとメディアのコンポーネントは、控えめに使用するように設計されており、目を引く色のスプラッシュと、他の点では直線的なレイアウトからの脱却を生み出します。しかし、WordPressを使用すると、コンテンツ作成者はこれらのコンポーネントだけで構成されるページ全体を簡単に作成することができます。それはかなり鈍く見えることになり、私たちが望んでいた効果はまったくありませんでした！

ビルドプロセス中に、背景色を省略するオプションを追加することにしました。これにより、ページを分割してより面白くすることができます。

テキストとメディアコンポーネントのさまざまなバリエーションで構成されるページ。（大プレビュー）

:nth-childを使用してパターンを適用するか、CMSにフィールドを追加して、クライアントがよりクリエイティブに制御できるようにすることができます。

これは元の設計の一部ではありませんでしたが、設計者と開発者の間のオープンなコミュニケーションが、より柔軟で堅牢な設計という点でより良い結果を生み出すのに役立つことを示しています。

WYSIWYGテキストスタイル

コンテンツを検討するときは、テキストの長さだけでなく、本文のテキストフィールドで許可される可能性のある実際のHTML要素も考慮する必要があります。コンテンツ作成者は、本文のコピーに複数の段落、アンカーリンク、リストなどを追加したい場合があります。 Atomic Smashでは、これらの領域にWYSIWYG（表示されるものは取得するもの）またはリッチテキストフィールドを提供します。これにより、さまざまな要素を使用できます。さまざまな種類のコンテンツでテストし、適切なスタイルを設定することが重要です。これには、使用するすべての背景色で十分な色のコントラストをテストすることも含まれます。

本文のリンクスタイルが色のコントラストに関するWCAGガイドラインに合格しないコンポーネント — 本文のリンクスタイルは、色のコントラストに関するWCAGガイドラインに合格していません。それに応じてスタイルを修正する必要があります。（大プレビュー）

まとめ

この一見単純なコンポーネントの構築に関連するさまざまな決定に触れました。ここで取り上げていない他のいくつかのことを考えることさえできるかもしれません！デザインのあらゆる側面と、それがコンテキストでどのように使用されるかを検討することで、はるかに用途の広いものになりました。これにより、クライアントがより幸せになることを願っています。

場合によっては、設計から省略されることが多いほど、開発者はより多くの時間と注意を払う必要があります。コンポーネントを構築するときにテストおよび質問するためのチェックリストを以下にまとめました。これは便利な場合があります。さまざまなコンポーネントにも適合させることができます。

見た目の単純さを超えて、コンポーネントを構成要素に分解し、重要な質問をし（開発が行われる前であっても）、将来の使用を検討することさえできることは、すべての開発者がWebサイトを構築するときに役立つスキルです。必要に応じて、はるかに正確な見積もりを提供するのに役立ちます。優れたチームコミュニケーションと強力なコラボレーションプロセスは、回復力のあるサイトを構築するために非常に重要ですが、最終的な結果として、この文化の育成に投資する価値があります。設計と構築のプロセスに柔軟性を取り入れましょう。

チェックリスト

テストするもの：

レイアウトのアクセシビリティ（モバイルおよびデスクトップ）。
さまざまな固有のアスペクト比の画像—適切にトリミングされていますか？
長い本文と短い本文（複数の段落を含む）。
長い見出しと短い見出し（さまざまな単語の長さを含む）。
見出し、本文、リンク、画像を（さまざまに）省略します。
複数のリンク（異なる長さのリンクテキストを含む）。
ビデオコンテンツのアクセシビリティ。
WYSIWYGテキストコンテンツ（本文テキストにリンク、リストなどを含める）。
コンテキストでのテスト—複数のコンポーネント（異なるコンテンツオプションを使用）、およびページレイアウトに混合された他のコンポーネントを含めます。