LOOK CLOSER. DESIGN BETTER.
心を動かす、細部のアイデア。
LPの「あの表現」を、あなたの引き出しに。
見て、知って、色を変えて。そのまま制作へ。
使い方の解説AIへの指示文コード・素材
あしらいを探す
144 EXAMPLES / 8 × 18見本を開くと、色・文言を編集できます。
ぴったりの見本が見つかりませんでした。
検索語やカテゴリーを変えてみてください。
ORIGINAL EXAMPLES掲載サンプルは、この図鑑のために制作したオリジナルです。写真・金属素材にはAI生成画像を使用しています。
HOW TO USE
見つけたアイデアを、
使える表現に。
見るだけで終わらない。
あなたの作り方に合わせて、持ち帰れます。
- 01
名前と、使う理由を知る。
単体の見本と「LPでの使用例」を切り替えて比較。置く場所、文字とのバランス、使いすぎないコツまで確認できます。
はじめてLPを作る方に - 02
イメージを、言葉で渡す。
色・文言・速さを変えると、指示文にも反映。配置や動きの条件までまとめて、AIや制作パートナーへ渡せます。
AIでLPを作る方に - 03
素材とコードで、形にする。
編集した見本を、完成HTMLとして保存。HTML・CSS・JavaScriptの個別コピーや、対応するSVG・PNG素材の保存もできます。
デザイナー・制作者の方に
IN CONTEXT
本物のサイトから、
使い方を学ぶ。
装飾の前後には、どんな文字や余白がある？
公式サイトで確かめたい、観察のポイント。
外部の参考サイトです。参考サイトの画像やコードは、この図鑑の配布物には含みません。