この記事では、ネクストライブのデザイナーが作成したカラーツールをご紹介したいと思います。

どんなツールなのか、なぜ作ったのか、そしてどうやって作ったのかを詳しくお話しします。この記事が、個人開発に興味がある方の背中を押すきっかけになれば嬉しいです。

何を作ったのか

作ったのは『Color Fit』というカラーツールです。
1ページ完結のシンプルなツールです。
全体像はこんな感じ

機能

機能は以下の2つです。

• 背景とテキストの色のコントラストを検証して可読性に問題がないかのチェックができる
• 3パターンのページレイアウトを使って配色例を提示してくれる

使い方

使い方は簡単。以下の3つの色とその上に置く文字色を選択するだけです。

• Background Color：ページ全体の基盤となる色
• Surface Color：Backgroundの上に乗る表層レイヤーの色
• Primary Color：デザインやブランドの主要な色

色を変更すると自動で Contrast Ratio と User Interface に反映されます。
（なんか高速になっちゃった）

Contrast Ratio ではコントラスト比をチェックします。コントラスト比の判定についてはWCAGの基準に基づいて設定されています。

User Interface では「ログインページ」「SNSのマイページ」「リスト」の3パターンのページレイアウトで配色が確認できます。

なぜ作ったのか

「なにかを作ってみたかった」
それだけです。

どうやって作ったのか

どうやって作ったのかをざっくりと解説します。

1. 作るものを決める

私は以前、Material Design Color Tool（マテリアルデザイン カラーツール）というカラーツールを使用していたのですが、Material Designがアップデータされたことにより使えなくなってしまいました。

「Material Design Color Tool」には以下のような機能がありました。

• 6パターンのページレイアウトを使って配色例を提示してくれる
• 背景とテキストの色のコントラストを検証して可読性に問題がないかのチェックができる
• 選択した色を使ってボタンやスライダー、メニューなどのコード生成をしてくれる

Material Design3から代替ツールが公開されましたが、個人的には使いづらかったので「Material Design Color Tool」に変わるものを自分で作ってみようと思いました。

2. 勉強する

エンジニアの方に相談してみたところ、HTMLとCSS、そしてJavaScriptが書ければ作れそうということがわかりました。

HTMLとCSSはある程度書けますが、JavaScriptに関してはコピペでしかほぼ使ったことがないので、勉強することにしました。

ただ、勉強は普通に辛かったので、メンター的存在であるベテランエンジニアのgenさんに毎日勉強報告することでなんとか続けることができました。

そしてJavaScriptを勉強し始めて1ヶ月弱たった頃
　「どこまで勉強したらいいのか...？」

自分が作りたいものを作るためには、どの程度の知識がいるのかわからなかったので、とりあえず勉強をやめて作ってみることにしました。
　「勉強だけしててもね...仕方ないからね...」

3. とりあえず作る

やりたいことは2つ。
コントラスト比のチェックと配色例を提案すること。

ワイヤーを作ってデザインを固め、HTMLとCSSで組んでいきます。

ここからが重要！いよいよJavaScriptの出番

User Interface は簡単。それぞれのパーツに色を反映するだけです。

問題は Contrast Ratio です。やりたいことは主に以下の3つ。

背景色と文字色を反映させるのは、さっきの要領でできます。

コントラスト比は、計算方法を調べたら難解すぎる計算式が出てきたので、自分で書くのは秒で諦めChatGPTに任せました。

アクセシビリティの判定はWCAGの基準に基づいて以下のように設定しました。

  function evaluateWCAG(ratio) {
    if (ratio >= 7) return "AAA";
    if (ratio >= 4.5) return "AA";
    if (ratio >= 3) return "AA (18pt+)";
    return "不合格";
  }  function evaluateWCAG(ratio) {
    if (ratio >= 7) return "AAA";
    if (ratio >= 4.5) return "AA";
    if (ratio >= 3) return "AA (18pt+)";
    return "不合格";
  }

他にも色々細かい設定をしたんですが、書いてられないので割愛します。

なんやかんやあって完成です。

4. リリース

せっかく作ったのでサーバーにアップすることにしました。
個人ブログで使ってるサーバーを借りてアップしてみました。
ということで実際にリリースできているか確認してみてください。（スマホ非対応）
『Color Fit』

おわりに

振り返ってみると、JavaScriptの勉強を開始してからサーバーにアップするまで2ヶ月もたっていませんでした。

勉強期間：6月10日〜7月2日
制作期間：7月3日〜7月28日（サーバーアップ）

「自分はデザイナーだからコード書けない」とか「エンジニアだけどまだ1人で作る自信ない」とか考えてる人は、無理矢理でもとりあえず何か作ってみることをおすすめします。最悪ChatGPTがいます。

正直自分で作ったこのカラーツール、全然使ってないです。ですが、達成感を感じられただけでも作る意味はあったなと思っています。