こんにちは、うっしーです。
ここでは僕が主に使用しているカラーコード６種をクリック、タップするだけでコピーできるサイトを作成しました。
地味にメモ帳からコピーしてくるの面倒なんだよね…
作成の流れは以下の通り。
- 要件定義
- 基本設計、詳細設計
- 開発
- テスト、リリース
こちらの記事でアプリの作成手順をまとめてますので、ご参考までに。
▼完成したページがコチラ▼
要件定義
まずは問題点、改善方法に分けて決めていこうと思います。
問題点
普段、アイコン作成や壁紙作成などのクリエイティブ活動をする際に、いつも使っているカラーコードが必要な場面が多いです。
そのたびに普段使っているTickTickというタスク管理アプリのメモノートからカラーコードをコピーして使用しています。
これがまた面倒…
面倒な理由の他にも、メモノートからコピーする際に誤操作をしてしまい、カラーコードを削除してしまうなんてこともありました。
また、そのカラーコードがどんな色なのかを瞬時に判断できないという問題点もあります。
改善方法
そこで色とカラーコードがひと目で分かり、クリック・タップすることでカラーコードをクリップボードにコピーすることができる単ページを作成しようと考えました。
リストにまとめます。
- ひと目でカラーコードと色がわかる
- クリック・タップでクリップボードにコピーできる
- ページを開けばすぐ使える
基本設計
今回は「色とカラーコード」が分かり、「クリック・タップできるサイズ」であればよいので、ページ上にカードが並んでいるような画面設計にしようかと思います。
▽参考にしたのはこちらのイメージ▽
こちらのイメージを参考に画面設計をしていきます。
アプリ名とカード部分は配置したいカラーに置き換えて、コピーライトを追加すれば完成です。
▽カンプ図▽
プラットフォームはPC・タブレット・スマホで使いたいので、ブラウザで動くwebアプリでいきます。
- 言語：HTML、CSS（SCSS）、JavaScript
- エディタ：VSCode
詳細設定
このフェーズは改善方法の章ですでに挙げているので、そちらを代用しようと思います。
開発、テスト、リリース
このフェーズも開発は、以下からソースをご確認ください。
特に凝ったことはしていないシンプルなHTML、CSS、JSでの作成となりました。
テストは期待するカラーコードがクリップボードに貼られるか、レイアウト崩れがないかの確認のみ。
レスポンシブも考えていなかったので、pc表示のみ。
リリースについては、githubのpagesで実現しています。
最後に
今回は見た目重視のシンプルなものなので、特に技術的な解説は省かせていただきます。
また気が向いたら記事にします〜
コメント