パワーポイントでヘッダー画像を作るワザ

サイトの開くとまず目に飛び込むのがヘッダー画像、いわばサイトの顔です。

企業サイトはその道のプロがやってますからさすがにうまい。あそこまでとは言わないけれど、少しはマシなヘッダー画像で飾りたい、と思うのは世のサイト制作者の願いです。

この王道サイトを見てみましょう。演習サイトはあまりに地味だし、いかにも手を抜いている、運営者のやる気が感じられないなどと言われかねません。

そこでヘッダー画像を作成しサイドバーの見出しなども変更して、今ご覧のようなデザインにしました。特にヘッダー画像導入の効果は大きいと思います。もっと派手なデザインも可能ですが、コンテンツとの関係でこのサイトは化粧文字主体のデザインとしました。

そこで今回はヘッダー画像の作り方をご紹介しようと思います。それもパワーポイントを使った方法です。なぜパワーポイントなのか?

パワーポイントを使う理由

先ず第一に、直感的な操作というかその使い勝手の良さです。パワーポイントは本来プレゼン資料作成用ですが、私はもっぱらWebサイト用の画像作成に使っています。

GIMP(ギンプ)など優れた専用の画像処理ソフトもあるのですが、いつになってもレイヤーとかさまざまな機能が使い切れません。その時はどうにか覚えて使うのですが、少しして忘れ、また覚えて、また忘れの繰り返しです。画像処理は適当に切り上げたいのに、優秀なGIMP君は許してくれません。

一方、パワーポイントはMSオフィスソフトの一員なのでエクセルなどと操作の共通性もあり操作は直感的で、一度覚えればほとんど忘れません。

第二に、必要十分な画像処理機能です。グラデーションはもちろん、背景の透過処理もできます。パワーポイントだけでWebサイト用画像処理としてやりたいことの90%はできてしまいます。GIMPなど専用ソフトは補助的に使うだけです。

第三は資産の有効活用です。パワーポイントは有料でなかなか高価ですが、会社員の方や学生はお持ちのパソコンに既に入っていて、しかもほとんど使っていないケースが多いのです。それを使いましょう。

もし入っていなければ? ウーン、そうですね。なんとかして手に入れるか、GIMPを覚えてもらうしかないですかね。この記事を読んでから決めてください。

ヘッダー画像の作成

それでは王道サイトのヘッダー画像を例にして、パワーポイントによる制作過程をご紹介します。使用したパワーポイントは2010年版なので前後のバージョンでは多少表現の違いが出ます。

仮台紙を作る

先ずヘッダー画像のサイズを決めます。横はサイト幅とピッタリ同じ、縦は大体の目安で選びます。今回は横1000px、縦200pxとしましょう。

使い慣れた画像ソフト、例えばWindows付属のペイントを使ってその大きさの長方形を作りデスクトップに保存します。長方形には好みの薄い色をつけておきます。ファイル形式はJPGではなくPNGにします。PNGは加工や保存を繰り返しても劣化が少ないです。

パワーポイントに仮台紙を貼り付ける

パワーポイントを起動し表示されたスライド(プレゼン資料の各ページのこと)から「クリックしてタイトルを・・・・・」などの欄を削除、また左サイドのカラムも閉じます。

メニューの「デザイン」から 左端の「ページ設定」へと進み、スライド幅を28cmに設定します。これで準備完了。デスクトップに置いた先ほどの画像をマウスでつまみ、スライド上にドロップします。すると下記画面のようになるはずです*。

※:パワーポイントでも簡単に長方形を作れますが、パワーポイントではピクセルでのサイズ指定はできず、センチだけ。ディスプレイの解像度なども関係し、ピクセルからセンチへの換算がちょっと面倒なのです。もちろんパワーポイントから直接、長方形の台紙を作ってもOKです。

pawapo-daishi

こうすることで、原寸大でヘッダー画像の作成・編集ができるようになります。なおこの時、画面右下のパーセント表示が100になっていないと原寸大表示にはならないの要注意です。

台紙を作る

次は仮台紙の大きさを基準にしてパワーポイントで台紙を作ります。パワーポイントで作った台紙は色の変更、グラデーション、透過率調整など、いろんなことが簡単操作でできてしまいます。

メニュー「挿入」 → 「図形」へと進み、たくさんの図形の中から長方形を選びます。マウスポインタが十字になるので、仮台紙と同じ大きさで長方形を作ります。

マウスポインタを仮台紙の付近で操作すると、点線が現れるのでそれを基準にすれば、簡単に仮台紙とピッタリ同じサイズの長方形が作れますね。用済みの仮台紙は削除してしまいます。以上でヘッダー画像の台紙というか、背景枠の完成です*。

※なんか面倒なことをやってるようですが、慣れればスタートから背景枠完成まで2分とはかかりません。

台紙で遊ぶ

台紙の上で右クリックすると表示される下図左のリストから「図形の書式設定」を選びます。最初は「塗りつぶし(単色)」を選び、「色」のバケツマークをクリックして、適当に色を選びます。

kidou

shoshiki-settei2

「図形の書式設定」画面にて、次は「透過性」のスライダーに注目、それを左右に移動すると色の濃さが無段階に調節できます。背景色は主役の文字やイラストとの関係で決めるので、背景色を手軽に変更できるこの機能は大いに助かりますね。

今度は「塗りつぶし(グラデーション)」で遊んでみましょう。そこにはスタイル・種類・方向・角度などおもちゃがたくさん並んでいます。いろいろ組み合わせてバリエーションを楽しみます。これだけの背景を選べればもう十分でしょう。

また背景画像や写真を背景として取り入れることもできます。後述の「図ツール」なども使って背景としてふさわしいように加工して使います。

加工の例としては、適当なサイズに切り取った好みの画像をスライド上に取り込みその上に白色の長方形を重ねます。透過率を調整すれば下層にある画像の濃さを無段階で調節できます。

また白色のグラデーションを重ねれば、真っ白に消えていくようなスタイリッシュな画像も作れます。

yabusame

サイトタイトル文字を台紙に乗せる

さて本番に戻ります。背景はシンプルな薄いブルー、ボーダーは「線なし」にします。ボーダーはサイトへの貼り付け時に指定する方が見栄えの調整が楽です。

メニューの「挿入」から「テキストボックス」を選び、台紙上でご自分のサイトタイトル(ブログ名)を作ります。私の場合は取りあえず文字サイズは36、書体はプルダウンメニューから「AR新藝体E」を選びました。文字サイズは後でいくらでも変更できます。

文字をデザインする

文字上でクリックすると、画面上部に「描画ツール」なるものが出現するのでそれをクリック。すると文字にいろんな修飾を加えることができます。

特に下図に示す「図形の効果」と、右サイドの三つは使えそうなデザインが満載です。しかし私の場合はまだ満足できず、もうひとひねりしました。

moji-koka

文字部分を選択(ボーダーを点線ではなく実線表示にする)して右クリック、プルダウンメニューから「図として保存」を選び、デスクトップに適当な名前でPNG保存します。

それをマウスでつまみ、先ほどのパワーポイント台紙上にドロップします。(元のテキストボックスはジャマなのでどこかに避難するか消去)

その文字画像を選択すると、画面上部に今度は「図ツール」が表示されるのでそれをクリック。すると画面上部が切り替わり、文字を図として修飾できるようになります。

この「王道のネットビジネス研究所」の文字画像は「図のスタイル」の左から4番目、「右下方向の影付き」で修飾して作りました。「描画ツール」「図ツール」と、プレゼンソフトのパワーポイントには実にたくさんの機能があるものです。

サイト説明文とロゴを追加する

この王道サイトヘッダー画像には右の方に説明文を追加しています。ヘッダー画像の一部なので全てのページに表示されます。この説明文も、サイトタイトルと同じように、テキストボックスから好みのデザインで作成していきます。

ヘッダー画像のこの部分は文字だけでなく、わんちゃんの写真やイラストやアフィリエイト用画像などいろんな用途に使えます。

ところで台紙の上に写真やイラストを貼り付けるには、背景を透過させた透過画像を作る必要があります。ここでもパワーポイントが活躍します。

背景を透過させたい画像をパワーポイントのスライド上にドラッグ&ドロップします。その画像を選択すると、例の「図ツール」が出現、それをクリックし左端の「背景の削除」へと進みます。

赤紫色の部分が透過されて消える部分です。それで良ければ「変更を保持」をクリックして確定します。これで背景を透過させた透過画像ができました。それをパワーポイントのヘッダー台紙上にあちこち移動させたり、拡大縮小したり、修飾したりと、もうやりたい放題。パワーポイントに脱帽です*。

※パワーポイントでの透過処理は地と模様のコントラストが大きくないとうまくいきません。他の高機能画像ソフトを使う方法もありますが、私としてはパワーポイントで透過処理できない画像はすっぱり捨てて別の画像を使います。

次に好みでロゴを追加します。目的にピッタリの無料サイトがありました。ロゴマルシェです。メビウスリングみたいなロゴをダウンロードし、白色背景を透過させ、台紙に追加しました。そしていろんな要素の配置やらサイズやら色合いやらを変えて試してみます。

haichi-kento

サイトへの挿入

そして結果として今ご覧のヘッダー画像に落ち着きました。あまりに派手なヘッダーは商用サイトでは信用を落とすので比較的地味なデザインにしました。

最後は完成したヘッダー画像の要素を全て囲い込んで、「図として保存」します。そしてあなたが使い慣れた画像ツールを使って上下をトリミングすれば完成です。

そしてそのヘッダー画像をWebサイト最上部のH1見出し「ネットビジネスを始めたい人・・・・・」と画像下のナビ部分の間に挟み入れて作業を完了します。

以上、パワーポイントを使ったヘッダー画像作成でした。この方法はヘッダー画像作成だけじゃなくほとんどの画像処理に応用可能です。パワーポイントをドシドシ活用して使い方に慣れ、見栄えで損をしないWebサイトを作りましょう。

おまけ:画像処理ソフト紹介

私のWebサイト画像処理はパワーポイントでほとんど済んでしまいますが、他にも画像ツールを使っているのでご紹介します。全部定評のある無料のソフトです。

・IrfanView
画像を開いたり、切り抜いたり、縮小したりするのはほとんどこれを使っています。とにかく軽快に動作します。私にとって唯一の欠点は、透過画像を加工(拡縮など)すると透過性が壊れてしまうことです。

・ペイント
Windows付属の画像ツールです。IrfanViewでうまく処理できない時に使います。特にありがたいなと思ったのは、エクセルの表やグラフを画像として取り出す時です。

エクセルの対象部分を少し大きめに選択し、ペイントを起動し、「貼り付け」を実行します。するときれいな画像が取り込めます。周囲をトリミングして完成です。

他のソフトでは奇妙な線が追加されたりして、品質がイマイチです。エクセルもペイントもパワーポイントも同じ会社、相性の良さはバツグンですね。

・GIMP
本格的な画像処理ソフトですが、私のようなアマチュアがたまに使う程度では作業効率の悪さだけが目立ちます。透過画像の縮小やトリミングだけお世話になってます。

サブコンテンツ

このページの先頭へ