html css のプロフェッショナル。うさぎだけど好きなブラ …gimp フォント編...
TRANSCRIPT
このコーナーは、HTML、CSS のことならなんでもおまかせの「マリー」と、
うさぎ界 No.1 とも言われているデザイナー「ナムー」が、WEB ページ作成の
コツを解説していきます。少し専門的な内容も含まれていますが、分からない
ことは積極的に調べて、１つ１つスキルアップをしていきましょう！
マリー
HTML、CSSのプロフェッショナル。うさぎだけど好きなブラウザは Fire Fox。
ナムー
うさぎ界を知り尽くした凄腕デザイナー。うさぎだけど好きな野菜はセロリ。
Moshimo Challenge Report
2
「成功している人のサイトを見ていると、みんな商品画像を加工して
看板画像やキャッチコピーの画像を作っているよね！」
「テキストだけでは表現できない箇所を画像に置き換えることで、う
まく目立たせているんだよ！簡単に画像を加工できるソフトもたくさ
ん登場しているから、ペタ郎でもすぐに作ることができるよ！」
「そういえば、画像加工ソフトで GIMPを使っている人多いよね？」
「GIMPは初心者でも簡単に使えるし、機能も豊富に揃っているから
人気なソフトだよ！無料だから気軽に始められてお勧めなの！」
「じゃぁボクも早速使ってみるから、ナムー色々教えてね～！」
「もちろん♪ ただ画像加工やデザインはあくまでもプラスの効果を
発揮するものだから、コンテンツ作成は怠らないようにするんだよ！」
Moshimo Challenge Report
3
■ GIMP インストール編
「今月から GIMPの使い方を中心に勉強していくよ！ まずはインス
トールをして環境を整えていこうね！」
【1】 GIMPのインストーラー（本体）をダウンロード。
ダウンロードページは全文英語ですが、
ソフト自体は日本語に対応しているの
で、ご安心してご利用ください。
http://goo.gl/aycJ
【2】 GIMP PORTABLEをダウンロード。
周りに広告が多数表示されていますの
で、クリックする場所を間違えないよ
うに気をつけましょう。
Moshimo Challenge Report
4
【3】 ダウンロードした GIMP（インストーラー）をダブルクリック。
ダウンロードが完了すると、デスクトップ（もしくはダウ
ンロードファイル）に左図のアイコンが現れますので、ク
リックをして設定を進めていきます。
【4】 ソフトを実行し、言語の選択。
ソフトを起動後『実行』ボタンを押しま
す。その後、言語の設定を行います。
【5】 インストールの実行。
ソフトをダウンロードできたら、
次はPCにGIMPソフトをインス
トールしていきます。
Moshimo Challenge Report
5
「Additional Languages」を
チェックし、次へ進みます。
インストール先を選択します。
特にこだわりがない場合は、初期
設定で表示されているまま進め
ましょう。
この画面が表示されたら、インス
トール完了です！
Moshimo Challenge Report
6
【6】 初回起動
PCにインストールされているフォ
ントが多いと、初回起動に時間がか
かることがあります。
「ナムーはフォントを 300種類くらいインストールしてあったから、
初回起動にものすごく時間がかかって大変だったよ！」
■GIMP 基本機能編
ツールボックスでよく使う機能はざっくり 2 種類ありますので、良く覚えてお
きましょう！
・選択範囲に関するものは、加工したい
部分を囲むツール
・囲んだ部分になにか変化を加えること
ができる画像加工に関するツール
Moshimo Challenge Report
7
「準備ができたら早速！商品素材を使って、加工を行なっていくよ！」
① 加工したい画像の商品販売ページ（http://goo.gl/NcV3i）を開き、素材画
像を右クリックし、画像 URLをコピーします。
（http://goo.gl/2J6lV）
商品： 「ホラグチ カヨ」ラグ ハイド＆シーク （ID：781117）
② GIMPソフトを開きメニューバーにある
『ファイル』から『場所を開く』をクリッ
クします。 先ほどコピーした URLを貼り
付け『開く』をクリック。
③ すると、ダウンロードやコピーな
どを一切行わずに、自動で画像を
開くことができます！
Moshimo Challenge Report
8
④ この商品画像のままでは、必要な
い文字などが入ってしまいますの
で、次は切り抜いて残したい部分
を選択していきます。
ツールボックスの一番上、左端にある「矩形選択」を押したあとに、画像左上
から右下まで手を離さずにぐーーっと移動させます。
⑤ 選択ができたら、メニューバーにある 『画像』
から『選択範囲で切り抜き』をクリックします。
⑥ これで選択した部分を切り抜くこ
とが出来ました！最後は忘れずに
しっかり『保存』をしましょう。
「画像の切り抜きと保存はできたかな？今回の GIMP講座はここま
で！次回も GIMP講座を進めるから、しっかり覚えておいてね！」
Moshimo Challenge Report
9
■GIMP フォント編
「次は GIMPのフォントについて解説するよ！似たように見えるフォ
ントでも、読み手の受ける印象が変わってくるんだ！今回は、わかり
やすい例を用意してみたよ！」
※次回のマリナムコーナーで、フォント別の印象パターンを解説します。
「ペタ朗が誕生日プレゼントの贈り物に、25万円の真珠のジュエリー
を買おうとするね。絶対失敗したくない場面だよね。
その時にお店の案内が以下のAとBだったら、どっちのお店で買う？」
Aパターン
Bパターン
「Aパターンは割引されていて安そうだけど・・・品質がしっかりし
ていそうで安心して購入できるのは Bパターンかなぁ♪」
Moshimo Challenge Report
10
「そうなの！高級ジュエリーを買いたい人は、安さよりも確かな品質
を求めている人の方が多いんだ！だから明朝体のフォントでキリっと
上品さを出してみたよ！」
「さて次は、今度は安い価格でお得に買い物がしたい！そんな時ペタ
郎だったら、どっちのお店で買うかな？」
Aパターン
Bパターン
「あれっ、今度は Aパターンの方で買いたくなるよ！さっきと反対に、
Bパターンは訳ありでも、高いものが多そうなイメージがあるなぁ。」
「そのとおり！まったく同じ商品を取り扱っていても、ショップのイ
メージ作りで売上が大きく変わってくることもあるよ！
だから、ショップのイメージに合うフォントを選ぶことが重要だよ！」
Moshimo Challenge Report
11
■フリーフォント導入の前に気をつけること３箇条
・読みやすい色とフォントを選ぶ。
・商用利用可なのかを、しっかり調べる。
・違法ダウンロードはしない
■インストールの手順例
一般的なダウンロードの手順は次のような手順となります。
【1】 フォントをダウンロードする
【2】 ダブルクリックしてウィンドウを開き、「インストールをクリック」
【3】 インストールが完了したら GIMPを終了させ、再起動させればフォント
が使えるようになっています。
次のページでは、実際にフリーフォントをダウンロードしてみましょう！
Moshimo Challenge Report
12
■おすすめフォント編
「最後にぼくのおすすめフリーフォントを紹介するよ！全て商用フリ
ーだけど、しっかりライセンスを読んでから使ってね！」
◎明朝体について： 文学、和風、優雅、高級感、女性的な印象。
・花園フォント
http://fonts.jp/hanazono/
※ダウンロードページ参照
フォントの詳細については、ダウンロードペー
ジをご参照のうえ、ご利用ください。
・出島明朝フォント
https://code.google.com/p/dejima-fonts/
Moshimo Challenge Report
13
※ダウンロードページ参照
◎ゴシック体について： ポップからビジネスまで幅広く使える。
・フォントポ日本語
http://yoshihisa.que.jp/fontopo/fontopo.html
※ダウンロードページ参照
Moshimo Challenge Report
14
・ぼくたちのゴシック
http://yoshihisa.que.jp/fontopo/index.html
※ダウンロードページ参照
※各ダウンロード先はもしものサービスではないため、予告なしに画面が変更になったり、サー
ビスが終了することもございます。ご了承ください。
「明朝体は和色との相性が抜群だから、明朝体のフォントに色を合わ
せる時は落ち着いた色や、渋めの色がおすすめだよ！」
■ 和色大辞典 ― 日本の伝統色 465色の色名と 16進数
http://www.colordic.org/w/
「反対に、ゴシック体の時は明るい色がいいのかな？」
Moshimo Challenge Report
15
「そのとおり！ゴシック体は活動的なイメージがあるから、ビビッド
カラーやパステルカラーを合わせると、しっくりくるよ！」
■ 角ばったフォントならはっきりとしたビビッドカラー
http://www.colordic.org/v/
■ 丸みのあるフォントならパステルカラー
http://www.colordic.org/p/
「フォント一つでショップの印象がガラっと変わるね！次回も GIMP
について解説していくから、今回の号をしっかり覚えておいてね！」
★ おしまい ★