2021.09.14記事内に広告が含まれています。スポンサーリンク今回は、検索結果をはじめとする様々な場所に表示されるサイトアイコンについて勉強します。ショートカットのアイコンサイトアイコンの役割サイトを印象付けるサイトの取り扱う内容をイメージさせるサイトを認識できる情報を増やすサイトアイコンの作成アイコンのサイズ作成ツールサイトアイコンの設定まとめサイトアイコンとは?サイトアイコンは、名前の通りWebサイトを象徴する独自の画像です。初心者のWebサイト勉強では、こんなアイコンを設定しています。現在のWordPressでは「サイトアイコン」という名前が使われていますが、一般にはファビコンと呼ばれることが多いです。スポンサーリンクサイトアイコンの表示場所サイトアイコンは、次のような場所に表示されます。Webサイトを開くと、タブ上のサイト名やページ名の横に小さな画像が表示されます。とみーこれがサイトアイコンです。通常のユーザーが1番目にする機会の多いサイトアイコンの設置場所が、このタブ部分です。たくさんのタブを同時に開いてブラウザを使用する場合、サイト名やページ名が隠れてサイトアイコンしか見えなくなってしまうため、サイトアイコンで自分のサイトがどのタブなのかを伝えられると使い勝手が向上します。サイトアイコンが設定されていないとすべてのタブを逐一チェックしなければいけなくなり、せっかく開いてくれたのに面倒だからもういいかな...となってサイトを離れてしまうこともあるので、この場所のアイコンの重要度は非常に高いです。ブックマーク欄・リーディングリスト・閲覧履歴ブラウザごとに見た目や細かい仕様は異なりますが、閲覧履歴やブックマーク(お気に入り)などの画面にもサイトアイコンが現れます。タブとは異なり自分から見ようと思わなければ見ない画面ではありますが、サイトアイコンがあると他のサイトと見分けが付きやすくなりますね。ファビコンという名前は、お気に入り(ブックマーク)を表す「favorite」とアイコンを表す「icon」を合体させた単語「favicon」からきています。検索結果2021年6月現在ではモバイル版限定ですが、検索結果にもサイトアイコンは表示されます。画像のように、URLの左側に表示されます。文字だらけの検索結果でアイコンが表示されることで、一目でどのサイトなのかが分かりやすくなります。デスクトップ版はまだテスト段階のようですが、今後表示されていく可能性があります。2020ショートカットのアイコンWebサイトのショートカットを作成した場合のアイコンも、サイトアイコンが使われます。とみーショートカットに使われるアイコンは、他のと比べるとやや大きめではっきり分かりますね。スポンサーリンクサイトアイコンの役割サイトアイコンには、明確な役割があります。サイトを印象付ける表示場所からも分かる通り、サイトアイコンがあることで見分けがつきやすくなります。他とは違ったオリジナルのアイコンがあることで、あー、このアイコンってことはこのサイトだね!とユーザーが覚えてくれるようになります。サイト名はあくまで文字なので良くも悪くも覚えにくいし見分けが付きにくいですよね。世の中には似たような名前のサイトが多いですし、特にジャンルが被れば名前の被りも多くなります。人目を引くようなデザインの場合は特に、検索結果やタブの中でも一際目立つためユーザーに印象付けやすいという特徴があります。とみーやはり文字だけの情報よりも、色やシンボルで装飾されたアイコンの方が記憶に残りやすいですよね。サイトの取り扱う内容をイメージさせるサイト名やサイトが扱う内容を象徴するようなアイコンは、サイトを印象付けるだけでなく、見た人にその内容をイメージする力があります。次のようなアイコンはとてもシンプルですが、再生ボタン風のデザインから動画サイトだろうとイメージできます。色の組み合わせからエレガントな感じや高級そうな雰囲気も感じられますね。色の組み合わせなどでサイトの方向性をそれとなく演出したり、雰囲気を作ったりできるというのもポイントです。複雑なデザイン?それともシンプルなデザイン?複雑なデザインはおしゃれ感が出るので、当然人目を引く力は強いです。サイトアイコンが表示される場所は一般的に小さいため、あまり複雑にしすぎると崩れて見えてしまうというリスクがあります。一方で、シンプルなデザインは覚えやすく理解しやすいという特徴があり、小さい表示でもデザインが崩れにくいです。そのため、サイトアイコンとしてはシンプルなものの方がいいでしょう。事実、動画サイトであるYouTubeは、赤背景に白い三角形を載せただけのシンプルなデザインをサイトアイコンに使っていますが、誰が見てもYouTubeのアイコンだと分かるくらい認知されています。このレベルまでいくと、サイトやアイコンがブランド化していると言えるでしょう。サイトを認識できる情報を増やすこれは上の内容とある程度重複していますが、少し異なる観点からの考察です。サイトアイコンがない場合、サイトの価値はサイト名だけで認識されます。どんなに質の良いコンテンツを用意していても、サイト名を覚えてもらえなければ次につながりません。この前見たサイトがわかりやすかったんだけど、どれだったかなぁ...別の機会に検索結果にサイト名が表示されても、どれだったか思い出せないのです。それに対してサイトアイコンがある場合は、サイトの価値がサイト名とサイトアイコンの両方で認識されます。名前を忘れてしまっても、このアイコンってことは、あの使いやすいし分かりやすくまとめてあるサイトだよね!と思い出してもらえる可能性が増えます。アイコンがあるからといって必ず思い出してもらえるかといったらそうではありませんし、アイコンは現状デスクトップ版のブラウザには表示されないことになっていますが、少なくともサイトを特定できる情報がサイト名サイトアイコンの2つになるので、「他でもないこのサイト」という情報をより伝えやすくなる点に変わりありません。とみーもっと簡単に言えば、サイトを思い出してもらうための記憶を引き出す鍵を増やせるというわけですね。調べ物をする時ってサイト名は気にしない?みなさんはインターネットで調べ物をする場合、サイト名を気にしますか?おそらく、調べたい情報が見つかれば良いので特に気にしないという方が多いのではないでしょうか。検索結果に表示されたサイトの中に「過去に調べ物をしたときにわかりやすかった」というサイトがあれば、それを選ぶという方は多いでしょう。そんなときに、「あの〇〇ってサイトだったよなぁ」と名前だけで思い出せれば良いですが、アイコンも一緒であれば「そうそう、こんなアイコンがあったよね」と記憶を引き出す鍵が増えますよね。サイトアイコンの作成サイトアイコンを設定するためには、その画像を用意しなければなりません。ここからは、用意すべき画像のサイズと作成ツールを見ていきましょう。正方形を推奨しています。ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。「検索結果に表示されるファビコンを定義する」としているため、48ピクセルの倍数の画像を用意する必要があります。推奨サイズなので、これよりも小さい画像であっても問題はありません。表示場所によっては画質が荒く見えてしまう可能性があるため、できる限り高画質なものを用意しましょう。画像が正方形でない場合、サイトアイコン設定時に正方形に切り抜くことになります。そのため元の画像が正方形である必要はありませんが、サイトアイコンとして使えるのは正方形で切り抜ける部分になります。ピクセル以上と比較的余裕のあるサイズとなっていますが、実際はブラウザのタブ部分などの小さい場所に表示されるため、複雑なデザインや細かな装飾は控えましょう。ピクセルのサイズで表示されるため、この大きさでもわかるようなシンプルなデザインが好ましいです。ファイルは必要か?サイトアイコンの設定には「.ico」というファイルを用意する必要があるという記述を他のサイトで読んだことがある方がいるかもしれません。ファイルを使わずにサイトアイコンを設定する仕組みになっているため、必要ありません。ファイルを使いたい場合は使うことができるようになっています。ファイルのことは考える必要はありません。作成ツールサイトアイコンを作成するためには、自分で絵が書ける人などを除けば基本的に画像作成・編集のツールを使う必要があります。ツールはプロのデザイナーが使用するような数万円のソフトから会員登録なしにオンラインで無料で使えるものまで様々ですが、サイトアイコンを作成するためだけに高額のものを買う必要はまったくないでしょう。とみーただし、サイトに画像をたくさん使うので画像を加工したり作ったりできるものが欲しいという場合は検討してみても良いかもしれません。いう無料のオンラインツールを使いました。会員登録が必要ですが、機能が充実しており色んなサイズの画像を簡単に作成できます。手元に持っているアイコンやイラストをアップロードして使えるため、フリー素材をうまく使えばデザインの幅を広げることができます。サイトアイコン以外にも、記事内で使用する画像を作成するのにも使えます。【超初心者】サイトロゴの考え方デザイン知識のない超初心者がロゴを考えるためのポイントを具体例を通して見ていきます。とびっきり優れたロゴを生み出すのは難しいですが、ポイントを意識するだけで無難だけど意外と「それっぽい」デザインができてしまいます。サイトアイコンの設定サイトアイコンの設定は、使用しているテーマによらず管理画面の「外観」→「カスタマイズ」→「サイト基本情報」から行うことができます。サイトアイコン(ファビコン)を設定しよう〜実践編〜サイトアイコンはロゴと同じくらい重要な要素です。今回は、用意したアイコンをサイトに設定する方法をまとめています。難しい操作はありませんが、使用しているテーマやプラグインによってはうまく反映されないことがあるので、少し面倒な部分があるかもしれません。www.beginner-blogger.comまとめサイトアイコンは、サイトを象徴する独自の画像です。ブラウザのタブやブックマーク、検索結果やショートカットのアイコンなど、サイトアイコンは色々な場所に表示されます。オリジナルのアイコンを設定すると、ユーザーにサイトを印象付けることができ、他のサイトと見分けやすくなります。デザインを工夫し、サイトの扱う情報の内容や雰囲気を表現したアイコンは効果的です。サイトアイコンのおかげで、サイト名以外にもサイトを覚えてもらえる要素が増えます。ピクセル以上の正方形で用意しましょう。基礎知識WordPressの固定ページとは?〜理論編〜WordPressの固定ページについて、通常の投稿との違いを1つずつ整理しながら見ていきます。ホームページの分類や通常の投稿とはそもそも何かなど細かい部分も余すとこなく取り上げています。画像をたくさん使って説明してあるので、初心者の方でも大丈夫です!基礎知識WordPressのタグとは?〜理論編〜記事の分類に欠かせないタグの使い方をカテゴリーの違いとともに見ていきましょう。タグは記事の作成時にうまく割り当てることで、サイトの使いやすさを向上させられる重要な要素の1つです。具体例や画像を多く盛り込んでいるため、視覚的・直感的な理解もばっちりです!基礎知識WordPressって何?無料ブログじゃダメ?違いは?無料ブログサービスとWordPressの特徴や違いを簡単にまとめています。それぞれのメリット・デメリットを比較して、どちらが向いているのかを考えてみましょう。基礎知識サイトロゴの役割と作成ツールを知ろう〜理論編〜サイトの中でも1番上に表示されることの多いロゴについて、最低限の知識を付けましょう。ロゴの役割を意識すると、自分でデザインするときも作りやすくなります。初心者でも簡単に利用できる無料のロゴ作成ツールを2つ紹介していますので、ぜひ参考にしてみてください。基礎知識WordPressのカテゴリーとは?〜理論編〜カテゴリーは綺麗に整ったサイトを作る上で欠かせないだけでなく、サイトの論理構造を作るという重要な役割があります。ユーザーにとっての利便性を考えたサイト作りができるように、1つずつ丁寧に例を通しながらカテゴリーについて勉強して理解を深めましょう!基礎知識Webサイト・ホームページの作り方-基礎知識と制作の流れWebサイト作成に必要なWebサーバ、ドメイン、WordPressについて簡単にまとめています。Webサイト作成までの大まかな流れを確認していきましょう。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目ですEEA領域内の方はGDPRによる個人情報保護のため、コメント機能をご利用いただけません。※サイト次回のコメントで使用するために名前、メールアドレスを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。lastClientHeight=0;document.addEventListener("scroll",()=>{if(lastClientHeight!==document.body.clientHeight){init();lastClientHeight=document.body.clientHeight}})})タイトルとURLをコピーしました。