ヘッダーロゴをオリジナル画像にしよう/cocoon

備忘録_49 / cocoon_11

細々と更新され続けてきた私の備忘録（仮）ですが、ついに記念すべき備忘録の記事投稿の50本目を迎えました！
50回を記念してブログサイト名を付けましょうという運びになり、そこで緊急アンケート調査を行いました。
正確には今回が49本目の投稿になりますが、最近よく思うこと、世の中なかなか計算通りに物事は進まないものです。
ま、ま、ま、いいじゃないですか …。こういうものってノリですからノリ！！ノリって大切ですよ！
サイト開設からもうすぐ一年になります。本当に未だに続いている事の方が奇蹟です。投稿者本人も超ビックリ。

アンケート集計結果発表

先にブログサイト名と、ブログサイトのロゴを３点ほど作成して、どれがこのサイトに相応しいかアンケートを実施しましたところ以下の結果が得られました。

---

第一位　EntryNo.2_Offton blog

---

第二位　EntryNo.1_私の備忘録（仮）

---

第二位　EntryNo.3_お布団ブログ

ロゴ画像の準備

今回この投稿記事では後者の方法を採用しています。ペイントツールやロゴ作成サイトの使い方がいまいち分からないという方は前者の方法で試してみて下さい。

ロゴ画像の作成方法

windowsペイントなどを利用してロゴ画像を作ります。今回は作る過程（ペイントツールの使い方）を省略します。
全部説明していたら説明が終わらなくなってしまう…。
ロゴの作成には、以下に紹介するようなロゴジェネレーターを使用すると便利です。

0⃣ ビジネス用途で使う場合の注意

個人の趣味内容の域を出ないブログサイトならばロゴ作成サイトでジェネレートされる画像で問題ありませんが、ビジネス目的で使っている、或いは後々ビジネス展開を考えているブログサイトならば、ベクターイメージのロゴを持っておいた方が良いです。

話しは逸れます。このページに使われている画像も全てそうですが、通信の混雑を避ける為に極力解像度を下げており、普段見ているwebに埋め込まれている画像は解像度72dpiで作られています。
全てのデジタル画像は、細かなドット（点）の集合体でできています。これは画素数とも呼ばれますがこの画像解像度とは要するに1インチの範囲における点の密度の事です。

通常、ロゴ作成サイトで作成される画像もweb上での使用を考え解像度72dpiでジェネレートされます。

ビジネスともなれば例えば名刺やパンフレットやチラシなどの印刷物つくり配布する様な展開も予想されます。しかし、印刷物を刷る作る時は最低でも300dpiの元データを要求されます。
印刷物はモニター画面と違い、画像の密度が高く4倍の大きさが必要になります。ですので、ロゴ作成サイトでジェネレートされたロゴ画像をそっくりそのまま流用して印刷しようとしますと小さく印刷される。または、画像を4倍に引き伸ばすためシャギー（ギザギザ）が目立ち見栄えが悪い印刷物が刷り上がります。

ドット（点）で構成されるラスターイメージのロゴ画像より、ベクトル（線）で構成されるベクターイメージのロゴ画像は用途に合わせてサイズを自由に可変させる事が可能という利点が大きく、特にプラットフォームを跨いで利用する場合の利便性は抜群に良いです。

また、ロゴ画像にカラーを使用する場合、CMYKとRGBの違いにも注意する必要があります。

どうしても本題からそれてしまうので深くは説明しませんが、（と、言いながら長々と説明をしています… ）
どういう事かと言うと、テレビやPCモニター、iphoneなどの液晶画面は自ら発光しております。ですが、本や印刷物そのものは光っていません。部屋の照明や電気スタンドの灯りに照らされて読むものです。
テレビディスプレイで使われる「光の三原色」赤・青・緑と、「絵の具の三原色」シアン、マゼンタ、黄、黒は仕組みからして全く違う原理であり、そのまま適用しますと違和感を感じる程度に微妙に違う色になります。PCモニターに映し出される物をそのまま印刷すると思ったよりも「くすんだ」色の物が刷り上がります。
パソコンプリンターなどでは違和感なく見られる程度に自動で式色を修正してくれております。
ただ、プリンターの印刷方式と、大量の部数を刷る印刷屋さんの印刷方式はまた違うものですので本格的なビジネス利用となるとハードルの高さが格段にアップします。

また、無料ロゴ作成サイトでジェネレートされたロゴについて、印刷に限って利用不可になっているサイトもあると思います。しっかり利用規約を読みましょう。

ロゴ画像のファイルフォーマット

ロゴ画像には主に「.PNG .JPEG .GIF」代表的な３つのファイル形式が使われます。
それぞれに一長一短があり、自身のサイトデザインに適した形式を選びましょう。

1⃣ PNG形式
画像の透過が使えます。ロゴマークの下に背景画像や白地以外の色の下地を敷いたとき、画像内で透過色が指定された部分は下地と合成され、透けて見えるように表示されます。
ストレッチ（伸縮）に弱い欠点があります。大きな画像や、小さな画像を置いてもレイアウトが崩れないようにブラウザ上で適切なサイズに画像を調節してくれますが、このとき自動調節が上手くいかず、細い線が崩れてしまうときがあります。ジャストサイズで調整しましょう。

2⃣ GIF形式
GIFアニメーションが使えます。動画データの再生ソフトなどを組み込まなくてもWebブラウザなどで短時間の簡易な動画（音声無し）を表示できます。PNG形式同様にストレッチ（伸縮）に弱いのが欠点です。この形式はバナーなどでよく使われます。
一昔前（2000年代）に主流であったファイル形式ですが、バナーなどは他のサイトに貼って貰う、或いは他者が利用するモノであり、全時代からの倣いで今でもGIFでバナーを作る人は多いです。
Flv形式のフラッシュアニメーションがウェブページに埋め込むことが出来なくなったこともあり、GIFアニメーションはやはりお手軽です。

3⃣ JPEG形式
ストレッチ（伸縮）に強く画像圧縮率も高い、ワールドワイドウェブ（WWW）における画像保存形式のスタンダードです。しかし画像の透過が使えません。いつでも気軽にテーマやスキンの変更が行えるようにボタンやロゴなどに使用するパーツのみ、GIFやPNG形式を使う人も多いですが、JPEG形式でも全く問題はありません。

ロゴ画像の設定の仕方

センターロゴ（デフォルト）

1. ヘッダーロゴ
   ヘッダーロゴに使用する画像はここからサーバーにアプロードします。
   一たびアップロードした画像を消去する場合はメディアライブラリから行います。
   　
2. ヘッダーレイアウト
   デフォルトではセンターロゴになっています。
   ページトップ中央に大きく表示され、その下にグローバルメニューが表示されます。
   　
3. ヘッダーの高さ
   ヘッダーの高さを任意に指定できます。マージン（余白）を大きく取りたいときに使います。
   空白にした場合、アップロードされた画像に合わせて自動的に調節されます。
   　
4. ヘッダーロゴサイズ
   アップロードした画像を任意のサイズに可変できます。元画像の縦横サイズと、ここで指定された縦横比が違う場合画像が押し潰されたり歪んだりします。このときGIFやPNG形式の画像はストレッチ（伸縮）に弱く、細い線など消えて表示されたりします。注意して下さい。
   設定をあまり弄らない、デフォルト（空白）での使用を推奨します。
   　

センターに大きくサイト名を表示させるよく見かけるような一般的なレイアウトです。あまり奇抜な工夫を凝らす事無く周りに歩調を合わせたデザインはユーザビリティにおいて秀でています。頭でっかちで一見ウザったい様にも見えますが、不思議な事にあまり目聡く見えないものです。むしろ一般的なスタイルの採用は読者に安心感を与えます。

トップメニュー（右寄せ）

1. ヘッダーロゴ
   ヘッダーロゴ使う画像をサーバーにアプロードします。
   　
2. ヘッダーレイアウト
   トップメニュー（右寄せ）はグローバルメニューと同じラインの左にロゴが表示されます。
   トップメニュー周りのUIがとてもスリムで開いた瞬間にパッと見で記事全体を把握出来ます。
   　
3. ヘッダーの高さ
   ヘッダーの高さを調節した場合、グローバルメニューの高さも上に間延びする事になります。
   　
4. ヘッダーロゴサイズ
   「ヘッダーレイアウト」が「センターロゴ」でないと、ロゴサイズの変更は行われません。
   と書いてありますが、正確には高さは変更されませんが、幅は変更されます。
   当然、押し潰された画像になります。高さは上の「3.ヘッダーの高さ」で調節しましょう。
   現在私が適用しているスキン「カラフルライン」では、デフォルトでトップメニュー（右寄せ）のヘッダーの高さは50pxになっているようです。トップ（右寄せ）にGIFやPNG形式の画像を指定した時は確実に強制ストレッチ（伸縮）されます。面倒なので、ロゴ作成時に高さ50pxに合わせて作ってしまう事をお勧めします。
   　

スリムメニューです。読者は記事を読むために下へ下へとマウススクロールをするわけですが、マウスの移動距離を最小限に留めてくれます。
そりゃあ、サイト名をデカデカと表示させて、出来ればたまたまサイトを訪れたお客様に「私の備忘録（仮）」じゃなかった…備忘録改め「お布団ブログ」という名前とURLを今この場で覚えて欲しいなという野望は私にもありました。
それならばいっそのこと下にマウススクロールする度にロゴも追従スクロールさせるという方法もあったハズです。
… ですが、そこまで押しつけがましくやってもかえって不快感を与えお客様の印象を悪くするだけと思ったのです。
… ですから、そのようなあざとい事は決してやってはなりません。否、絶対にすべきではない！

そこでお願いがあります。是非今日この場で「私の備忘録（仮）」改め「お布団ブログ」の名を覚えて帰って下さい。

eyecatch image：DevanathによるPixabayからの画像