今までデザイン系のソフトを触ったことがない！ という人にも分かるように、はじめっからひとつひとつ、ソフトの使い方を解説していきたいと思います。
左クリック、ドラッグ＆ドロップ、ファイルの保存、WEBの操作など、基本的なWindowsの使い方はわかってるよーって人向けです。
Affinity by Canva（Affinity3）のインストールがまだの人は以下の記事を参照してください。
今後、Affinity3という呼び名で統一していきます。
Affinity by Canva のインストールの仕方
Affinity by Canva のインストールの仕方
1.新規ドキュメントを作成する
Affinity3を起動すると、メイン画面とWelcome画面、２つのウィンドウが表示され、こんな感じの画面になるかと思います。
まったく一緒じゃなくても大丈夫です。
説明に使っているバージョンは3.0.1なので、バージョンが違ったり環境が違ったりすると、細かいところが違ってきます。
一緒にならないなー、とか分からないところがあったら、とりあえず飛ばして、分かるところだけやってみて下さい。
とりあえず触る回数を増やして慣れていくのが、上達への近道です。
【Note】
Affinityを開いてもWelcome画面が出てこない、という時は、左上の白いAffinityアイコンをクリックしてください。
とりあえず初心者講座１では、図形と文字を入力して、JPG画像を描き出すところまでやりたいと思います。Affinityを開いてもWelcome画面が出てこない、という時は、左上の白いAffinityアイコンをクリックしてください。
1.Welcome画面の右上にある、緑の「＋」ボタンをクリックする
緑の「＋」ボタンを押すと、プリセット（あらかじめ設定された用紙サイズや基本設定）が表示されます。
プリセットが並ぶところでマウスのホイールをくるくる回すと、上下に移動することができます。
右側にあるスクロールバーで移動してもＯＫ。
右側に表示される「ドキュメント設定」をいじることで、プリセットにはないものを作ることができます。
2.右下にある「ドキュメントを作成」を押し、ドキュメントを作る
下の方に移動して、とりあえず今回は ビデオおよびウェブ カテゴリにある「ＨＤ 720p（1280px×720px）」を選び、右下にある「ドキュメントを作成」をクリックしましょう。
Youtubeのサムネイルが「ＦＨＤ1080p（1920px×1080px）」なので、それより一回り小さいサイズです。
右下にある「ドキュメントを作成」を押すと、真っ白いドキュメントが作られます。
文字や図などが組み合わさってできたファイルの事を「ドキュメント」と呼びます。
ドキュメントは英語で「文書」「書類」「記録物」などの意味です。
左の方に並んだアイコンたちのことを「ツールパネル」といいます。
図形を描いたり、文字を入力したり、グラデーションを作成したり、「何かしたい」という時はこのツールパネルからいろいろな機能を選んで作成します。
ちなみに、一番上の「ファイル」や「編集」など並んだ項目の事を「メニュー」と言います。
これは他のソフトでもよく使いますよね？
作業ごとにジャンルが分けられ、その作業をしたいときに使います。
ファイルの下にあるバーを「ツールバー」
そのさらに下にあるものを「コンテクストツールバー」と呼びます。
ツールバーはスタジオ（後日説明）の切り替えや、頻繁に使う項目などが表示されています。自分でカスタマイズ可能。
コンテクストツールバーは、現在使っているツールでよく使う項目が自動的に出てきます。便利機能。
コンテクスト(context）＝「文脈」「背景」といった意味です。
名前がちょっと覚えにくいですが、基本「バー」という名前がついていたら、「横に長いメニューだな」と覚えておくといいです。
【Note】
ツールバーが表示されていないときは、メニューの「表示」－「ツールバーを表示」にチェックを入れて下さい。
コンテキストツールバーが表示されていないときは、メニューの「表示」－「コンテキストツールバー」－「表示」にチェックを入れて下さい。
大体、何か足りないなって時は、メニューの「表示」から呼び出すことができます。
ツールバーが表示されていないときは、メニューの「表示」－「ツールバーを表示」にチェックを入れて下さい。
コンテキストツールバーが表示されていないときは、メニューの「表示」－「コンテキストツールバー」－「表示」にチェックを入れて下さい。
大体、何か足りないなって時は、メニューの「表示」から呼び出すことができます。
2.図形を挿入する
それでは早速図形を描いてみましょう。
1.左のツールパネルから「長方形ツール」をクリックする
※ツールパネルが違う、という時は、上の方にある「ピクセル」をクリックしてください。
画像編集に特化したメニューが表示されます。
スタジオの使い方については次回以降で解説予定(=・ω・=)
2.左上をクリックし、ボタンを押したまま右下までドラッグし、いいところでボタンを離す。
マウスの左ボタンを押しながら、好きな大きさになるまでドラッグしてください。ボタンを離すと長方形を描くことができます。
描いた図形やテキスト、画像など、ドキュメントにある物体のことを「オブジェクト」と呼びます。
これから、この四角のことを「オブジェクト」と呼ぶので、頑張って覚えて下さい。
とりあえず、画面上にある「もの」のことです。
ドラッグするときに「Shiftキー」を押すと、縦横同じ長さの正方形を描くことができます
描き終わると、四角の縁が青くなり、白丸がいくつか表示されます。
この白丸がついた枠のことを「バウンディングボックス」といいます。
オブジェクトを選択すると、この「バウンディングボックス」が表示されます。
用語がちょっと難しいですが、説明に必要なので頑張って覚えてもらえると嬉しいです(=・ω・=)
記憶はしないでいいです。だいたい「あ、これのこと言ってるのかなー」と察せられるレベルでＯＫです。
ちなみに、バウンディング（Bound-ing）は物体を包む範囲、境界、という意味です。
3.左側のツールパネルから、一番上にある「移動ツール」をクリックする
今後、この移動ツールをたくさん使うので、覚えておいてください。
移動ツールの状態で、オブジェクトをクリックすると、オブジェクトを選択することができます。
選択するとバウンディングボックスが表示されます。
4.四角をドラッグ＆ドロップで好きな位置に移動させる
バウンディングボックスが表示されている状態で、移動ツールを使って四角をドラッグ＆ドロップすると、オブジェクトを好きな位置に移動できます。
3.図形の大きさを変えてみる
1.移動ツールを選択する
左のツールの一番上にあります。今後、移動ツールの説明は省略します。
2.バウンディングボックスの白い丸のところに、カーソルを合わせる
白い丸の近くにカーソルを持っていくと、カーソルが矢印の形に変わります。
3.ドラッグでサイズを変更する
カーソルの形が変わった状態でドラッグすると、オブジェクトの大きさを変えることができます。
また、角にカーソルを合わせると、縦と横の大きさを同時に変えることができます。
ドラッグしている最中に「SHIFTキー」を押すと、縦横比を固定して拡大縮小できます。
また、回転させたいときは、上に飛び出ている白丸の上か、角の白丸のちょっと外側にカーソルを持っていくと、カーブした双方向の矢印アイコンが出てきます。
その矢印アイコンが出ている状態でドラッグすると、回転させることができます。
回転時に「SHIFT」を押すと、15度刻みで回転できます。
4.色を付けてみる
今度は書いた図形に色を付けてみましょう。
1.移動ツールの状態で、描いた四角をクリックして選択する
2.コンテキストツールバーから、オブジェクトの塗りをクリックする。
オブジェクトをクリックすると、そのオブジェクトを編集するのによく使われる項目がコンテキストツールバーに出てきます。
3.好きな色を選ぶ
オブジェクトの塗りをクリックすると、色を選択するパネルが出てきます。
スライダーを動かして、好きな色を選びましょう。
下の方にある虹色の四角部分をクリックして大体の色を選び、スライダーで微調整すると楽です。
初めての人は、「ＨＳＬ」スライダーや、ＨＳＬカラーホイールから色を選ぶと楽かも。
左上にあるプルダウンメニューから、色の選び方を変えることができます。
カラーパネルの使い方についてはそのうち書く予定(=・ω・=)
4.コンテキストツールバーから、「オブジェクトの境界線」もクリックして、好きな色を塗る
オブジェクトのフチに色を付けることができます。
塗りをなしにしたいときは、カラーパネル右上の、丸に斜線が入ったマークをクリックしてください。
今まで学んだことを振り返って、以下のように四角がふたつ並んだものを作ってみましょう。
1.長方形ツールで、Shiftを押しながらドラッグし、正方形を描く
2.選択ツールを使って、バウンディングボックスの上に飛び出た部分を掴み、Shiftを押しながら45度回転させる
3.四角を選択した状態で、コンテキストツールバーの「オブジェクトの塗り」から水色を選ぶ
4.四角を選択した状態で、コンテキストツールバーの「オブジェクトの境界線」から色をなしにする
5.同じように長方形を描き回転させて、塗りを紫色にして、隣に並べる
ここまでできたでしょうか？2.選択ツールを使って、バウンディングボックスの上に飛び出た部分を掴み、Shiftを押しながら45度回転させる
3.四角を選択した状態で、コンテキストツールバーの「オブジェクトの塗り」から水色を選ぶ
4.四角を選択した状態で、コンテキストツールバーの「オブジェクトの境界線」から色をなしにする
5.同じように長方形を描き回転させて、塗りを紫色にして、隣に並べる
四角の位置と角度ですが、見本とまったく一緒にしなくていいです。
ちょこっと傾いていた方がおしゃれかもしれません。大きさも一緒じゃなくていいです。
色も、お好きな色に変えてもらってかまいません。
覚えた操作を駆使して、自分の感性を爆発させてください。
作っているうちに「あれ、これどうすればいいの？」という問題が浮かぶと思いますが、どこかにメモしておいて、とりあえずこのまま進めてしまいましょう。
完璧は目指さないでいいです。完璧主義者は人生で損をします（私の事です(´・ω・`)）
進めていくうちに、メモに書いた内容がいつの間にかできているようになります。
「あの時できなかったこれができるようになったんだ！」という感動につながるので、分からないことがあったらとりあえずメモをして、進めてしまうのをオススメします。
講座を終えて、まだそのメモが解決していなかった場合は、講座の最終回後にコメント頂けると嬉しいです。
講座の回数を、その問題分増やします(=・ω・=)
とりあえず、最初の「講座その１」では四角を二つ並べるところまで、できるようになりましょう。
5.文字を入れてみる
最後に、作った作品に自分の名前を入れてみましょう。
1.左にあるツールパネルの、下にほうにある「アーティスティックテキストツール」をクリックする
ちなみに、ツールの右下に 」 がついているものは、長押しすると関連した別のツールが出てきます。
今回は「アーティスティックテキストツール」の方を選んでください。
2.左上から右下にドラッグして、文字のサイズを決める
ドラッグするとサンプルの「Ａ」が表示されます。
このＡの大きさで文字が入力されるので、好きな大きさになるようドラッグしてください。
3.自分の名前を入力する
キーボードを使って、自分のペンネームを入力してください。
4.移動ツールを使って、文字や四角の位置や大きさを微調整する
移動ツールで文字や四角の位置や大きさを微調整します。
バウンディングボックスを掴むと、文字のサイズを調整することができます。
5.文字を選択した状態で、コンテキストツールバーから「フォントの色」をクリックし、文字に好きな色を付ける
色の選び方は、先ほど長方形を塗った時と同じです。
6.移動ツールで位置や大きさを変えたり、色を付け直したりして微調整する。
繰り返しになりますが、作業していて「あれ？ これやりたいけどどうしたらいいんだろう？」というのが出てきたらメモしておいて、先に進んでください。
講座を進めていくと、その疑問が解決していくと思います。
疑問が解決したら、そのメモに線を引いて、自分の成長を喜びましょう(=・ω・=)✨
かっこいい感じにできましたでしょうか？
それではできたものを保存してみましょう。
6.保存する
1.メニューから「ファイル」－「保存」をクリック
2.名前を付けて保存する
好きな場所に好きな名前を付けて保存しましょう。
例えば「講座01」とか。
保存すると、その名前がついた「.af」ファイルが作成されます。
あとでまた変更を加えたいときは、このファイルを開けば続きから編集することができます。
また、ファイル保存はできるだけ早い段階で行い、作業中もこまめに保存することをオススメします。
停電や不慮の事故でパソコンが落ちてしまったとき、保存しておけばそこからやり直すことができます。
Ctrl＋Ｓ のショートカットキーで保存／上書き保存できるので、覚えておいてください。
7.jpg書き出しする
「.af」ファイルは、Affinity3で編集するためのファイルなので、Twitter（X）などに直接投稿することができません。
なので、WEBで一般的に使われる形式「jpg（ジェイペグ）」形式でも保存してみましょう。
1.メニューから「ファイル」－「エクスポート」をクリック
2.エクスポートパネルが表示されるので、左上にある「JPG」をクリックし、「JPEG（高品質）」を選択。右下の「書き出し」ボタンを押す
左側で選んだ設定が、右側に表示されます。
右側で色々とカスタマイズできますが、とりあえず今回は高画質で、画像もそんなに重くない、丁度良い設定である「JPEG（高品質）」で保存します。
右下の「書き出し」を押すと、さきほど保存したファイル名.jpgが作られます。
作った画像を是非、「Affinity3の初心者講座その１をクリアしたよ！ #ゼロから始めるAffinity3」とTwitter(X)やインスタグラム、Threadsに感想と共に貼り付けて投稿してみて下さい。
アウトプットをすることで、自分のモチベーションにつながります。
心の中で「自分、こんなにいいものが作れるようになったんだ」と自分を褒めるだけでもＯＫです。
投稿したからと言ってご褒美は何もありません(´・ω・`)ｽﾏﾝ。
ただ、自分の成長記録として、作った物はできるだけ誰かに見せたり、飾ったりしてみて下さい。
後で見返したときに、ちょっとだけ誇らしい気持ちになれます。
これでAffinity初心者講座その１は終了です。
その２でまたお会いしましょう(=・ω・=)✨
今回覚えること
- ドキュメント…文字や図などが組み合わさってできたファイル
- ツールパネル…左にあるアイコンが並んでいるところ。何かしたいときはここからツールを選んで作業する。
- メニュー…ファイルや編集などがある。ジャンルごとに項目がまとめられている。
- ツールバー…メニューの下にある、スタジオやよく使う機能がまとめられたところ。
- コンテキストツールバー…ツールバーの下にあり、ツールによって表示される項目が変わる。
- オブジェクト…画面上にある図形やテキストなどの「もの」。
- バウンディングボックス…オブジェクトを選択すると表示される、白丸のついた枠。
- 移動ツール…オブジェクトを選択したり、移動・拡大したりとよく使うツール。
- SHIFTキー…拡大縮小するときに押すと縦横比を固定・または変更できる。回転させるときに押すと15度ごとに回転を制御できる。
- Ctrl＋Sキー…ファイルを保存する。
ゼロから始めるAffinity3 Affinity初心者講座その２ に続く