Skip to content

Vol.283

Kota Furusawa

Islands Architecture Jump to heading

アイランドアーキテクチャ Jump to heading

アイランドアーキテクチャのアプローチの解説。このアプローチでは、1 ページ内でサーバー側で描画される部分と独立したアプリの部分を分けて表示させる手法をとっており、これは、マイクロフロントエンドと似ている部分が多いが、プログレッシブ・エンハンスメントを重視している手法である。
静的な部分はサーバー側で描画を行い、動的な領域に関しては script を展開しインタラクティブにアップグレードすることで、高速に表示を行うことができる。この記事では、この手法についての解説と、それがどのようなメリットをもたらすかを詳しく解説する。

Documenting is designing: How documentation drives better design outcomes Jump to heading

ドキュメントがどのようにデザインを改善するのか Jump to heading

デザインを文書化することの重要性について。デザインが"適切にデザインされている"ことを保障する方法として、ドキュメントで"強制的に"說明をを行うことが重要であると Heidi 氏は指摘する。この記事では、デザインに関するドキュメントとして、どのようなものを作るべきか、またそれらをどのように作ればよいか解説する。

  • ユーザーストーリー
  • ユースケース
  • シナリオナラティブ
  • 画面フロー図
  • ページレベルのドキュメント
  • オブジェクトモデル
  • システム語彙
  • 建築マップ
  • ナビゲーションフレームワーク
  • ページアーキタイプ
  • 標準化されたコンポーネント

Leading-Trim: The Future of Digital Typesetting | by Ethan Wang | Microsoft Design | Aug, 2020 | Medium Jump to heading

デジタル組版の未来 Jump to heading

今まで CSS では、実際の文字の大きさよりもやや大きめにボックスが生成されてしまい、正確にデザインをすることが難しかった。Microsoft Design では、この問題を解決するために Leading-Trim と呼ばれるプロパティの作成を進めている。この記事ではこの CSS の新しい標準である Leading-Trim についての概要と、これが Web デザイナ、開発者にどのように影響を与えるかについて解説する。

How To Configure Application Color Schemes With CSS Custom Properties — Smashing Magazine Jump to heading

この記事では、Artur 氏が、アプリケーションの色に対応する CSS カスタムプロパティを設定する方法に関する最新の方法を紹介する。また、色のレベルを 3 つに分割するというアイディアを紹介し、パレット（またはスキーム）、機能色（またはテーマ）、およびコンポーネント色（ローカルスコープ）の 3 つの役割を紹介する。

How Jobs-to-be-Done Completes Your Google Ventures Design Sprint Jump to heading

Kanapp 氏は Google Ventures Design Sprint と呼ばれる抽象的なアイデアから 5 日間でテスト可能なプロトタイプを実装する方法を紹介している。このデザインスプリントで理解、分岐、決定、プロトタイプ、検証のは 5 つのステップを行う必要があり、それぞれを 1 日かけて行う。
この記事ではこのデザインスプリントに対して、JTBD の考え方が重要であることを解説していく。

In Brief Jump to heading