😇

【material.io 和訳】Design/Material System/Material Studies/Fortnightly

14 min read

この記事について

Material Designの和訳になります。

この記事は、Design/Material System/Material Studies/Fortnightly を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。


フォートナイトリー | Fortnightly

Fortnightly はニュースアプリで、Material Design コンポーネントと Material Theming を使用して、コンテンツにフォーカスしたオンブランドのエクスペリエンスを実現しています。

Image from Gyazo


フォートナイトリーについて | About Fortnightly

Fortnightly は、さまざまなトピックのニュースを扱うアプリです。このアプリでは、コンテンツ、特に記事のコピーと写真に重点を置いています。

Fortnightly のブランドは、さまざまなコンテンツを、コンテンツそのものを前面に押し出してユーザー体験を提供するようにデザインされています。ブランディングは、Fortnightly のロゴ、タイポグラフィシステム、そしてグレースケールのアプリの中で紫色(アプリの副色)が見えることで表現されています。この繊細なアプローチにより、色やタイポグラフィで表現されたときにブランドが際立つようになっています。

Image from Gyazo

コンテンツ重視

Fortnightly の美学は、写真を際立たせるためにグレースケールのカラーパレットを使用し、見出しを太く、長い本文を読みやすくするためにタイポグラフィのスケールを使用することで、コンテンツに焦点を当てています。

また、アプリのレイアウトグリッドは新聞からインスピレーションを得て、伝統的で直感的な構造になっていますが、密度の高いコンテンツを提供しています。


製品アーキテクチャ | Product architecture

Fortnightly の情報アーキテクチャは、カタログ構造で構成されています。カタログには、分類された階層的な情報が含まれており、最上位には下位の情報を含む可能性のあるピアが配置されています。Fortnightly のコンテンツは、フロントページ、世界、米国、政治、ビジネスセクションなど、新聞に見られるようなメインセクションとサブセクションに分かれています。

カタログ構造により、ユーザーは興味のある分野に素早く移動することができます。ナビゲーションドロワーは、カタログ構造の中を移動するのに適しており、Fortnightly ではこのコンポーネントを使用しています。

ナビゲーションドロワー

Fortnightly では、タブレットとデスクトップでは標準のナビゲーションドローワを、モバイルではモーダルなナビゲーションドローワを使用しています。ナビゲーションドローワを開くためのアフォーダンスは...

Fortnightly は、タブレットとデスクトップでは標準のナビゲーションドローワーを使用し、モバイルではモーダルナビゲーションドローワーを使用しています。ナビゲーションドローワを開くためのアフォーダンスは、トップアプリバーにあるナビゲーションアイコンです。

ナビゲーションセクション
ナビゲーションセクションはテキストのみを含みます。サブセクションを持つセクションには、開くことができることを示す矢印が表示されています。

ブランディングの瞬間
フォートナイトリーでは、ナビゲーションドローワーをブランディングの場としても活用しており、ロゴをドロワー内に配置しています。

Image from Gyazo


トップアプリのバーとチップス | Top app bar and chips

Fortnightly のトップアプリのバーには、ナビゲーションアイコン、ロゴ、検索機能、そしてチップがあります。チップにはトレンドのハッシュタグが表示されています。

チップをタップすると、そのハッシュタグに関連する記事がページに表示されます。これにより、異なるセクションに分かれている記事を、共通のテーマに沿ってまとめることができます。

Image from Gyazo


ショートトップアプリバー | Short top app bar

スクロールすると、上部のアプリバーは折りたたまれて短いトップアプリバーになり、コンテンツのためのスペースを確保できます。

ショートトップアプリバーには、ナビゲーションドロワーを開くためのナビゲーションアイコンと、フォートナイトのロゴの 2 つの要素があります。

Image from Gyazo


Fortnightly には、読者が目的のコンテンツに素早くたどり着けるよう、強力な検索機能があります。検索アイコンをタップすると、フルスクリーンのダイアログが表示され、検索入力欄とトレンドのハッシュタグが表示されます。検索語を入力すると、フルスクリーンのダイアログに検索結果が表示されます。

検索結果が選択されるか、ダイアログクローズボタンが選択されるとダイアログが閉じます。

Image from Gyazo


レイアウト | Layout

グリッドシステム | Grid system

Fortnightly では、ランディングページを中心に、さまざまな情報をまとめています。また、個々の記事などでは、コンテンツのための余白を十分に確保しています。また、すべてのページでレスポンシブ・グリッドを採用しており、一定のブレイクポイントに達すると、コンテンツが画面内にリフローするようになっています。

Image from Gyazo

関連記事 →Layout Grid, Elevation, Lists


標高 | Elevation

Fortnightly では、影を使って高さを表現しています。

影は、特定の重要な瞬間にのみ使用されます。例えば、トップアプリのバーの高さは、ページがスクロールするまで表現されず、短いトップアプリのバーに変化します。また、記事にカーソルを合わせたり、タップしたりすると、微妙なシャドウ処理が施され、記事が浮き上がって見えるようになっています。また、ナビゲーションドロワーには必ずシャドウを使用し、ドロワーの始まりと終わりが読者にわからないようにしています。

Image from Gyazo


カラー | Color

カラーテーマ | Color theme

プライマリーカラー
Fortnightly のプライマリーカラーはホワイトです。グレースケールのカラーパレットを使用しているので、写真は際立ち、コピーは読みやすく、気を散らさずに読むことができます。

セカンダリーカラー
フォートナイリーのセカンダリーカラーはパープルです。控えめに使用することで、インパクトのあるデザインを実現しています。

Image from Gyazo


色とイメージ | Color and image

イメージトリートメントは、ブランディングの機会を提供する繊細な方法です。

Image from Gyazo


スクリムの色 | Scrim color

ナビゲーションドローバーとボトムシートが表示されると、Fortnightly 社はアプリの他のコンテンツの前に白いスクリムを表示します。このスクリムは、ユーザーが機能的なものと無効なものを区別できるように十分な不透明性を備えています。

Image from Gyazo


タイポグラフィ | Typography

タイプフェイス | Typefaces

Fornightly は、Libre Franklin および Merriweather フォントを使用しています。
Image from Gyazo


タイプスケール | Type sale

Fortnightly のタイプスケールは、Merriweather と Libre Franklin の 2 つの書体を使用することで、タイポグラフィの多様性を実現しています。Merriweather と Libre Franklin です。Merriweather は、ユーザーが読むことに主眼を置いたディスプレイフォントやボディコピーの書体として使用されています。Libre Franklin は、コンテンツのスキャンや閲覧が中心となる画面で使用されます。

Image from Gyazo

関連記事 →The type system, Understanding typography
関連リンク →Merriweather,


メリウェザー | Merriweather

Merriweather は、画面上での読みやすさを重視してデザインされたテキストフェースです。大きな X ハイト、少し凝縮された字形、穏やかな斜めのストレス、そして頑丈なセリフが特徴です。

Image from Gyazo

Image from Gyazo


リブレフランクリン | Libre Franklin

このサンセリフ書体は、フランクリン・ゴシックを解釈して拡張したものです。Franklin Gothic は元々ディスプレイフェイスとして使用するためにカットされたものですが、小さなサイズで使用しても読みやすくなっています。様々なウェイトがあるので、タイポグラフィのヒエラルキーを確立しやすくなっています。

Image from Gyazo

Image from Gyazo


図像学 | Iconography

フォートナイトリーでは、カスタマイズされた特徴や装飾を持たない、認識可能で機能的なアイコンを使用するというアプローチをとっています。アイコンにブランディングや明確なスタイルを与えないことで、どのようなトーンのコンテンツと組み合わせても、そのコンテンツのスタイルと衝突することはありません。

Image from Gyazo


形状 | Shape

カテゴリー | category

コンポーネントは、そのサイズに応じて形状カテゴリに分類されます。これらのカテゴリーでは、複数のコンポーネントの値を一度に設定できます。形状カテゴリーには以下のものがあります。

  • スモールコンポーネント
  • ミディアムコンポーネント
  • ラージコンポーネント

Image from Gyazo

Image from Gyazo


スモールコンポーネント | Small component

Chips は 0dp で角を切っています。

Image from Gyazo

コンポーネント カテゴリー 属性
Chips Small components Family Size Cut 0dp;0dp;0dp;0dp

ミディアムコンポーネント | Medium component

Dialogs は 0dp で角を切っています。

Image from Gyazo

コンポーネント カテゴリー 属性
Dialogs Medium components Family Size Cut 0dp;0dp;0dp;0dp

ラージコンポーネント | Large component

Navigation drawers は 0dp で角を切っています。

Image from Gyazo

コンポーネント カテゴリー 属性
Navigation drawers Large components Family Size Cut n/a;0dp;0dp;n/a*

コンポーネント | Components

ダイアログ | Dialogs

一部のコンテンツでは、カーソルを置いたりタップしたりすると、詳細情報を提供するためのダイアログウィンドウが表示されます。フォートナイリーでは、記事中で言及されている人物についてユーザーがさらに理解を深めることができるように、このように経歴情報を提供することがよくあります。

Fortnightly 社は、コンテンツが画面に表示されている間、アプリのすべての機能が無効であることを示すために、白いスクリムを使用しています。デスクトップでは、ユーザーが名前の上にカーソルを置くまでダイアログとスクリムが表示され、タブレットでは、ユーザーがダイアログの外をタップするまで表示されます。

Image from Gyazo

Image from Gyazo


テキストフィールド | Text field

検索が画面上の主要なアクションである場合、Fortnightly ではスケールを使用して検索テキストフィールドを強調しています。

Image from Gyazo

Image from Gyazo

Image from Gyazo

関連記事 →Dialogs,Bottom sheets, Text fields


チップ | Chips

Fortnightly では、カスタマイズされたチョイスチップを使用して、テーマに沿った検索体験を提供しています。

Image from Gyazo

Image from Gyazo


リスト | List

Fortnightly では、検索結果にカスタマイズされたリストを使用しています。このカスタマイズされたリストは、各リストアイテムの周りに余裕のあるホワイトスペースを提供し、各リストアイテムが含む様々な情報(セクション、日付、記事タイトル、簡単な説明、写真など)を提供します。この空白によって、ユーザーは最も有用な情報に基づいて検索結果を素早く読み取ることができます。

Image from Gyazo

関連記事 →Chips, Image lists, Lists


ステッパー | Steppers

Fortnightly では、購読手続きにリニアステッパーを使用しています。各ステップは拡張可能な引き出しのように機能し、垂直のラインでフォーカスエリアを設定します。Fortnightly のパープルのアクセントカラーは、アクティブなステップを強調しています。

Image from Gyazo


モーション | Motion

製品アイコン | Product icon

Fortnightly のロゴアニメーションは、その書体のカリグラフィ的な性質を反映しています。

Image from Gyazo


ナビゲーションのトランジション | Navigation transitions

Fortnightly は、シンプルなフェードスルーとコンデンス・トランジションを使用して、控えめなブランディング・アプローチを補完しています。シンプルなトランジションスタイルは、密度の高いコンテンツとのバランスをとるのに役立ちます。

Image from Gyazo

Image from Gyazo

関連記事 →Speed, Condensing transititions, Tabs


ローディング | Loading

Fortnightly では、コンテンツの邪魔にならないように、プレースホルダー要素に微妙な千鳥足のアニメーションを使用して、読み込み中であることを示しています。

Image from Gyazo

Discussion

ログインするとコメントできます