CMS Webデザイン：動的コンテンツアプリケーションのガイド

オンラインメディアのダイナミックなコンテンツ主導の世界のためのUI/UXテクニック。

特にオンラインメディア分野のWebアプリケーションとモバイルアプリの大部分は、WordPress、Drupalなどのコンテンツ管理システム（CMS）を利用しています。 これらのシステムは、コンテンツが王様でダイナミックであり、継続的かつ頻繁に変化するインターネット時代のニーズを満たすために誕生しました。

これまで、ほとんどのWebサイトは静的であり、シームレスに進化および成長するように構築されていませんでした。 現在、それらは生きているシステムであると考えられており、それらのために設計するための最適な方法があります。

以下は、静的なWebサイトやランディングページを超えてレパートリーを拡大し、ニュースサイト、ブログ、さらにはユーザーが定期的にコンテンツを公開するソーシャルネットワークなどの動的なコンテンツ駆動型アプリケーションの効果的な設計を開始することを検討しているデジタルデザイナー向けのガイドです。 この移行を行うには、設計者は、これらのタイプのアプリケーションが通常どのように構成されているかを理解し、設計プロセスで「コンテンツファースト」の考え方を採用する必要があります。

CMS駆動型アプリケーションのCMSWebデザインIAパターン

設計者は、特にUX（ユーザーエクスペリエンス）に取り組んでゼロから設計する場合は、CMS駆動型アプリケーションの一般的な情報アーキテクチャパターンのメンタルモデルを持っている必要があります。 これらのアプリケーションに共通で不可欠ないくつかのページタイプがあり、それらは多くの場合、「投稿」がコアコンポーネントとして機能する予測可能な方法で相互に接続します。 通常、アプリケーションに含めることができる投稿の数に理論上の制限はありません。

表紙

これは正式なエントリポイントであり、多くの場合、ホームページと同義です。 これは非常に一般的です。特に、アクセスするコンテンツが多い場合は、最も重要なものを強調したり、取り上げたりするのに役立ちます。 このページは通常、あまり多くの詳細を明らかにすることなく、投稿の短縮バージョンを表示します。

投稿ページ

「投稿」がCMS駆動型アプリケーションのコアユニットである場合、投稿ページには、投稿に関するすべての公開詳細が表示されます。 これはおそらくアプリケーションで唯一の真に重要なページであり、特定のイベント、人物、グループ、製品などに関する記事ページまたは情報ページである可能性があります。一部の大規模なアプリケーションでは、複数のタイプの投稿と投稿が存在する場合があります。指定されたページ。

リスト/カテゴリページ

このタイプのページは、ユーザーが利用可能なすべての投稿をナビゲートし、カテゴリ、属性、またはその他の基準でそれらをフィルタリングできるようにするのに役立ちます。 スクロールするコンテンツの量が多い場合は、並べ替えオプションも一般的です。

検索ページ

検索専用のページは、小規模なアプリケーションには必須ではありませんが、常に役立ちます。 場合によっては、カテゴリ/リストページとマージまたは統合できます。

ユーザー/作成者のプロファイル

このページは、1つ以上の投稿を作成する各作成者またはユーザー専用です。 小さなニュースサイトや単著のブログでは見過ごされがちですが、大規模な複数の著者のニュースサイト、コンテンツ主導のソーシャルネットワーク、その他のユーザー生成アプリケーションでは重要です。 一般的で役立つ方法は、このページにユーザーのすべての投稿のリストを含めることです。

ユーザーホームまたはダッシュボード

このページには、ログインしたユーザーに関連する情報（投稿を含む）が表示されます。多くの場合、個人的なニュースフィードまたは推奨コンテンツ、最近のアクティビティ、およびステータスの形式で表示されます。 ユーザーホームは、ゲート付きアプリやソーシャルネットワークアプリケーションには不可欠ですが、オプションであるか、他のアプリケーションには関係ありません。

動的コンテンツのコンテンツ駆動型UIデザイン

コンテンツはデザインに先行します。 コンテンツのないデザインはデザインではなく、装飾です。 –ジェフリーゼルドマン

CMS駆動型アプリケーションのユーザーインターフェイスを設計するときは、コンテンツが常に設計を推進することを覚えておくことが重要です。その逆ではありません。 コンテンツファーストのアプローチは、近年ますます多くのメディア企業によって採用され、実証済みの結果が得られています。 これを念頭に置いて、これらのタイプのプロジェクトで足を濡らすときに留意すべきUIデザイナー向けの推奨事項のリストを以下に示します。

スタイルを定義する前にコンテンツを検討する

コンテンツ駆動型アプリケーションでは、視覚スタイルがコンテンツ全体をサポートする必要があります。 これらのタイプのアプリケーションの性質は、通常、コンテンツが可変であり、完全に予測可能ではないことを意味しますが、多くの場合、コンテンツは全体的なテーマに収まります。 したがって、ブランドの美学を発展させるとき、実際のコンテンツは素晴らしいインスピレーションの源になり得ます。 同時に、デザイナーが特定のコンテンツに執着しすぎて、過度にターゲットを絞ったスタイルを開発した場合にも、責任を負う可能性があります。

誰が定期的にコンテンツを作成するのかを知ってください。

CMS主導のアプリケーションでは、コンテンツは主にデザイナーではなくコンテンツ作成者によって決定されます。 したがって、通常、デザイナーは、コンテンツを定期的に公開する人々、つまり、編集者、作成者、管理者、またはパブリックフォームを介してコンテンツを入力するランダムユーザーにさえ、製品の外観の制御を放棄することが期待されます。

合意されたプロセスに応じて、デザイナーは画像の選択、画像の準備とトリミング、さらにはテキストのスタイル設定にいくつかのパラメーターを設定するためのいくつかの基準とガイドラインを設定できます。 ただし、全体として、写真の質が悪い、見出しが非常に長いなど、コンテンツ作成者側の標準以下の作業で品質が低下しないように、アプリケーションのフロントエンドを形成するのは設計者の責任です。かなりの程度のデザインの。

可能な場合は、実際のコンテンツを使用して設計してください。

CMS駆動型アプリケーションではコンテンツの種類が大きく異なる可能性があるため、コンテンツの大規模なサンプリングを調べることに時間を費やすことは理にかなっています。 理想的には、ニュースサイトやブログの場合、デザイナーはデザインプロセスの最初の段階でコンテンツ作成者と協力し、ストーリーの例、製品の画像、ビデオなど、デザインのモックアップをリアルに感じさせるのに役立つものを要求します。できるだけ。

ストックフォトやダミーテキストを使用するよりも、実際のコンテンツを使用してデザインすることをお勧めします。また、発生する可能性のある驚きを制限するのに役立つため、ワイヤーフレーミングやプロトタイピングと並行して行うこともできます。

デザイナーが慎重に事前に選択またはフォトショップで作成した画像と完全に調整された見出しでデザインを埋め、本番環境に移行すると、デザインが低迷するのを見ると、デザインが見事に見えることは珍しくありません。

スタイルを過度に具体的にしないでください。

視覚的なスタイルを設定するときは、単一​​のムード、ジャンル、ストーリー、または主題だけを反映してコンテンツをピジョンホールにしないでください。 代わりに、コンテンツで使用される可能性のあるトーンの全範囲に関して、シンプルで普遍的なものにしてください。

ニッチなオーディエンスに対応するアプリケーションでは、非常に特殊なルックアンドフィールが受け入れられる場合がありますが、今日の市場では時代遅れでマスアピールが不足していることがよくあります。 さらに、将来の成長と拡大の見通しを新しい分野に限定する可能性があります。

デザインが幅広いコンテンツで機能することを確認するには、通常、公開可能なテーマの範囲内で、著しく異なる主題を持つ同じページの追加バージョンまたは2つをモックアップして、デザインをテストすることをお勧めします。

さまざまなコンテンツのテンプレートとして各ページをデザインする

アプリケーションの各タイプのページを、さまざまなメディアアイテム（画像、ウィジェット、ビデオ、テキストのブロックなど）のテンプレートまたは青写真と見なし、変更される可能性のあるアイテムと修正されたままのアイテムを把握します。 。

明確なルールと一貫性のセットを確立してください。

コンテンツがページごとに大きく異なる可能性があるからといって、コンテンツが表示される形式の一貫したセットが存在してはならないという意味ではありません。

ヘッダーと画像サイズを予測可能に保ち、ページ内で上から下への論理情報階層を観察することには多くの利点があります。1つは、アプリケーション全体で調和の感覚を生み出し、ユーザーを適切な方向に保つことです。

これをより簡単に実現するには、デザインプログラム内の見出し、仕切り、ボタン、ウィジェット、その他の要素など、インターフェイスのできるだけ多くの部分にモジュール式で再利用可能なスタイルコンポーネントのセットを開発します。 これらのコンポーネントを繰り返し、論理的なスキームで使用し、変動を最小限に抑えます。 Toptal Designer Wojciech Dobryによるこの記事は、SketchでUIライブラリを作成するための優れたガイドを提供します。

投稿に個別のデザイン処理を施さないでください。

ページの同じセクション内にスタイルや形式の違いが多すぎないようにしてください。 これには、画像のサイズの変更、特別なテキストレイアウトやフォントの追加、カスタマイズされた装飾やグラフィックで個々の画像を膨らませることが含まれます。 これは視覚的な調和を損なう傾向があるだけでなく、一般にリソースの浪費であり、開発者またはコンテンツ管理者の観点からパフォーマンスとメンテナンスの足かせになります。

コンテンツが常に指定された領域に収まると思い込まないでください。

CMS駆動型アプリケーションの動的な性質の必然的な結果の1つは、特定の表示領域に表示されるテキストの量が長さを変える可能性があることです。 多くの場合、CMSのテキストに文字数制限を設定して、物事を合理的に保つことができますが、設計者は、テキストのブロックが常に特定の行数に収まると盲目的に想定してはなりません。

個々の文字の幅が異なるだけでなく、非常に低い文字制限を適用することによって作家の創造性を大幅に制限することも慣例ではありません。 これが、上記のように実際のコンテンツでデザインをテストし、各領域を異なるテキストのサンプルで精査することが常に良い理由です。

最悪のシナリオを確実にするために、合意された文字数の制限に達するまで、幅の広いアルファベット文字（コンテンツが英語の場合は「w」など）のシーケンスを一時的に挿入します。

コンテンツを目立たせる

コンテンツ主導型のアプリケーションでは、コンテンツは常に前面と中央に配置する必要があり、スタイルのブランディング要素は一般的に後退する必要があります。

ダイナミックコンテンツをクリーンで明るいニュートラルな背景色で囲みます。

通常、白またはオフホワイトが望ましいです。 これにより、明るい色と暗い色のさまざまな種類の画像を、影を落とすことなくページから飛び出すことができます。

画像を大きくして力強いものにしてください。

大きな画像、特に写真は、何よりも効果的に訪問者の注意を引き付けます。

見出しと本文を大きく、読みやすくしてください。

テキストの多いページの場合は、読みやすいWebフォントを選択し、デスクトップ、モバイル、タブレットなどのすべてのデバイスに大きくて快適なサイズで展開します。

過剰に設計しないでください。

多くの場合、デジタルデザイナーや印刷デザイナーは、クリエイティブな装飾を施したり、ブランディング要素を自由にデザインに取り入れたりすることを好みます。 一般に、特定の視覚効果はコンテンツ主導のデザインを強化する場合がありますが、コンテンツから簡単に気を散らすこともあります。これは、ユーザーがニュースサイトやブログにアクセスするときに本当に興味を引くものです。

このような影響により、画像が変化するにつれてアプリケーションの外観が予測しにくくなる可能性もあります。 一般に、装飾フォント、太字のパターン、イラスト、重なり合う画像、半透明の画像、画像の周りの派手なフレームを確認することをお勧めします。 最後に、注目のコンテンツと比較してロゴを比較的小さく保ちます。

動的画像の近くで色付きの背景を使用しないでください。

現在、大胆で明るい色が使用されていますが、色の衝突や過剰な刺激などの予測できない結果が生じる可能性があるため、変更される可能性のある画像の周囲に大量の飽和色や色付きの背景を適用することは通常避けてください。コンテンツから気を散らす。

テキストのページ全体を覆うために暗い背景を使用しないでください。

調査によると、コンテンツが多いアプリケーションでは、明るい背景の明るいテキストは、明るい背景の暗いテキストよりも目にストレスがかかります。 暗い背景は、テキストの量が限られているページの特別なセクションやスライドショー領域には適していますが、長いテキストブロックをカバーするのには適していません。

画像やその他のメディアがバックエンドでどのように機能するかを理解する

コンテンツ管理システムは、画像、ビデオ、アニメーションファイルなどのメディアの処理方法が異なる場合があり、開発者が効率を上げるために意図的にメディアに制約を設定する場合があります。

たとえば、画像の拡大縮小とトリミングの方法、および生成と表示が可能なサイズとトリミングの数に制限がある場合があります。 したがって、設計を進める前に、アプリケーション開発者またはコンテンツ管理者と相談して、何が実用的であるか（および、追加の開発リソースを何に投入してもよいか）を判断することが重要です。

サポートされているメディア形式を確認してください。

通常、アプリケーションが画像をサポートすることは当然のことですが、保存および表示できるビデオ、オーディオ、およびその他のマルチメディアファイルの種類と、それらを視覚的にカスタマイズできる程度については、コンテンツ管理者に相談することをお勧めします。

たとえば、カスタムビデオプレーヤーが構築されるかどうか、またはページにYouTubeまたはVimeoビデオを埋め込むことが唯一のオプションであるかどうかを確認するのに役立ちます。 YouTubeの場合、動画の埋め込み、拡大縮小、スキンの作成方法には特定の基準と制限があります。

画像にさまざまな切り抜きやサイズを指定しないでください。

多くの場合、画像に対して多数の個別の切り抜きを作成することは技術的に実現可能ですが、そうすることには悪影響があります。 たとえば、デフォルトでは、WordPress CMSは、アップロードされた画像の複数のサイズを1つの比率で自動的に生成しますが、個別にトリミングされた1つのサムネイルを作成するためのオプションのみを提供します。

各画像を追加の比率にトリミングするには、特別なプラグインをインストールするか、専用のツールを事前に開発する必要があるだけでなく、アップロードするすべての画像に対して追加の作業を行う必要があるため、編集者に追加の要求があります。 これにより、実行可能なイメージの選択がより困難になり、ワークフローがさらに遅くなる場合があります。

レガシーコンテンツをサポートする必要があるかどうかを判断してください。

レガシーアプリケーションを再設計する場合、新しいアプリケーションを最初から開始する場合よりも利用できるオプションがさらに少ない場合があります。 これは、メディアの既存のリポジトリがすでに存在し、そのすべてを新しい形式に移行することは、開発の観点から、多くの場合、費用がかかるか非現実的な操作になる可能性があるためです。

コンテンツ編集者にテキストのスタイルを設定するさまざまな方法を提供する

テキストコンテンツはCMS主導のアプリケーションの重要な要素であり、特にニュースサイトやブログでは、編集者やライターが自分のデバイスに任せたときに、テキストのスタイルとフォーマットを強調する方法を探すことがわかります。特定のポイント、コンテンツの分割、引用の追加、リストの作成、他のコンテンツへのリンク、および他の多くのタスクの実行。

WordPressのような多くの人気のあるCMSプラットフォームは、デフォルトでテキストフォーマットオプションを提供しますが、デザイナーがこれらのスタイルをデザインに合わせてカスタマイズする方法を計画しなかった場合、結果はランダム、プレーン、または望ましくないものになります。

テキストをフォーマットできるすべての一般的な方法を設計してください。

特にブログやニュースサイトの場合、太字と斜体のテキスト、見出しと小見出し、番号と箇条書き、ブロック引用符、キャプションなど、テキストをフォーマットできるすべての一般的な方法のスタイルルールを開発者に提供するのに時間がかかります。 、およびハイパーリンク。

コンテンツ作成者に過度の文体的制御を与えないでください。

一般に、編集者にあまりにも多くのデザインコントロールを公開することはお勧めできません。 ページ内に独自のレイアウトを作成したり、複数の方法でカラーテキストを作成したりできるようにすることは、一部の人にとっては気が遠くなるか時間がかかり、他の人の手に醜い一貫性のない結果をもたらす可能性があります。

コンテンツドリブンデザインの将来のパターン

拡張現実（AR）などの新しいテクノロジーの出現により、コンテンツ駆動型設計の新しいパラダイムが生まれ始めています。 現在初期段階にある拡張/複合現実空間のCMS駆動型アプリケーションは、コンテンツの重要な部分として実世界のオブジェクトやシーンを使用します。

特定のモバイルユーザーの表示環境、照明条件、およびテキストと挿入された3Dオブジェクトに対する物理的な近接性はすべて、最終結果に影響を与える可能性があります。 これにより、コンテンツキュレーションの概念が大幅に変更され、設計プロセスで考慮に入れる必要のある予測不可能なレイヤーが追加されます。

CMSWebデザインは少し異なります

CMS主導のアプリケーション向けに設計するということは、コンテンツを最初に、スタイルを次に置くことを意味します。 それはまた、自分がデザインしているコンテンツの変動性と予測不可能性を計画し、受け入れることを意味します。 新興技術がコンテンツ自体の性質を変えるにつれて、無数の潜在的な結果に対応する能力は、CMSWebデザインにおいてさらに重要になります。