Miharu

ブログの記事に使うアイキャッチって作るの難しそう・・・Photoshopも機能がいっぱいで「あー！！」ってなるし、Canvaは実務に繋がらないしでもっと手軽に作れるツールってないんですかね？

MiharuちゃんはこれからWebデザイナーになるんでしょ？当然Photoshopは使えてないとダメだけど、ブログ書くならアイキャッチにそんなに時間かけられないのはわかる。でもブロガーもやるなら自分で簡単に作れた方がいいよね！作ってくれる人を見つけるのも大変だしね。そこでMiharuちゃんも知ってるXDで作ることをオススメするよ！

Rui

Miharu

そっか！XDはサイトやアプリの見た目を整えるものだけじゃないんですね！WebデザイナーならXDは誰でも知ってるけど、非Webデザイナーでもオススメだっていってるクリエイターさん多いですよね☆

そう！今回は、XDの特徴と実際にアイキャッチ制作してるところを見せるから、一緒に作っていこう！

Rui

XDとは？

2017年10月18日に正式版がリリースされて、日本が世界で2番目に使われていると言われているAdobe製のソフトウェアで、スマホアプリ版もあります。

【特徴】

• ソフト自体が軽い！
• 操作が直感的で初心者や非Webデザイナーでも簡単！
• 作業効率を上げる機能がたくさん！

【XDでできること】

• UIデザイン
• プロトタイプ
• 共有
• アイキャッチ画像制作

UIデザインやプロトタイプは、サイトやアプリを制作する前の設計図みたいなもので、こういう見た目でどのページがどのページに遷移するのかを視覚的に表したものです。

共有はこれまた便利でして、なんとXDをインストールしていない方でもURLさえ生成すれば誰でも見ることができるという非常に優れた機能なんですね！

プロジェクトメンバー内にとどまらず、クライアント様とも気軽にやりとりがXD内でできてしまうという。

ピンを差してコメントも記入できますからね。

ファイルを更新した時も1タップでできるので、どこがどう変わったのか確認する手間もかかりません。

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

制作手順

Rui

どうかなMiharuちゃん♪XDの概要は復習できたかな？これから実際に手を動かしてアイキャッチ画像を作ってみよう！

楽しみです！まだXDをインストールしていない方はAdobeの公式HPからすぐにインストールできますからね☆

Miharu

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

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

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

まとめ

いかがでしたでしょうか？

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

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

まだまだ随時アップデートしてますし、ユーザーの声を大量に集めて進化を繰り返してるXDですので、XDに慣れておけばWebデザイナーやエンジニアになることも可能です。

XDを使い倒してXDマスターを目指しちゃってください！