スマートフォンサイトを表示する

  1. TOP
  2. ホームページのクオリティアップ術:制作編 : 第7回 アイコンにこだわろう!お気に入りに表示される画像(ファビコン)を作成してホームページに適用する方法

エキスパートコラム

ホームページのクオリティアップ術:制作編(全11回)

第7回:アイコンにこだわろう!お気に入りに表示される画像(ファビコン)を作成してホームページに適用する方法

執筆:赤間 公太郎(株式会社マジカルリミックス)

2015年10月26日更新

  • このエントリーをはてなブックマークに追加

閲覧数3,207views

このコラムをPDF形式でダウンロードする

"ホームページのクオリティアップ術:制作編"のコラムを担当する、マジカルリミックスの赤間です。全11回のこのコラムでは、ホームページづくりに役立つサービスやその利用方法をご紹介していきます。

便利な無料のWebサービスを活用して、効率よく質の高いホームページを目指しましょう。

今回のコラムでは、ページをお気に入りに登録した際に表示される画像(ファビコン)の作り方をご紹介します。

ファビコンとは

ファビコンは、Webブラウザのタイトルバーやタブの部分に表示される小さなアイコンです。「Favorite(お気に入り)」+「Icon(アイコン)」が合わさりFavicon(ファビコン)と呼ばれます。

ファビコンのサイズは横と縦が16ピクセル、または32ピクセル四方の非常に小さな画像です。とても小さな画像ですが、その存在は偉大で、複数のタブを開いているときや、ブックマークリストの中から、ひと目でどのサイトか区別することができます。

ファビコンはその小さな領域の中で、アイデアや計算で上手に表現する必要があります。多くのパターンとしては、そのWebサイトのロゴマークを利用したり、簡略化したものが採用されます。

「Apple」や「Jimdo」でなど、ロゴマークの認知度が高いアイコンは、ファビコンの小さな領域で表現しても、視認性が確保されます。航空会社の「ANA」では、文字が入ったマークでも、そのブランドイメージや印象から、ANAの雰囲気を感じ取ることができます。

「任天堂」はドット絵の定番キャラクターを使用することで、視認性とブランドイメージを上手に表現しています。「無印良品」や「GUCCI」はブランドのパッケージやマークを活かしたファビコンを採用しています。

ファビコンは、必ずしもロゴマークを使用するとは限りません。複雑なロゴだったり、社名を入れにくい場合は、そのブランドのイメージカラーで表現する場合もあります。

「Googleカレンダー」ではカレンダーのアイコンを利用し、その日の数字がファビコンの中に日替わりで表現されます。「アメリカン・エキスプレス」や「三井住友VISAカード」は、自身のブランドが持つカラーのイメージで表現されています。

ファビコンをオンラインで作成する

ファビコンはグラフィックソフトを利用して作成することが多いですが、最近では、パソコンとインターネット回線さえあれば、いつでも作成できるWebサービスも多数存在します。

今回はファビコンをオンラインで作れるサービス「favicon.cc」をご紹介します。

favicon.ccの使い方

favicon.ccは右のカラーパレットから色を選んで、ドット絵のように書き入れていきます。ゼロから書くのが難しい場合は、左のメニューの[Import Image]から、コンピューターの中にある画像を利用することができます。

favicon.ccはドット絵として塗りつぶしていくほかに、画像のアップロードをし、自動変換後から作りはじめることもできる

試しに、イラスト画像のファイルをアップロードしてみました。形が単純なため、それなりにきれいに表現されています。あとは気になる部分を微調整していきます。

イラスト画像のファイルをアップロードした。単純な形状はきれいに変換ができる

Jimdoにファビコンを適用する

アイコンの編集が完了したら、画面中央にある[Download Favicon]をクリックして、ファビコンファイルをコンピューターに保存します。

次に、Jimdoの管理パネルで「設定」を開き、ホームページのグループにある「ファビコン」を開きます。

favicon.ccで作成したファイルをアップロードすれば、Jimdoにファビコンの適用が完了します。

まとめ

  • ファビコンは複数のタブを開いているときや、ブックマークリストの中からサイトを区別するための存在
  • 16px四方、または32px四方のサイズで作成する
  • ファビコンの種類は、そのWebサイトや企業のロゴ・テーマカラー・マークなどさまざま

次回は、「動画は自分で用意しよう!YouTubeを使って情報発信」をお伝えします。(つづく)

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売上アップをめざした更新サポートまで一貫して手がけている。
また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。

主な著書に『10日でSEO&アクセスアップ Jimdoデザインブック』(エムディエヌコーポレーション)『10日で作るかっこいいホームページ Jimdoデザインブック』(同)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。

[所属]
仙台商工会議所 エキスパートバンク登録/みやぎ産業振興機構 専門家アドバイザー/みやぎ工業会正会員

10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/4/16~2017/4/22]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!