Yurisa9862アイコン＆ロゴ
Yurisa9862のポートフォリオサイトやSNSなどで用いているアイコンとロゴについて、以下に紹介する。
アイコン、ロゴ作成に関して
アイコン、ロゴどちらも、ポートフォリオサイト（今閲覧いただいている本サイト）にて用いることが大前提としてあった。そのため、当サイトで用いるカラーをアイコン及びロゴにも取り入れることを、制作の際には意識していた。
また、「シンプルかつ、ほんの少しだけ上品」な雰囲気のものにするべく、どのフォントを使うかやどのようなデザインにするかについて考えつつ、制作を行った。
アイコン
ポートフォリオサイトで使った色も用いつつ作成。「Yu」部分のフォントはJansonURW Boldを使用した。
また、このアイコンは当サイトのfavicon＊1としても用いているのだが、フォントそのままの形（文字の太さ）を使用すると、アイコンが小さいサイズとなった場合に文字の一部が見えづらくなってしまうことがわかった。そのため、Adobe Illustratorを使って一部加工を行い、アイコンを完成させた。
*1. ファビコン：Webサイトのシンボルイメージとしてサイトに配置するアイコンのこと
ロゴ
拙者の名前を含めるのはもちろんのこと、ロゴから拙者が「Webサイト制作」や「コーディング」をする人物であることをイメージしやすいようにするため、Webサイトやコーディングに関連するイラストも加えることとした。
文字のフォントは、アイコンと同じくJansonURW Boldを使用。
ロゴ内の2つのイラストのうち、左側にあるブラウザの中にHTMLタグが表示されているようなイラストは拙者が作成した。
右側のデスクトップPCとスマートフォンのイラストは、アイコン素材サイト「everyday icons」のものを使用。
またロゴ内イラストの色は、ポートフォリオサイトでのアクセントカラー（ ■ #cc00cc）となっている。
作業実施箇所
デザイン及び作成
使用ツール
- (Adobe) Illustrator …アイコン、ロゴ制作と素材編集で使用
- (〃) Photoshop …モックアップ作成と素材編集で使用
利用素材、参考にしたものなど
- アイコン、ロゴに用いた文字のフォントは「JansonURW Bold」
- アイコンモックアップ素材 …“Free Icon App Mock-Up | Lil Bro | Behance”
- ロゴで用いたアイコン素材 …“フリーアイコン Free Icons – デバイス Devices – everyday icons”
- ブラウザモックアップ画像（使用イメージ１）で用いた＆参考にした素材 …“Free Chrome Browser Mockup Design Template – Vector | Arun BS | Behance” , “Chrome Browser Mockup Design Template Vector For Free » Css Author”
- 使用イメージ２で用いた＆参考にした素材 …“Branding Stationery Mockup Vol.6 – graphberry.com”
- favicon（ファビコン）制作で使用したサイト …“Favicon Generator for perfect icons on all browsers”