こんにちは、てふてふです！
プログラマーやデザイナーさんの方！
突然ですが、模写コーディングやオリジナルアプリの開発など様々な場面で
『この色ってHexやRGBで表現したいけど何色なの！』
『色を決めるだけで何時間もかかってしまう』
『UIをどういう感じにするか決めきれない』
『動的なUIのアイデアが湧いてこない』
『全部ワンパターンの同じようなUIになってしまう』
って悩むことはないですか？
UIや配色のことに関する記事ってあまり見かけないから、今回僕なりのやり方を紹介できればなぁって思います。
簡単にいい感じのグラデーションを見つける
単色でいい感じの色を探すのは難しいけど、グラデーションにするだけで一気にオシャレになったりしますよね。
そんな時にぱっと見でいい感じのグラデーションを見つけれて、Hexコード(#EC9F05みたいなやつ)も取得できるサイトが
上の画像のように色をカテゴリ別でも探せるから、好きなグラデーションをかなり簡単に見つけれるよ！
知っている人も多いちょっとした豆知識だけど、
コードをダブルクリックすると一気に選択できるから、
『ダブルクリックで選択』⇨『command + C でコピー』⇨『command + V でペースト』すると時短だよ！
右下にある『Copy CSS』からCSS用のコードもコピーできるからこっちも便利。
HexコードをRGBに変換する
Hexコードは #B621FE みたいなの。
RGBは (red: 0.71, green: 0.13, blue: 1.00)
(ちなみにこの２つのコードは同じ色を表しているよ。)
ていう感じのことを言うんだけど、
っていう時もあると思います。
そんな時に簡単に『Hexコード』から『RGB』に変換してくれるのが
HexコードをRGBに変換するサイトは山ほどあるんだけど、この２つのサイトをおすすめする理由は、
『COLORRRS』は CSSに合わせたRGBを返してくれて、
『UIcolor』は Swiftなどのモバイル言語に合わせたRGBを返してくれるから。
デザイナーさんのUIを参考にする
UIの構成を1から考えたりすると既存のアプリとほとんど同じになったり、ワンパターンになったりすごく難しいと思う。
そんな時にUIの参考にできるのが、
世界中のデザイナーさんがUIデザインをアップしてくれていてとにかくレベルが高い。
『モバイルアプリのUI』も『WebアプリのUI』もあるから、アイデアに詰まったらインスピレーションを受けたり、一部を参考にしたりするといいんじゃないかなって思うよ！
Dribbbleでは『気になったデザイナーさんのフォロー』『色での検索』『キーワードでの検索 (例: フィットネス)』『カテゴリ検索 (例: Web Design, Mobile, Animation, Illustration)』もできるから超便利！！！
しかもDribbbleはただのUIだけじゃなくて動的なUIのアイデアも落ちているところがめちゃめちゃ強い！
※ アイデアを丸々真似して商用利用するのはだめですよ。
その他UIの参考サイト
『Collect UI』は検索の幅だったりで『Dribbble』に劣る部分は多いけれど、
『Dribbble』と同じくらいレベルが高いからこっちもおすすめ！
気になる色を抽出する(Hex, RGB)
僕が最初『Dribbble』を使い初めて悩んでいたのが、
デザインの色が良すぎて自分も使いたいけど何色なのかわからない、、、
これを解決してくれたのが
めちゃ簡単ですぐ終わるよ！
ColorPick Eyedropper の強いところはカーソル部分を拡大して表示してくれるから小さい部分の色でも自分で拡大したりせずに色を抽出できる！
しかもHexコードとRGBの両方を返してくれるのもありがたい。
まとめ
僕のやり方はこんな感じです。
１番多い使い方は、
『Dribbble』で配色バランスがすごい！！っていうのを見つけて、
その色を『ColorPick Eyedropper』で抽出して使ってみるっていうやり方が多いかな。
この記事が誰かの参考になっていれば嬉しいです。
一緒に頑張りましょう！
