作者別: K

デザインでよく使う配色ツール5選

デザイナーの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/

 

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


カメラの基本講座 その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

 

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

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


カメラの基本講座 その1 「絞り」編

こんにちは。デザイナーKです。
趣味で写真をやっており、最近は週末になると撮影の旅に出ております。
まだまだアマチュアレベルですが、今回は写真撮影の際の基本となるカメラの「絞り」に重点を置いた記事を書いてみたいと思います。
記事全般を通して、一眼レフを使用した際の事例になるかと思いますので、その点ご了承下さいませ。

「絞り」とは

カメラにおいて「絞り」はかなり重要な役割を持っています。「絞り」は「F値」とカメラの設定では言われています。
「F値」とは、レンズの焦点距離を有効口径で割った値で、レンズの明るさを示す指標として用いられています。

一般的に、「F値」が小さいほど
“レンズを通る光の量が多いのでレンズは明るく写り、シャッタースピードが速く”
「F値」が大きいほど
“レンズを通る光の量が少ないのでレンズは暗く写り、シャッタースピードは遅く”

なります。

よくいう写真の「ボケ」って?

みなさんが普段見られる写真の中でよく言われる「ボケ」や「ボケ味」といった言葉は、この「絞り」の設定を変更することで表現することができます。
被写体の背景などがボケていて、被写体が浮き上がったような表現にした写真のことを「被写界深度の浅い写真」、逆に背景がボケていないクッキリとした写真を「被写界深度の深い写真」と言うこともあります。

以下の画像にF値とボケ方(被写界深度)とシャッタースピードについてまとめてみました。

 

このようにF値を制御することによって、カメラの様々な設定が決まってきます。
一般的な一眼レフカメラだと「絞り優先モード」というモードが付いているはずなので、そのモードで絞りの値を設定して写真を撮るとシャッタースピードなどを設定する手間が省けます。
私は普段、風景写真を撮影することが多いので、絞り優先で撮影することが多いですが、夜景や動くものなどは「シャッタースピード優先モード」や「マニュアルモード」などを使って撮影するほうが思いどおりの写真を撮影することができると思います。

ボケを楽しむ

上記を踏まえて、社内に置いてあったもので何枚かボケを使った写真を撮ってみました。

Canon EOS 5D Mark IV EF 50mm F1.4 USM

絞りをマスターして思い通りの写真を撮ろう!

写真の「絞り」の概念を理解すると、写真の楽しみ方がグッと広がります。
今まで撮りたくても撮れなかったような写真も、意外と撮れるようになったりします。
今回は「絞り」中心の記事になりましたが、次回は他のカメラの基本的なことを記事にできたらと思います。


デザイナーとエンジニア間のデザインもろもろを助けてくれるツール「Zeplin」

こんにちは。デザイナーのKです。
最近アプリのUIデザインを手がけることが多いのですが、その際にエンジニアと「デザインのもろもろのやりとり」問題が生じることが多々あります。

 

完成したアプリを確認すると、

・画像の比率が違う
・余白がバラバラ
・フォントサイズがバラバラ
・思っていた画面遷移じゃなかった

などなど…

 

デザイナーが思っていたものと少し違ったデザインで、アプリが出来上がることがありました。
アプリにとってUIは非常に重要な要素であり、出来る限りアプリの完成形はデザイン通りに完成することが求められます。
何かアプリ側のデザインに間違いやズレなどがあったときに、その都度エンジニアにデザインの画像を送って見ながら調整するのは、とても手間がかかり工数も圧迫します。
そこで今回、私が担当しているアプリのUIデザインで導入しているツール「Zeplin」をご紹介します。

 

『Zeplin』とは?

『Zeplin』
https://zeplin.io/

『Zeplin』は一言で言うと、「デザイナーとエンジニアのUIコミュニケーションツール」です。
「UIコミュニケーション?」と思われる方もいるかと思いますが、要は『Zeplin』を使うことによって、デザイナーとエンジニアのUIの認識を共通化させることが可能になります。

『Zeplin』のインストールや使い方は、調べるとすぐに見つかりますのでここでは書きませんが、以下の画面のようなイメージで、

 

・オブジェクト間のマージン情報
・オブジェクトのサイズ、角丸のサイズ

などがクリック一つでわかるようになります。

 

特にエンジニアの方に役立つのは、「マージン情報」や「フォント情報、カラー情報」などではないでしょうか?
それらも『Zeplin』ならひと目で情報を瞬時に知ることができます。
また、Swift3のコードもクリック一つで自動生成され、使用することもできます。

 

 

他にも便利な機能として、「コメント機能」があります。
以下の画面のように、デザイン画像にコメントを残すことができ、さらにそのコメントに返信することができます。

各イメージ画像は弊社サービスの『Sportare』のデザインになります。

 

『Zeplin』を導入してみてわかったこと

現在進行中の弊社の案件でも、私とエンジニアとの間で『Zeplin』を導入してプロジェクトを進めています。

 

導入してみてデザイナー側から思ったことは、

・デザインの細かい数値がひと目で見えるのでエンジニアに伝えやすい
・コメントを付けて返信も見ることができるので、確認漏れが減った
・Sketchとの相性が良いので、最新のデザインをすぐにアップロードできて共有しやすい

など、非常にメリットが多いです。

 

コメントや履歴の検索ができないことがデメリットとしてありますが、今後改善されればと思います。
しかし、そういったデメリットを上回るメリットが『Zeplin』にはあるので、今後もバシバシ使っていこうと思います!

無料版は1プロジェクトまでしか対応していないので、実務で使うとなると厳しいですが、試しに使うには十分ですので、ぜひ一度使ってみてはいかがでしょうか?
 

さいごに

ということで、今回は「デザイナーとエンジニアのUIコミュニケーションツール Zeplin」のご紹介記事となってしまいましたが、弊社では業務効率化のために様々なツールを利用しています。
そんな弊社でツールを駆使して効率的にデザイン業務をしてみたい!という方は、ぜひこちらからお気軽にお問い合わせください^^


制作実績のご紹介・ポップコーンパパ

こんにちは。デザイナーのKです。
今回は弊社が担当した案件のご紹介をしたいと思います。
大阪にあるポップコーン専門店「ポップコーンパパ」を運営しているDreams様のオフィシャルサイトと、「ポップコーンパパ」のオンラインショップのリニューアルを担当いたしました。

 

ポップコーンパパ オフィシャルサイト
https://popcorn-papa.com/

ポップコーンパパ オンラインショップ
http://www.popcornpapa.jp/

「ポップコーンパパ」について

「ポップコーンパパ」は、大阪でポップコーンを販売しているポップコーン専門店です。
USJの近くにある「UCW店」、海遊館近くの「天保山店」、玉造にある「玉造店」の3つの店舗で営業されています。
「キャラメルナッツ」などの定番の味から、「うめかつお」や「明太子マヨネーズ」などの少し変わった味のフレーバーが32種類もあり、小さいお子様から大人の方まで様々な方に大人気のポップコーン屋さんです。
また、かわいいキャラクターも印象的で、USJなどに行かれた方は一度は目にしたことがあるのではないでしょうか。

オフィシャルサイトのリニューアル

1.サイトデザインを全面的にリニューアル!

オフィシャルサイトをリニューアル

ポップコーンパパ」のコーポレートカラーである赤色をメインに、全てのページのデザインを新しくしました。情報整理をイチから見直し、ユーザーが求める情報を効率的に閲覧できるようにサイト設計をしました。
また、「ポップコーンパパ」のキャラクターを随所に使用し、可愛らしくポップなデザイントーンに仕上げました。細かい部分で言うと、ヘッダー部分でポップコーンがはじけるようなアニメーションをつけたり、こだわりページでキャラクターがユラユラする動きをさせたりすることで、ポップで遊び心のあるサイトに仕上げました。

2.ポップコーンの魅力をもっと伝えるために!

メインビジュアルの撮影風景
新しいメインビジュアルの撮影風景ポップコーンパパについて
新しくなった「ポップコーンパパ」のメインビジュアル

 

「ポップコーンパパ」の魅力をさらに引き出すために、こだわりページのメインビジュアルの撮影を新規で行い、今までになかった新たなビジュアルを作り上げました。
「はじけるほど、笑おう。」コンセプトに合った写真を使うことによって、さらに親しみやすく、食べてみたくなるようなビジュアルに仕上げることができました。

3.いつでもどこでも閲覧できるサイトに!

レスポンシブに対応

レスポンシブデザインを採用し、PCやスマートフォン、タブレットなどでの閲覧に対応しました。必要となる情報は省略せずに、どんな環境からでもシームレスに閲覧できるようにしました。

4.読んで楽しめるコンテンツがいっぱい!

さまざまなコンテンツがあります

新作のポップコーンやキャンペーン情報は「トピックス」、チャリティ活動やキャンペーン活動は「スマイル活動」、イベント情報やスタッフによるテーマパーク日記などは「ポップコーンパパマガジン」の大きく分けて3つのコンテンツがあります。ボリューム満点で読み応えのあるコンテンツが、今後も増えていく予定です。

 

オンラインショップのリニューアル

1.商品をもっと見やすくリニューアル!

オンラインショップのイメージ

ヘッダーをシンプルなデザインに変更し、商品を以前のサイトよりさらに見やすいレイアウトにしました。表示する商品数も増やし、たくさんのポップコーンをファーストビューでチェックできるようになりました。
また、商品のランキング数も増やして人気なポップコーンが一目で分かるように配慮しました。

2.商品購入への導線を改善!

商品詳細ページ

商品購入ページでは、ファーストビューで商品購入ボタンが見えるようにレイアウトを変更して、商品を購入しやすいようなUIに調整しました。
また、「最近チェックした商品」を新しく追加し、ユーザーにとって使いやすい導線になるようにサイトを設計し直しました。

3.お買い物ガイドでさらに使いやすく!

お買い物ガイド画面

今回のリニューアルで新たに「お買い物ガイド」をページ下部に設置しました。「お買い物ガイド」を設置したことにより、いつでも送料や配送についてなど、ユーザーが知りたい情報にアクセスできるようになり、さらに使いやすいサイトになりました。

 

さいごに

今回のリニューアルにより、今まで以上に見やすく、使いやすいサイトに変わりましたので、是非アクセスしてみてもらえると嬉しいです。
そして「ポップコーンパパ」のポップコーンを是非一度ご賞味頂ければと思います。(個人的には「梅かつお」と「クリームソーダ*期間限定」がオススメ!)