Open Web Apps の設計

この翻訳は不完全です。英語から この記事を翻訳 してください。

このセクションでは、Open Web Apps に取り入れられるデザインとユーザ体験 (UX) の原理について紹介します。あなたのプロジェクトに弾みを付ける手助けとなるよう、関連する例やスタイルガイドへのリンクも載せました。

一般的な Web アプリの設計

このセクション以下にある項目は、Web アプリの設計に一般的に当てはまる内容です。

構想
この記事では、高次元な構想のアイデアと一般設計原則を含め、Web アプリを素晴らしいものにするための構想に関する情報を提供します。
UI レイアウトの基本
これらの記事では、レスポンシブデザイン、可変ボックスなどを含め、Open Web Apps の効果的なレイアウト実装の背景にあるガイドと理論を提供します。

Firefox OS アプリ設計リソース

このセクションには、特に Firefox OS と Gaia 向けのアプリ開発に関連した項目が含まれます。

Firefox OS ビルディングブロック
Firefox OS ビルディングブロックは、OS 全体のデザインパターンを反映した、再利用可能な UI コンポーネントです (「一般コントロール」とも呼ばれます)。ビルディングブロックはすべての Gaia 標準アプリのインタフェース作成に使用されています。これらのコンポーネントは、独自の Firefox OS アプリや一般的な Web アプリでも自由に活用できます。
ビジュアルスタイルガイド
色、フォント、背景、アプリアイコン、特定 UI 要素の設計について扱った、Firefox OS ビジュアルデザインのスタイルガイド。
コピースタイルガイド
このガイドでは Firefox OS アプリのコピーを記述する際に Mozilla の開発者が従っているルールの概要を解説していますが、あらゆるアプリインタフェースのために優れたコピーを書くための一般的なガイドとしても使えます。
Firefox OS デザイン素材ライブラリ
このセクションでは、Firefox OS/Gaia アプリを設計する際に役立つデザイン素材、アートワーク、グラフィックテンプレート、フォント、その他の素材を見つけることができます。
Firefox OS アイコンフォント
 Firefox OS には独自のアイコンフォントセットが搭載されています。この記事ではそれを自作アプリ内で使う方法を説明します。
Firefox OS トランジション
Firefox OS でアプリ内の異なる状態間を移動するために使われているいくつかのトランジションへの参考リンク。使われているアニメーションを説明するアニメーション GIF や、それらのアニメーションを実装するために必要な CSS アニメーションコードを示すコードサンプルもあります。
アラビア語のFirefox OS
アラビア語やその他の RTL 言語環境における UX デザインガイド。
Firefox OS for TV UX
Firefox OS for TV での UX デザインにはモバイルとは異なる留意点もあります。ここでは、基本的な隠喩、システムおよびアプリで使われているデザイン、TV 用のアイコンとビルディングブロックなどについての概要を説明します。
Firefox OS TV UI & アニメーションデザイン
Firefox OS for TV のデザインは電話向けのデザインと根本的に異なるので、幅広いユーザー層のニーズを満たし、適切な UX を構成するにはコンセプトの再考が必要になります。 Firefox OS for TV のデザインは UI を単純化するだけではなく、最適な UX を提供することにあります。

ドキュメントのタグと貢献者

 このページの貢献者: plageoj, Uemmra3, kohei.yoshino, ethertank
 最終更新者: plageoj,