Blogブログ

記事一覧

カテゴリー:デザイン

  • デザイン

様々なデザインソフト

今や様々なデザインソフトが存在します。
本日はソフトの種類・内容についてお伝えいたします!

デザインソフトの種類

ダイアグラム作成
ダイアグラム作成(作図)ツールとは、フローチャートや構造、枠組みの資料といったビジネスで用いる図などを簡単に作成できる製品です。

作成ソフトはこちらです。
・Canva
・Miro 等

最近では Canvaが有名だと思います!

Canvaとは?

Canvaは、オーストラリア発の画像デザインソフトです。無料プランでも十分に利用することができるので、とても人気のソフトになっています。
Webブラウザ上のほか、アプリ上でも利用することができます。パソコン・スマホでも直感的に使用することができます。
Canvaを利用することで、これまでハードルの高かった画像作成を簡単に行うことができます。
PhotoShopやIllustratorなどのプロが使うソフトを使うのは少々自信がないという人も多いのではないでしょうか。Canvaはそのようなレベル感と利用用途の方におすすめのソフトです。

グラフィックデザイン
グラフィックデザインとは、さまざまな描画ツールを利用して、印刷物のデータ作成、写真や画像の編集/加工、オリジナルのアートワークの作成などを行えるツールです。

ソフトはこちらです。
・Illustrator
・Photoshop 等

印刷物を作成する際によく使われるのはIllustratorだと思います。

Webデザイン・アプリデザイン
Webデザイン・アプリデザインとは、Webページやアプリを作成・編集・更新するための機能を提供するツールだ。ワイヤーフレームの作成や細かなデザインを作成するソフトです。

主に
・Illustrator
・Photoshop
・XD
・Figma 等
です。

FigmaはAdobeソフトのXDと使用が似ており、さらに無料で使用することができるため人気のソフトです。

また、デザインの工程で
ワイヤーフレームはXDで作成する→デザインをする際はIllustratorやPhotoshopを使用するということもできます。
最近ではXDが容量が軽く使用しやすいこともあり、重要なデザインはIllustratorやPhotoshopで作成し、書き出した後にまとめてXDで構成していくパターンもあります。

まとめ

用途によって使用することで、満足のいくデザインを作成することができます。
無料で使用できるソフトもいくつかありますので、気になる方は一度使用して見てください♪

  • デザイン
  • ブログ

Photoshopの小技(スタンプツール編)

本日はスタンプツールにて対象のものを増やしたり消したりする小技を紹介していこうと思います!
まずはサンプルとなる画像を用意します。

↓サンプル画像

対象のものを消したいとき

フォトショップを起動して該当する素材を選択後、

コピースタンプツールを選択します。
コピーしたい部分をOption+クリックで選択選択後に消したいところをなぞっていきます。

対象のものに全て塗り終えると・・・

画像のように一羽消すことができます。

次は対象のものを増やしたい場合

コピースタンプツールというのは対象のものを量産することもできます。

コピースタンプツールをクリックしたあと、画面の上に「調整あり」というのがあります。
四角の中のチェックを外します。
OptionまたはAltキーを押しながらコピーした場所が移動することなく固定できます。
チェックマークがついてると、コピーした場所は自分がカーソルを動かすと共に動いてしまうのです。
設定方法ができたら増やします。
方法は先ほどと同じoption+クリックをします。
これでコピーが完了です!

コピーした場所は移動しないので、どんなに自分がカーソルを動かしていろんなところを塗っても鳥が出てきます。
今回は鳥を増やしたいので鳥をスタンプ!

試しに量産してみました!

その他の調整

その時々でブラシの調整をします。

コピーしたあとに塗っていく作業で使うブラシの直径と硬さを変えることができます。
直径は、ブラシの大きさ(太さ)のことです。
硬さは低いとブラシの周りがほわっとして、硬くするとくっきりしたブラシになります。
また、不透明度や流動で他の設定も可能です。

サンプルについて

コピースタンプツールを使う時のサンプル(コピーする場所)を3つの中から選ぶことができ、特徴があります。

◆現在のレイヤー:レイヤーを増やさずにコピースタンプツールを使う場合
◆現在のレイヤー以下:レイヤーを増やしてコピースタンプツールを使う場合
◆全てのレイヤー:レイヤーを増やしてコピースタンプツールを使う場合
 
写真と同じレイヤーにコピースタンプツールを使う場合は、現在のレイヤーを使います。
あとで直すことを考えると新しいレイヤーを増やしてコピースタンプツールを使った方が効率が良いです。

修正する可能性がある場合は、『現在のレイヤー以下』または『全てのレイヤー』にチェックを入れてから作業を進めましょう!

まとめ

今回はコピースタンプツールは増やしたり消したりをできます。
ツールを使いこなすことで様々な対応ができます!

ぜひ参考にしてみてください♪

  • デザイン

ラフなイラストをillustratorで直感的にザクザクと色塗りする方法

みなさんはパソコンを使ってイラストを描くことはありますか?
Illustratorでイラストを描くのって直感的に描けないから苦手…という方も多いのではないでしょうか。
Illustratorって線がしっかり繋がってないと色が塗れないイメージがありますよね。
でも、実は案外簡単に色塗りができちゃうんです…!

そこで、もっとザクザク塗りたい!という方におすすめな超時短技「ライブペイント」をご紹介します!
ライブペイントを使うと、線がしっかり繋がっていなくても、塗り絵みたいにワンクリックでサクサクと塗っていく事ができるので、CGイラスト初心者さんにもおすすめです。
ベクターイラストでこれができるのは結構ありがたいですよね!

線画を用意する

今回はエクスフィールドの部長(丸いネコ型r…)と平社員?に色を塗って行きます。

ブラシツールで簡単に書いたようなイラストで、全然線がくっついてないですがとりあえずこんなので大丈夫です!

IT戦士エクスフィールドのLINEスタンプはこちら

線画を全て選択してオブジェクト>ライブペイント>作成

これだけで、塗り絵の線画が完成です!
※特殊なカスタムブラシなどを使用していると線がリセットされてしまうので、基本のブラシを使用しましょう。

ライブペイントツールで好きな色を塗っていく

ライブペイントを作成したらブロックごとに好きな色を塗っていく事ができるようになりました。
ライブペイントツールを選択し、塗りたい色を選択します。


あとは塗りたいブロックを選択してクリックするだけ。

▲ブロックができない場合
ブロックを認識せず、塗れないよーというときは、隙間が開き過ぎている可能性があります。
ダイレクト選択ツールで線をくっつけて隙間を少なくするなどすればまた塗れるようになります。

オブジェクト > ライブペイント > 隙間オプション で塗りの許容サイズを調整する事ができます。

カスタムで数値を上げれば、大きな隙間があってもブロックとして認識してくれるので塗りつぶす事ができます。

線はいつでも調整できる

塗り終わった後に線の位置を微調整したいということもあると思います。
安心してください、塗り終わった後でもダイレクト選択ツールで調整できます!

ここがベクターイラストのいいところですね♪
ただ、隙間を開けすぎてしまうと塗りが解除されてしまうので再度ブロックを作り塗る必要があります。
線幅や線種もパーツごとに変更可能です。

最後に

ライブペイントツールは簡単に素早く作成できますが、全てのパスと塗りが複合パスのように合体した状態になるので、作成した後にパーツをバラバラに分けるとかはしにくい面があります。
ただ、落書きのような一枚絵をサクッと作りたいときは作業効率も上がるし、上手く使えばとても便利な機能なので覚えておくと便利です。

  • デザイン
  • ブログ

レイアウトの構成

本日はレイアウトについてお話ししたいと思います。
人は誘導されているものに従って目線を無意識に動かしています。
デザイナーは制作前の構成を考えてデザインすることが大切です💡

情報整理

まずは情報整理が必要です。

サイトを作成する際に
ロゴ・写真・タイトル・文章など様々な要素をつなぎ合わせていくと思いますがこの時に要素の中で優先順位を決めいていくことがとても大切です。

もちろん、サイトによって優先順位は異なるのでクライアントとの打ち合わせの際に何を一番ユーザーに目を止めて欲しいのかを理解しておくことが必要です。

情報整理の次に関係性を整理します。

例えば、キャッチコピーの下にロゴを配置すると、ユーザーにはしっかりと伝えることができません。
この場合、基本的にはコピーの下には説明文などが必要かと思われます。

優先順位と関係性を整理したら大まかな、まとまりが見えてくるはずです。
ノートに書き出すことで後に見返したり、頭の中で整理しやすくなります。

視線誘導

情報整理ができたら視線誘導を意識しながら
ワイヤーフレームを作成していきます。

こちらはインターネットで検索したらすぐにヒットするものも多いかと思われますが
・Zの法則
・Fの法則
・Nの法則
など人間の目線誘導を意識した情報が既に存在しております!
一度調べてみてください。

Zの法則で言うと
人間が左から右に流れる性質を利用しているレイアウト方法です。
知識として知っておくと頭でイメージしやすいので調べてみてください。

余白でグルーピング

ホームページをデザインする際に要素ごとに余白が違っていると思います。
これは余白を生かして情報整理されているから見やすくなっているのです。

例えば、キャッチコピーの下にテキストを置きますが
この時にコピーとテキストがスクロールするほど離れていると
結びつきがないと感じてしまい、結果何が伝えたいの分からなくなってしまいます。

できるだけ要素同士は近くに
セクションが違えば余白は開けることを意識しましょう!

まとめ

情報整理はデザインをする上でとても大切な作業です。
ここをおろそかにしてしまうとデザインの作成に時間を取られたり
ユーザーに離脱率がグッと下がってしまいます。

様々なサイトを見てどのように配置されているのかを見て、今後デザインを制作する際に
意識してみましょう!

webdesigner
  • デザイン
  • ブログ

Web制作の効率化!Google Chrome拡張機能

こんにちは!エクスフィールドの新人Webデザイナーです!
本日はWEB制作をする上で、入れておくと作業の効率が圧倒的に良くなるGoogleChromeの拡張機能を3つご紹介いたします。

Page Ruler Redux

webページに表示されている画像やセクションや要素などの高さや幅、マージンなどをピクセル単位で測ることができます。
PageRulerRedux
使い方は簡単です。Chromeの画面右上に表示されているPage Ruler Reduxのアイコンをクリックすると、マウスカーソルが大きな「+」に変わり、画面上部に数値を表示するバーが表示されるます。マウスカーソルをブラウザの画面上で測定したい位置の視点で一度クリックし、そのまま測定位置の終点までドラッグしてください。

ColorZilla

Webサイトデザインをする際、ヘッダーの色使いを真似したい、この要素の色は何色だろう?など、そんな時に便利な色取得ツール「ColorZilla」を紹介します。
colorzilla
使い方はChromeの画面右上にあるスポイトマークのアイコンから、「Pick Color From Page」をクリックします。
するとカーソルが出てくるのでページ上で取得したい色をクリックします。取得した色は自動的にクリップボードにコピーされます。

CSS Peeper

「CSS Pepper」はWebサイト内の要素をクリックするだけで、色や幅や高さ、padding、margin、font-familyなどを一発で調べられる拡張機能です。
Page Ruler Reduxと似ていますが、CSS Pepperの方が一発で様々な情報を取得できます。
CSS Pepper
使い方はChromeの画面右上にある「P」のマークをクリックします。すると、すぐにCSS Pepperがサイトを解析して、OGP画像(SNSでシェアされる時の画像)、タイトル、bodyに設定されているfont-familyをパネルで表示してくれます。
表示されているパネルの下にある「水玉」のアイコンをクリックすることで、表示されているページに使用されている全ての色のカラーコードが表示されます。
また、要素の余白やフォントを調べる際には、起動している状態で、特定の要素をクリックします。
するとパネルに、要素のサイズや余白、フォントサイズ、要素の文字色などクリックした要素の情報が表示されます。

  • デザイン
  • ブログ

ホームページに使用される配色について

本日は日頃何気なくみている、サイトの配色についてお話したいと思います。

サイトを制作するにあたり、サイトのデザインは
イメージをつけるためのとても大切な要素です。

配色の基本

基本は3色使用します。
あまり使いすぎるとバランスが悪くなるので3色程度にまとめることをおすすめします。
役割はベースカラー、メインカラー、アクセントカラーです。

比率はベースカラー70%メインカラー25%アクセントカラー5%をもとに作成します。
単位設定

それぞれの役割は?

ベースカラーは背景色に使用されることが多いです。

メインカラーは際立たせたい色を指します。
サイトのイメージなどによってこの色を選びます。

アクセントカラーはサイトで1番目立つ色を指します。
LPなどの広告サイトを見るとよくわかりますが、目立たせたいボタンや文字などに使用されることが多いです。

ポイント

ベースカラーは背景色に使用されることが多いため、
邪魔にならない白色、灰色などを選ぶのをおすすめします。

メインカラーはサイトのイメージとなる色なので、
ヒアリングを行い、サイトをどのように見せていきたいかでカラーを決めます。
ここはサイトによって色を使用します。

アクセントカラーはメリハリをつける色を使用します。
例えば、クリックしてほしいボタンをメインカラーと似た色にしてしまうとみてほしい部分がユーザーには届きません。
なのでここぞとばかりに目立たせましょう!
おすすめはメインカラーとは逆の色、明度や彩度に差をつけるなど工夫をすることで目立たせることができます。

まとめ

サイトを見ているユーザーにはどのようにイメージされるのかを考えることが大切です。
弊社ではロゴ、webなど様々制作が可能です。お困りのことがあればお気軽にご相談ください。

Contact

猫と本棚

エクスフィールドへのお問い合わせ。

ホームページやポスター、LINEスタンプ等々何かを作りたいけどなかなか作れずに困っている皆様。
エクスフィールドに相談してみませんか?ご相談は無料ですので、いつでもお伺いいたします。

メールでのお問い合わせ

お電話でのお問い合わせ

TEL:052 - 938 - 4891

受付時間:10:00~18:00(平日)

PAGE
TOP