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

↓サンプル画像

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

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

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

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

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

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

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

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

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

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

その他の調整

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

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

サンプルについて

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

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

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

まとめ

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

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

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

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

線画を用意する

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

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

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

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

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

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

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


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

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

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

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

線はいつでも調整できる

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

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

最後に

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

ミスタードラゴンズこと立浪和義監督のスタンプをリリースいたしました！
汎用性の高いワードを多く取り入れましたので普段使いにもってこいです！
またクリエイターズスタンプですので値段もお求めやすい120円となっています。

弊社では立浪和義監督の他にもドアラのスタンプなど沢山のスタンプを
取り扱わせていただいております。
ドラゴンズのスタンプを使って一緒にドラゴンズを応援していきましょう！

価格　120円
ご購入はこちら

ドアラも一緒に作ったドアラのスタンプ

価格　１２０円
ご購入はこちら

ドアラも一緒に作ったドアラのスタンプ 2弾

価格　１２０円
ご購入はこちら

ドアラも一緒に作ったドアラのスタンプ 3弾

価格　１２０円
ご購入はこちら

ドアラも一緒に作った「動く」スタンプ

価格　25０円
ご購入はこちら

中日ドラゴンズ 選手スタンプ 第1弾

価格　12０円
ご購入はこちら

Webに限らず、デザインを作る際はコンテンツ間の余白を意識して作ると思います。
デザインする際の余白の取り方によっては、サイトの持つイメージが大きく変わってきます。
そこで今回はより良いデザインを作るための余白についてまとめていきます。

なぜ余白が必要か

・内容をできるだけ理解しやすくするため
・特定の要素を強調し、読み手に注目してもらう
写真やボタンなどに余白を入れるほどそのコンテンツが強調される効果があります。
特にCTAボタンは周囲に余白を入れるとコンバージョン率が上がると言われています。

セクション間の余白

下の画像を見ていただくとわかるように余白があるとセクションごとのまとまりが強調され、
情報と情報の間隔が広がれば、別のコンテンツであるということが分かりやすくなります！
間隔の大きさは大体約60〜100pxくらいが多く、余白が多いサイトとなると120〜140pxほどの間隔で作られるサイトも見られます。

余白が多いサイト

余白が多いサイトは化粧品やジュエリー、アクセサリーサイトなどが多く、シンプル・高級感・洗練されているというイメージを持ちます。
最近は情報量が多くても余白を意識したすっきりとしたサイトも多いので、流行りの傾向もあるかと思います。
DEAREST

余白が少ないサイト

余白が少ないサイトはWebマガジンのサイトや通販サイトに多く見られます。情報を多く入れられるので活気があるイメージを持ちます。
北欧、暮らしの道具店

本日はホームページをhtmlなどの知識がなくても管理できるようにするCMS
「WordPress」についてご紹介いたします。

CMSとは？

コンテンツ管理システムと言われるもので、アメブロなどのようにページ制作のノウハウなどが無くても自分である程度の更新をできるようにするシステムのことを指します。

既存のブログサイトのような決まった形ではなく、自分の理想により近いブログを作れたり、
ホームページを丸々１つ作ることもできてしまいます。
通常ではホームページを変更する場合、ホームページを制作した会社に修正の依頼をするケースが多いですが、CMSを導入しておけば導入された箇所を自由に変更することができます。

どういった人が対象？

ホームページを運用するにあたって更新する時CMSが入っていない場合はホームページ管理会社へ修正依頼を出し、見積もりをしてもらい修正。
というのがよくある流れかと思います。
その場合もちろん修正費用が発生しますし、すぐに更新したいのに！というもどかしさを抱くことになります。

そんなあなたがまさに対象です！
CMSを導入すると管理画面にログインするだけで誰でも簡単にホームページの修正ができてしまします。

でもお高いんでしょう？

通常のCMSを導入をするホームページと比べるとどうしても費用はかかってしまいます！
ただ、弊社ではお打ち合わせの段階でどこの修正は自分でしたいかなどしっかりお聞かせいただきます。
その際に一部のみCMS化することでお安くすることができるなどの提案も都度させていただいています。

ご新規の作成だけでなかホームページをリニューアルしたい！というご依頼も承っていますのでお気軽にお問い合わせください！

ビジネスのブランディングにおいて重要な要素であるロゴ。ここでは無料で簡単にロゴを作成することができるサービスを２つご紹介します。いずれもユーザー登録不要、商用利用OK、誰でもすぐ使えます。

LOGO MAKER

ロゴのテキストを入力してフォントやカラー、アイコンを選択するだけで簡単にロゴを作成することができます。ダウンロードするサイズも選べて便利です。

LOGO MAKER

1.ロゴのテキストを入力します
2.フォント、文字の太さ、カラーを選択します。
3.お好みでアイコンを選択し好きな場所に配置します。アイコンのカラーやサイズは任意に設定できます。
画面右側のプレビュー画面でPCやスマホの表示、名詞や紙袋に印刷した際の表示を確認することができます。

4.完成させるボタンをクリックし、保存形式とサイズを選択して保存します。

Hatchful

ロゴのテキストを入力していくつかの質問に答えるだけで数十個のロゴを提案してくれます。

Hatchful

1.ビジネスの業界を選択する

2.デザインのスタイルを選択する

3.ビジネス名を追加する

4.ロゴをどこで使用するか選択する（複数選択可）

5.ロゴを選択する

こだわりのオリジナルデザインをプロに依頼するなら

「こだわり」や「熱い想い」「ビジョン」のこもったオリジナルのロゴをプロに制作して欲しい、というお客様にはエクスフィールドが時間が経っても⾊あせず、⻑期的にご使⽤いただけるロゴの提案をさせて頂きます。お気軽にお問い合わせください。ぜひロゴ制作のページもご覧ください。

本日は新人Webデザイナー向けにデザインの基礎知識をご紹介したいと思います。

デザインは「目的を達成するための手段」であるというように、ただおしゃれだったり綺麗なだけだと、残念ながら、集客を上げるなどの目的を達成することはできません。
今回紹介する基礎知識はデザイナーにとって当たり前に理解できているようで、新人の方は実践に移すと忘れがちになることが多いかと思うため、復習がてら読んでいただけると幸いです。

デザインの４原則

これから紹介する４原則はレイアウトの基本原則とも呼ばれ、デザイナーでない方でも情報を整理する際に役に立ちます。

①近接
要素と要素の間隔を「まとめる」ことで情報を読み取りやすくします。
関連する情報同士をグループ化することで直感的に情報の構成を理解できるようにします。
情報がグループ化されていれば読んでもらう可能性が高くなり、覚えてもらう可能性も高くなります。
グループ化する際に、関連するものとそうでないものの「余白」に差をつけることが近接のポイントとなります。
②整列
デザインの要素の位置や大きさ、色を「そろえる」ことで、バラバラに羅列された情報が一気に見やすくなります。整列は「中央揃え」「左揃え」「右揃え」に分けられますが、どのように見せたいか目的によって使い分けると良いでしょう。整列を使用すると透明の見えない線が生まれ、「左揃え」や「右揃え」にすると見えない線がより強く見えるようになります。
一般的に日本語は左から読むため、日本語の文章の可読性を上げたいなら「左揃え」にするのがベターだと言われています。
③反復
デザイン上のある特徴、フォントや色、配置など作品上で「くり返す」という法則です。
ある特徴というのはフォント、色、罫線、フォーマット、アイコンなど様々な要素です。
要素をくり返し使うことで「一貫性」が生まれ作品に統一感が生まれます。
統一感が生まれることで視線がコントロールされ、ユーザーの目がさらに惹きつけられます。
④コントラスト
コントラストは２つの要素が異なる場合に「メリハリをつける」ことで情報を差別化させることです。
上で紹介した「近接」や「整列」と違い、あえて差別化させることでユーザーの目を惹きつけてコントラストをつけます。
コントラストをつける際は、思いきりよくサイズや色を変えてわかりやすく差をつけることがポイントです。

使用する色について

RGBカラー
Webサイトはパソコンやスマホなどのディスプレイで閲覧されるので、RGBを使ってデザインします。光の三原色であるRGBは、「レッド」「グリーン」「ブルー」の3色で構成されており、色を混ぜ合わせるほど明るい色になり白に近づいていきます。
CMYKカラー
印刷物の色を表現する際は、CMYKを使います。
「シアン」「マゼンタ」「イエロー」「キープレート」（ブラック）で構成されており、RGBとは逆で混ぜ合わせるほど暗い色になります。

印刷物を入稿する際にRGBからCMYKに変換することがありますが、CMYKをRGBに変換すると通常のRGBに比べ、くすんだ色になってしまうので注意が必要です。

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

情報整理

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

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

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

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

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

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

視線誘導

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

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

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

余白でグルーピング

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

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

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

まとめ

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

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

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

Page Ruler Redux

webページに表示されている画像やセクションや要素などの高さや幅、マージンなどをピクセル単位で測ることができます。

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

ColorZilla

Webサイトデザインをする際、ヘッダーの色使いを真似したい、この要素の色は何色だろう？など、そんな時に便利な色取得ツール「ColorZilla」を紹介します。

使い方はChromeの画面右上にあるスポイトマークのアイコンから、「Pick Color From Page」をクリックします。
するとカーソルが出てくるのでページ上で取得したい色をクリックします。取得した色は自動的にクリップボードにコピーされます。

CSS Peeper

「CSS Pepper」はWebサイト内の要素をクリックするだけで、色や幅や高さ、padding、margin、font-familyなどを一発で調べられる拡張機能です。
Page Ruler Reduxと似ていますが、CSS Pepperの方が一発で様々な情報を取得できます。

使い方はChromeの画面右上にある「P」のマークをクリックします。すると、すぐにCSS Pepperがサイトを解析して、OGP画像（SNSでシェアされる時の画像）、タイトル、bodyに設定されているfont-familyをパネルで表示してくれます。
表示されているパネルの下にある「水玉」のアイコンをクリックすることで、表示されているページに使用されている全ての色のカラーコードが表示されます。
また、要素の余白やフォントを調べる際には、起動している状態で、特定の要素をクリックします。
するとパネルに、要素のサイズや余白、フォントサイズ、要素の文字色などクリックした要素の情報が表示されます。