オリジナルロゴ作成マニュアル


オリジナルロゴ作成マニュアル-01


CONTENTS

INTRODUCTION
................................................................................ 3
Part1.
オリジナルデザインを作るには?............................................. 4
ロゴを作るためのソフト.....................................................6
滅多にない!ドロー系 .....................................................8
Part2.
Inkscapeを手に入れる............................................................. 9
Inkscape を入手する...........................................................................10
Inkscape をインストールする ...............................................................12
フォントあれこれ ...............................................................................16
Part3.
基本的な使い方を知ろう! .......................................................... 17
文字を書こう.............................................................................................19
文字の回転 .............................................................................................22
Part4.
実際にロゴを作ってみる! .......................................................... 25
テンプレートを読み込む .............................................................................26
ロゴの文字を書き入れる .............................................................................27
矩形を使って、もう少しロゴを工夫................................................................30
透明を活用 ............................................................................................32
フォント設定について ...............................................................................33
画像を保存しよ.........................................................................................35
おまけ (ロゴテンプレートの縦幅を変える方法) ................................................36
CONCLUSIONS
............................................................................... 40

2

INTRODUCTION


はじめに
このマニュアルでは、ほとんどの人が知らない数万円の価値がある「無料ソフト」を活
用して、オリジナルデザインに見える「ロゴ画像」を作成する方法をお伝えします。

本書では、その秘密?のソフトウェアの入手とインストール手順を細かく図解します。

このソフトは、あまりにも機能が豊富なので、使い方を説明していると、冊子が 100 ペ
ージは必要です。そこで、基本的な機能だけを説明します。

基本がわかれば、後は作るのみです。「テンプレート」を利用して、ホームページの
ロゴ画像を作るためだけにフォーカスして説明します。

この情報は、日本ではほとんどない、貴重なものです。


3


オリジナルロゴ作成マニュアル-03


Part1 オリジナルデザインを作るには?

Part1. オリジナルデザインを作るには?

初心者でも安心!

簡単にオリジナルデザインを作るには?
画像を作るには、
デザインを考える、画像編集ソフトを使う必要があります。

しかし、
「いきなり、オリジナルデザインを作るなんて・・」

と困ってしまうのではないでしょうか?

そこで、少しでも手間を省くための方法をお伝えします。

CONTENTS
画像を作る前に・・・

4


オリジナルロゴ作成マニュアル-04


初心者でも簡単に作るには?
オリジナルさを出すためには?

画像を作るためのソフトは?

6

ドロー系とペイント系

どこにもないドロー系!?

8

Inkscape という方法

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

4

Part1 オリジナルデザインを作るには?

実は、オリジナルデザインを作る方法は、そんなに難しくありません。完全なオリジナ
ルで、凝ったページにするには、様々なところに手を入れる必要がありますが、実際、
そこまで必要だとは思えません。

まずは、小さく始める。これが重要です。

人が、ぱっと画面を見たときに、無意識に視線が集中するのは、Fという文字になる
と言われています。ホームページで言えば、ロゴ部分と、左のメニュー、ナビゲーター
部分です。

この部分のインパクトが、全体の印象につながっていきます。特にロゴが重要になっ
てきます。このロゴを変えるだけで、他が同じでも、違うデザインに見えます。

以下の2つの例を見てください。

実は、同じテンプレートを使っています。よく観察してみれば、わかりますが、全く

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

5

Part1 オリジナルデザインを作るには?

別のページに見えますよね。更に、もう一つの例をご覧下さい。テンプレートは同じな
のですが、ロゴが違います。

このようにオリジナルデザインは、実は簡単に作れるのです。テンプレート + オリジ
ナルな画像。たったこれだけです。

ただ、ロゴを作るのは面倒な作業です。
本格的なロゴを作りたいとしても、なかなか難しい。

そこで、こちらも楽をしましょう。ロゴのテンプレートに、自分で文字を入れる。たっ
たこれだけで、ロゴが作れてしまいます。

ロゴを作るためのソフト
せっかくなので、画像処理についても簡単に勉強しましょう。画像処理のソフトは、
大きく分けて 2 種類あります。その 2 種類とは、

「ドロー系」と「ペイント系」

といいます。

簡単に説明してしまえば、ドロー系場合、「画像ではなく、図」として保存されるの
が特徴です。Wordなどで図を作ったことがあれば、よくわかると思いますが、図を拡大
縮小しても、きれいなままです。再編集で、文字を移動したりする場合は、「図」とし
て作成します。ただし、図のままではホームページに使えませんので「画像として保存」

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

6

Part1 オリジナルデザインを作るには?

し、ホームページに貼り付けます。

拡大

適切な大きさにする

【図】拡大・縮小は得意
【画像】拡大・縮小は苦手

画像として保存

逆に、画像(写真など)を拡大縮小すると、がたがたになったり、つぶれてしまいま
す。ペイント系は、写真などの画像を処理するのに向いています。

ロゴ画像も、拡大するとこのように、がたがたになります。この画像上で、ロゴの文
字のフォトを変えたり、大きさを変えたり、位置を変えることはできません。
Vector( http://www.vector.co.jp/ )で見つかる画像作成ソフトは、ペイント系ばかりです。
このペイント系ツールを使って、ロゴを作成するのは、かなり難しいです。

ロゴを作るときは、ペイント系とドロー系の両方を使います。テンプレートの画像な
Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

7

Part1 オリジナルデザインを作るには?

どを作成するときは、写真を画像処理して、薄い色にしたり、色味を変えたりします。
こういう処理は、ペイント系ソフトが得意です。
逆に、ロゴに入れる言葉や図は、ペイント系で作るのはちょっと難しいです。ペイン
ト系は、鉛筆で紙に書き込むようなものなので、描き直しが聞きません。逆にドロー系
は、図の微調節が何度でもできます。この2つを組み合わせて作るのです

このマニュアルでは、幸い「テンプレートが 129 個」ついています。従って、ペイン
ト系の出番はありません。ドロー系ソフトを使って、最後の仕上げを行います。

滅多にない!ドロー系
さて、このドロー系ソフトは、一般的にとても高いです。最高峰は、Illustrator といソ
フトです。個人で購入するのは無理だと思います。なぜなら、8 万円もします。プロ用
のソフトです。
逆に安いものでも 25,000 円程度します。Corel Draw というソフトです。Illustrator の
ように高機能ですが割安です。それでも 25,000 円です。ドロー系ソフトをプログラミ
ングするのは、とても難しく、手間も多いため、無料ソフトを開発している人は、ほと
んどいません。

実際、私自身が相当な時間を掛けて、「使いやすそうなソフト」をインストールして
みましたが、全く使えないものばかり(ホームページのロゴ作成には)。

英語のサイトも調査しているうちに、日本語化されている「アメリカ由来の無償のド
ロー系ソフト」を発見しました。ただ、まだまだマイナーなので、情報がほとんどあり
ません。従って、本書では「ロゴ作成」に的をしぼって、この無償ツールの使い方をご
説明します。

その無償ツールの名前は、「Inkscape」と言います。Inkscape(インクスケイプ)は、オ
ープンソースといって、複数の人がボランティアでソフトを作り、公開しているプロジ
ェクトです。バージョンは、0.4 で、まだまだ発展途上ですが、これからどんどん良く
なるでしょう。いくつか足りない機能がありますが、それでも「小さく始める」には十
分な機能を備えています。
Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

8

Part2

Inkscape を手に入れる

Part2. Inkscape を手に入れる

英語サイトでも怖くない

Inkscape を手に入れよう!

Part2 では、フリーソフトである Inkscape の入手方法をお伝えします。
インターネットを探せば、いろんな有用な情報があります。あなたは、膨大な時間をか
けて探す必要はありません。ここで紹介する Inkscape がその中でも、もっとも良い方
法なのです。

英語サイトですから、英語が苦手な方は、「図を見ながら、何となく」作業をしてみ
てください。

CONTENTS
Inkscape を入手する

10

ダウンロード手順
インストール方法

フォントの設定

15

フォントあれこれ

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

9

Part2

Inkscape を手に入れる

Inkscape を入手する

無料ソフトをたくさん紹介している「窓の杜」というサイトから入手します。
http://www.forest.impress.co.jp/lib/pic/piccam/paint/inkscape.html

にアクセスしてくだ

さい。
(※窓の杜の都合で URL が変わる可能性があります。表示されない場合は、yahoo な
どで「窓の杜

Inkscape」というキーワードで検索してください。)

上記の URL へアクセスすると、下図のような画面が開きます。
「Download」という文字がありますので、「Download」ボタンを押してください。

ここをクリック

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

10

Part2

Inkscape を手に入れる

すると、上記のような画面が表示されますので、「保存」をクリックします。

「保存」をクリックすると、どこへ保存するかを聞かれますので、適当な位置に保存し
てください。よくわからない人は、「マイドキュメント」の中や「デスクトップ」に保
存しましょう。

以上でダウンロードは完了です。

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

11

Part2

Inkscape を手に入れる

Inkscape をインストールする

ダウンロードすると、このようなアイコンのファイルが現れます。このファイルをダ
ブルクリックして、インストールを開始してください。なお、150MB 程度の容量が必要
です。
ダブルクリックすると、警告が表示されることがありますが、無視してください。イ
ンストールの準備に、若干時間がかかります。

準備が完了すると、次のページのようなウインドウが現れます。基本的には、「次へ」
をクリックしていきます。

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

12

Part2

Inkscape を手に入れる

Inkscape は、多言語対応の国際的なソフトウェアです。その結果、各国の言語ファイル
が入っています。これらを必要なものだけにするだけで、260MB 必要だったインストー
ル容量が、150MB に減ります。従って、以下のように設定してください。

「翻訳」
をクリックする

クリックすると、
「翻訳」以下のチェックの
選択が外れる。

スクロールして、「日本語」を
探し、クリック

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

13

Part2

Inkscape を手に入れる

※注意点は、一つだけです。インストールするものの中で、言語ファイルを日本語だけ
を選択すると言うことです

続いて、何も変更せずに「インストール」をクリックします。

インストールには少し時間がかかります。インストールが終わったら「完了」をクリッ
クします。

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

14

Part2

Inkscape を手に入れる

インストールはこれで終わりです。しかし、あと少しだけ設定をしましょう。
Inkscape は、英語圏で作られています。従って、アジアのようにアルファベット以外の
文字の対応が悪いです。日本語を書くと、文字化けをします。
これは、日本語に対応するフォントがないことが原因です。そこで、デフォルト(初期
設定)のフォントを変更しましょう。

②T をクリック

①こんにちはと入れる

「こんにちは」と書いたが・・・

③MS PGothic を探す

④MS PGothic をクリック

⑤デフォルトに設定
をクリック

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

15

Part2

Inkscape を手に入れる

以上の設定が完了です。今後は、テキストを作ると「MS P ゴシック」のフォントを使
います。

なお、0.44.1 バージョンでは、MS ゴシックでアルファベットを書くと、重なって読
めなくなります。これは、ソフトの問題ですが、他のフォントを使えば大丈夫です。

フォントあれこれ
ついでに、「フォント」と「イメージ」の関係を簡単に説明します。こだわりすぎる
と、際限がないので、「感性で理解」してください。どれが、一番楽しそうですか?
フォントの使い方次第で、イメージが変わってきます。

どれが、本物っぽいですか?

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

16

Part3 基本的な使い方を知ろう!

Part3. 基本的な使い方を知ろう!
Inkscape の使い方の基本をマスターしよう

まずは気軽に、

触ってみよう!
Part 3 では、Inkscape の基本的な使い方を説明します。
一つずつを記憶する必要はありません。大まかに、とらえておけば大丈夫です。
後は、実践しながら作るだけで簡単に作成できます。

では早速、気軽に始めてみましょう!

CONTENTS
Inkscape の構成

18

よく使う機能
各ボタンの説明

文字を書こう

19

日本語を入力する
文字の拡大・縮小
文字を回転

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

17

Part3 基本的な使い方を知ろう!

まずは、大体の概観をつかみましょう。覚える必要はありません。Inkscape を起動する
には、スタートメニューから探すか、デスクトップに作成されたアイコンをダブルクリ
ックします。
ファイル全体に関わる機能(印刷、ズームなどなど)

作図に頻繁に使う機能

キャンバス

色を設定するときに使う

本当によく使うのは、左のボタンと、下の色設定です。左のボタンについて簡単に説
明しますね。

以下のボタンは、
「道具」です。マウスでクリックすると、
「へこみ」ます。そのへこ
んだ道具を持つことになります。他のボタンをクリックすると、道具を持ち替えます。
パソコンは、片手で操作するようなイメージです。常に道具を持ち替え、作業をしてい
きます。
それぞれの道具を簡単に説明します。まずは、適当に触れてみることが大事です。
Inkscape を立ち上げ、ボタンをクリックして、「実験」してみてくださいね。

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

18

Part3 基本的な使い方を知ろう!

矢印ボタン。ご自身の手だと思ってください。何をやるにも、この矢印を使います
パスボタン。図を微調節するときに使います。図を構成する頂点を動かす時に使い
ます。
ズームボタン。画面をズームイン、ズームアウトするときに使います。そのまま使
うと、ズームイン(大きくなる)し、「Shift キー」を押しながらクリックすると、縮小
します。
四角ボタン。四角形を描くときに使います。長方形、正方形とも作れます。
丸ボタン。円を描くときに使います。楕円、きれいな円とも作れます。
星ボタン。星形を作るときに使います。星を少しさわると、5 角形が作れます。
渦巻きボタン。らせんを描けます。あまり使わないですが。
フリーハンド。マウスの動きに合わせて、きれいな曲線を作ります。
線ツール。直線と曲線(ペジエ線)を描けます。これはよく使うかも。
カリグラフィボタン。太めのペンで、フリーハンドという感じです。
文字入力ボタン。ロゴ作成では、これを使います。
コネクタ。図と図を結ぶ線を作ります。
グラデーション。図形の色をグラデーションするときに使います。これもよく使い
ますね。
スポイト。色を取るときに使います。図の中で、同じ色を使いたいとき、スポイト
で色を採取することで、簡単に色設定ができます。
この Inkscape を使いこなせば、かなり簡単に作ることができます。

文字を書こう
試しに、以下のワークを一緒にやりましょう。
それだけで、かなり雰囲気がつかめると思います。

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

19

Part3 基本的な使い方を知ろう!

まずは、Inkscape を

最大化してください。

それでも、描画領域全体が写っていますので、以下の手順で、「ページの幅」を基準に
拡大します。ちなみに数字の 6 がついています。これは、6キーを押すと、ページ幅に
拡大するという意味です。試しに、5 キーを押してください。
すると・・・実験してみてくださいね。

画面を大きくしたら、いよいよ作業開始です。
まずは、

を押して、文字入力状態にしましょう。その状態で、キャンバスにマウス

を持って行くと、以下のようになります。この状態が、文字を入力する状態です。

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

20

Part3 基本的な使い方を知ろう!

クリックすると、以下のように | が点滅します。この状態で文字入力をしましょう。
日本語を入力するときは、変なところに文字が表示されますが、気にせずに書いてくだ
さい。まだまだ、日本語化の機能が追いついていません。そのうち直るでしょう。

なぜか、ここに?

漢字変換などは、いつも通りです。文字を書き上げたら、「道具を持ち替え」ます。
矢印ボタンをクリックしてください。

ペンに持ち替えると

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

21

Part3 基本的な使い方を知ろう!

ペンに持ち替えると、

このようになります。この状態が「確定」とな

ります。8 方向の矢印の上に、マウスを持って行くと、緑色に反転します。

文字の回転

反転したときに「マウスをクリックしながら、引っ張ります」。すると、文
字の大きさを自由に変えられます。

大きさを変えたら、色を変えてみましょう。カラーパレットをクリックするだけで、簡
単に色が変わります。

カラーパレットをクリック

文字をもう一度、矢印状態でクリックすると、以下のようになります。

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

22

Part3 基本的な使い方を知ろう!

8 方向の矢印の形が変わりました。これは、回転状態を示しています。
左の真ん中の矢印にマウスを持って行くと、下の図のようになります。

ここで、
「ドラッグ&ドロップ」をします。
(マウスをクリックしたまま、動かす。離す)
そうすると、次のページの図のように形が変形します。

同様に、四隅の矢印をドラッグ&ドロップすると、回転します。

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

23

Part3 基本的な使い方を知ろう!

適当に組み合わせて使うと、文字を斜めにすることもできます。

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

24

Part4 実際にロゴを作ってみる!

Part4. 実際にロゴを作ってみる!
実践で学ぶ

Part4 では、Inkscape とロゴのテンプレートを使って、実際にロゴを作成してみましょ
う。テンプレートを活用するだけで、プロっぽいデザインのロゴを簡単に作ることがで
きます。

まずは、簡単なロゴを作ってみましょう。その中で、使い方がよくわかってきます。元々、
テンプレートが用意してあると比較的簡単にロゴが作れます。

動画マニュアルの方では、これよりも更に「プロっぽいもの」を作る様子をご覧頂けま
す。

CONTENTS
テンプレートを読み込む

26

文字を書き入れる

27

文字の入力方法
作成した文字を移動
色を付ける
影をつける
透明にする

保存する

35

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

25

Part4 実際にロゴを作ってみる!

テンプレートを読み込む
ダウンロードしたロゴ画像を適当な場所に解凍しておきます。よくわからない人は、
「マイドキュメント」に解凍しておきましょう。
次に、Inkscape を起動し、「ファイルメニュー」から「開く」を選択します。

開いたら、使いたいテンプレートを開きます。Inkscape ではプレビューができません
ので、テンプレートの画像を別途チェックしておき、名前を控えておいてください。ロ
ゴ画像のフォルダを開いて、ロゴテンプレートをダブルクリックすると、テンプレート
を確認できます。
良さそうなテンプレートの名前を覚えておき、そのファイルを読み込みます。

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

26

Part4 実際にロゴを作ってみる!

画像を選んだら、「開く」をクリックしてください。すると以下のように画像が表示さ
れます。この画像に対して、「文字」を入れていくことで、ロゴが完成します。

ロゴの文字を書き入れる
今回は、「本物の情報技術をお届けします」「北摂情報学研究所」を作ります。
まず、テキストボタンをクリックしましょう。
そして、適当な位置でクリックし、言葉を書いていきます。

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

27

Part4 実際にロゴを作ってみる!

書いたら、

矢印ボタンを押してください。すると、上のようになります。

次に、書いた文字をクリックして、8 方向に矢印が出る状態にします。その後、矢印を
ドラッグ&ドロップすることで、大きさを適当に変えます。

適当な大きさができましたら、ページの下のカラーパレットから、「黄色」をクリック
します。

クリックすると、文字色が変わります。後は、適当な位置に移動します。

ちょっとした工夫で、影っぽいものを作れます。それをやってみましょう。
Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

28

Part4 実際にロゴを作ってみる!

次に、
「編集メニュー」から、
「コピー」を選びます。続いて、編集メニューから、「同
じ場所にペースト」をクリックします。

同じ場所にペーストとは、コピーしたものを「真上に貼り付ける」ということです。
貼り付けた瞬間は、変わった気がしません。まずは、「オレンジ色」をクリックしてく
ださい。オレンジにしたら、「文字をちょっとだけ、ずらします」。キーボードの矢印
キーで、上一回、左一回押すと簡単かも知れません。
すると、ずれて、以下のように「影っぽく」なります。これだけで、簡単に強調ができ
ますよね?(色遣いがおかしいのはご容赦ください)

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

29

Part4 実際にロゴを作ってみる!

矩形を使って、もう少しロゴを工夫
今度は、「北摂情報学研究所」を書き出します。長方形を描いて、少しだけ工夫を加
えましょう。まずは、

「長方形ボタン」をクリックしてください。

適当な位置で、ドラッグ&ドロップで四角がかけます。

この四角の色は、後で変えられるので気にしないでください。このように、後で変え
られるのが、「ドロー系ソフト」の特徴でもあります。
オレンジは気持ち悪いので、「青」をクリックしましょう。

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

30

Part4 実際にロゴを作ってみる!

カラーパレットを使えば、簡単です。以下のように色が簡単に変わります。

カラーパレットにある色だけでなく、透過の設定まで色設定ができます。パレットの左
下の「色」が表示されているところを、ダブルクリックします。

ダブルクリックすると、以下のようなウインドウが現れます。
それぞれを簡単に説明すると、以下のようになります。覚えなくていいですよ。適当に
さわって、自分が欲しい色を作れれば、OKですから。

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

31

Part4 実際にロゴを作ってみる!

色の塗り方
色の見方

色の調節

透過性の調節

ちなみに、RGB 方式は、Red、Green、Blue の 3 色を混合して、色を作ります。光の
3 原色を混合します。すべての色を混ぜると、白になります。A は、Alpha 値といって、
透明度を表します。他にも、HSL、CMYK、ホイールという色の探し方があるので、使
いやすいものを選んでください。

透明を活用
今回は、色の微調節は後回しにして、透明をうまく使う方法を紹介します。

先の色設定の下部にある「透過性」をスライドさせましょう。0.25 近くにしてください。
すると、25%の透過の色が完成します。

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

32

Part4 実際にロゴを作ってみる!

こんな感じです。透明になっていますね。その状態で、パレットの青をクリックする
と、以下のようになります。

フォント設定について
前回と同様に、文字を入れましょう。

文字ボタンをクリックして、適当な位置に

文字を書き入れます。「北摂情報学研究所」と書き入れます。

書き入れたら、

矢印ボタンに持ち替えます(クリック)。

次に、ウインドウ右上の

テキスト設定ボタンを押します。

すると以下のようなウインドウが出ます。

テキストオブジェクトを選択した状態で、

を押してください

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

33

Part4 実際にロゴを作ってみる!

フォントの一覧がありますので、そちらを選んでいくと、様々なフォントを調べるこ
とができます。キーボードの矢印ボタンで、上下すると便利です。HGSGyoshotai(行書
体)を選ぶと、上のようになります。
この状態で「適用」を押すと、反映されます。確定すれば、閉じましょう。

先ほど作った、青い四角形の上に置きます。更に、カラーパレットで、「白」をクリ
ックします。後は、四角形を微調節すれば、完成です。

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

34

Part4 実際にロゴを作ってみる!

画像を保存しよう!
できあがった画像を保存しましょう。
「ファイルメニュー」から、
「エクスポート」を
選びます。エクスポートとは、「出力」という意味です。

「参照ボタン」を押して、保存先、保存ファイル名を決めます。拡張子(ファイルの種
Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

35

Part4 実際にロゴを作ってみる!

類を表すもの)をつけると、自動的に適切なファイル形式で出力します。
②保存名を入れる

①保存先を選ぶ
③保存を押す

保存を押すと、以下のようになります。Export を押すと、出力されます。

お疲れ様でした。これで、ロゴが完成しました。
ロゴの微調節をするなら、この Inkscape 上で行い、再度 Export をします。

おまけ (ロゴテンプレートの縦幅を変える方法)
Quick Homepage Maker のロゴ画像は、横幅はを 748px で作ります。縦幅は、自由に
設定可能です。利用しようとしたテンプレートの縦幅が長い場合(実は、あとで調節で
きるように長めにしています)、途中で切って利用してください。
Copyright © 2007 北摂情報学研究所,Inc. All Rights Reserved.

36

Part4 実際にロゴを作ってみる!

ここでは、Inkscape を使って、画像の縦幅を調節する方法をお伝えします。なお、こ
の部分だけは、他のソフト(例えば、ペイント)を使っても良いでしょう。

キャンバスサイズを変える
まずは、画像のサイズを変えましょう。先の説明通りに、ロゴテンプレートを読み込
むと、読み込んだ画像の縦幅、横幅でキャンバスサイズ(画像の大きさ)が決まります。

これを自由に変更するには、「ファイル」→「Document Propaties」を選びます。
選択すると、下のようにキャンバスサイズを変更するウインドウが現れます。右図に
示すように、「Border on top of drawing」にチェックを入れ、「Height」のサイズを
変更します。

例えば、サイズ(height)を小さくします。すると、以下の図のように 150px の枠が
見えます。この枠に入っているもが、表示されることになります。

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

37

Part4 実際にロゴを作ってみる!

はみ出した部分をどう扱うかで、2つの方法があります。
一つは、画像を上下して、使う部分を選ぶ方法です。例えるなら、はみ出す部分を切
り取る感覚です。
もう一つは、縮小してサイズを合わせる方法です。元の画像を縮小して、画像を入れ
込む方法です。
どちらがいいかは、試しながら確認してみてください。

画像をずらして、いい感じにする方法
画像をクリックして、上下に移動させます。このとき、
「Ctrl キー」を押しながら、マ
ウスを上下させると、横にずれが少なくなります。使いたい部分を適当に合わせて、マ
ウスを放すだけです。
もしくは、キーボードの上下キーを押すのもお勧めです。僕はこれを使います。
簡単ですよね。
画像を縮小する
画像をクリックすると、黒矢印が8方向に現れますので、上下方向の矢印を「ドラッ

ドロップ」してください。

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

38

Part4 実際にロゴを作ってみる!

保存するには?
保存するときは、「ファイル」→「エク
スポート」を選んでください(詳しくは、
前節の説明をご覧下さい)。このとき、ペ
ージを選んで、Exportしてください。
ページを選ぶと、現在表示されている枠
内だけが、保存されます。

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

39

Conclutions

CONCLUSIONS
おわりに
Inkscape は 8 万円程度する Illustrator などと同じようなソフトです。もちろん、
Illustrator
の方が、細部にわたって作り込まれていますが、Inkscape のバージョンは、まだ 1.0 に
到達していません。まだ、0.44.1 です。半分もいきません。まだまだ、可能性が未知の
ソフトウェアです。

さて、この Inkscape と、もともと作成されているロゴテンプレートを組み合わせる
ことで、驚くほど簡単にロゴが作れることを感じていただけましたでしょうか?
「うん、うん」と言っていただけると、Inkscape を探し求めた数日間の苦労も報われる
というものです。

この Inkscape は、ロゴを作るだけにとどまりません。ホームページに使う文字、画
像、装飾を作るのにご活用できます。
ご要望が多いようでしたら、改めて、Inkscape 活用ブックを作成しようかと考えてい
ます。

世の中には、いろんな便利なものが、格安で使えます。しかし、その情報を探すのは、
非常に難しく、さらにどれがベストか?を調査するのには、更に手間と時間がかかりま
す。弊社は、そのようなギャップを埋めつつ、活用方法を作り出して、提供しています。

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

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

40

Conclutions

ホームページ http://www.hokuken.com/
メール customer@hokuken.com
電話・FAX

072-691-6554

ご質問は、お気軽に!

北摂情報学研究所は、システムという箱、道具だけを売るのではなく、でき
るだけシンプルなシステム、道具を活用する方法を提供します。
パソコン、インターネット(IT 技術)を活用すれば、もっと仕事は楽しくなり
ます。そして、もっと人は繋がることができます。
そんな活用方法を提供して、「あなたを応援」します。

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

41


オリジナルロゴ作成マニュアル-02

オリジナルロゴ作成マニュアル-05
オリジナルロゴ作成マニュアル-06
オリジナルロゴ作成マニュアル-07
オリジナルロゴ作成マニュアル-08
オリジナルロゴ作成マニュアル-09
オリジナルロゴ作成マニュアル-10
オリジナルロゴ作成マニュアル-11
オリジナルロゴ作成マニュアル-12
オリジナルロゴ作成マニュアル-13
オリジナルロゴ作成マニュアル-14
オリジナルロゴ作成マニュアル-15
オリジナルロゴ作成マニュアル-16
オリジナルロゴ作成マニュアル-17
オリジナルロゴ作成マニュアル-18
オリジナルロゴ作成マニュアル-19
オリジナルロゴ作成マニュアル-20
オリジナルロゴ作成マニュアル-21
オリジナルロゴ作成マニュアル-22
オリジナルロゴ作成マニュアル-23
オリジナルロゴ作成マニュアル-24
オリジナルロゴ作成マニュアル-25
オリジナルロゴ作成マニュアル-26
オリジナルロゴ作成マニュアル-27
オリジナルロゴ作成マニュアル-28
オリジナルロゴ作成マニュアル-29
オリジナルロゴ作成マニュアル-30
オリジナルロゴ作成マニュアル-31
オリジナルロゴ作成マニュアル-32
オリジナルロゴ作成マニュアル-33
オリジナルロゴ作成マニュアル-34
オリジナルロゴ作成マニュアル-35
オリジナルロゴ作成マニュアル-36
オリジナルロゴ作成マニュアル-37
オリジナルロゴ作成マニュアル-38
オリジナルロゴ作成マニュアル-39
オリジナルロゴ作成マニュアル-40
オリジナルロゴ作成マニュアル-41