プログラミング情報

UIと配色のアイデアはこれでもう完璧! おすすめのアイデア取得法

 

こんにちは、てふてふです!

 

プログラマーやデザイナーさんの方!

 

突然ですが、模写コーディングやオリジナルアプリの開発など様々な場面で

『この色ってHexやRGBで表現したいけど何色なの!』

『色を決めるだけで何時間もかかってしまう』

『UIをどういう感じにするか決めきれない』

『動的なUIのアイデアが湧いてこない』

『全部ワンパターンの同じようなUIになってしまう』

って悩むことはないですか?

 

てふまる
てふまる
僕は色を決めるのに特に時間がかかってしまって、この時間もったいなすぎるっていつも思ってた、、、

 

UIや配色のことに関する記事ってあまり見かけないから、今回僕なりのやり方を紹介できればなぁって思います。

 

簡単にいい感じのグラデーションを見つける

単色でいい感じの色を探すのは難しいけど、グラデーションにするだけで一気にオシャレになったりしますよね。

てふまる
てふまる
でも自分でImagePickerとかから色を選んできてグラデーションを作るとこれじゃない感が。(経験済み、、、)

 

そんな時にぱっと見でいい感じのグラデーションを見つけれてHexコード(#EC9F05みたいなやつ)も取得できるサイトが

 

上の画像のように色をカテゴリ別でも探せるから、好きなグラデーションをかなり簡単に見つけれるよ!

 

知っている人も多いちょっとした豆知識だけど、

コードをダブルクリックすると一気に選択できるから、

『ダブルクリックで選択』⇨『command + C でコピー』⇨『command + V でペースト』すると時短だよ!

 

右下にある『Copy CSS』からCSS用のコードもコピーできるからこっちも便利。

 

HexコードをRGBに変換する

Hexコードは #B621FE みたいなの。

RGBは (red: 0.71, green: 0.13, blue: 1.00)

(ちなみにこの2つのコードは同じ色を表しているよ。)

ていう感じのことを言うんだけど、

 

てふまる
てふまる
Hexコードは取得できたけどRGBで使いたいから意味ないよ!

っていう時もあると思います。

 

そんな時に簡単に『Hexコード』から『RGB』に変換してくれるのが

 

HexコードをRGBに変換するサイトは山ほどあるんだけど、この2つのサイトをおすすめする理由は、

『COLORRRS』は CSSに合わせたRGBを返してくれて

『UIcolor』は Swiftなどのモバイル言語に合わせたRGBを返してくれるから。

 

てふまる
てふまる
RGBに変換したい時はぜひ使ってみてね! 

 

デザイナーさんのUIを参考にする

UIの構成を1から考えたりすると既存のアプリとほとんど同じになったり、ワンパターンになったりすごく難しいと思う。

そんな時にUIの参考にできるのが、

 

世界中のデザイナーさんがUIデザインをアップしてくれていてとにかくレベルが高い。

『モバイルアプリのUI』も『WebアプリのUI』もあるから、アイデアに詰まったらインスピレーションを受けたり、一部を参考にしたりするといいんじゃないかなって思うよ!

 

Dribbbleでは『気になったデザイナーさんのフォロー』『色での検索』『キーワードでの検索 (例: フィットネス)』『カテゴリ検索 (例: Web Design, Mobile, Animation, Illustration)』もできるから超便利!!!

 

てふまる
てふまる
Webアプリで特に多い印象なんだけど、オシャレさを重視しすぎて使いにくさが半端ないサイトとかになってしまわないように注意が必要だよ。

 

しかもDribbbleはただのUIだけじゃなくて動的なUIのアイデアも落ちているところがめちゃめちゃ強い!

 

※ アイデアを丸々真似して商用利用するのはだめですよ。

 

その他UIの参考サイト

 

『Collect UI』は検索の幅だったりで『Dribbble』に劣る部分は多いけれど、

『Dribbble』と同じくらいレベルが高いからこっちもおすすめ!

 

気になる色を抽出する(Hex, RGB)

僕が最初『Dribbble』を使い初めて悩んでいたのが、

デザインの色が良すぎて自分も使いたいけど何色なのかわからない、、、

 

これを解決してくれたのが

 

てふまる
てふまる
これはGoogle Chromeの拡張機能だからまだChromeを使ったことがない人はこの機会に使ってみてね。
中の人
中の人
拡張の仕方をリンク先のサイトで書いてくれているのでそっちをみて拡張してみてください。

めちゃ簡単ですぐ終わるよ!

 

ColorPick Eyedropper の強いところはカーソル部分を拡大して表示してくれるから小さい部分の色でも自分で拡大したりせずに色を抽出できる!

しかもHexコードとRGBの両方を返してくれるのもありがたい。

 

まとめ

僕のやり方はこんな感じです。

てふまる
てふまる
 『Dribbble』『ColorPick Eyedropper』はめちゃめちゃ使うよ!

 

1番多い使い方は、

『Dribbble』で配色バランスがすごい!!っていうのを見つけて、

その色を『ColorPick Eyedropper』で抽出して使ってみるっていうやり方が多いかな。

 

中の人
中の人
『Dribbble』で気になるUIだったり配色の物を見つけたらお気に入りやCollectionに追加しておいて、いつでも見れる状態にしておくと便利だよ!

 

この記事が誰かの参考になっていれば嬉しいです。

一緒に頑張りましょう!