タイトルバナーやロゴ画像の作り方

サイトタイトルはテキストで表示されていることも多いですが、使用できるフォントに限界があるため、バナーやロゴを作成して画像で設定されているのが一般的です。

例えば、このようなバナー画像を作成してタイトルの部分に設定することになります。

このバナーやロゴを作成するツールとして、アドビ社のPhotoshopやIllustratorの人気が高いです。けれども、価格が高めのツールになりますので、無料ツールのGIMPなどを利用するのもよいかと思われます。ちなみに、Googleのロゴも、初期の頃はGIMPで作成されていたようです。

実際の作り方についてですが、例えば、Photoshopを利用して作成する場合、まずはフォントや色彩を指定してタイトルとなるテキストを記述します。

次に、「フィルター」で各種の加工を施すと出来あがりです。

このページのバナーは「押し出し」で処理してみましたが、風とかグラデーションなどを利用してもそれっぽいふいんきが出てくると思います。

タイトルのバナーが出来あがりましたら、そのままトップページへ画像でリンクする形で設定しておくとよいでしょう。

画像の透過設定について

このバナー画像を作成する際、背景色は白色ではなく、透過の形で作成しておくと文字以外の部分はホームページの背景色で表示されるので違和感がなくなります。

もし、背景色を「白色」で作成した場合、このように違和感が出てきてしまいます。

一方、「透明色」に設定しておくと、文字以外の部分が背景色で表示されるので違和感がなくなります。

また、画像のファイル形式は、jpgやpng、gifなどで保存することをおすすめします。ロゴやバナーは全ページで使用するものですので、bmpなどの容量の多い形式は避けるとよいでしょう。

検索エンジン対策にバナー画像のalt属性を記述する

バナータイトルの部分を「画像」で表示する場合、SEO対策の面で多少は不利といえます。検索エンジンは画像に書かれている文字までは判別することができないので、単純にテキストのみで記述した方が「何のサイトなのか？」を検索エンジンロボットに明確に伝えることができます。

ですので、もしバナーやロゴの画像で設定する際には、「何の画像なのか？」を示す「alt属性」を記述しておくことをおすすめします。このalt属性は、画像が表示されない場合の代替テキストにもなりますので、単純にサイトタイトルをそのまま記述しておくとよいでしょう。

■テキストのみで表示する場合のフォント指定

もしタイトルを「バナー画像」ではなく、「テキストのみ」で設定する場合、フォントをそれっぽいものに指定しておくとよいと思います。

例えば、このようなポップな文字でバナーを作成する場合、CSSで「メイリオ」などのフォントスタイルを決め打ちして指定することで、ほぼ似たような形で表示することができます。

■表現力豊かなWEBフォント

標準的なフォントでは物足りない場合、WEBフォントを使用すれば、テキスト表示でも表現力豊かなタイトルを表示させることができます。

例えば、グーグルフォントを利用するとこのような感じになります。

また、WEBフォントはテキストで表示されるため、SEO対策上のメリットがあります。

けれども、このWEBフォントは主にアルファベットのみで、日本語ではあまり普及していません。
デザイン性を重視する際は、やはり画像でバナーを作成した方がカッコイイ、クールなホームページが出来あがると思います。

企業や公官庁のホームページを見てみますと、「ロゴ＋黒文字テキスト」でバナー作成されているケースが多いです。

例えば、厚生労働省や三菱東京UFJ銀行、あるいはヤフーファイナンスなどがそうですが、大きなサイトはたいてい「ロゴ＋企業名」で作成されています。

イメージでいうと、このような感じです。

けれども、このロゴの部分については、テキストではなく絵になりますので、アートの才能がないと自分で作成するのは難しいかもしれません。ですので、ロゴの部分については、できるだけ、ロゴ作成業者に依頼して作成してもらうとよいでしょう。

もし、ロゴを名刺などの紙媒体でしか持っていない場合、サイト上でも使うには紙媒体からロゴの部分をスキャンし、トレース処理などを施す必要がありますが、オリジナルとは微妙に違って来たりもしてしまいます。

のちのち様々な用途で使うケースも出てくると思いますので、ロゴを業者に作成してもらう際には、PhotoshopやIllustratorなどの元となるデータも必ずもらっておくようにするとよいでしょう。