全ページ一覧

この資料にあるものを1枚に並べています。全65テーマ。どこに何があるかを一度に見たいときに。

引くための道具#

ページ	何ができるか
逆引き	困り事から答えを引く。全188件
パターン集	コピペで使える完成形
動く素材	背景と装飾を実物で試し、単一HTMLをコピーする
作る順番	どの順で何を決めるか
出発点のCSS	案件の土台をそのまま貼る
作業台	字と余白と幅・色と階段・影・グラデーション・動き・部品。動かして確かめてから CSS を持ち帰る
数値の早見表	コントラスト・押せる大きさ・行・余白・時間・速度
公開前チェックリスト	54項目。チェックが残る。印刷可
実物のデザインシステム	公開されているデザインシステム20件を、特徴つきで
AIに渡すスキル	AIエージェントに渡すデザイン系スキルと、読ませる順
カンプ画像から組む	完成見本の画像を先に作り、分解してコードにする進め方
用語索引	語の名前から引く。全433語
混同されやすい語	この2つはどう違うのか。全1,293組
この資料について	何のために作ったか

1ページ分を組み上げる#

パターンを並べる順と、削ってよい節。

作るもの	手引き
1枚もののLP	LPを組む
問い合わせフォーム	問い合わせフォームを組む
お知らせ・ブログ	記事一覧と記事を組む

パターン（全54枚）#

貼って使える完成形です。カテゴリごとに並べています。パターン集トップから絞り込むこともできます。

ヒーロー#

LPの節#

カード#

フォーム#

ナビ#

表#

状態#

記事#

タイポ#

色#

動く素材（選定済み35件）#

解説ページで調整し、子ページで実物を画面いっぱいに確認できます。

基礎#

要素どうしの関係の作り方。分野トップ

タイポグラフィ#

文字を読ませる技術。分野トップ

色彩#

色で伝える・色に頼らない。分野トップ

レイアウト#

どこに置くか、どこで折り返すか。分野トップ

デザインシステム#

統一を仕組みで担保する。分野トップ

UI部品#

定番の部品と、その選び分け。分野トップ

UX・情報設計#

誰が、何を、どう探すか。分野トップ

アクセシビリティ#

そもそも使えるかどうか。分野トップ

モーション#

動きで変化を理解させる。分野トップ

実装#

CSSの仕組みと速度。分野トップ

ブランディング#

同じものだと分からせる。分野トップ

デザインスタイル#

どの見た目を選ぶか。分野トップ

AIと制作#

生成物を既定値から離す。分野トップ

SEO・公開と検索#

作ったものを見つけてもらう。分野トップ

この資料は、Webサイトを作るときに引くためのものです。何のために作ったか。作っているのは AK²Lab。