キャッチコピー画像作成マニュアル


特別付録

無料ソフトを使って、ここまでできる!
簡単なステップで、プロが作ったような
キャッチコピー画像を作る方法
↑こんな感じで作れます

Copyright © 2007 北摂情報学研究所, Inc. All Rights Reserved.

Contents

CONTENTS
„ INTRODUCTION ................................................................................ 3
手順.......................................................................................................................3

„ Part1. キャンバスの設定 ............................................................... 4
ドキュメントの設定..............................................................................................4

„ Part2. 文字画像の作成 .................................................................. 6
文字画像を作る.....................................................................................................6
色と影を設定する .................................................................................................8

„ Part3. レイヤーを使う ................................................................. 11
レイヤーを作る................................................................................................... 11
ハイライトをひく ...............................................................................................12

„ Part4. 出力・保存する ................................................................ 14
PNG 画像として出力 ..........................................................................................14
保存する .............................................................................................................15

„ CONCLUSIONS ............................................................................... 17

Copyright © 2007 北摂情報学研究所, Inc. All Rights Reserved.

2

Introduction

INTRODUCTION
はじめに
この冊子では、Inkscape を使って、簡単に目をひくキャッチコピーの画像を作る方法を
説明します。

今回は、以下のようなキャッチコピー画像を作ります。

初めに大まかな手順を説明します。

大まかな手順

①キャンバスの設定
②文字画像を入力
③文字画像に、色と影を付ける。
④レイヤーを使って強調効果をする
⑤画像の出力と保存

では、各手順については、以降で詳しく説明していきます。

Copyright © 2007 北摂情報学研究所, Inc. All Rights Reserved.

3

Premium APPENDIX

Part1. キャンバスの設定
今回は、キャッチコピーの画像を作るので、一番初めにキャンバス(用紙)の設定を行
います。見た目が、ブラウザに依存しないように背景色を変更し、サイズを作りたいキ
ャッチコピーの大きさに変更します。

ドキュメントの設定
背景色の変更
IE6(InternetExplore)以前では、背景色を透明にしていると上手く表示できず、他の
ブラウザで見た時と、違った見え方になってしまいます。
これでは不便ですので、解決するために背景色を白に設定しましょう。

手順は下のようになります。
メニューバーの「ファイル」→「ドキュメントの設定」を選ぶと、
以下のような画面が開きます。

ここをクリックする

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

4

Premium APPENDIX

そして、下の画像のように、開いた画面の RGBA の全てを一番右まで移動させます。す
ると背景色が白になります。

これで、背景を白に変更できました。
カスタムサイズの変更
続いて、キャッチコピーにふさわしい大きさにサイズを変更しましょう。
「ドキュメントの設定」画面の、カスタムサイズと書かれた所を変更します。
今回は、幅 500px、高さ 200px に設定します。

ここの大きさは、作りたいキャッチコピーの大きさによって変更してください。
Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

5

Premium APPENDIX

Part2. 文字画像の作成
まずは編集しやすいように、編集画面の大きさを変えましょう。
「ページをウィンドウに合わせるようにズーム」をクリックします。
ここをクリック

これで、編集しやすくなりました。では早速作っていきましょう。

文字画像を作る
Inkscape は、日本語への対応が不十分なので、文章を入力している最中に文字候補が出
てくる箇所がおかしいです。ですので、文章は、予め別のテキストファイルなどに書い
て用意しておくと、入力間違いもなく、手間も省けますのでお勧めです。

文字を入力する
「A」ボタンを使って、文字入力モードに切り替え、そこに予め用意しておいた文章を
はりつけます。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

6

Premium APPENDIX

フォント設定
続いて、フォントの大きさと、書体、行間を変更します。
・フォントサイズは、「32」くらいが適度です。
・行間は「150%」に設定します。
・書体は、「HGPSoeiKakuGothicUB」を選びます。

ここをクリック

今回使用した設定は参考ですので、実際に作成される際は、お好きなものを選んでくだ
さい。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

7

Premium APPENDIX

色と影を設定する
色を付ける
色を選択する方法を、少し変更します。
下図のように、ページ下部の三角を押すことで切り替わります。
「WebHex」というものに変更します。

②この画面が開く。
WebHex を選ぶ

①ここの三角ボタンを押すと、

するとページ下部の色が変わります。

色を付けたい文字画像を選択し、上図のピンクをクリックします。
すると下図のように色が変わります。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

8

Premium APPENDIX

影をつける
色づけができた文字画像を、メニューバーの「編集」の中にある、
・ 「コピー」と「同じ場所に貼り付け」
という操作を行ってください。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

9

Premium APPENDIX

すると、一見分かりませんが、先ほど色を付けた文字画像の上に、全く同じ文字画像が
重なっています。
この状態で、先ほどと同じように赤色を付けます。すると、上にある文字画像に色が付
きますので、キーボードの矢印キーを使って少しずらすと、簡単に、影をつけたような
見た目にすることができます。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

10

Premium APPENDIX

Part3. レイヤーを使う
P.3 の完成例のようにハイライト(黄色の下線)を付けるために、レイヤーを使います。
レイヤーとは、透明なシートのようなものです。
いくらでも重ねることができ、複数のレイヤーを重ねて一つの画像を表示させます。そ
れぞれのレイヤーに行った操作が他のレイヤーに影響しないので、細かい編集・変更を
行う時に楽になります。

レイヤーを作る
メニューバーの「レイヤー」から、「新規レイヤー」を選びます。
開いた画面で適当な名前をつけて、レイヤーの位置を「現在レイヤーの背面」にします。

下図のように、画面下部で編集を行うレイヤーの切り替えができます。
選んだレイヤーの名前が表示されます。
使わない方のレイヤーをロックすることで編集できなくします。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

11

Premium APPENDIX

ロックした場合

クリックすると切り替わります

編集できる状態

ハイライトをひく
下の図の①が、これから編集する「ハイライト」になっていることを確認し、②のアイ
コンをクリックします。(サイドバーにある「カリグラフィ線を描く」アイコン)
すると、③の場所に F、S と書かれた色のバーが表示されます。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

12

Premium APPENDIX

色の設定
上図の③の、F は線の中を塗りつぶす色、S は外枠の線の色を表しています。
色を変更したい場合は、いつものようにページ下部の色見本の中から選びます。変更を
すると、③に表示される色も変わります。
なお、S の色を変更する場合は、キーボードの Shift キーを押しながら色をクリックし
てください。

幅を変更
上図の④で、線の幅を変更します。今回は「15」に設定します。
線の色と幅をお好きなものに変更したら、いよいよ線をひきます。

ハイライトをひきたい所の文字をなぞるように、マウスをドラッグ&ドロップします。

他のレイヤーに影響しないので、気にせずに何度でもやり直せます。
あとは、気に入るまで微調整をすると、完成です。

「ハイライト」レイヤーを、
「Layer1」の背面に設定したので、
「ハイライト」レイヤー
で線をひくと、文字が見えるよう(文字の後ろ)に表示されます。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

13

Premium APPENDIX

Part4. 出力・保存する

PNG 画像として出力
メニューバーの「ファイル」の中にある、
「ビットマップにエクスポート」で PNG 画像
として出力できます。

「ページ」を選びます。すると、全体を出力することになります。
必要であれば、幅と高さを変更します。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

14

Premium APPENDIX

「参照」で保存先を選び、適当な名前をつけます。例では、headline.png と入力し、
「保存」を押します。なお、拡張子を「名前.png」のように.png にしてください。こう
書くことで PNG 画像として出力されます。
つづいて「エクスポート」ボタンをクリックします。

これで、保存先に指定した場所に PNG 画像として出力されます。

保存する
作った画像をまた編集して使うかもしれませんので、保存をします。
SVG という形式で保存します。
「名前」と「保存先」を指定して、「保存」を押します。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

15

Premium APPENDIX

※保存した SVG ファイルの開き方
保存した SVG ファイルを「クリック」で開くと、ブラウザ(IE や FireFox)が起動して
しまいます。
ですので、編集するために開くときは、まず Inkscape を立ち上げて、
「ファイル」→「開
く」から開いてください。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

16

Premium APPENDIX

CONCLUSIONS
おわりに

今回解説した内容は、キャッチコピーだけに限らず、ホームページの強調したい部分
を見せるための、アクセントとしても活用できます。

Inkscape では、今回のようにハイライトをひくだけでなく、様々な装飾ができますので、
色々さわって目をひくキャッチコピーを作ってくださいね。
また、Google や yahoo!で Inkscape と検索すると、凝った使い方などの情報も少し出
てきますので、そちらもご参考にしてください。

※ 著作権をお守り頂きまして、ありがとうございます。このテキストの内容の著作権は、
すべて北摂情報学研究所にあります。このテキストの内容の無断複写、無断転載を禁じます。

Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

17


キャッチコピー画像作成マニュアル-01
キャッチコピー画像作成マニュアル-02
キャッチコピー画像作成マニュアル-03
キャッチコピー画像作成マニュアル-04
キャッチコピー画像作成マニュアル-05
キャッチコピー画像作成マニュアル-06
キャッチコピー画像作成マニュアル-07
キャッチコピー画像作成マニュアル-08
キャッチコピー画像作成マニュアル-09
キャッチコピー画像作成マニュアル-10
キャッチコピー画像作成マニュアル-11
キャッチコピー画像作成マニュアル-12
キャッチコピー画像作成マニュアル-13
キャッチコピー画像作成マニュアル-14
キャッチコピー画像作成マニュアル-15
キャッチコピー画像作成マニュアル-16
キャッチコピー画像作成マニュアル-17