見出し画像

【ブロガー向け】 Adobe XDで90秒! 簡単アイキャッチ制作!(制作データプレゼント)

日本が世界で2番目に使われていると言われているAdobe製のソフトウェアXD。

非デザイナーでも直感的に操作でき、デザイナーでPhotoshopやillustratorになれている方ならあっとういう間にマスターできる優れもの☆

UIデザインはもちろん、画像や資料まで作成できてしまう。

それでいて無料版でも十分なプロトタイピングや画像制作が可能ですから文句なしですよね♪

他のクリエイティブツールと併用でさらにクオリティアップや効率化も!

スマホアプリ版もあり、マルチデバイス対応です。

💡こんな方にオススメ!
✔︎アイキャッチ画像を作りたいけど、Photoshopやillustratorはハードルが高く、月額費用を払いたくないブロガーさん。
✔︎Canvaで良いテンプレートが見つかっても有料で断念する。✔︎Webデザイナーになりたい方(XDは実務で必須)

1.XDの概要とできること

✔︎正式版リリース→2017年10月18日
✔︎ソフト自体が軽い!
✔︎操作が直感的で初心者や非Webデザイナーでも簡単!
✔︎作業効率を上げる機能がたくさん!
✔︎UIデザイン(デザインカンプ)→サイトやアプリを制作する前の設計図
✔︎プロトタイプ→デザインカンプからどのページがどのページに遷移するのかを視覚的に表したもの。
✔︎共有→XDをインストールしていない方でもURLさえ生成すれば誰でも見ることができ、ピンを差してコメントも記入できるので、クライアント様とXD内だけでディレクションが完結できる。ファイルを更新した時も1タップでOK。
✔︎アイキャッチ画像制作
✔︎バナー制作
✔︎SNSヘッダー制作
✔︎ロゴ制作
✔︎名刺制作

UIが大好評のFashionista×Webのプロトタイプがありますので、気になる方はどんな感じなのか以下の動画をぜひご覧ください!

2.XDでアイキャッチ画像制作

1.画像の大きさと同じアートボードを作成
2.アートボードに画像を当てはめる
3.長方形ツールで全体を覆うように長方形を作成
4.塗りを黒にする
5.アピアランスで透明度を下げる
6.長方形ツールで帯のようなものを作成
7.アピアランスで透明度を下げる
8.テキストツールで文字入力
9.文字の大きさや改行を整える
10.フォントを選ぶ
11.テキストを画像の真ん中に合わせる
12.文字色を塗りで白くする
13.完成!

3.完成したアイキャッチ画像をダウンロードする方法

1.XDメニューバー左上の「ファイル」を選択
2.書き出し(書き出す前にダウンロードしたいアートボードを選択しておく)
3.選択したオブジェクト
4.保存先のフォルダを選択
5.フォーマットを選択(この動画ではPNG)
6書き出し

4.ECサイトにも活用可能

ECサイトで使うブランドロゴはもちろん、訪れた際に最初に見るヘッダーとと言われる下の画像や、

PCで見た時に横(サイドバー)にある画像、ページの一番下(フッダー)にある画像などは、実はPhotoshopやIllustratorを使わなくても制作可能なんですよ。

ハイクオリティなものは作れませんが、そこそこのものならXDで十分です。

特典1.制作データ

今までWebサイトで使う画像を作るのに制作してきたXDファイルです。

バナーやロゴ、アイキャッチ、LINEリッチメニュー、Twitterヘッダーなど様々な画像がタイプ別で整理してあります。

デザインの参考やテンプレートとしてお好きなように再利用どうぞ。

特典2.高品質でおしゃれなフリー素材がダウンロードできる媒体

PhotoshopやIllustrator未使用であれば、高品質な制作をするために尚更フリー素材は必須です。

XDはサイトの骨組みを作ることがメインのツールですので、画像を加工する機能があまり備わっていません。

しかし、最初にフリー素材をテンプレートとして配置し、いらない部分を隠したり、その上に文字や他のフリー素材のイラストなどを追加するなどしてオリジナル性を出していきましょう。

1.Photo AC 【無料・有料】

様々な高品質写真を検索してダウンロードできる。

2.イラスト AC 【無料・有料】

様々なPOPなイラストを検索してダウンロードできる。

3.PIXTA 【有料】

トップページ下の方にわかりやすくカテゴリー別で検索でき、日常や物、動物の写真が豊富。

4.pixabay 【無料】

無料で2500万点以上の高品質な写真がダウンロードできる。

5.BURST 【無料】

トップページ下の方にわかりやすくカテゴリー別で検索でき、ファッションや美容、動物、風景や街、背景、テクノロジーなど、海外の幅広い高品質な画像がダウンロードできる。

縦の画像も多くあるので、Instagramのリールの背景やストーリーズの背景に活用できる。

6.O-DAN 【無料】

海外の高品質な写真素材を他の39媒体の中から検索でき、縦の画像も多くあるので、Instagramのリールの背景やストーリーズの背景に活用できる。

7.GIRLY DROP

主に20代のレディースブランドが活用しやすい。

カテゴリーはカフェやインテリア、雑貨、花や誕生日など、名前の通りガーリーなものが豊富。

まとめ

最後まで読んでいただきありがとうございます。

XDは体験版でも有料版とほとんど変わらない機能で使うことができます。

ツールが多く複雑、かつ有料でないと良い画像が作れないPhotoshopや、実務で使えずテンプレートも有料にしないと幅が狭まるcanvaのいいとこ取りをしたのがXDです!

学習もしやすく、Adobe公式サイトにある無料のチュートリアルで体系的に学べます。

また、クリエイティブスキルが買い切り動画で学べるUdemyもあります。

90%引きの破格で購入できることもよくあるので、タイミングを見計らって先に購入し、時間を見つけて進めていきましょう。

Udemyは課題があり、各チャプターをこなして技術を身につけながら理解し、最初から実践しながら完成させる形式です。

講師に無料で何度でも質問できる機能もあるので、金額的にも時間的にも仕組みも初心者に優しいですね。

買い切りでいつでも動画を見れる点も、自分のライフスタイルに合わせた学習ができるので、最高です💡

また、WordPressの学習や制作で行き詰まった時、どんな質問も承っております☆

ログインURL変更や国外IPアドレス制限、迷惑メール・コメント制限、スマートフォンアプリでログインなど、セキュリティ対策を可能な限り施したWebサイト・HP制作をします♪


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!