ヘッダーに配置するロゴの作成を簡単に作成してばかりいたのでロゴジェネレータに頼らずにロゴ作成をすることにしました。
ロゴ作成は素人以下の実力を持つ私なので高機能すぎるソフトではなく簡単に使える無料ソフトでロゴの作成をします。
私が作成するロゴデザインはしょぼいのでロゴを作成する工程面で参考になることがあれば幸いです。
それではロゴ作成スタートです。
ヘッダーのロゴ作成に使用する無料ソフト
ヘッダーのロゴ作成に使用する無料ソフトは2つのソフトを使います。
１つ目の無料ソフトは「Canva」です。
Canvaはダウンロードやインストール不要のWebブラウザ上でロゴを作成することができるデザイン作成ツールです。
デザイン作成ツールなのでロゴの作成に限らずヘッダー画像やバナーなどCanvaに備わっているテンプレートや素材をドラッグ&ドロップ操作で自分のアイデアと組み合わせてデザインすることができます。
ロゴテンプレートを参考にしながらデザインできるため、私のようなロゴ作成の初心者でもいい感じのロゴを作成することができます。
２つ目の無料ソフトは「remove.bg」です。
remove.bgはブラウザ上で画像の背景を透過できるツールです。Canvaで作成したロゴの背景をremove.bgを使用して透過するために使用する無料ツールです。繊細な透過ができるためおすすめでもあります。
上記2つの無料ツールでロゴを完成させる作成の流れを説明します。
ヘッダーのロゴを作成する作業の流れ
ヘッダーのロゴを作成する作業の流れは、先述した「Canva」でヘッダーに表示するロゴのデザインを作成します。
作成したロゴは画像になるのでヘッダーに表示するときに不要な画像の背景を透過させてロゴを仕上げます。
仕上げたロゴは実際にサイトのヘッダーに配置してヘッダーとロゴとの見栄えがおかしくないか表示確認します。
3ステップ作業の工程なので簡単そうですが、やはりロゴを作成する工程の段階ではアイデアが必要なので時間がかかるかと思います。
ヘッダーのロゴを作成する工程は１つずつ具体的にしたので読み進めてみてください。
Canvaでロゴの作成をする
Canvaでヘッダーのロゴを作成するためにCanvaにログインします。ログインはGoogleアカウントかFacebookアカウント、メールアドレスで登録してログインします。
上の画像のように「デザインの経験がなくても問題ありません！」とのことです。ロゴ作成の経験ありません。
Canvaにログインするとトップページ画面になるので画面右側の「カスタムサイズ」を選択してヘッダーに配置するロゴ要素のサイズに収まるサイズの幅と高さを入力し「新しいデザインを作成」をクリック
新規タブでロゴを作成する作業画面に切り替わるので指定しておいたカスタムサイズ枠の中を作成スペースにしてヘッダーのロゴを作成することができます。
次に作成スペースから見て左パネル内の「テキスト」を選択すると「見出しを追加」があります。クリックで作成スペースに追加してロゴにするサイト名を入力します。
入力できたら作成スペース左上のボタンでロゴの書体を決めます。書体を決めながら書体右横ボタンでフォントサイズを調整します。
この辺りまでロゴの作成をすると、ヘッダーに表示したときのロゴイメージが見えてきます。そのイメージを元にロゴにするサイト名のカラーを変更したり、左パネルの「素材」や用意した画像をブロックで組み合わせてデザインしていきます。
私の場合は書体にYellowtailを使用して、サイトタイトルの頭文字とそれ以外の文字のカラー分け。そして素材から線を追加してロゴ背面に表示したヘッダーロゴを作成してみました。
このように作成したロゴは「ワードマーク」というロゴの種類です。
ワードマークは例えばCoca ColaとかGoogleがワードマークのロゴです。ロゴを作成して使用するサイトの企業名とかブログ名をロゴにしてヘッダーでアピールするといったロゴです。
または企業のWebサイトで見ることが多いワードマークのサイト名と隣り合わせて配置されているロゴマークは「シンボルマーク」というロゴの種類です。
上の画像のロゴはCanvaでシンボルマークをワードマーク左横に配置して作成したロゴ画像です。
「シンボルマーク」と「ワードマーク」を組み合わせてデザインしたロゴは「コンビネーション」というロゴ作成のパターンになります。
ヘッダーのコンビネーションロゴをCanvaで作成する場合は、素材の図形を組み合わせて作成してみたり、Canvaのホームに戻って「ロゴ」の項目からテンプレートを参考にしてデザインのヒントにするなどの作成ができます。
またロゴテンプレートを作業スペースに追加して全てのロゴデザインを使用するのではなく、参考にしたいブロックだけをコピペして自作したロゴに組み込んでデザインのヒントとして参考にすることもできます。
ロゴのデザインが完成したら画面右上のダウンロードボタンでロゴ画像をダウンロードします。
ロゴの背景をremove.bgで透過
作成したロゴは背景を透過させます。ロゴの背景透過は重要です。透過しないロゴ背景とヘッダーの背景色が異なる場合、以下の画像のようにロゴがヘッダーに同化しないからです。
作成したロゴの背景を透過するやり方はremove.jpのページを開いて表示される「画像をアップロード」のボタンにロゴ画像をドロップします。
ロゴ画像をアップロードすると自動でロゴの背景が透過されます。
透過後にロゴのプレビューが確認できるので問題なければダウンロードボタンで透過ロゴをPCにダウンロードします。これでヘッダーのロゴを作成する工程は完了です。
今回ヘッダーのロゴを透過するために使用したremove.bgは無料で使用できるツールですが、無料版は0.25メガピクセル（625×400px程度）、50枚／月まで切り抜き可能です。
作成したロゴをヘッダーに表示する
ロゴの作成ができたら作成したロゴをヘッダーに配置して、イイ感じに仕上がっているかを確認します。
header要素のロゴを配置する要素にHTMLのlinkタグのhalf属性でロゴをリンクする。またはWordPressのように「ロゴ画像の設定」がある場合には設定から配置します。
ロゴを配置する要素にはロゴのサイズが収まっているか確認しておくようにします。
ロゴの配置でミスった経験があるのですが、メディアクエリでヘッダーのレイアウトが切り替わるヘッダーにしてる場合、インデックス登録するときにモバイルフレンドリーに引っかかる場合がありました。
それなのでロゴを配置する余白とか縦横のサイズが収まっているか確認しておくようにします。
作成したロゴのヘッダー内の配置とロゴのデザインに納得できたら、ヘッダーのロゴを無料ソフトを使用して作成するのは完了です。
上の画像のように私のヘッダーのロゴ作成は、さんざん作成した挙句、ピクトグラムくんが「Word shu Pressだぞっ」とサイトタイトルを紹介するというショボいヘッダーロゴにしてしまいました。
ヘッダーのロゴを作成して思ったこと
ヘッダーのロゴを作成して思ったことがあります。
小さい限られた枠内でロゴをどのように表現して作成するかがとても難しく感じました。
ただかっこよく見えるとか見栄えだけを満たすだけのロゴ作成では良いロゴ作成はできないなと実感します。
ロゴに使用するサイトタイトルや会社名に対してのイメージや将来の希望とか夢でも良いかと思います。想像できる単語からのイメージを形にして表現することがヘッダーのロゴ作成の土台になるのだと作成して思ったことでした。
産まれてきてくれる我が子の名前を考えるのと似たようなものかもしれません。
