作者別: K

シンボルを使って効率的にデザインしよう!

こんにちは。デザイナーのMです。
最近というかここ数年、デザイン作業をする際は、ほぼほぼSketchに置き換わっております💻
https://www.sketch.com
バージョンも日々アップデートされており、どんどん使いやすくなっていっています。
今回はそんなSketchの便利機能の一つ、「シンボル機能」をご紹介したいと思います。

シンボル機能とは

ketch上でUIパーツやオブジェクトを一括管理するための機能です👽

アプリのデザインをする際、ナビゲーションバーや共通ボタンなど共通で使いまわしたいUIパーツが出てくると思います。
もしそのパーツ全てに修正が入った場合、UIパーツを一つ一つ変更しないといけなくなり、時間がかかる上に修正漏れなどが発生しがちになります😩
そこでシンボル化です!

UIパーツをシンボルにすれば、そのパーツを修正するだけでデザイン上の全てのパーツを一発で変更することができます。
それでは簡単ですがシンボル化のやり方をご説明します💁

1.オブジェクトからシンボル化する

シンボル化するには、シンボルにしたいオブジェクトを選択して、”右クリック > Create Symbol“を選択するだけです。


2. シンボルページでシンボルを管理

シンボル化されたパーツは、Sketch画面の左上にある”PAGES > Symbols“で管理します。


このように作成したシンボルを管理できます。

3. シンボルの使い方

デザインページに戻り、シンボルと同じサイズのオブジェクトを作成します。

そのオブジェクトを選択して、”右クリック > Replace With > 作成したシンボル名“をクリックすればシンボルをデザイン上に設置することができます🙌

4. 一気にパーツを修正!

最後にシンボルを変更して一気にパーツを変更してみましょう😎

シンボル管理ページに戻り、変更したいシンボルを選択して修正します。
修正するとデザインページ上に設置したパーツもリアルタイムで置き換わります。最初できたときちょっと感動しましたw

シンボルページでシンボルの色を変えると…

デザインページにもすぐに反映🙌
このパーツを色んな所で使用しているデザインの場合、デザイン修正がこの作業だけで完了します。あとは書き出すだけ!

デザインを効率化しよう🚀🚀

というような感じで、シンボル機能はSketchを使用してアプリのデザインをする際にとても重宝する機能です!

使い方はとても簡単なのでぜひチャレンジして効率的にデザインをしてみてください〜👍


高品質デザインツール Canvaを使ってみた。

こんにちは。デザイナーのMです。
今回は無料で美しいグラフィックデザインを作成することができる「Canva」というサービスを使ってみました。

Canvaとは?

CanvaはPCブラウザ、アプリ(iOS/Android)で利用できる、無料グラフィックデザインツールです。

グラフィックデザインを無料で簡単作成 – Canva
https://www.canva.com/ja_jp/

豊富なテンプレートから用途にあったデザインを選んで、カスタマイズするだけで高品質なグラフィックデザインを誰でも簡単に作ることができます。

わかりやすいホーム画面

登録すると最初に表示されるホーム画面です。
・デザインを作成
・あなたのデザイン(作成済みのデザインがある場合のみ表示)
というシンプルなダッシュボードで、とてもわかりやすいです。

デザインテンプレートも
・ソーシャルメディア
・Instagramの投稿

などの各種SNSに対応した最新のテンプレートから、
・店舗のメニュー表
・パンフレット
・商品券
などの印刷物のデザインテンプレートまであって種類がとても豊富です。

今回はこのブログ記事のヘッダー画像を作成してみながら、Canvaを使ってみようと思います。
※記事中のスクリーンショットがPCブラウザのものになるので、アプリ版とは多少違う部分があるかもしれません。ご了承ください。

デザインを作ってみる

それでは早速ですが、テンプレートからデザインを作ってみようと思います。
ホーム画面のテンプレート一覧から「Blogバナー」をクリックします。

ブログで一般的に使用されるサイズで真っ白なアートボードが表示されました。
画面左側に、メニューとデザインテンプレートが表示されています。右下に(無料)と書いてあるものは無料で利用できます。
それ以外もデザインの背景にCanvaロゴの透かしが入りますが利用することができます。この透かしは有料で削除することも可能です。

今回は無料のテンプレートを選んでみました。

このままでも普通に利用できるオシャレなテンプレートになっています。
このテンプレート上の文字をクリックするとすぐに編集することができます。

多数のフォントや文字色の変更もツールバーからすぐに変更することができます。非常に直感的で初心者の方でも使いやすいのではないかと思います。

背景画像も豊富な素材が用意されていて自由に差し替えることも可能です。自分の持っている画像を挿入することもできます。
また簡単な写真フィルターなども用意されており、ちょっとした画像編集も可能になっています。
フォントの組み合わせもデザイナー顔負けの色んなパターンが用意されているので、どれにしようか悩むのもいいかもしれません。

あっという間にバナーの完成!

数クリックでバナーが出来てしまいました。時間にして5分もかからなかったと思います。
作成したデザインは、pngやjpg、PDFでダウンロードすることができます。
いつもはIllustratorやPhotoshopでデザインを作成していますが、簡単なデザインラフや今回のブログなどで利用する記事内の画像などはCanvaで作るのでも十分かもしれません。


また機会があれば、ぜひ使ってみようと思うことのできるサービスでした^^

グラフィックデザインを無料で簡単作成 – Canva
https://www.canva.com/ja_jp/


デザインでよく使う配色ツール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

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

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