【デザインAC】ブログアイコンの作り方

この記事では

当サイトのデザインは、無料のデザインツール【デザインAC】を使って作っています。

会員登録するだけで無料で使えるオンライン型のデザインツールです。無料ではありますが、様々な機能が備わっているのでデザインにお金をかけたくない人におすすめのオンラインツールです。直感的に使えるので初心者でも楽しくデザインできると思います。

まだデザインACに登録していない方は下記リンクから登録してみてください。

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

広告｜AdSense

今回作るデザイン

まずは今回作るデザインの名称と役割について確認してみましょう

• サイトアイコン
• ヘッダーロゴ／フッターロゴ

今回はこの２つのデザインを作っていきます。

サイトアイコンとは

サイトアイコン＝ ファビコン

サイトアイコンとは、WEBサイトのシンボルマークのことで『ファビコン』とも呼びます。

検索結果に表示されたり、ブラウザのタブに表示されたりします。その他にもホーム画面に保存した時にはアプリアイコンとして表示される場合もあります。

ヘッダーロゴとは

ヘッダーロゴとは、サイトのトップページや各ページの先頭（ヘッダーエリア）に表示されるデザインのことをいいます。

サイトのトップページにリンクされらWebナビゲーションの１つです。閲覧者がサイト内を見て回ることに役立ちます。

フッターロゴとは

サイトの最下部にあるフッターに表示されるデザインをフッターロゴと言います。ヘッダーロゴ同様にトップページにリンクされているナビゲーションの１つです。基本的にはヘッダーロゴと同じものを用意しますが場合によっては画像サイズを小さく編集して使用することもあります。

広告｜AdSense

では実際にデザインを作ってみましょう↓↓

ブログアイコンを作ろう！

編集画面を開く

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

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

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

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

5.編集画面が表示されます。

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

テキストからデザインする

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

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

左から

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

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

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

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

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

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

ペンツールでデザインする

デザインACでは画像編集ソフト「llustrator」などで使用されるペジェ曲線を引くことができます。PC上の点と点をつないで作るなめらかな曲線がペジェ曲線です。描き方・使い方は「参考：デザインACのペンツールでペジェ曲線を描いてみよう」を確認してみてください。フォントに曲線を加えることでさらにオリジナル度を上げることができます。

ヘッダーロゴ・フッターロゴをデザインする

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

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

1.今回は１例として『Meaningful Life.Space』というサイトのロゴを作っていきます。

【素材】

• 頭文字　M
  見出しを追加を使用
• その後に続く　eaning Life
  小見出しを追加を使用
• ドメインの　.space
  小見出しを追加を使用

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

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

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

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

[配置]機能

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

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

[色]の変更

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

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

その他にも、違うフォントを使ったり、サブタイトルも入れてみたり、オブジェクトを入れてみたりと…是非アレンジを楽しんでみてください。

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

広告｜AdSense

まとめ

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

今回の解説がなくても簡単にサイトアイコンやロゴをつくることができると思います。作りだすきっかけになればうれしいです。オリジナルデザインを作って楽しんでください。

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

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

広告｜AdSense