Yurisa9862アイコン＆ロゴ

Yurisa9862
Front-end developer/ Webデザイナー
OVERVIEW

Yurisa9862のポートフォリオサイトやSNSで使用するアイコンとロゴを制作。ポートフォリオサイトで使用するカラーなどを意識しつつ、制作作業を実施した。使用ツールはAdobe Illustrator。

Yurisa9862のポートフォリオサイトやSNSなどで用いているアイコンとロゴの制作を、ポートフォリオサイト制作を機に実施。

アイコン、ロゴどちらも、ポートフォリオサイトにて用いることが大前提としてあった。そのため、当サイトで用いるカラーをアイコン及びロゴにも取り入れることを、制作の際には意識していた。

また、「シンプルかつ、ほんの少しだけ上品」な雰囲気のものにするべく、どのフォントを使うかやどのようなデザインにするかについて考えつつ、制作を行った。


アイコン

ポートフォリオサイトで使った色（濃いめのピンク（#cc00cc）やブラック（#1a1a1a））も用いつつ作成。「Yu」部分のフォントはJansonURW Boldを使用した。

また、このアイコンはポートフォリオサイトのfavicon（*1）としても用いているのだが、フォントそのままの形（文字の太さ）を使用すると、アイコンが小さいサイズとなった場合に文字の一部が見えづらくなってしまうことがわかった。そのため、Adobe Illustratorを使って一部加工を行い、アイコンを完成させた。

*1. ファビコン：Webサイトのシンボルイメージとしてサイトに配置するアイコンのこと


ロゴ

拙者の名前（Yurisa9862）を含めるのはもちろんのこと、ロゴから拙者が「Webサイト制作」や「コーディング」をする人物であることをイメージしやすいようにするため、Webサイトやコーディングに関連するイラストも加えることとした。

文字のフォントは、アイコンと同じくJansonURW Boldを使用。

ロゴ内の2つのイラストのうち、左側にあるブラウザの中にHTMLタグが表示されているようなイラストは拙者が作成した。
右側のデスクトップPCとスマートフォンのイラストは、アイコン素材サイト「everyday icons」のものを使用。

またロゴ内イラストの色は、ポートフォリオサイトでのアクセントカラーと同じ色（#cc00cc）となっている。


使用イメージ1


使用イメージ2


作業実施箇所

デザイン及び作成

使用ツール

  • (Adobe) Illustrator …アイコン、ロゴ制作と素材編集で使用
  • (〃) Photoshop …モックアップ作成と素材編集で使用

利用素材、参考にしたもの、備考など