動くデモで比較して、コードをコピーするだけ。

ページ構造やコンテンツ配置に関するレイアウトUI

→ まずページの骨格から

タブバー・ボトムナビ・ハンバーガーメニューなど、コンテンツ切り替えに使うナビゲーションUI

→ 画面間の導線を設計する

グラフやチャートなど、データを視覚的に表現するUI

→ メインコンテンツの見せ場を作る

チャットやフォームなど、データ入力に関するUI

→ ユーザーからの入力を受け取る

ツールチップやバッジなど、情報を補足・強調して表示するUIコンポーネント

→ 情報を補足・強調して伝える

ボタンやトグルなど、直感的に操作できるシンプルなUIコンポーネント

→ ボタン・トグルで細部を仕上げる

スワイプやドラッグなど、タッチ操作・ジェスチャーに特化したUIコンポーネント

→ インタラクションで体験を磨く

フェード・スライド・スプリングなど、Framer Motionで実装するアニメーションパターン

→ 動きで体験を豊かにする

HTMLの基本要素と構造に関するリファレンス。テキスト・リンク・メディア・フォーム・テーブル・メタ情報を網羅

JavaScriptによるDOM操作・イベント・アニメーション・通信・ストレージなど、ページの動作に関するリファレンス

CSSによる見た目・レイアウト・アニメーション・レスポンシブ・テキスト・画像・表示制御に関するリファレンス

AIコーディングツール初心者向けのガイド集。UI部位名称など、AIへの的確な指示に役立つ情報をまとめています。

→ AIへの指示を上達させる

ライブラリ選定に役立つガイド集。エンジニアがPM・チームメンバーに説明しやすくなる選定基準と考え方をまとめています。

→ ライブラリ選びの判断基準を得る

「やりたいこと」から引けるUIライブラリのAPIリファレンス。テーマ・バリデーション・アクセシビリティなどUIコンポーネント系8テーマと、データ可視化系9テーマを横断比較。

→ プロパティ名がわからないときに

楽しくインタラクティブな子供向けUI要素

日常生活で役立つ便利なツール集