あなたの学習ペースとこれまでの進み方を踏まえて、次の 7 日間は 「おみくじアプリを“本物のアプリ”に近づける 7 日プラン」 を説明します。
今回のテーマは 「アプリとしての完成度を上げる」 です。
デザイン、機能、ユーザー体験、コードの整理など、実際のアプリ開発で必要になる要素を少しずつ取り入れていきます。
Day 1: アプリのレイアウトを整える（UI の基礎）
画面の構造を「アプリっぽく」する
今のアプリは縦に並んだシンプルな構造です。
ここに「ヘッダー」「メイン」「フッター」のような区切りを作り、
アプリとしての見た目を整えます。
HTML に次のような構造を追加します。
<header>
<h1>おみくじアプリ</h1>
</header>
<main>
<!-- 入力欄、ボタン、結果表示 -->
</main>
<footer>
<p>© 2025 My Omikuji App</p>
</footer>
深掘りポイント
アプリは「どこに何を置くか」がとても重要です。
レイアウトを意識すると、コードも整理され、見た目も良くなります。
Day 2: ボタンを「押したくなるデザイン」にする
CSS でボタンを強化する
ボタンはアプリの主役です。
少しデザインを加えるだけで、ユーザー体験が大きく変わります。
#btn {
background: #ff6b6b;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
transition: 0.2s;
}
#btn:hover {
background: #ff4b4b;
}
深掘りポイント
transition を使うと、ホバー時の変化が滑らかになります。
「触って楽しい UI」はアプリの満足度を大きく上げます。
Day 3: 結果をカード風にして「占いっぽさ」を出す
結果表示をカード化する
CSS に次を追加します。
#result {
background: white;
padding: 20px;
border-radius: 12px;
width: 320px;
margin: 20px auto;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
深掘りポイント
カード UI は現代のアプリで最もよく使われるデザインです。
影（box-shadow）を使うと「浮いている」ように見え、視認性が上がります。
Day 4: 結果を「複数行」に分けて読みやすくする
運勢・ラッキーアイテム・メッセージを分ける
結果を 1 行にまとめるのではなく、
次のように複数行で表示します。
<p id="fortune"></p>
<p id="item"></p>
<p id="message"></p>
JavaScript も次のように変更します。
document.getElementById("fortune").textContent = "運勢: " + fortune;
document.getElementById("item").textContent = "ラッキーアイテム: " + item;
document.getElementById("message").textContent = "メッセージ: " + msg;
深掘りポイント
情報を「分けて表示」すると、
ユーザーが読みやすく、アプリの質が上がります。
Day 5: メッセージを追加して「占いの深み」を出す
メッセージ配列を追加する
const messages = [
"今日は新しい挑戦に向いています。",
"落ち着いて行動すると良い結果が出ます。",
"人とのつながりを大切にしましょう。",
"小さな幸せに気づける日です。",
"無理をせず、休むことも大切です。"
];
ランダムで選びます。
const msg = messages[Math.floor(Math.random() * messages.length)];
深掘りポイント
「占いの文章」を追加すると、アプリの世界観が一気に広がります。
データを増やすだけでアプリが豊かになることを体験してほしいです。
Day 6: アプリに「テーマカラー」を追加する
運勢ごとに背景色を変える
CSS を JavaScript から変更します。
if (fortune === "大吉") {
result.style.background = "#fff8b3";
} else if (fortune === "中吉") {
result.style.background = "#d4f8d4";
} else if (fortune === "小吉") {
result.style.background = "#d4e8ff";
} else if (fortune === "末吉") {
result.style.background = "#eeeeee";
} else {
result.style.background = "#ffd4d4";
}
深掘りポイント
色は感情に直結します。
運勢に合わせて色が変わると、アプリの「体験」が大きく向上します。
Day 7: コードを整理して「プロっぽい構造」にする
HTML / CSS / JS を別ファイルに分ける
index.html
style.css
script.js
という 3 つのファイルに分けます。
HTML の最後に次を追加します。
<script src="script.js"></script>
CSS は <link> タグで読み込みます。
<link rel="stylesheet" href="style.css">
深掘りポイント
ファイル分割はプロの開発では必須です。
この段階で慣れておくと、今後の学習が一気にスムーズになります。
