デザインACでブログのアイコンをつくろう！

今回の記事は

無料のデザインツール デザインAC を使って、ブログに使えるアイコンを作ろう！という記事です。サイトアイコン（ファビコン）やヘッダーロゴを作っていきます。

当サイトのデザインは、ほとんどデザインACで作っています。使いやすいので、ぜひ試してみてください。

まだ登録していない方は、下記から登録してからはじめましょう。

デザインACを詳しく知りたい方は、関連記事デザインACどんなツール？もご覧ください。

サイトアイコン（ファビコン）を作ろう

まずはサイトアイコン＝ファビコンを作っていきましょう。

編集画面を開く

サイトアイコンを　512×512px（ピクセル）で作っていきます。

1.デザインACを開きます

2.画面右上の[デザインを作る]をクリックします。

3.[カスタムサイズ+]をクリックします。

4.幅と高さにそれぞれのピクセル数を入れ、単位がpxになっていることを確認し、[デザインを作る]をクリック

高さ　512　幅　512　単位　px

＼編集画面が表示されます／

サイトアイコンをデザインする

1.編集メニューの[テキスト]をクリックし、枠線①のテキストの追加の項目から[見出しを追加]をクリックしてアイコンに使いたい文字を入力します。

2.つぎに②の項目を使って文字を装飾していきます。

左から

• フォント種類
• フォントサイズ
• 太文字
• 斜体
• 打消し線
• 下線・文字色
• 背景色
• 大文字小文字
• 配置
• スペーシング（行間・文字間隔）
• 箇条書き・方向

になっています。自分の好きなフォント・文字色を選んで作ってみましょう。文字は分割してもかまいません。

3.装飾が終わったら、右上矢印の部分のタイトルを入力します。

＊タイトルは半角英数字で入力するとアップロードする際に簡単です。

4.出来上がったらをダウンロードしましょう。

ダウンロードした画像の設定は、それぞれのブログ管理システムのマニュアルに従って設定してみてください。

ヘッダーロゴ・フッターロゴを作ろう

サイトアイコンと同様にカスタムサイズで作っていきます。

サイズは幅 512 × 200 px　です。

1.まず素材の紹介します。

• 頭文字　M
• その後に続く　eaning Life
• ドメインの　.space

2.まずは書体を変更します。パソコンキーボード上の[shift]を押しながら、それぞれの素材をクリックします。３つが選択された状態で、フォント種類をクリックし好みのフォントに変更します。今回は「Caveat Bold」を選択しました。

３.次に大きさの変更を行います。サイズを大きくしたい場合は、ブロックの角・をクリックしながら、矢印方向 外側に引っ張ります。

4.サイズを小さくしたい場合は、ブロックの角をクリック しながら、矢印方向 内側に引っ張ります。それぞれの大きさを調整してみましょう。

5.次に、配置を変えてみましょう。選択したブロックはクリック＆ドロップで配置を簡単に変えることができますが、他の方法もあります。

[配置]機能

「M」と「eaningful Life」を[shift]を押しながら選択ます。配置をクリックして[垂直方向中央に配置]をクリックすると、二つのブロックの中央に配置することができます。

その他にも色々配置メニューがあります。使ってみてください。ブロック単体をクリックし配置メニューを使うと簡単に画面上の中央に配置することができます。ロゴだけでなく、図解を作る際にも役立つ機能です。

[文字色]の変更

文字色の変更を行いましょう。この時に、配色パターン（色の組み合わせ見本）に合わせて文字色を変更すると、サイト全体がスッキリとした印象になります。色指定はカラーパレットからも指定できますが　HEX　HSL　RGB　から指定することもできます。

最後に微調整をして完成です。

少し文字が太すぎたので、「Caveat Bold」から「Caveat Reguler」に変更してみました。いかがでしょうか？

作りながらバランスを確認してみてください。

まとめ

直感的な操作が魅力のデザインAC

今回の解説がなくても簡単にサイトアイコンやロゴをつくることができます。今回触れなかった機能も使いながら、オリジナルのサイトアイコンを作ってみてください。

サイトアイコンやロゴは、Webサイトの第一印象になるパーツだと思います。思いっきりこだわってみてください。

ではまたお会いしましょう！最後までご覧いただきありがとうございました！