Upload
vuongdien
View
217
Download
1
Embed Size (px)
Citation preview
このコーナーは、HTML、CSS のことならなんでもおまかせの「マリー」と、
うさぎ界 No.1 とも言われているデザイナー「ナムー」が、WEB ページ作成の
コツを解説していきます。少し専門的な内容も含まれていますが、分からない
ことは積極的に調べて、1つ1つスキルアップをしていきましょう!
マリー
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
■フリーフォント導入の前に気をつけること3箇条
・読みやすい色とフォントを選ぶ。
・商用利用可なのかを、しっかり調べる。
・違法ダウンロードはしない
■インストールの手順例
一般的なダウンロードの手順は次のような手順となります。
【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
について解説していくから、今回の号をしっかり覚えておいてね!」
★ おしまい ★