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で構成していくパターンもあります。

まとめ

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

  • ブログ

Gitを使ってコーディングデータのバージョンを管理しよう!

チームでコーディングする際、どうやってバージョン管理をしていますか?
ホームページを作る際、Aのページは○○が担当、Bのページは▲▲が担当。
みたいなシチュエーションはたくさんあると思います。

その際に思い浮かぶのがMacだとAirdrop、WindowsPCとの共同であれば、
googleドライブ、One Driveなどのクラウドストレージ。
もしくは古いものだとHDDやSDカードなど・・・。

こういったデータの受け渡しをする場合、Aのページを更新していたのを知らずに、
▲▲がAのページを上書きしてしまいバージョンがぐちゃぐちゃになる・・・、なんて事故を
見かけた事がある人は少なくはないと思います。

そういった事故を未然に防ぐためにおすすめなのがバージョン管理ソフトです。
弊社でもGitHubを使用しています。

今回はGitHubを使っていて便利になった!と思う点を紹介していきます。

1.データ共有が簡単になった

前述した通り、データの上書き事故や間違えて旧バージョンを所持したままアップロードしてしまうなどの怖い事故が未然に防げるようになりました。
項目2でもお話しますが、誰がどのようなデータを更新しているかが一目で分かるので、そういったストレスから解放されるのは些細ながらも大きいです。

2.バージョン管理が分かりやすくなる

「誰がどのタイミングで何を更新したか」というものをリスト化してくれているので、
簡単に過去の作業を振り返ることが可能です。
また、同時にデータを更新しようとすると競合しているという旨のメッセージが表示されるので、
同データを触っていた際の事故も格段に減りました。

3.豊富な知見

GitHub限定とはなってしまいますが、バージョン管理と言えばというくらいGitHubは有名で、
エンジニア、コーダーに広く使われているので分からない事があっても調べれば比較的なんでも出てくるのが強みだと思います。

コミットやマージなどカタカナ言葉が多く取っ付きづらい!と思う方も多々いるかと思いますが、
いざ触ってみると意外と何でもなくて、それよりも得られるメリットの方が大きいと感じます。
新しいものを導入することは勇気がいることですが一度ご検討頂いてみてはどうでしょうか?

  • デザイン
  • ブログ

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

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

↓サンプル画像

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

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

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

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

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

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

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

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

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

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

その他の調整

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

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

サンプルについて

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

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

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

まとめ

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

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

  • デザイン

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

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

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

線画を用意する

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

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

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

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

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

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

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


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

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

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

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

線はいつでも調整できる

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

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

最後に

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

  • お知らせ

中日ドラゴンズの「立浪和義」新監督のスタンプをリリースしました!

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

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

価格 120円
ご購入はこちら

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


価格 120円
ご購入はこちら

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


価格 120円
ご購入はこちら

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


価格 120円
ご購入はこちら

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


価格 250円
ご購入はこちら

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


価格 120円
ご購入はこちら

Webデザインの余白
  • ブログ

Webサイトをデザインする際の余白について

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

なぜ余白が必要か

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

セクション間の余白

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

余白が多いサイト

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

余白が少ないサイト

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

  • ブログ

WordPressを導入して簡単HP運用!

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

CMSとは?

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

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

どういった人が対象?

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

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

でもお高いんでしょう?

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

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

  • ブログ

無料で簡単にロゴを作成できる便利なサービス

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

LOGO MAKER

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

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

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

Hatchful

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

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

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

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

4.ロゴをどこで使用するか選択する(複数選択可)
Hatchful5

5.ロゴを選択する
Hatchful6

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

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

デザイン基礎知識
  • ブログ

WEBデザインの基礎知識

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

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

デザインの4原則

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

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

使用する色について

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

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

Contact

猫と本棚

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

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

メールでのお問い合わせ

お電話でのお問い合わせ

TEL:052 - 938 - 4891

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

PAGE
TOP