Iconを設定する【アイコンデザイン編】2018.03.14サイトにもアイコンを!こんにちは!ハネジです。WEBサイトにもアイコンがつけられるのご存知ですか?例えば、YahooやGoogleにアクセスしたときに、ブラウザのアドレスバーの左はしところに「Y!」とか「虫眼鏡」とか表示されてるアレです。これ、実はWordpressで自分のサイトにもつけることができるんです!ボクのサイトにも設定してあるので、そのとき気づいたことなどメモ的にシェアしますね。スポンサーリンクWEBサイトのアイコンの種類WEBサイトに設定できるアイコンは、主に2種類。iconを略したもので、WEBサイトのシンボルとして設定できる画像形式です。faviconWEBサイトをブラウザのお気に入りに登録したときなども、小さいアイコンとして表示されているときがありますね。Faviconには表示するブラウザごとに決められたピクセルサイズがあって、下記のサイズで作成する必要がありますが、大きな画像は縮小すれば良いので、デザインするときは大きめでやると良いです。Icon(アップルタッチアイコン)とは名前の通り、主にAppleの端末(iPhoneやiPad)のホーム画面用アイコンとして出発しました。iPhoneなどのスマホが普及してから、WEBサイトをホーム画面に「お気に入り追加」したときにアイコンとして使われる画像形式です。Iconにもに決められたピクセルサイズがあります。これも作成時は一番大きなサイズを基準に作れば良いですね。Iconが設定されていないWEBサイトを、ホーム画面にお気に入り登録すると、WEBサイトの縮小表示が設定されますね。通常はそれでも問題ないのですが、アイコンが増えてくると、どれがどのサイトかちょっとわかりづらくなるので、わかりやすいオリジナルアイコンを設定したいところです。Photoshopじゃなくても大丈夫です。良い出来栄えですね!(←自画自賛wアイコンデザインのテーマとモチーフアイコンってシンボルですから、なるべくパッとみてわかるようなのが良いので、小さい文字をたくさん入れるデザインはちょっと難しいと思います。ReskillのAをモチーフに選びました。「アフィリエイトで稼ぐスキルを身につける」ってテーマのサイトだから、頭の中にはなんとなく“コインを手にするイメージ”と“モチーフのA”がぼんやりあったので、とりあえず下記のアイコンサイトから素材になるものを探しました。ICON手のほうは「hand」と検索すればそれっぽいのがいっぱい出てくるので問題ありません。Aのほうはあんまり良いのが見つからなかったので、結局Photoshop上でテキスト入力して、背景を書き足しています。pxの表示にしかならないので、デザインを縮小したときぐちゃっと潰れちゃったんです。小さくても見えやすいように同じモチーフで少しシンプルにしてみました。結果的には、このデザインでも潰れちゃってるので、また折を見て調整する予定です。Faviconが潰れて見えないので、もう少し簡素化しました。これがビフォーアフターです。設置方法はお使いのWordpresテーマによって変わってくるので、それはまた別の記事で紹介するとして、ここでは設定するとどうなるのか説明しますね。これがやりたかった!あ、結果が3つあるのは、どれが一番しっくりくるか試して見たかったからです。実際に設置してみてはじめてわかることもあったりしますからね。「あの記事ブックマークしたはずだけ、どこいった?」なんて経験があなたもあるんじゃないでしょうか?なのでアフィリエイトサイトにアイコンを設置する効果といえば、なんといっても他のサイトとの差別化です。他の多くのサイトがアイコンを設定していない中で、あなたがアイコンを設定していれば、それだけで目立ちますよね。目立つことで、あなたのサイトをユーザーに覚えてもらいやすくなりますよ。ブックマークの中でも目立っていれば、探してもらいやすくなるので、リピート率アップが期待できます。あなどれない効果がブランディング効果です。あなたの発信する情報の信頼性をかさあげする効果があります。見た目をちゃんとすることで話を聞いてもらいやすくなるのは人もWEBサイトも同じなんですね。発信する情報の質が一番大事なことはこれからも変わりませんが、ちょっとしたテクニックを駆使するのは全然アリですよ。こんにちは!ハネジです。先日WEBサイトの表示速度あれこれについての記事を書きました。こんにちは!ハネジです。ボクは普段からネットショッピングとTポイントのヘビーユーザーなので、この連携はとっても...NoteJPG・PNGの画質とファイルサイズの関係。こんにちは!ハネジです。今回はボクがやっているサイト高速化の手法の一つ、画像の最適化についてお話します。こんにちは!ハネジです。Screenshot」の使い方こんにちは!ハネジです。MacでWEBサイトをキャプチャするとき問題になってくるのが、超縦長のWEBサイト。スクロールしないと見えないエリアは、Macの標準機能だとキャプチャできません。そんなときはブラウザの強制再読み込み(スーパーリロード)を試してみてゴリゴリhtmlとcssと編集したのに、なぜか反映しない。普通ならブラウザの更新ボタンを押せば画面は再読込されて新しくなります。ボタンは押さずにキーボードで操作する方法もありますね。ハネジ▼このブログについて「アフィリエイトで稼ぐ方法」をテーマに管理人であるハネジが実際のアフィリエイトサイトで実践している手法や具体的なノウハウを公開しています。ハネジへのお問い合わせはこちらハネジおすすめのツールボクが現在も愛用しているWordpressテンプレート「AFFINGER4(アフィンガー4)」。これさえあればHTMLやCSSが苦手な方でも「SEO対策バッチリ」の「キレイなWEBサイトがサクっと」できあがり、「アフィリエイターに必要な機能が全て」入っています。ハネジ▼このブログについて「アフィリエイトで稼ぐ方法」をテーマに管理人であるハネジが実際のアフィリエイトサイトで実践している手法や具体的なノウハウを公開しています。ハネジへのお問い合わせはこちらハネジおすすめのツールボクが現在も愛用しているWordpressテンプレート「AFFINGER4(アフィンガー4)」。これさえあればHTMLやCSSが苦手な方でも「SEO対策バッチリ」の「キレイなWEBサイトがサクっと」できあがり、「アフィリエイターに必要な機能が全て」入っています。Iconの設置結果アフィリエイトサイトにアイコンを設置する効果タイトルとURLをコピーしました。