USHILOGカラーのカラーコードをコピーできるWebページを作成した

こんにちは、うっしーです。

ここでは僕が主に使用しているカラーコード６種をクリック、タップするだけでコピーできるサイトを作成しました。

うっしー

地味にメモ帳からコピーしてくるの面倒なんだよね…

作成の流れは以下の通り。

こちらの記事でアプリの作成手順をまとめてますので、ご参考までに。

▼完成したページがコチラ▼

この記事の目次

要件定義

まずは問題点、改善方法に分けて決めていこうと思います。

普段、アイコン作成や壁紙作成などのクリエイティブ活動をする際に、いつも使っているカラーコードが必要な場面が多いです。
そのたびに普段使っているTickTickというタスク管理アプリのメモノートからカラーコードをコピーして使用しています。

うっしー

これがまた面倒…

面倒な理由の他にも、メモノートからコピーする際に誤操作をしてしまい、カラーコードを削除してしまうなんてこともありました。
また、そのカラーコードがどんな色なのかを瞬時に判断できないという問題点もあります。

そこで色とカラーコードがひと目で分かり、クリック・タップすることでカラーコードをクリップボードにコピーすることができる単ページを作成しようと考えました。

リストにまとめます。

実現したいこと

今回は「色とカラーコード」が分かり、「クリック・タップできるサイズ」であればよいので、ページ上にカードが並んでいるような画面設計にしようかと思います。

▽参考にしたのはこちらのイメージ▽

こちらのイメージを参考に画面設計をしていきます。
アプリ名とカード部分は配置したいカラーに置き換えて、コピーライトを追加すれば完成です。

▽カンプ図▽

プラットフォームはPC・タブレット・スマホで使いたいので、ブラウザで動くwebアプリでいきます。

環境について

このフェーズは改善方法の章ですでに挙げているので、そちらを代用しようと思います。

このフェーズも開発は、以下からソースをご確認ください。
特に凝ったことはしていないシンプルなHTML、CSS、JSでの作成となりました。

テストは期待するカラーコードがクリップボードに貼られるか、レイアウト崩れがないかの確認のみ。
レスポンシブも考えていなかったので、pc表示のみ。

リリースについては、githubのpagesで実現しています。

今回は見た目重視のシンプルなものなので、特に技術的な解説は省かせていただきます。
また気が向いたら記事にします〜