見た目を決める

この場面の困り事と、そのまま使えるコード。全8件。足りなければ、行末のページへ進む。

見た目を決めるの場面で、最初にどこを見るかの順と、避けること

この場面を絞り込む

このページの中だけを絞ります。ページは移りません。

どのデザインスタイルで作るか決まらない

読者が期待している態度を1つ選ぶ。信頼されたいのか、親しみたいのか。そこから位置を決める。デザインスタイルの選び方

信頼 / 親しみのどちらを優先するか決める

参考サイトのどこを真似ればよいか

部品ではなく組み立ての規則を見る。余白の刻み、色の役割、書体の対比。デザインスタイルとは

余白の刻み・色の役割・書体の対比を見る

流行の見た目を取り入れるべきか

数年で古びるデザインスタイルを、長く使う面に使わない。読者の期待から選ぶ。デザインスタイルの選び方

長く使う面には流行のデザインスタイルを使わない

業種に合う見た目が分からない

格式か親しみか、静かかにぎやかか。2軸で位置を決めると候補が絞れる。デザインスタイルの選び方

格式↔親しみ × 静↔にぎやかの2軸で位置を決める

ガラス風や凹凸のある表現を使いたい

境界が読めなくなる。長文と表には使わず、使うなら一部分だけにする。デザインスタイルとは

/* 長文・表には使わない。使うならヒーローの一部分だけ */
.hero-badge { backdrop-filter: blur(8px); background: rgba(255,255,255,.15); }

ダークUIで長文を読ませたい

白地より読み疲れやすい。行間を広げ、1行の字数を減らし、純白の文字は使わない。デザインスタイルとは

body {
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 2;
  max-inline-size: 40rem;
}

ブランドとして何を揃えればよいか

ロゴ・色・書体・写真・声の5つ。どれか1つが揺れると、他が揃っていても印象は揃わない。ブランドの構成

ロゴ・色・書体・写真・声の5つ

タグラインが決まらない

何をするか・誰のためか・どう違うかのうち1つだけ言う。他社に差し替えて成立するなら書き直す。ブランドの構成

何をするか / 誰のためか / どう違うかの1つだけ

この場面の値をまとめて決めるなら作業台へ。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: グラデーションとスクリム

この場面で貼れるもの#

答えを読んだら、ここから完成形を持ち帰れます。

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