- 投稿日：2026/02/21
- 更新日：2026/02/21
いよいよ第3部「おみくじアプリ開発」に突入です！
第1部で環境を整え、第2部でHTML・CSS・JavaScriptの基礎を学んできました。ここからは、その知識を使って実際に動くアプリを作っていきます。
今回のゴール：おみくじアプリの完成イメージを決めて、HTML/CSSでアプリの「見た目」を作ります。
今回はまだボタンを押しても何も起きません。でも、「自分のアプリの画面ができた！」という体験は、きっとワクワクするはずです。一緒に進めていきましょう。
アプリを作るときは、まず「設計」から
「さっそくコードを書きたい！」という気持ち、よくわかります。でも、ここでちょっとだけ立ち止まってみてください。
プログラミングでアプリを作るとき、いきなりコードを書き始めるのではなく、まず「どんなものを作るか」を整理するのがとても大切です。これを「設計（せっけい）」と呼びます。
設計と聞くと難しそうに感じるかもしれませんが、今回やることはとてもシンプルです。次の 3つの問い に答えるだけで大丈夫です。
問い① どんな画面が必要？
おみくじアプリはシンプルなので、画面は1つだけでOKです。
その1画面に、以下の要素を置きます。
・アプリのタイトル（「おみくじ」など）
・おみくじの結果が表示されるエリア
・おみくじを引くためのボタン
問い② どんな動きがある？
ユーザーがやることは1つだけです。
・「おみくじを引く」ボタンを押す → 結果が表示される
これだけです。とてもシンプルですね。
問い③ どんなデータが必要？
おみくじの結果として表示する内容を決めておきます。
・大吉、中吉、小吉、吉、末吉、凶
この6種類を用意しておけば、立派なおみくじになります。
これで設計は完了です。たった3つの問いに答えただけですが、「何を作るか」がはっきりしました。
この整理をしておくと、このあとコードを書くときに「次は何をすればいいんだっけ？」と迷いにくくなります。
💡 Tips
実際の開発現場では、コードを書き始める前に「設計書」や「ワイヤーフレーム（画面の下書き）」を作るのが一般的です。いきなりコードを書き始めると、途中で「あれ、この画面どうするんだっけ？」と手が止まったり、作り直しが発生したりします。今回やった「3つの問いに答える」は、そのミニ版。設計してから作るという順序は、プロの現場でもとても大事にされている習慣です。
HTMLで画面の骨組みを作ろう
設計ができたので、さっそくコードに入りましょう。まずはHTMLで画面の骨組み（構造）を作ります。
これまでの回で使ってきたのと同じように、テキストエディタで新しいファイルを作成してください。ファイル名は index.html にしましょう。
以下のコードを丸ごとコピーして貼り付けてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>おみくじアプリ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1 class="title">おみくじ</h1> <div class="result-area"> <p class="result-text">ここに結果が出ます</p> </div> <button class="draw-button">おみくじを引く</button> </div> </body> </html>
コードの中身を見ていきましょう。
<head> の中にある <link rel="stylesheet" href="style.css"> は、「このHTMLに style.css というCSSファイルのデザインを適用してね」という指示です。CSSファイルはこのあとすぐに作ります。
<body> の中が、画面に表示される部分です。設計で決めた3つの要素が入っています。
・<h1 class="title"> → アプリのタイトル
・<div class="result-area"> → おみくじの結果が表示されるエリア
・<button class="draw-button"> → おみくじを引くボタン
それぞれに class（クラス）という属性がついていますね。これは、CSSでデザインを指定するときの「目印」のようなものです。「この要素にはこのデザインを当てたい」というときに使います。
全体を <div class="container"> で囲んでいるのは、あとでCSSで「画面の中央に配置する」ためのまとまりを作っておくためです。
CSSで見た目を整えよう
HTMLだけだと、文字とボタンが素っ気なく並んでいるだけの状態です。ここにCSSでデザインを加えて、「おみくじアプリらしい見た目」に仕上げましょう。
HTMLとCSSを別ファイルにする理由
これまでの回では、CSSをHTMLファイルの中に <style> タグで直接書いていました。今回からは、CSSを別のファイルに分けて管理する方法に切り替えます。
なぜ分けるのかというと、ファイルが大きくなってくると「HTMLの構造」と「見た目のデザイン」が混ざって読みにくくなるためです。役割ごとにファイルを分けておくと、「構造を直したいときはHTMLファイル」「デザインを直したいときはCSSファイル」と、迷わず作業できるようになります。
先ほどHTMLの <head> の中に書いた <link rel="stylesheet" href="style.css"> が、この2つのファイルをつなぐ役割を果たしています。
ファイルの置き場所
ここで大切なのは、HTMLファイルとCSSファイルを同じフォルダに置くことです。以下のようなフォルダ構成にしてください。
omikuji/ ← プロジェクト用のフォルダ（名前は自由） ├── index.html ← 先ほど作ったHTMLファイル └── style.css ← これから作るCSSファイル
（↑私はこんな感じでomikujiフォルダにファイルを格納しています。）
💡 Tips（ファイルを分ける習慣）
実際の開発現場では、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて管理するのが基本です。大きなプロジェクトになると、CSSだけで何十ファイルにもなることも珍しくありません。「役割ごとにファイルを分ける」という今回の経験は、現場でもそのまま活きる大事な習慣です。
さて、ここからはデザインを書いていきます。今回は 2つのテーマ を用意しました。お好みのほうを選んでください。
テーマA：和風テーマ ── お正月や神社をイメージした、落ち着いた雰囲気テーマB：ポップテーマ ── 明るくカラフルな、カジュアルな雰囲気
テーマA：和風テーマ
テキストエディタで style.css という新しいファイルを作成し、omikuji.html と同じフォルダに保存してください。以下のコードを丸ごとコピーして貼り付けます。
/* ===== 全体の設定 ===== */ body { margin: 0; padding: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #fdf5e6; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; } /* ===== カード全体 ===== */ .container { text-align: center; background-color: #fffef9; padding: 40px 50px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 2px solid #c1272d; max-width: 360px; width: 90%; } /* ===== タイトル ===== */ .title { color: #c1272d; font-size: 32px; margin-bottom: 30px; letter-spacing: 8px; } /* ===== 結果表示エリア ===== */ .result-area { background-color: #fff8f0; border: 1px solid #e0d5c1; border-radius: 8px; padding: 30px 20px; margin-bottom: 30px; min-height: 60px; display: flex; justify-content: center; align-items: center; } .result-text { font-size: 20px; color: #5a4a3a; margin: 0; } /* ===== ボタン ===== */ .draw-button { background-color: #c1272d; color: #fff; border: none; padding: 14px 40px; font-size: 18px; border-radius: 8px; cursor: pointer; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; letter-spacing: 2px; transition: background-color 0.3s; } .draw-button:hover { background-color: #a01f24; }
このCSSが何をしているか、ブロックごとに見ていきましょう。
「全体の設定」ブロック： body に対して、画面全体の背景色を温かみのあるベージュ（#fdf5e6）にし、中身を画面の上下左右の中央に配置しています。フォントは明朝体を指定して、和風の雰囲気を出しています。
「カード全体」ブロック： .container で、白い背景に影（box-shadow）をつけて、カードが浮いているような見た目にしています。赤い枠線（border）で神社の鳥居っぽさを演出しています。
「結果表示エリア」ブロック： .result-area は、おみくじの結果が出る場所です。薄い背景色と細い枠線で、さりげなく区切っています。
「ボタン」ブロック： .draw-button に赤い背景色を設定し、神社のお守りのようなイメージに。cursor: pointer は、ボタンにマウスを乗せたときに指マーク（👆）に変わる設定です。:hover は「マウスを乗せたとき」に色が少し暗くなる効果をつけています。
テーマB：ポップテーマ
和風テーマの代わりにこちらを使いたい場合は、style.css に以下のコードを貼り付けてください（テーマAのコードを全部消して、入れ替えます）。
/* ===== 全体の設定 ===== */ body { margin: 0; padding: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #a8e6cf, #dcedc1, #ffd3b6, #ffaaa5); font-family: "Hiragino Sans", "Yu Gothic", sans-serif; } /* ===== カード全体 ===== */ .container { text-align: center; background-color: #ffffff; padding: 40px 50px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); max-width: 360px; width: 90%; } /* ===== タイトル ===== */ .title { color: #ff6b6b; font-size: 32px; margin-bottom: 30px; font-weight: bold; } /* ===== 結果表示エリア ===== */ .result-area { background-color: #f8f9fa; border: 2px dashed #ffd3b6; border-radius: 16px; padding: 30px 20px; margin-bottom: 30px; min-height: 60px; display: flex; justify-content: center; align-items: center; } .result-text { font-size: 20px; color: #555555; margin: 0; } /* ===== ボタン ===== */ .draw-button { background-color: #ff6b6b; color: #fff; border: none; padding: 14px 40px; font-size: 18px; border-radius: 50px; cursor: pointer; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; font-weight: bold; transition: background-color 0.3s, transform 0.1s; } .draw-button:hover { background-color: #ee5a5a; transform: scale(1.05); }
ポップテーマでは、背景にグラデーション（linear-gradient）を使って、パステルカラーが混ざり合う明るい印象にしています。ボタンは角を大きく丸めて（border-radius: 50px）ピルのような形に。:hover でボタンが少し大きくなる（transform: scale(1.05)）アニメーションもつけました。
🔧 ここを変えてみよう！ ── ミニチャレンジ①
せっかくなので、デザインを少し自分好みにアレンジしてみましょう。
チャレンジ：タイトルの文字を変えてみよう
omikuji.html の <h1> タグの中の文字を変更してみてください。
<h1 class="title">今日のおみくじ</h1>
「今日の運勢」「運だめし」「Fortune」など、好きな言葉に変えてOKです。保存してブラウザを更新（再読み込み）すると、変更が反映されます。
チャレンジ：ボタンの色を変えてみよう
style.css の .draw-button にある background-color の値を変えてみてください。
.draw-button { background-color: #4a90d9; /* 青色に変更 */
色のコード（カラーコード）は、検索エンジンで「カラーコード 一覧」と検索すると、たくさん見つかります。好みの色を探して試してみるのも楽しいですよ。
🔧 ここを変えてみよう！ ── ミニチャレンジ②
チャレンジ：結果エリアの初期テキストを変えてみよう
omikuji.html の <p class="result-text"> の中の文字を変えてみましょう。
<p class="result-text">ボタンを押してね</p>
「さあ、引いてみよう！」「？？？」など、ユーザーの気持ちをくすぐる一言に変えてみてください。こういった細かい工夫が、アプリの「使い心地」をよくしてくれます。
💡Tips
画面上のテキスト一つひとつを丁寧に考えることを、現場では「マイクロコピー」と呼ぶことがあります。ボタンに「送信」と書くか「無料で始める」と書くかで、ユーザーの行動が大きく変わることも。小さなテキストにこだわるのは、プロの現場でもとても重視されているポイントです。
今回のまとめ
今回は、おみくじアプリの開発を「設計」からスタートしました。振り返ってみましょう。
設計では、3つの問いを整理しました。 どんな画面が必要か（1画面）、どんな動きがあるか（ボタンを押す→結果表示）、どんなデータが必要か（大吉〜凶の6種類）。たったこれだけの整理でも、コードを書く前に「作るもの」がはっきりします。
HTMLで骨組みを作りました。 タイトル、結果表示エリア、ボタンの3つの要素を配置しました。class 属性をつけて、CSSからデザインを指定できるようにしました。
CSSでデザインを整えました。 和風テーマまたはポップテーマの中から好みのものを選んで、カードレイアウト・配色・ボタンのスタイルを設定しました。
今の状態は、ボタンを押しても何も起きない「見た目だけ」の段階です。でも、これはまさに「設計→見た目→動き」という開発の正しい順序を踏んでいるということ。焦らず、一歩ずつ進めていきましょう。
次回予告
第8回：JavaScriptでおみくじを動かそう
次回はいよいよ、JavaScriptを使っておみくじに「動き」を加えます。ボタンを押すと、ランダムに結果が表示されるようにしていきます。今回作った見た目に命が吹き込まれる瞬間をお楽しみに！
