カテゴリー: デザイン

デザイナーのMです。
日頃UIデザインなどを担当しているのですが、メインのカラーやキーカラーなどが決まっていないときによくどう配色すればいいか悩みます。

そんなとき参考になるのが「配色ツール」です！
今回は私がデザインする際や、デザイントーンを決めるときに使用する色に悩んだ際に利用する「配色ツール」をご紹介したいと思います。

原色大辞典

WEBでよく使われる色などが一覧で見ることができる配色ツール（サイト）です。
すべての色にコードが記載されているので、すぐに使うことができます。

https://www.colordic.org/

Adobe Color CC

Adobeが提供する配色ツール。
類似色や補色などのテーマを選んでカラーをドラッグするだけで、そのカラーに応じた5色が自動で選択されます。
Adobeのサービスなので、パレット登録しておくとIllustratorやPhotoshopと連携することができます。

https://color.adobe.com/

Coolors.co

スペースキーを押すと素敵な配色がランダムに表示されます。
色のロックやパレットの作成、またURLが選んだカラーコードになっています。


https://coolors.co/

Color Hunt

毎日更新されている配色紹介サイト。美しい配色例などをカラーコードと一緒に確認することができるギャラリーのようなサイトです。
人気順で配色を並び替えると、今流行りの色や配色のトーンを見ることができてとても勉強になります。

https://colorhunt.co/

HUE/360

黒から白への明暗差に対応して色相を確認することができる配色ツールです。
色相の数やRGB、彩度などを細かく指定しながら色相をシミュレートできます。
操作も簡単で、とても使いやすいツールなので私もよく使っています。

https://hue360.herokuapp.com/

 

とても多くの配色ツールがありますが、自分の使いやすい配色ツールを見つけるのはけっこう大変で手間だったりします。
今回は私が日頃使用するツールを紹介させていただきましたが、少しでも誰かの役に立てればと思います。

Instagramの投稿をブログやサイトに埋め込んだとき、iPhoneのsafariのみ表示が大きくなり、はみ出ていることはありませんか？
AndroidやPCだとちゃんと表示できているのに…。

対処前の表示

例えばこのようなイメージです。（2018/9/20時点）

何故か埋め込んだInstagramの投稿が記事幅からはみ出ています…。

 
投稿が大きくなってしまう原因は、位置情報が長く、さらに「日本語 英語」となっている場合のようです。

iPhoneのsafariのレンダリングが原因なのか、InstagramのCSSの指定が弱いのか、具体的なところは不明です。

 

対処方法

少々強引な対処方法となるのですが、表示されるInstagramのiframe「.instagram-media」に、下記のCSSを指定すると現象を回避できます。

@media screen and (max-width: 899px){
  .instagram-media{
    width:414px !important;
    max-width: 100% !important;
    min-width: initial !important;
  }
}

 
こちらの内容は、「@media screen and (max-width: 899px)」で幅900px未満のデバイスのみCSSが効くようにしています。
「414px」はiPhone XS MAXの横幅です。その指定のみだと、その幅以下のiPhoneでは大きすぎますので「max-width: 100% !important;」を指定しています。
「min-width: initial !important;」は、自動で生成される「min-width」の値が大きい場合があるので初期化しています。

 

対処後の表示

上記のCSSを指定した後の表示がこちらになります。
iPhoneでも通常の大きさで表示されるようになりました。

 
いかがでしょうか？
なかなかこのような表示崩れに出くわすことはないかもしれませんが、Instagramの投稿をブログなどに埋め込む場合の参考になれば幸いです。

 

こんにちは、相変わらずプログラミングが覚えられないLQヒロシです。

業務の流れでcanvasで複数のうにょうにょ動く円を作ったのでレシピをまとめてみました。
参考にしたのはこちらの記事。
JavaScriptはじめました。 – くねくねする円を作ってみた。
NIJIBOX Creator’s Blog – JavaScriptで実装！理想の「うにょうにょ動く円」を求めて…

 

ただ上記の記事の内容では一つの円しか作れませんので、次の記事も参考にしてゴニョゴニョしてみました。

https://jsfiddle.net/39we73t1/

 

完成はこちら

See the Pen NLrpJv by hirotatsu fujimoto (@LQ_Hiroshi) on CodePen.

 

script全文はこちら

 

さっそく作り方を

 

うにょうにょ動く円の考え方としてはこちらの「くねくねする円を作ってみた」に詳しく載っていますので、ざっと簡単に言うと、

 

・１０個のアンカーポイントをサークル上に２次元ベジェ曲線で作成し線でつなぐ
・コサイン波を利用して各ポイントをそれぞれ動かす

 

という感じでしょうか。実際のコードを見ながら説明していきたいと思います。

 

アンカーポイントはPointオブジェクトで生成しています。
ここはコサイン波の計算式が主になっていて、数学がからっきしの私は脳死で参照させていただいております。テヘ。
ちなみに9、10行目のthis.speedとthis.rが乱数になっているのでこの数値を変更すると、うにょうにょするスピードや幅を調整できます。

 

次にイニシャル関数。一つの円だけで良ければPointオブジェクトをMAX（ポイントの数）分だけインスタンス化すれば良いのですが、複数の円を作成する場合はそれぞれの円で配列を作り、それぞれの円ごとにMAX分のpointインスタンスを持つというカタチで行っています。

 

円の配列については最初に定義（circles）していて、こちらに中心点座標、色、半径などのパラメーターを設定しています。中心座標と半径はPointオブジェクトに引き継がれ、色と各ポイントの配列は後述するdrawCircle関数に引き継がれています。

 

そしてイニシャル関数からupdate関数を呼び出し、Pointオブジェクトのupdateメソッドを呼び出して実際のアンカーポイントを生成しています。考え方は参照記事と同様なのですが、複数円を対応するのでこちらでも各円ごとに処理を行う必要がでてきます。
ポイントを生成したらdraw関数で描画を行いsetTimeoutで繰り返し処理を行っています。

 

描画について

 

draw関数はsetTimeoutで繰り返し実行されるので、まずはclearRectで描画を初期化します。引数でcirclesを渡し、円の数だけdrawCircle関数（実際の描画処理を行う関数）を実行しています。これはcircles内にある各円が色とアンカーポイント情報を持っているので、円ごとに一つづつ描画処理を行うためにこのように処理をしてみました。これはこちらの考え方を参考にしています。

https://jsfiddle.net/39we73t1/

 

drawCircle関数ですが、こちらは参考にした「JavaScriptはじめました。 – くねくねする円を作ってみた。」の処理方法を活用させていただいてます。引数で各情報を渡して２次元ベジェ曲線を描画し塗りつぶしています。最後にonloadでcanvasお決まりの構文を書いてinitすれば完了です。

 

 

これを作成する前に複数の円を描画する記事をググって探してみたんですが、なかなか見当たらなかったので自作した次第なので色々と不手際な部分もあるかと思いますが、canvasでこのような表示をやってみたいと思っている方の一助になれば幸いです。それではまた！

 

以下、scriptの全文になります。

こんにちは。二年目デザイナーのハナです。

 

少し先の話になりますが、色彩検定のUC（ユニバーサルカラー級）が12月から始まりますね！

私も受ける気満々なんですが、注文した公式テキストがなかなか届きません…

とはいえ試験自体はまだかなり先なので、届いてからゆっくり勉強を始めたいと思います。

 

ちょうど一年前にこのブログでもユニバーサルカラーの話をしていましたが、今回はここから更に少し突っ込んだ話をしたいと思います。

 

色が見える仕組み

人間の目は、錐体と杆体という二種類の視細胞で光を感知しています。

杆体は主に暗いところで働く視細胞です。

暗い部屋に入ったとき最初は真っ暗で何も見えませんが、だんだん目がなれてきて薄っすらと周りが見えるようになってきます。

これは暗い部屋に入ってから杆体が働き始めるまで少しタイムラグがあるためです。

杆体は一種類しかないので、杆体しか働かない真っ暗な部屋では「色」というものを感じることはできません。

 

錐体は明るいところで働く視細胞です。

杆体は一種類しかありませんが、錐体はL錐体、M錐体、S錐体という三種類に分かれています。

L錐体は赤、M錐体は緑、S錐体は青をそれぞれ感知します。

目に入ってきた物の色が、赤い光が何％、緑の光が何％、青い光が何％で構成されているのかをLMSの錐体がそれぞれ感知し、脳でそのデータを組みあわせ、そこではじめて私達は見たものの色が何色であるか理解できるのです。

 

色覚多様性

…というのは、あくまでも杆体と錐体三種類が全て働いている人の話です。

全ての人間がそうであるとは限りません。

錐体が一種類でも働いていないと、色の見え方というのは大きく変わってきます。

杆体１色覚は杆体のみが働いている状態の色覚で、非常に視力が弱いです。

暗いところで杆体は正常に働きます。

 

１色覚は杆体と錐体一種類が働いている状態の色覚です。

S錐体１色覚は視力も非常に弱いです。

 

２色覚は杆体と錐体２種類が働いている色覚です。

欠けている錐体によって、１型、２型、３型と分類されます。

 

異常３色覚は、杆体と錐体２種類が正常に働いていて、一種類が異常である色覚です。

こちらも異常のある錐体によって、１型、２型、３型と分類されます。

見え方は２色覚と非常に似ています。

 

★マークのL・Mの２色覚と異常３色覚が特に多く、その他の先天的な色覚異常はまれです。

 

以上の先天的な色覚異常のほか、事故や病気による色覚の変化や、加齢によって以前見えていたように色が見えなくなる場合もあります。

 

まとめ

いろいろな個性の人がいるように色の見え方だって多様である、というのがユニバーサルカラーを考える上で重要な、色覚多様性という概念です。

自分が見ている色と同じ色を、必ずしもすべての人が見ているわけではないと念頭に置いておくことが大切であると思います。

 

もしかしたらここまで詳しい内容はUC級の試験には出ないかも…（公式テキストがまだ届いてないのでどこまで出題されるかわからない）

でも覚えておいて損はないので、よければ頭の片隅にでも置いていただけたら良いかなと思います。

あとこの内容は色彩検定１級の内容なので、１級の試験勉強の際に少しでも役立てていただけると幸いです。

 

UC級はあまり難易度が高くないんじゃないかな〜という個人的予想ですが、油断せずしっかり合格したいと思います。がんばりましょー！

長年使ってきたEvernote。
ブログ記事をスクラップしたり、いいなと思ったデザインやコードを集めたり、いろんなものをEvernoteに詰め込んできました。

しかし、無料版の制限ができてから「変わりのものは無いものか」とモヤモヤしていました。
有料版に切り替えて使っていましたが、せっかくお金を使うなら、もっといいサービスは無いものかと…。

 

そこで、今回、使ってみようと思っているのは「Milanote」です。

 

「クリエイティブなEvernote」と呼ばれたり、「クリエイティブな仕事のためのメモアプリ」と呼ばれたりしています。
「Google」「Apple」「Facebook」などの企業で利用されているらしいです。

 

一度使ってみようと思い、登録してみました。
100ノートまでなら、無料で使えます。

登録は簡単で「Sign up for free」から、「名前」と「メールアドレス」と「パスワード」を入力して登録するだけです。

 

画面はすごいシンプルです。
左側にあるアイテムをドラッグ＆ドロップして、ノートを増やしていきます。

基本は「Board」を追加してその中に、ノートを増やしていきます。
「Board」はフォルダのようなもので、何階層も作れそうです。（１０階層以上作れました。）
それと、「Board」の広さも、無限に広がっていく感じでした。

 

オフィシャルの動画を見るとイメージが付きやすいかもしれません。

動画を見ても驚いたのですが、実際に操作してみると、その自由度と速さに感動してしまい、無制限の有料版に登録したくなりました。
（月払いだと、$12.5なので、ちょっとお悩みどころ…）

 

さらに、デフォルトでテンプレートがたくさんあり、「templates」から選ぶことができます。
その豊富さと整然とされた感じに圧倒されました。

 

[templates > Design > Design brief]

 

[templates > Marketing > Social media calendar]

美しいですね…。
これらのテンプレートがデフォルトで用意されており、ドラッグ＆ドロップで好きな「Board」に設置できます。
こうやって、アイディアを綺麗にまとめることに、強いあこがれを持っているので、しばらく利用してみようと思っています。

 

いきなり、「Milanote」のみするのではなく、とりあえずのメモや記録は「Evernote」や「Google Keep」を使って記録して、それを「Milanote」に移して使うといろんなことがまとまりやすいのではないかと思っています。