見た目を整える

使いやすく見えるだけで、アプリらしくなる

ここまでで、

• 入力する

• ボタンを押す

• 結果を表示する ところまで作りました。今回は、画面の見た目を少し整えます。まずは、

• 読みやすい

• 押しやすい

• 分かりやすい この3つを目指します。

見た目を整えるポイント

まずはこの形を目指す

大きなタイトル
短い説明文

入力欄
選択欄
ボタン

結果表示エリア

アプリは、情報を詰め込みすぎない方が見やすくなります。

CSSで整える

前に作った style の中を確認します。

特に大事なのは、この4つです。

body {
  background: #f4f7fb;
}

.card {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px;
}

button {
  background: #2563eb;
  color: #ffffff;
}

.result {
  background: #f8fafc;
}

この4つだけでも、かなりアプリらしく見えます。

色を変えてみる

青系にしたい場合。

button {
  background: #2563eb;
}

緑系にしたい場合。

button {
  background: #16a34a;
}

オレンジ系にしたい場合。

button {
  background: #f97316;
}

色は増やしすぎないようにします。

基本は1色で十分です。

余白を整える

狭く見えるときは、padding を増やします。

.card {
  padding: 32px;
}

広すぎるときは、少し減らします。

.card {
  padding: 24px;
}

余白は、見た目の呼吸です。

結果エリアを読みやすくする

結果が読みにくい場合は、次のようにします。

.result {
  margin-top: 22px;
  padding: 18px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #dbe3ee;
}

結果エリアは、ユーザーが一番見たい場所です。

少し目立たせておきます。

課題

次の3つを変更してください。

完了条件

• タイトルが見やすい
• 入力欄が分かりやすい
• ボタンが押しやすい
• 結果エリアが読みやすい
• 色を増やしすぎていない 次のページでは、

使ってみて直す

に進みます。