このデザイン、
なんていうんだろう。
見た目や、ふだんの言葉から引ける、ウェブデザインの名前辞典。名前がわかれば、AIにもそのまま伝えられます。
207語を収録
言葉から引く
うまく言えない「あの感じ」にも、名前があります。検索欄に、思いつく言葉をそのまま入れてみてください。
場所から引く
ページの中の気になる場所を選ぶと、名前がわかります。ページの種類ごとに、架空のホームページを1枚ずつ描きました。
商品やサービスを案内するページ
商品やサービスを案内するページ(ランディングページ)は、申し込んでもらうことがゴールです。魅力、選ばれる理由、利用者の声、料金、よくある質問の順に、迷いをひとつずつ解いていき、最後にもう一度、申し込みへ誘います。
図は、珈琲豆の定期便「つきひ珈琲」の架空のページです。この図だけのページを開く
- お知らせバー
期間限定の知らせを、いちばん上の細い帯で。
- ナビゲーションバー
ロゴと行き先。申し込みのボタンは右端に置く。
- ヒーローセクション
何の商品か、次に何をするかを、最初に伝える。
- アイブロウ
見出しの上の小さな一行。補足を先に伝える。
- スターバースト
ギザギザの形で、特典やお得さを目立たせる。
- マーカーハイライト
大事な言葉にだけ、蛍光ペンのような線を引く。
- アーチ型トリミング
上を丸く切った写真。やわらかい印象になる。
- ピル型ボタン
両端が丸いボタン。押せることが伝わりやすい。
- ドットグリッド
等間隔の点。背景に、さりげなく表情を出す。
- ロゴクラウド
取引先のロゴを並べて、信頼の裏づけにする。
- フィーチャーセクション
選ばれる理由を3つに絞り、同じ形で並べる。
- カード
ひとつの内容を、ひとつの枠にまとめる。
- 角丸 / ボーダーラジウス
角を丸めると、やさしく親しみやすくなる。
- シャドウ / エレベーション
薄い影で、紙から少し浮いたように見せる。
- テスティモニアル
利用者の声。申し込む前の不安をやわらげる。
- アバター
丸く切った顔写真。誰の言葉かがわかる。
- レーティング(星評価)
星の数で、評価をひと目で伝える。
- プライシングテーブル
プランを横に並べ、違いを比べやすくする。
- バッジ
おすすめのプランに、小さな札で目印を付ける。
- アコーディオン / FAQ
質問を押すと答えが開く。長くなる内容に向く。
- トースト通知
操作の結果を、画面の隅に数秒だけ知らせる。
- ウェーブ区切り
境目を波形にして、次の場面へやわらかくつなぐ。
- CTAセクション
読み終えた人を、もう一度申し込みへ誘う。
- グラデーション
色がなめらかに移る背景。締めの場面を強める。
- フッター
いちばん下の案内。行き先の一覧と、店の情報。
- トップへ戻るボタン
長いページで、先頭へすぐ戻れるボタン。
- 破線の区切り
点線の区切り。実線より控えめに分けられる。
図 商品・サービスのページの中にある、27の名前。
この構成で、AIに頼む
図と同じ順番と部品で、ページをつくってもらうための文章です。
文章を確かめる
「珈琲豆の定期便」のホームページ(トップページ)を作成してください。 ページは、上から次の順で組み立ててください。 1. お知らせバー:送料無料などの期間限定の知らせを、一文とリンクひとつで表示する。 2. ナビゲーションバー:左にロゴ、右にメニューを3〜4個と、申し込みへ進むボタンを置く。 3. ヒーローセクション:左に、小さな補足の一行(アイブロウ)、大きなキャッチコピー、短い説明文、申し込みのピル型ボタン。右に、アーチ型に切り抜いた商品の写真と、初回特典を知らせるスターバーストを置く。背景は、淡いドットグリッドにする。 4. ロゴクラウド:取り扱い店やメディアのロゴを、同じ大きさ・同じ色で横一列に並べる。 5. フィーチャーセクション:選ばれている理由を3つ、アイコン・見出し・短い説明のカードにして、3列で並べる。カードは角丸にし、薄い影を付ける。 6. テスティモニアル:利用者の声を、丸い顔写真(アバター)、星の評価、ひとことの感想で紹介する。 7. プライシングテーブル:3つのプランを横に並べ、名前・月額・内容・選ぶボタンを同じ順で見せる。おすすめのプランは枠を太くし、「いちばん人気」のバッジを付ける。 8. アコーディオン / FAQ:よくある質問を、押すと答えが開くアコーディオンで3〜5問のせる。 9. CTAセクション:読み終えた人に向けて、短い呼びかけと申し込みボタンを、グラデーションの背景の上に置く。直前の区切りとの境目は、波形にする。 10. フッター:ロゴ、リンクの一覧、コピーライトを置き、右端に、トップへ戻るボタンを付ける。 全体は、白地に1色のアクセントカラーでまとめ、余白を広くとって、申し込みボタンがどの場面でも目に入るようにしてください。 スマートフォンでも読みやすいレスポンシブ対応にし、見出し・本文・ボタンに一貫したルールを適用してください。写真は、仮の画像でかまいません。
見た目から引く
207語。気になる見た目を選ぶと、名前と伝え方がわかります。
全体のスタイル
12語サイトまるごとの雰囲気や作風。
ページの組み立て
29語上から下へ、ページを形づくるまとまり。
上から下へ
並べ方
操作する部品
42語押す、選ぶ、入力する、知らせる。
押す
選ぶ・入力する
たどる・切り替える
重ねて見せる
知らせる
背景・模様
19語うしろに敷く色や模様。
模様
飾り・区切り
16語添える図形と、境目のかたち。
図形・あしらい
枠・はめ込み
文字
19語書体、組み方、文字の飾り。
書体
組み方
かたち・質感・色
17語角の丸み、影、素材感、色づかい。
かたち
影・質感
動き
29語触れたとき、現れるとき、スクロールしたときの動き。
触れたとき
現れるとき
スクロールにつれて
絵柄
24語写真やイラストの描き方。
イラスト
印刷・時代の味
使い方
見つける
言葉・場所・見た目のどれかから、頭の中のイメージに近い見本を探します。
名前を知る
見本を開くと、名前と、見分けるポイントがわかります。似たものとの違いも確かめられます。
伝える
サイトの用途か、変えたい場所を書き足してプロンプトをコピー。お使いのAIに貼り付けます。
「ミニマルな余白に、オーガニックな配色」のように、気に入った特徴を組み合わせて伝えることもできます。
表は、写真。


New












+3
写真の上でも、

















