design-ja

From IndieWeb

Design（デザイン）とは、グラフィックス、タイポグラフィ、ユーザーインターフェース（UI）、ユーザーエクスペリエンス（UX）、情報設計（IA）、[1]、その他ウェブサイトや各ページでのユーザー体験、およびインタラクションに影響を与えるあらゆる要素を広く包含する用語です。

IndieWebの事例

以下に、興味深いウェブサイトのデザイン例をいくつか挙げます。特に、標準的なCMSや企業的なアプローチではなく、個人的でユニークなものを中心に紹介します。事例を追加する際は、あなたが面白い、ユニークだ、あるいは楽しいと感じたポイントを箇条書きで添えてください。

Kicks Condor

  • 8ビット（レトロゲーム）スタイルのデザイン。
  • 背景色とボーダーのデザインが投稿のタイプに基づいて変化します。
  • 投稿を開閉する際に効果音が鳴ります。
  • 日付ごとにグループ化されています。

Ines Montani

  • 明るいカラーブロックが特徴。
  • 読みやすさを重視しています。

Ana

  • 破線（ダッシュライン）スタイルを使った楽しいボーダーデザイン。
  • 投稿ブロックの背景、日付、タイトルなどが切り抜いて貼り付けられたような、コラージュスタイルの雰囲気。
  • 投稿タイプごとに異なる印象を与えます（例：記事はプレーンな茶色背景にタイトル、写真は鮮やかなオレンジの背景）。

Andy Bell

  • 鮮やかな色彩。
  • ユニークな形状（ロゴやヘッダーにパターン入りの三角形を使用）。
  • 遊び心のあるタイポグラフィ。
  • ボタンがカラフルで、面白いドロップシャドウが付いています。

Mina Markham

  • 目を引くアクセントカラー（ピンク）。
  • 特定のリンクに黄色の背景が付いており、ハイライター（蛍光ペン）で引いたような見た目。
  • ページのヘッドラインに非常に個性的なフォントを使用。
  • 明快に整理されており、読みやすいです。

Andy Barefoot

  • 各種プロフィールへのリンクを組み込んだ、視覚的に興味深いサイトヘッダー。
  • サイト全体を3D変形させ、すべてが斜めに配置されているように見せています。

Tatiana Mac

  • 楽しいビジュアルエフェクト（特にセクションの境界線）。
  • Works（実績）エリアは、素晴らしいコール・トゥ・アクション（行動喚起）を備えた見事なグリッドレイアウト。
  • Writings（執筆）セクションでは、まずプルクオート（抜粋引用）で人を惹きつけ、その後記事タイトルで詳細へリンクさせています。
  • サイトのリリースノートセクションが楽しいです。

スタイル

デザインの異なるスタイル：

Brutalism（ブルータリズム）

デザインについての考え方

Minimalism（ミニマリズム）

特定の機能を実現するために、実装してウェブサイトで使い始められる「最小限の実行可能なUI（MVUI）」とはどのようなものでしょうか？ - Tantek 2013年5月15日 11:25 (PDT)

関連記事： https://petermolnar.net/minimalism-is-not-asceticism/

使用を通じて優先順位を決める

一度MVUIを設計・実装して使い始めれば、実際の使用を通じて、次に自分にとって最も重要な機能は何かという、より情報に基づいた判断ができるようになります。 - Tantek 2013年5月15日 11:25 (PDT)

Incremental（漸進的）

どんなに小さく、条件的であっても、デザインを漸進的に（少しずつ）改善していくことは良いことです。

例えば、ユーザーがエラーに遭遇したり、サポートチケットを送らなければならない状況を減らすたびに、全体的なユーザーエクスペリエンスが向上する可能性が高まります。

逆に、ある漸進的な改善を、独立して、あるいは後で行うことができる別の改善に依存させないようにしましょう。そのような依存関係は、「完成度の罠（completeness trap）」の緩やかな形態です。

インフラよりもUXを優先する

（特に開発者やエンジニアの間で）しばしば次のような、優先順位を誤った欲求が見られます：

  • 「一度実装すれば済むように、汎用的なメッセージ送受信機能を先に作りたい」[2]
  • 同様に、汎用的なパーサーを先に作りたい。
  • 「……そうすれば、残りの時間をUXに集中できるから」（同上）

これは、あらゆるものにXMLを押し進めようとした時と同じ推論です。

UXの前にインフラを解決しようとするのは、焦点がずれています。

結局のところ、それでは本当の課題であるUXの解決には役立ちません。反対に、優れたUXがあれば、インフラや配管部分はどのようなものでも構いませんし、後で入れ替えることも可能です。

これは、IndieWebとその取り組みにおける重要な特徴的な側面と言えるでしょう。

プロトコルよりもUXを優先する

自分のサイトにどのようなMVUI/UXが欲しいかから始め、それに従って実装してください。

設計、作成、反復している機能が、サイト間の境界（IndieWeb同士の境界）に達したとき、その「望ましいUX」を原動力として、最小限のプロトコルを設計しましょう。

プロトコルからUXへという「本末転倒（靴に足を合わせるような）」なやり方は絶対にしないでください。

結局のところ、属性やプロトコルがどうであれ、重要なのはUXです。そして、どのようなUXが欲しいかがわからなければ、ほぼすべてのプロトコルやフォーマットがそうであるように、過剰設計（オーバーエンジニアリング）に陥ります。

IndieWebでは、まずUXに焦点を当て、それを理解した上で、そのUXをサポートするのに十分な、絶対的に最もシンプルで最小限のプロトコルを構築・開発します。それ以上のものは作りません。[3]

スクリーンショット

具体的な機能（IndieMarkなど）やビルディングブロックに関するスクリーンショットについては、各ページを参照または追加してください。

実験的試み

インスピレーションの源となる、あるいは一時的な流行やデザインのトレンドを示す様々なデザイン実験があります。

  • パララックス・スクローリング（視差効果） - スクロールを利用して視点やレイアウトを変化させる手法。例：

記事

Indie（ソーシャル／分散型）ウェブの文脈における、ユーザー中心設計とUXに関する記事。

ブレインストーミング

Emotional Design（感情のデザイン）

サイロに見られるような「有害な依存」や「分断」を引き起こすデザインとは対照的に、サイト所有者や読者の感情的な健康や知性を維持・向上させることに焦点を当てた、IndieWeb独自の感情のデザインについてのセクション（あるいはページ）を検討してください。参照： Wikipedia: 感情的デザイン

関連項目

Retrieved from "https://indieweb.org/wiki/index.php?title=design-ja&oldid=109037"