カテゴリー: デザイン

色の見え方と色覚多様性について

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

 

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

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

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

 

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

 

色が見える仕組み

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

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

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

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

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

 

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

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

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

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

 

色覚多様性

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

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

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

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

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

 

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

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

 

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

欠けている錐体によって、1型、2型、3型と分類されます。

 

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

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

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

 

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

 

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

 

まとめ

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

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

 

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

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

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

 

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


Evernoteから、レイアウトが自由なMilanoteへ。

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

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

 

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

 

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

 

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

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

 

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

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

 

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

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

 

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

 

[templates > Design > Design brief]

 

[templates > Marketing > Social media calendar]

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

 

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

 


Webスクレイピングをはじめてみました(1)

 

こんにちは、長年Webデザインに携わってきましたがプログラミングがなかなか覚えられないLQヒロシです。

今回は一念発起して、流行りのPythonWebスクレイピングをしながらプログラミングを勉強していこうという試みです。

なぜWebスクレイピングなのか?

 

PHPのちょっとした修正や、jQueryを使ったクリックやリサイズの簡単なイベントぐらいはできるけど、そこから先になかなか進めない・・。デザイナーなんだしJavaScriptUI周りのエフェクトとかを実装できるようになりたいと思ってはいるのですが、UI周りってイベント同士が絡んだりすると途端に難しくなってなかなか続かないのが目下の課題だったりします。

簡単なアウトプットを段階的にこなしていって、ファンクションのまとめ方だったり、データのやり取りなどプログラミングの勘所を掴んでいけるのが理想的ですよね。

Webスクレイピングであれば、WebサービスのAPI活用・クローリングでのデータの収集、データベースへの保存や取り出し、データの加工の作成という一連の流れが小規模なカタチで勉強できるので、体系的にポイントを抑えた勉強ができそうです。データを加工するのに正規表現も使うことになりそうだし。

 

プログラミング言語はpythonを使用し、ツイッターと連携して画像を収集しギャラリーサイト作成を最終的な目標としたいと思います。

 

第一回目は、スクレイピングとPythonについてご紹介できればと思います。

そもそもWebスクレイピングとは?

 

厳密にはクローリングとスクレイピングに分けることができます。

・クローリング
WebサイトのハイパーリンクをたどってWebページを探す作業

・スクレイピング
Webページから必要な情報を抜き出し、整形し直す作業

例えば、電子書籍の販売サイトから書籍情報を抜き出して価格を比較、最安値の情報のみをまとめるなど、要するに複数のWebサイトから任意の情報だけを抜き出し、雑多なデータを整理して有益な情報にすることでしょうか。

Pythonって何?おいしいの?

 

GoogleFacebookで採用されていて、機械学習やIoTの事例も多い現在最も旬な言語とも言われていますので、おいしいです。他のプログラミング言語同様、WindowsMacOSLinuxなどのプラットフォームで動作でき、環境構築・Webシステムの開発~データ解析までひとつの言語で実現できることから世界中で広く使われています。

Pythonの特徴

 

文法が読みやすい

 

プログラムは一度書かれた後も他の人に読まれるもの。pythonでは「シンプルで読みやすいコードが書けること」という設計思想があり、コード上の装飾が極力少なくなるような記述方法になっています。少し文例を見てみましょう

実行結果:hogeです

 

このように文の終わりに閉じタグが必要なく、制御構文では影響する範囲を括弧で囲む代わりにインデントで定義。変数は代入するだけで宣言されたことになるのでとてもすっきりとして読みやすいコードになります。

Pythonってなんだか難しそうなイメージがありましたが、PHPなどと比べても別段特殊な書き方をしているわけでもなく、文法が見やすいので非常に馴染みやすく感じました。教育の現場でも採用されていたりするそうで、プログラミング初心者にも学びやすい言語だと思います。

 

・導入が簡単!

 

MacならHomebrewでインストールするだけですぐに使えました。コンパイルする必要もないので、ぶっちゃけ笑ってしまうぐらい早いですwww

(以前PHPを導入した際は、php.iniファイルの設定を調整したり、事前にDBを用意したりと面倒だった思い出があります。)

 

・豊富なライブラリ

 

Pythonには正規表現、数学関数、通信プロコトルなどの標準ライブラリが非常に豊富でインストールするだけで利用が可能です。さらにサードパーティ製のライブラリも豊富に提供されています。最近ではディープラーニング用のTensorFlowなどが有名ですね。データ解析のライブラリも強力で、スクレイピングしたデータをインフォグラフィックとして表現できたりもします。

 

それではPythonの導入方法を見てみましょう

 

Pythonは2系と3系があり、現在は3系が主流になりつつあります。2系と3系の間には互換性がありません。Macではデフォルトでインストールされていますが2系だったりするので、Homebrewで3系をインストールします。

 

 

バージョンを確認してみましょう

 

Homebrewでインストールしたものが参照されているか確認します。

と表示されれば準備は完了です。

 

では、対話方式でプログラム実行できる「インタラクティブシェル」でPythonを動かしてみます。やり方はターミナル上で「python3」と入力するだけですw

立ち上がったら上記のようなメッセージが表示され、コマンド受付状態になります。では、構文を入力してみましょう。

はい、これだけですw簡単ですw

 

終了する時は

または

これでbashに戻ることができます。

 

第一回目は以上になります。説明や導入を中心に駆け足でご紹介してきました。
まだまだ勉強中の身のため、上手く伝えられず分かりにくい部分が多々あると思いますが、次回からは実際にPythonを利用して少しでも魅力をお伝えできればと思います!


カメラの基本講座 その2 「シャッタースピード」編

こんにちは。デザイナーKです。
今回は前回の記事に引き続き、写真撮影の際の基本となるカメラの「シャッタースピード」に重点を置いた記事を書いてみたいと思います。
記事全般を通して、一眼レフを使用した際の事例になるかと思いますので、その点ご了承下さいませ。

「シャッタースピード」とは

「シャッタースピード」はその名の通り、カメラのシャッターが下りる時間の長さのことをいいます。「シャッタースピード」は「SS」とカメラの設定で言われることもあります。
一眼レフなどの機能では「シャッタスピード優先モード」を使用することにより、シャッタスピードを制御して撮影することが可能になります。
通常、一般的な一眼レフカメラで設定できるシャッタースピードは「1/4000秒(ハイアマ、プロ機などは1/8000秒)〜30秒」となっており、「1/4000秒」が最も短く、「30秒」が最も長いシャッタースピードとなります。
また、「バルブ撮影」という30秒以上シャッターを開き続ける設定もあります。

なにが違うのか?

それでは実際にシャッタースピードを変えて撮影すると何が違うのか、シーンを想像しながら説明します。

シーン1)シャッタースピードを短くして撮影する場合

鳥などの動物や自動車や電車などの動きが早いものを撮影するときは、シャッタースピードを短く(1/1000〜1/4000など)設定します。
シャッタースピードを短く設定するとシャッターの下りる時間が短くなり、光をセンサーに取り込む時間も短くなります。
そのため、早く動くものに対してはシャッタースピードを短く設定することによってとても短い時間を写すことが可能になります。

 

撮影例 梅の花から飛び立つメジロさん


シャッタースピード 1/1000 F値(絞り) 5.6

 

シーン2)シャッタースピードを長くして撮影する場合

暗い場所や夜景、花火などを撮影するときは、シャッタースピードを長く(1秒〜バルブ撮影)設定します。
シャッタースピードを長く設定するとシャッターの下りる時間が長くなり、光をセンサーに取り込む時間が長くなります。
そのため、暗い場所でも光を取り込む時間が長くなるため、シャッタースピードを長く設定することによってとても長い時間を写すことが可能になります。
花火撮影などではバルブ撮影を行い、花火が打ち上がった瞬間から炸裂してから花火が消えるまでの間、ずっとシャッターを開けることによって花火の全景を撮影することも可能になります。
他にも、夜空に浮かぶ星なども、街の明かりが少ない山奥などに行って15秒間ぐらいシャッターを開けることによって綺麗に浮かび上がってきます。

 

撮影例 夜空に浮かび上がる天の川
シャッタースピード 15秒 F値(絞り) 4

 

シャッタスピードをマスターして思い通りの写真を撮ろう!

シャッタースピードをマスターすると、人間の目では見ることのできない瞬間を写真に収めることができます。新たな発見やイマジネーションも生まれること間違いなしです!ぜひシャッタースピードを駆使して写真に挑戦してみて下さい!
デザインはもちろん、それに加えてカメラや写真が大好きな人も弊社では募集中です!!
ぜひこちらからお気軽にお問い合わせください^^


理論でなんとかする配色法

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

 

みなさんは配色を行う時、どのように色を選びますか?

調和した配色を作ることは一見センスのいる難しいことのように思えます。

ですが実際は(あるにこしたことはないですが)センスは一切不要で、理論さえ知っていればなんとかなります。

 

配色を調和させるための理論や法則はたくさんあるのですが、今回はビビットな色をたくさん使う際にバランス良く色を選ぶことができる方法を紹介します。

 

用意するもの

 

・等間隔に色が配置された色相環

 

トライアド

トライアドは色相環上に正三角形を配置し、その頂点が指す色でつくる三色の配色方です。

 

正三角形がどんな角度でも、その頂点が指す三色の配色は調和します。

 

 

スプリットコンプリメンタリー

スプリットコンプリメンタリーは色相環上に鋭角二等辺三角形を配置し、その頂点が指す色でつくる三色の配色方です。

特定の一色と、その補色の両隣もしくは2つ隣の色を選ぶ、という手順でも作ることができます。

「スプリット」は分割、「コンプリメンタリー」は補色という意味です。

補色の片方を分割して二色にして作る配色法なのでこの名前がつけられています。

 

 

テトラード

テトラードは色相環上に正方形を配置し、その頂点が指す色でつくる四色の配色方です。

正方形がどんな角度でも、その頂点が指す四色の配色は調和します。

 

 

ペンタード

ペンタードは色相環上に正五角形を配置しその頂点が指す色でつくる五色、もしくはトライアドで選んだ三色に白と黒を加えて作る五色の配色方です。

正五角形で作るペンタード配色が少し派手すぎるかな?と思ったら白と黒を入れたペンタード配色にするとすっきりしまって見えます。

 

 

ヘクサード

ヘクサードは色相環上に正六角形を配置しその頂点が指す色でつくる六色、もしくはテトラードで選んだ四色に白と黒を加えて作る六色の配色方です。

ペンタードと同じく、白と黒を入れたヘクサード配色は、六色すべて有彩色の場合よりもスッキリして見えます。

ヘクサードに限らず、正多角形を用いた配色は、感覚に頼らず均等なバランスの色を選ぶことができるためとても便利です。

 

 

色彩学を勉強するメリットについて

 

色彩学は奥が深いですが、勉強することによって色々なメリットがあります。

・疲れて脳みそが回っていないときでもある程度適切な配色ができる!

・考えすぎてよくわからなくなってきたときでも配色に根拠があるので自信を持てる!

・なんでその色を選んだのか他人にちゃんと説明できる!

 

今回紹介した配色方法は、ジャッドという色彩学者が唱えた色彩調和論の「秩序の原理」というものに当たります。

ですが調和する配色はこの配色法だけではありません。たくさんあります。

ジャッドの色彩調和論には他にも「なじみの原理」「明瞭性の原理」「類似性の原理」が存在します。

また、もちろんですがジャッド以外にもたくさんの色彩学者がたくさんの色彩調和の法則を唱えています。

 

紹介してもしきれないので、別の機会に少しずつご紹介できればな、と思います。

私もまだまだ理解していない配色の方法がたくさんあるので、これからも勉強を続けていきたいと思います。

めざせ配色マスター!