ホームページの「アイコン」を無料で作成する方法

ホームページを作成する際に必要な事はたくさんありますが、忘れがちなのがホームページのアイコンです。

アイコンはさまざまな場面でユーザーの目に付く、ホームページのシンボル的な存在となります。

今回は、このホームページのアイコンの作成方法について解説していきましょう。

ホームページのデザインで見落とされがちなのがアイコンです。

分かりやすいところでは、ホームページを表示しているブラウザのタブに表示されるロゴで、この「WEB学園」を開いた状態でブラウザのタブを確認すると、ひとさし指を指しているマークが表示されているはずです。

これがホームページに設定されている「アイコン」です。

ホームページのアイコンはブラウザのタブだけではなく、ブラウザのブックマーク機能や、新規タブを開いたときに表示される、よく訪れるサイトのショートカットにも使われています。

また、スマートフォンでウェブページのショートカットをホーム画面に追加した時のアイコン、あるいは、Googleの検索結果の画面で項目の左側に表示されたりもしています。

目立たないようでいて、実はホームページの印象を大きく左右している要素と言えるでしょう。

アイコンは表示される場所によって大きさが異なり、ブラウザのタブに表示されるアイコンは16×16ピクセルですが、新しく開いたタブに表示されるのは64×64ピクセルです。

Googleのウェブ検索では、48×48ピクセルの倍数を推奨しており、16×16ピクセルのアイコンは指定しないよう指示していますが、その他にも、24×24ピクセル、32×32ピクセル、36×36ピクセル、64×64ピクセル、128×128ピクセルと、ホームページのアイコンは調べれば調べるほどいろいろなサイズが求められていることが明らかです。

そうなると、どの大きさのアイコンを作ればいいのか混乱しがちで、すべての場面に必要なアイコンを作っていると10種類以上にもなるため、作成だけでも大変な手間になります。

そこで今回は、WordPressで利用するサイズに準拠したアイコンを作成します。

WordPressでは、512×512ピクセルのアイコンをアップロードすると、表示する場所に応じて大きさを自動的に調整してくれるので、これを基準に実際にアイコンを作ってみましょう。

ホームページのアイコンを作る際に念頭に置かなければならないのが、アイコンの縮小表示です。

WordPress用のアイコンの元の画像サイズは512×512ピクセルですが、実際に使われる際には最小で16×16ピクセルにまで縮小される可能性があることを考慮する必要があります。

複雑な記号やロゴをアイコンにしても、16×16ピクセルにまで縮小されると、細部が潰れて何が描画されているのか見えなくなってしまいます。

ホームページのタイトルをそのままアイコンに入れても、ブラウザのタブやブックマークに縮小表示された状態で、内容を視認するのはほぼ不可能です。

そこでアイコンのデザインの方法として、主に2つのやり方があります。

ひとつは、単純な図形のロゴにする方法で、丸、四角、菱形、三角形などシンプルな形状のデザインを採用します。

このロゴを半分は赤、もう半分は青といったように、対比的な色で塗り分けることで視認性を増すデザインもいいでしょう。

このアイコンなら16×16に縮小されても見分けが付きます。

もうひとつは、1文字だけのデザインにする方法で、例えばホームページのタイトルの頭文字になっている漢字やひらがな、アルファベットをアイコンのモチーフにします。

これなら最小化された場合でも、ギリギリ文字の内容を視認することができるので、丸、四角、三角などの記号と文字を組み合わせることでロゴデザインを構成するのが一般的です。

次の章では、質問に答えるだけでロゴが作れる「Hatchful」と、ホームページ向けの画像が簡単に作れる「Canva」を使って、実際にアイコンを作る方法を解説します。

アイコンを作る手順は大きく分けると、アイコンのベースになるロゴ画像の作成、その画像をアイコンとして使える形式に変換するという2段階になります。

ベースのロゴ画像の作成には「Hatchful」か「Canva」の利用をおすすめします。

「Hatchful」はいくつかの質問に答えることで、利用者の要望に沿ったアイコンを自動的に生成するサービスです。

自分で画像編集ツールを操作して作成する必要がないので、デザインセンスに自信がない人でも本格的なロゴを作ることができます。

「Canva」はオンラインで利用できる画像編集サービスで、分かりやすい操作体系が魅力です。

ロゴを自分の手で作成したいが、本格的な画像編集ソフトを使いこなす自信がない人に最適です。

これらのツールで作成したロゴ画像は、透過処理やサイズ調整が行われていないため、そのままではアイコンとして利用できません。

アイコン化の処理は「PEKO STEP」の「透過PNG画像作成ツール」で行いましょう。

このソフトではPNG画像の画像サイズの変更や、透過処理の適用に対応しているので、WordPressのアイコン推奨サイズである512×512ピクセルに変換し、透過処理でロゴの背景を消去しましょう。

「Hatchful」は、質問に答えていくだけでロゴが作れるウェブサービスです。

質問で問われるのは、ビジネスの業界、デザインのスタイル、ビジネス名（ホームページのタイトル）、スローガン、ロゴの使用場所で、これらの質問に答えるだけで、その用途に合ったデザインの候補が自動的に生成されます。

ただし、思っていたようなアイコンが毎回候補に挙がるとは限らないので、その場合は質問の回答にあえてテーマとは関係ない項目を選んで、いろいろなデザインのアイコンを生成させてみるといいでしょう。

「Hatchful」でロゴを作成できたら、「PEKO STEP」でサイズを調整して512×512ピクセルの画像に変換しましょう。

Hatchfulで作成したPNG画像は、最初から透過処理が施されているので、「PEKO STEP」での透過処理は不要です。

「Hatchful」で5つの質問に答えていきましょう。

質問を元に複数のロゴのデザイン候補が挙げられるので、その中から16×16ピクセルのサイズに縮小してもアイコンとして認識されそうなデザインを選びます。

「ロゴを編集する」をクリックすると文字や色といったディテールの選択ができます。

「次へ」から「ダウンロード」をクリックするとURLが記載されたメールが送信されるので、そこからZIPファイルをダウンロードして展開します。

ZIPファイルには、サイズや縦横比が異なる16個の画像が入っていますが、ホームページのアイコン作成では「logo_transparent.png」を使いましょう。

「PEKO STEP」の「透過PNG画像作成ツール」でPNGファイルを開き、「ツール」からハサミの形をした「切り抜き」をクリックします。

画像下の「画像の切り抜き」の「範囲」で、幅を「512」、高さを「512」と入力すると、切り取りの範囲が表示されるので、ロゴが納まるようにドラッグ＆ドロップし、「選択範囲を切り抜く」ボタンをクリックします。

「ファイル」から「保存」でアイコンとして使えるPNGファイルがダウンロードできます。

Canvaは、ホームページで使う画像の作成や動画の編集などが行えるサービスで、その中の機能のひとつにアイコンの作成があります。

Hatchfulでは、質問に答えていくだけでアイコンが生成されますが、Canvaは図形や文字を自分で配置したり、色を選択したりと、自分の手を動かしてロゴのデザインを作れます。

Canvaで作成したPNG画像は最初から512ピクセル×512ピクセルなので、サイズの変更は必要ありませんが、透過処理が施されていないので、「PEKO STEP」を使って透過処理を行いましょう。

右上の「デザインを作成」を選択し、「カスタムサイズ」を選択、幅と高さは「512」、単位は「px」を指定して「新しいデザインを作成」をクリックします。

左側の「素材」から背景に配置する記号を選びます。

ここでは菱形を選択、キャンバスよりも一回り小さいサイズに調整し、縦と横方向でも中央になるように配置します。

菱形の色を変更します。上部の中央左寄りの「画像を編集」の左にカラーパレットがあるのでここで色を指定します。

次に文字情報をロゴに載せます。左側の「テキスト」「見出しを追加」をクリックするとキャンバスにテキストボックスが表示されます。

テキストボックスに「WEB学園」の頭文字のアルファベット「W」を入力して、適切な大きさに調整します。

右上の「ダウンロード」でファイルの種類は「PNG」を選択し、「ダウンロード」をクリックするとPNGファイルをダウンロードできます。

ここからは「PEKO STEP」の「透過PNG画像作成ツール」を使います。

作成したPNGファイルを開いて、左側の「色の透過」のアイコンを選択、画像の背景の白い部分をクリック。

「ファイル」から「保存」で透過処理を行ったPNG画像をダウンロードできます。

今回は、ホームページのアイコンの作成方法について解説しましたが、ホームページのアイコンは、未設定のままでも機能的には問題ありません。

WordPressではアイコンを設定していない場合でも代替のロゴが表示され、利用する上で特に不便を感じることはありません。

しかし、他のホームページと比べたときに非常に地味なので、一覧で並んだときに印象に残ることなく埋没しがちです。

アイコンは非常に小さい要素ですが、ウェブを利用していると様々なシーンで目に付く機会が多く、またホームページが細部までしっかり作り込まれているかを判定するポイントでもあります。

アイコンのないホームページは画竜点睛を欠くことになるので、こだわりを持って作成し、忘れずに設定しておきましょう。

ブログを始めるには、ライブドアブログやはてなブログといった無料ブログを使う方法、
あるいはWordPressなどを使用する方法があります。

まだWordPressを持っていない人でも、簡単に準備できる方法を以下の記事で解説してます。
初心者でもわずか10分で始められるので、参考にしてみてください。

「お名前.com」は、国内No.1のドメイン登録サービス。独自ドメインと合わせて、WordPressの自動インストールに対応したレンタルサーバーも利用できます。WordPressや独自ドメインを一度も使ったことのない人でも、スムーズに始められるはず。

アフィリエイトに挑戦してみようと考えている方は、以下のリンクから、ぜひご利用ください！