【デザイン】サイトのアイコンをPowerPointで作成する【超初心者】

 

まだまだ絵はド下手なので違った方法で作成します。

 

インターネットでサイトを開くと、タブの部分に小さいアイコンが表示されますよね。

小さいですが、サイトを表すシンボルマークです。

私のサイトはどうなっていたかというと・・・

設定していないと表示されるマークになっていました。

せっかく自分のサイトなので、今回はオリジナルのアイコンを作成していきます!

 

ちなみに完成形がこちらです。


絵で描いてみて絶望する

表示されるサイズが小さいので、シンプルなデザインが良いですよね。

せっかくイラストの練習もしているので、いくつか描いてみます。

 

いざ、描いていきます!

 

・・・。

 

・・・ダメだこりゃ

 

まだまだド下手なことを忘れていました。

サイトの顔にするにはあんまりな出来です。(ある意味ぴったり)

もうちょっと何とかしたいので、他の方法を考えてみます。


PowerPointでアイコンを作る

描けないなら描かなくても良い方法で作成することにします。

PowerPointを使用してアイコンを作成していきます。

 

アイコンはシンプルな図形で構成されていることが多いです。

PowerPointには図形を描く機能が付いているので、そちらを使用してアイコンを作成します。

 

いざ作っていきます!


まずはPowerPointを起動し、白紙のスライドを用意します。

新しいスライドから「白紙」をクリックします。

 

真っ白なスライドが用意できました。

ここに図形を使用してアイコンを作っていきます。

四角や角丸四角など、色々な図形がありますが、今回はベースのアイコンを作成します。

 

丸い方がかわいいので!

かわいさは大切だと思います!

 

「挿入」タブの「図形」から「円/楕円」を選びます。

 

白紙のスライドに円を描きます。

正円を描きたい場合は「Shiftキー」を押しながら描いてみてください。

綺麗な円が描けました。

この円に「書式」タブを使って色々手を加えていきます。

「書式」タブは作成した図形を選択しているときだけ表れるタブです。

「書式」タブが見当たらない方は、作成した図形が選択されているか確認してください。

 

「書式」タブのなんかよく分からない小さいボタンをクリックします。

いっぱいありますが、どれでもいいです。

クリックすると右側に「図形の書式設定」がでてきます。

円に手を加えていきたいので、「図形のオプション」を選んでおきましょう。

 

「バケツ」「五角形」「十字みたいなの」の3つが並んでいますね。

今回作成したアイコンは「バケツ」のみを使用しています。

「バケツ」では「枠線」「塗りつぶし」を編集することができます。

 

まずは「塗りつぶし」を変えていきます。

ちょっとおしゃれにグラデーションにしてみます。

 

オリジナルのグラデーションにするために「グラデーションの分岐点」を変えていきます。

ブログのテーマが緑っぽいので、緑系にしていきます。

 

  • グラデーションの分岐点を増やす
  • 分岐点の色を変える
  • 分岐点の位置を変える

 

その結果こうなりました。

・・・。

 

センスが・・・!

 

デザインセンスがないのは大目に見てください。

グラデーションは他にもいろいろな設定ができますので試してみてください。

ひとまず塗りつぶしは完了です。


次は「枠線」です。

「幅」を豪快に「80pt」に増やしてみるとこうなりました。

 

「枠線」にもグラデーションを設定してみます。

やり方は塗りつぶしのときと同じです。

 

・・・センスって何でしょう?

 

何とも言えない感じになりましたが、図形部分完成です。


次は文字を置いていきます。

「挿入」タブの「図形」から「テキストボックス」を作ります。

 

文字を入力し、「ホーム」タブで大きくします。

数字を直接入力できるので、豪快に「300」にしてみました。

ついでにフォントもかっこいいものに変えてみます。

 

先ほど作成した円に乗っけると・・・

良い感じになりました!

 

実は文字も図形と同じ方法で枠線と塗りつぶしが変えられます。

せっかくなので変えてみます。

作ったテキストボックスをコピーして「器」「用」も作ります。

出来ました!

デザインセンスはひどいですが良しとしましょう!


今回のまとめ

絵が下手なのでPowerPointの図形でアイコンを作成しました。

センスがある方が作成するとかなりそれっぽくなるはずです。

今回は書式設定の「バケツ」しか使用しませんでしたが、「五角形」を使用するとさらにデザインの幅が広がります。

影を付けたり、3Dにしたり、特殊な効果を付けることができます。

興味がある方はやってみてください。

 

ここまでお読みいただき、ありがとうございました。

 

関連:【WordPress】サイトのアイコン(ファビコン)を変更する【超初心者】