カテゴリー: デザイン

こんにちは。デザイナー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

 

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

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

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

 

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

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

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

 

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

 

用意するもの

 

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

 

トライアド

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

 

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

 

 

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

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

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

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

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

 

 

テトラード

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

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

 

 

ペンタード

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

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

 

 

ヘクサード

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

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

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

 

 

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

 

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

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

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

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

 

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

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

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

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

 

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

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

めざせ配色マスター！

 

 

 

CSSで変数が使えると話題になってから久しいですが、いつの間にか対応ブラウザが増えてきました。

IE11が未対応なので使いづらいのですが、そろそろ、CSS変数（CSSカスタムプロパティ）に目を通しておいたほうがいいかもしれませんね！

CSS変数（CSSカスタムプロパティ）の基本的な使い方

:root {
    --base-color: #ffff00;
}

.content {
    color: var(--base-color);
}

上の例のように変数の先頭に「–」（ハイフン2つ）を付けます。
これで、変数の定義がされます。

「:root」内に変数を定義することで、cssを読み込んだ全ての要素で変数が使えるようになります。

 

変数を呼び出す時には、var()関数を使います。
「color: var(–base-color);」のように、指定した変数を()の中に入れるだけです。

See the Pen css 変数（１） by naoto saito (@code_ns) on CodePen.

テキストが青色になりました。
基本的な使い方はとてもシンプルですね！

CSS変数とメディアクエリ

変数のみなら、Sassでもいい気がするのですが、動的に値が変わるのもcss変数を書くメリットです。

下記の例は、幅400pxで2カラムと4カラムを切り換えています。
(別ウィンドウで確認してください。)

See the Pen CSS 変数（２） by naoto saito (@code_ns) on CodePen.

JSでの操作

Sassと違い、CSS変数であれば、JavaScriptで値を取得したり、変更したりできます。
下記の例では青色に指定したテキストをJavaScriptで変数を変更し赤色に変更しています。

See the Pen CSS 変数（３） by naoto saito (@code_ns) on CodePen.

 

この例だとテキストの色を１箇所変えるだけなので、メリットは感じられないかもしれませんが、次のように変更箇所が何箇所も出てくる場合に便利さを感じられるかもしれません。
（Choose a theme colorの右のボックスで色の変更）

See the Pen Theming a site with CSS Custom Properties by Chris Coyier (@chriscoyier) on CodePen.

 

このように、もしIE11で使えるようになったら、CSSの管理やJavaScriptとの連携が、さらに簡単になりそうです。

 

 

こんにちは、Vimmerもある程度板についてきたLQヒロシです。

 

コーディング業務で「CSSのクラスがどのファイルでどこに使われているのかざっと知りたい」ってことありますよね。

統合開発ツールなどを使っているとツールそれぞれで検索方法があると思いますが、Vimmerである以上ターミナルで行う必要があります。そこで活躍するのが「grep」コマンド！

 

今回はターミナルで利用するUNIX（LINUX）検索コマンド「grep」のご紹介になります。
※なお対象がデザイナーなのでMacユーザー（ターミナル）を前提にしております。

 

grepってなんかややこしいイメージ

 

「grep 使い方」などでググると結構なリファレンスが出てくるのですが、やたらオプションは多いし説明が分かりにくい！さらにfgrepだのegrepだのがあってLQ（Low Quallity）な私は敬遠しがちでしたが、エンジニアさんに聞いてみるとよく使うやり方は決まっているようでしたので、デザイナーに最適なgrepの使い方をまとめてみました！

 

結論、「fgrep -rn ‘検索文字列’ ファイルのパス」を使っておけば問題無い！

 

いきなりfgrepが出てきて恐縮ですが、その説明は後でさせてもらうとして、まずは簡単に使い方の説明から。

 

 

grepもfgrepも検索方法が若干異なるだけで基本的な使い方は同じになります。
はじめにコマンド、次にハイフンを付けてオプション。検索したい文字列と検索対象となるファイルパスを入力します。オプションをつけることで検索方法や検索結果の表示方法を細かく指定することができます。

 

[よく利用するオプション（grep、fgrep共通）]

r	再帰的に検索する 要するにサブディレクトリまで全て検索範囲にできるということ
n	検索結果に行番号を出力する 検索結果は、ファイル名だけでなく対象文字列が使われている箇所も抽出されるので、行番号を表示するとより分かりやすくなります

 

例えば以下のようなディレクトリ構成でCSSのクラス名を検索する場合、

 

$fgrep -rn ‘hoge’ home/assets/css/

 

と入力すれば、サブディレクトリがあっても全てのCSSファイル内のhogeクラスを検索できるというわけです。CSSルートにアクセスして以下のようにしてもOKです。

 

$fgrep -rn ‘hoge’ ./

 

例えばプロジェクトルートからだとこのようにすることもできますね。

 

$fgrep -rn ‘.hoge’ ./

 

※「.hoge」とするとCSSクラスである可能性が高いので、プロジェクトルートからでもCSSのみを抜き出しやすくなります。（jsは引っ掛かってきますが。。）

 

 

なぜgrep ではなく fgrepを使うのか

 

grepは正規表現が利用できるので、「.hoge」と「hoge」では結果が異なる場合があるため。

 

正規表現では「.」をワイルドカードと認識します。grepの場合「.hoge」は正規表現を使っていることになり、ahogeやbhogeという文字列が存在していると一緒に検索されてしまうのでエスケープ処理を行う必要がでてきます。

 

$grep -rn ‘¥.hoge’ ファイル名

 

その点、fgrepは正規表現が利用できないので、エスケープ処理を省くことができます。さらにfgrepの方が抽出速度が早いというメリットもあります。

 

正規表現で検索したい場合はgrepが良いですが、単純な文字列であればfgrepが良さそうですね。（ちなみにgrepで「-F」オプションを使うとfgrepとほぼ同様の機能になります。）

 

 

文字列を「’」シングルクォートで囲むのを忘れずに

 

半角スペースや「*」「?」などはシェル（ターミナル）にとって特別な意味をもつ文字列になります。これらの文字列が含まれる場合に展開されないようにシングルクォート（ダブルクォート）で囲む必要があります。

 

例えば以下の例だと検索結果が変わってきます。

$fgrep foo bar assets/css/　　　//fooをbarから検索
$fgrep ‘foo bar’ assets/css/ 　//foo barを検索

これはシェルにとってスペースは引数の区切り文字として展開されるためです。文字列に半角スペースや記号文字が含まれる場合は注意しましょう。

 

 

少し慣れてきたら…

 

複数の文字列を指定して検索する

$fgrep -e ‘hoge’ -e ‘foo’ /assets/css/

 

指定した複数の文字列を含む行を取り出す

$fgrep ‘hoge’ /assets/css/index.css | fgrep ‘foo’

 

なんてこともできます。

 

 

いかがでしたでしょうか。まとめてみると、そこまで難しくなさそうな気がしてきました！LQな私はこのぐらいでお腹いっぱいですが、他にも便利なオプションがたくさんあるので使ってみても良いかと思います！

 

以上、簡単ではありますがgrepの使い方のご紹介でした。

なおターミナル・vimの使い方はこちらをご覧ください。

https://blog.splout.co.jp/3249/