このサイトについて

UI-memoとは

UI-memoは、あらゆるUIを独自の観点から探る作者の備忘録です。日々出会う様々なユーザーインターフェースを記録し、分析し、自分なりの視点でまとめていくことを目的としています。

理論だけでなく実際に動くサンプルを作成することで、 UIの仕組みや実装方法を深く理解します。複数のライブラリによる実装比較や、AIプロンプトテンプレートも提供しています。

UI Memoは3つの関心から構成されています。

React・Next.js環境ですぐ使える実装サンプルとライブラリ比較集です。レイアウト・ナビゲーション・データの可視化・入力フォームなど、サイトを作るときに考える順番で整理しています。

HTML・CSS・JavaScriptがネイティブで実現できるUIをカタログとして整理しています。ライブラリを使わずに実現できることは年々増えており、何がどう見えるかをUIの形で確認できます。

UIがもたらすおもしろさ・演出・わかりやすさを自由な形で実例として集めたギャラリーです。

アコーディオン・サイドバー・タブ・リサイズパネル

タブバー・ボトムナビ・ハンバーガーメニュー

グラフ・チャート・ダッシュボードなどのビジュアライゼーション

チャット・データグリッド・ファイルアップロード・日付ピッカー

バッジ・モーダル・通知・ツールチップ

ボタン・チェックボックス・ラジオボタン・ドロップダウン

ドラッグ・スワイプ・ピンチ・ロングプレス

HTML要素のリファレンスと実装例

JavaScript・Web APIの動作リファレンス

CSSプロパティのビジュアルリファレンス

色・形・数・音など、子供が直感的に楽しめるインタラクティブUI

カレンダー・タイマーなど日常で役立つツール

このサイトが役に立ったら、コーヒー1杯分のサポートをいただけると嬉しいです。