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

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

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

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

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

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

表紙

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

投稿ページ

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

リスト/カテゴリページ

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

検索ページ

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

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

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

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

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

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

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

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

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

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

javascriptの日付を文字列に変更

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

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

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

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

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

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

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

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

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

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

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

各ページを テンプレート さまざまなコンテンツ用

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

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

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

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

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

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

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

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

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

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

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

コンテンツを目立たせる

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

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

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

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

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

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

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

ApacheSparkを使用したビッグデータの紹介

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

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

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

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

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

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

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

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

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

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

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

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

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

多くの場合、このステートメントを使用して、クラスのグループをプログラムで使用できるようにする必要があります。

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

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

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

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

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

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

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

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

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

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

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

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

コンテンツ主導型デザインの将来のパターン

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

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

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

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

基本を理解する

WebデザインのCMSとは何ですか？

CMSはコンテンツ管理システムの略です。これらのシステムは、コンテンツが王様でダイナミックであり、継続的かつ頻繁に変化するインターネット時代のニーズを満たすために誕生しました。オンラインメディアサイトは静的ではありません。それらは生きているシステムと見なされ、それらのために設計するための最適な方法があります。

CMSプラットフォームとは何ですか？

CMSプラットフォームは、画像、ビデオ、テキストなどのコンテンツのリポジトリから動的に表示するためにコンテンツを管理および生成する場所です。CMSは通常、エンタープライズコンテンツ管理（ECM）およびWebコンテンツ管理（WCM）に使用されます。

WordPressはCMSですか？

はい、WordPressはオンラインのオープンソースウェブサイト作成ツールです。これはおそらく、今日存在する最も簡単で最も強力なブログおよびWebサイトコンテンツ管理システム（またはCMS）です。

静的または動的なWebサイトとは何ですか？

静的Webサイトは、サイトに表示されるすべてのコンテンツがそのページ、すべての画像、テキスト、ビデオなどにコード化される場所です。一方、動的Webサイトは、ページがさまざまなコンテンツの単なるプレースホルダーであり、そのコンテンツが生成される場所です。データベースからのフライ（動的）。

動的Webサイトはどのように機能しますか？

動的なWebサイトには、さまざまなコンテンツデータベースからその場で生成されたコンテンツが表示されます。これは、コンテンツ管理システム（CMS）によって駆動されます。これは通常、承認されたユーザーがウェブマスターの介入なしにウェブサイトからコンテンツを追加、変更、削除できるようにするフロントエンドユーザーインターフェースです。