読者です 読者をやめる 読者になる 読者になる

【無料】ブログのサイトアイコン(ファビコン)を作ったのでやり方をまとめておく

ブログについて アプリ
 スポンサードリンク

f:id:looklooklook50:20170125120120j:plain

テキトーにしてたサイトアイコン。ブラウザのタブの端っこに出るやつです。
ファビコンとも言います。これを気分転換に作ってみました。

素人なのでイチからデザインとかしんどいですよね。
無料で使えるWEBサービスやアプリに手伝ってもらって、
お手軽にそれっぽいものを作りましょう。

 

今回の完成物と条件 

f:id:looklooklook50:20170125122931p:image

完成物はこちらです。Yuruku Daradaraってことでアルファベットのイニシャルです。

ボーダー背景+文字っていうタイプのサイトアイコンを作りましょう。

 

やってみるに当たって決めた条件は2点。

 ・有料ソフトを使わない

 ・知識がなくてもそれなりに見える

 です。それではどうぞ!

 

①カッコよいボーダーを作ってもらう

 背景は単色でもいいけど、ボーダーにしてみよう。
ということでボーダーを作ってくれるWEBサービスを探します。

www.stripegenerator.com

ストライプジェネレーターなるサービスです。
好きな色とボーダーの幅を設定したらカッコよく仕上げてくれます。

 

f:id:looklooklook50:20170125115629p:plain

今回は

  • stripesize50
  • apacing40
  • stripe orientationは左から3つ目のデザイン

 

という組み合わせで作ってもらいました。

でも色が決まらんなぁ、ということで次は色探し。

 

②カッコよい配色を教えてもらう

色はかっこいい組み合わせがあるみたいなんですが、そんな知識ありません。
これもWEBサービスに頼りましょう。
「配色 組み合わせ」とか「カラーパターン」とかで検索したら出てきますよね、例えばこれとかいいですね。

www.sessions.edu

好きな色ひとつを選んで「ハーモニー」を選べばいい塩梅のバランスが導き出されるやつです。

 

私が使ったのがこちら。

www.swisscolors.net

スイススタイルカラーピッカーです。

4色の配色がズラッと並んでて、クリックしたらカラーコード(#000000とかいうやつ)がコピーされます。

文字の色まで決めれるじゃん!というのが決め手です。

f:id:looklooklook50:20170125115743p:plain

私はスクショの真ん中下段の組み合わせがイカすのでこれをチョイス。
それぞれカラーコードは

  • オレンジっぽい#f67944
  • 青っぽい#2677bb
  • 白っぽい#fbfbfb
  • ブラウンっぽい#c7943e

だそうです。コピペコピペ。

 

①のストライプジェネレーターのカラーコードを入れるとこにオレンジと青のコードを突っ込みます。

f:id:looklooklook50:20170125120221p:plain

ボーダーができました。次は文字です。

③カッコよい文字を入れてもらう

スマホアプリのPhontoを使います。

Phonto 写真文字入れ

Phonto 写真文字入れ

  • youthhr
  • 写真/ビデオ
  • 無料

日本語の方が見た感じゆるくなるかと思いましたので、実験。

 f:id:looklooklook50:20170125122950p:image

ユルさを表現しましたがちょっとイマイチ…ボツです。

やっぱり英語だ!ってことで

f:id:looklooklook50:20170125122931p:image

こんな感じ。使った英語フォントはVINCENT-REGULAR。
カレッジスポーツっぽさがいい感じですね。これで行きましょう。完成!

 

ここの作業は以前紹介した画像編集アプリのAdobe Spark Postでもいいんじゃないでしょうか。
こんなフォントと色はどうよ?って提案してくれる「Suggestion Wheel 」機能は便利ですよ!日本語フォントが貧弱なのが弱点ですが。

 

脱線 Phontoのいいところ

Phontoにはいろんなフォントがいっぱい入ってるのがいい!ってのが
一番のオススメポイントで、スマホでここまでできるのは珍しいもんです。
これに加えて、今回の作業では「中央揃え機能」があったのがとても便利でした。

 f:id:looklooklook50:20170125122336p:image

こんな風に適当に文字を配置しても

 

f:id:looklooklook50:20170125122340p:image

「レイアウト」から、ボタンを押すだけで、自動的に真ん中に調整して配置してくれるんです。

手作業で「中心はどこかな〜」ってこまごました操作やんなくてもいいのは楽チンです。

 

④【はてな向け】作ったら設定しよう

f:id:looklooklook50:20170126173804p:plain

画像ができたら設定です!

  1. ダッシュボードの「設定」をクリック
  2. ブログアイコンの「ファイルを選択」をクリック
  3. 作った画像を選択しましょう 

これでOK!

 

まとめ

テキトーに設定してたサイトアイコン(ファビコン)ですが、いざ変えてみると結構新鮮です。
ブラウザのタブに表示されるだけじゃなくて、お気に入りバーにも出て来ますし、スマホの「ホーム画面に追加」した時もサイトアイコンが使われます。

ブログを自分色に染めたい方は個性が出せるポイントですので、ちょっといじって見ませんか?