サイトのロゴ画像の作り方

サイトのタイトル部分のロゴはテキスト形式で表示されていることも多いですが、サイト運営者がCSSで指定したフォントで表示するには、閲覧者のPC環境でもそのフォントがインストールされている必要があります。

そのため、テキスト形式ではロゴを誰にでも同じように表示させるのは困難なため、画像で作成して、どのような閲覧環境でも同じように表示させるのが一般的です。また、ブランディングのため、h1やh2などの見出しタイトルの箇所についても美しいフォントを使用して画像で作成されているケースもあります。

例えば、このようなロゴ画像を作成してヘッダー部分に設定することになります。

このバナーやロゴを作成するツールとしては、アドビ社のPhotoshopやIllustratorが人気ですが、価格が高めのソフトのため、無料ツールのGIMPなどでもよいかと思われます。Googleのロゴも初期の立ち上げ当初はGIMPで作成されていたらしく、無料ではあるものの、かなり高機能なツールかと思います。

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

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

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

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

ロゴ画像の透過設定について

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

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

一方、「透明色」に設定しておくと文字以外の部分が背景色で表示されるので違和感がなくなります。透過の場合はパソコン上ではシマシマ模様で表示されますので、白色ではないことを確認しておくとよいでしょう。

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

検索エンジン対策にロゴ画像に「alt属性」を記述する

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

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

もし、WEBフォントなどを使用して同じように表示できる場合、画像よりもテキスト形式で表示させるのがおすすめです。

テキストのみでロゴを表示する際のフォント指定

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

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

この場合、CSSで無理やり同じように指定すれば以下の形になるかもしれません。

<h1><span class="sample1">初心者でも簡単！</span><span class="sample2">ホームページの作り方</span></h1>

h1 {width:230px;}
.sample1 {font-size:18px;color:#ad3139;display:block;text-align:right;font-family:"HGP創英角ﾎﾟｯﾌﾟ体";padding-bottom:7px;font-weight:normal;}
.sample2 {color:#000;font-size:24px;font-family:"HGP創英角ﾎﾟｯﾌﾟ体";font-weight:normal;}

ただし、閲覧者の環境でも指定した「font-family」がインストールされている必要があるため、場合によってはうまく表示されないこともあります。できるだけ、デフォルトでインストールされている標準的な「メイリオ」などのフォントを使用するとよいでしょう。

表現力豊かなWEBフォントによるロゴ表示

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

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

また、WEBフォントはテキストで表示されるため、SEO対策上のメリットがあります。画像ではなくテキストのため、文字を反転させてコピーもできます。

けれども、このWEBフォントは主にアルファベットのみで、文字数の多い日本語フォントではあまり普及していません。アルファベットとは違い、日本語はひらがなやカタカナ、漢字なども含めるとフォントの数が多くなってしまうため、表示の遅延などのデメリットがあります。

デザイン性や表示速度を考えると、やはり画像でバナーを作成した方がかっこいい、クールなロゴが出来あがると思います。

会社ロゴの作成にはデザインのセンスが必要

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

例えば、厚生労働省や三菱UFJ銀行、あるいはヤフーファイナンスなどがそうですが、大きな会社のサイトはたいてい「ロゴ＋企業名」で作成されています。イメージでいうと、このような感じになるかもしれません。

けれども、このロゴの記号の部分についてはテキストではなく絵になるため、デザインの才能がないと自分で作成するのは難しいかもしれません。そのため、会社ロゴ作成の際は業者に依頼して作成してもらうとよいでしょう。

最近ではクラウドソーシングで依頼することもできるので、「ランサーズ」や「クラウドワークス」などのサイトでデザインを募集するのもよいかもしれません。

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