カラーチェッカーアプリを作成した話 -4-
【公開日： 2026年4月24日】
初心者向け： 開発に挑戦 ①webアプリを作成する その4
～アプリのイメージ図を書いてみる～
アプリを作成する下準備はあらかた完了しました。
次は、どんなアプリにするか、具体的に案をまとめていきましょう。
どんな画面構成にするか、どんな機能があれば「カラーチェッカー」と名乗れるのかを考えていきます。
似たようなものが無いかググってみたり、参考になるものがあれば確認してみましょう。
それらは紙ベースで書き出してみると、イメージがだんだんまとまってきます。
今更ですが、カラーチェッカーアプリは当ブログで紹介しております。
≪ページはこちら≫
●webページの基本的な画面構成
webページを作ろうとしていますので、まずは基本のHTMLの「ヘッダー」「メイン」「フッター」の画面構成を確認します。
場所のイメージはこんな感じです。当ブログでいうと、ページの上・下にある青色の部分がそれぞれヘッダーとフッターになります。
本文はメインに記載する事になります。カラーチェッカーを書いていくのは、このメインの部分になります。
とりあえずヘッダーとフッターは無くても問題ないので（後で書き足せますし）、メインに取り掛かりましょう。
●色を変更させる方法は？
色々調べてみたところ、色を画面で簡単に変更する方法として、バーみたいなものを動かしてできるパターンがあると分かり、それでやってみることにしました。ついでに、コードを手入力できれば親切です。
最初は背景色だけを考えていたのですが、AI君に相談したら「文字色も一緒にできるよ！」と教えてくれたのでそれも採用します。
そのほかAI君は「コントラスト比を計算して、それも追加できるよ！」とか色々提案してくれたのですが、段々訳わからなくなってきたのでその他は諦めました。
お試しバー → ドラッグできます！
ここで補足ですが・・・色の入力に関しては、「RGB形式」と「16進数形式」の2つの方法があります。
RGB形式の方は、「rgb（）関数」を使って、赤（r）、緑（g）、青（b）の数値を0～255の間で設定します。
例） background-color: rgb(0, 100, 255);
16進数形式の方は、「#123456」のように記入します。#の後、赤2ケタ、緑2ケタ、青2ケタといった書き方になります。数値は00～ffです。
例） background-color: #0064ff;
rgbの方の「0」と16進数の「00」が同じ値です。また、「255」と「ff」も同じ値。10進数か16進数かの違いです。
赤・緑・青の数値を設定することで色が決まりますので、バー的なものはそれぞれに必要になります。
バーを3つ用意し、色設定は16進数の方でやってみることにしました。
・・・後日談ですが、16進数にして少し後悔してます！笑 （10進数→16進数へ変換する関数を追加したため）
こちらの画像は最終的な完成形です。
プログラミングして動きをテストしてみて、変更や追加をしたりしてこんな形になりました。（後ほど説明）
このパーツを、背景色用と文字色用に２つ用意します。
●背景色と文字色の表示を組み合わせる
バーを使って別々に表示するように作る事にしましたが、せっかくなら背景と文字を一緒に表示させた方がより色合いが分かりやすいですよね。
別パーツを作って改めていじるのは面倒ですので、連動してこちら側も変化しないか考えてみました。
背景色＋文字色の表示は、後ほど追加でプログラミングした部分になります。
まずはそれぞれバーで設定した色に変化するパーツを作成し、それを生かす方法を調べて実装した、という流れです。
この辺もAI君に相談してやってみたのですが・・・やり方がいまいちで少し苦労しました！この話も後ほどできればと思います。
AI君はさわやかに嘘をつきます！！！
最終的な完成イメージはこのようになりました。
①と②で色をそれぞれ自由に選択できて、それが③に都度反映される、という画面構成です。
ついでに、テキストボックスでも入力可能にしたのと、バーが中央に戻るようボタンも付けることにしました。
まとめ
カラーチェッカーアプリの作成は、実はやりながら右往左往して、足したり消したりしながらプログラミングしました。
何が必要なのか、不要なのかの目星がついておらず、「こうしたらどうなるのか」と試しながら進めました。
実際に手を動かすと自分のできない事の多さに驚愕しますが、段々と慣れてくる実感もあります。
実際の仕事では要件定義や設計書作成もありますので、自分を経験者としてアピールできるよう、ステップアップしていきたいところです。
画面イメージも固まりましたので、次のページでついにプログラミングをしていきます！
この記事を書いた人：
よこた
：