- 投稿日：2026/02/21
- 更新日：2026/03/11
いよいよ「おみくじアプリ開発」がスタート！
ここまでの6回で、HTML・CSS・JavaScript の基礎を一通り学んできました。
今回からはいよいよ、その知識を使って 実際に動くアプリ を作っていきます。
まずは「設計 → 見た目 → 動き」という開発の基本ステップのうち、
設計と見た目づくり を体験していきましょう。
「自分のアプリの画面ができた！」という瞬間は、きっとワクワクします。
一緒に進めていきましょう。
今回のゴール
おみくじアプリの完成イメージを決めて、HTML/CSSでアプリの「見た目」を作ります。
今回はまだボタンを押しても何も起きません。でも、「自分のアプリの画面ができた！」という体験は、きっとワクワクするはずです。一緒に進めていきましょう。
アプリを作るときは、まず「設計」から
「早くコードを書きたい！」という気持ちはとてもよくわかります。
でも、プロの現場では いきなり書き始めることはほとんどありません。
まずは「何を作るのか」を整理する。
これが設計です。
今回は、次の3つの問いに答えるだけでOKです。
問い① どんな画面が必要？
おみくじアプリはシンプルなので、画面は1つだけでOKです。
その中に置くのは次の3つ。
・アプリのタイトル
・結果を表示するエリア
・おみくじを引くボタン
問い② どんな動きがある？
ユーザーが行う操作は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で「画面の中央に配置する」ためのまとまりを作っておくためです。
ここでのポイントをまとめると次の3つです。
・class をつけて CSS からデザインを当てられるようにする
・container で全体を囲み、中央配置しやすくする
・結果エリアには初期テキストを入れておく
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 という新しいファイルを作成し、index.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でデザインを整えました。 和風テーマまたはポップテーマの中から好みのものを選んで、カードレイアウト・配色・ボタンのスタイルを設定しました。
今の状態は、ボタンを押しても何も起きない「見た目だけ」の段階です。でも、これはまさに「設計→見た目→動き」という開発の正しい順序を踏んでいるということ。焦らず、一歩ずつ進めていきましょう。
次回予告
次回はいよいよ、JavaScriptを使っておみくじに「動き」を加えます。ボタンを押すと、ランダムに結果が表示されるようにしていきます。今回作った見た目に命が吹き込まれる瞬間をお楽しみに！
おみくじアプリをつくろう！全9回【完結！】
【第1回】VS Codeをインストールしよう
【第2回】HTMLで「Hello World」を表示しよう
【第3回】CSSで見た目を整えよう
【第4回】JavaScriptで画面を動かそう
【第5回】JavaScriptでIF文に挑戦
【第6回】JavaScriptでランダム関数に挑戦
【第7回】おみくじアプリを設計しようーまずは見た目から！
【第8回】おみくじのロジックを組もう-JavaScriptでおみくじを引ける!!
【第9回】最終回！！おみくじアプリを完成させよう
