
初めまして、株式会社FIXERに入社した26卒の石田匠人と申します。
今回は簡単な自己紹介と専門学生時代に自分が作ったサイトの紹介をしたいと思います。
自己紹介
名前:石田 匠人(いしだ たくと)
出身地:三重県津市
趣味:漫画(ゴールデンカムイ、ファイアパンチ)、ゲーム(OverWatch、Warframe)、ライブ
大まかに書き出すと、このような感じになります。趣味から察する方もいるでしょうが、インドア派を極めております。どれほどインドアかといいますと、友達から「そんなに動かなかったら腐るぞ」と言われるほどには外に出ません。しかしなんと最近友達の誘いによってVaundyのライブに行き、無事ハマってライブによく行くようになってしまいました。インドア派ではなくなる日も近いか?
学生時代は何をしていたの?
簡単な自己紹介をしたところで自分がFIXERに入る前に何をしていたのか、どんなものを作っていたのかの紹介をしていきたいなと思います。
学校で学んでいたこと
おもにWEB系の分野を学んでおり、その中でもデザインやUI周りを好んでやっておりました。そんなこともありHTML、CSSやNext.jsなどをよく使っておりました。特に意識していた点としてサイトにボタンや文字を並べる際の文字の大きさや各要素の間隔を常に見やすくなるように調整していました。
制作物紹介
学生時代に何をしていたのかの紹介をしましたが、どんなものを作ったのか気になる方がきっと一人はいるかと思います。そんな方のために、どんなもの作ったのか、そしてどこを工夫したのかをお話しできればと思います。
作品名:AreaZ(エリアズ)

これは、卒業制作で友人と開発したサイトです。簡単な性格診断を行うと、自分のイニシャルを元にしたオリジナルのアルファベットアイコンが生成されます。技術としてはNext.jsをつかっています。ネーミングの部分ですが、アルファベットを使うということでAとZを入れたかった点と、「rea」の部分が「~」っぽく見え「A~Z」のように見える点、エリアズという語感がいいという理由で名付けられました。
制作動機
ここからは、オリジナルのアイコンを生成するこの作品を、なぜ作るに至ったのかについて紹介します。卒業制作を作るために友人と話を進めていく中で機能よりもデザインを優先しようと考えていました。やはり学生時代の集大成を卒業制作にぶつけるなら、機能よりもデザインでしょという結論に至りまして、デザインに舵を切り、単純な操作感で印象に残りそうなものを作ろうとしていました。
Kとの遭遇
「どんなデザインにしようか?」「どんな企画にしようか?」と友人と考え込んでいる最中、友人に天啓が降ります。

これは、最初に生まれた「K」のデザインです。このデザインが本当に唐突に降って湧いてきたそうで、これを作ったときは大盛り上がりでした。「このデザインは使わなきゃもったいない」ということで、これをどう使うかをベースに考えはじめました。各アルファベットにもこのようなデザインのものを作り、MBTI診断形式でイニシャルのアルファベットを表示し、診断結果でアルファベットの色を変えたものを表示させたら面白いんじゃないか、といった形で制作を進めていきました。
アルファベット各デザインについて
作品の根幹であり、一番の目玉である各アルファベットについてデザインする際のポリシーや見せ方の部分をお話しできればと思います。

K以外の文字もすべて自分たちでデザインしています。作るうえでのポリシーは、文字っぽくなりすぎない、三つのパーツで作る、各パーツが重なるようにするこの三点を意識しながら作っていました。そしてアルファベット以外のデザインについては、アルファベットが主役でカラフルに派手に映るように、色を使いすぎずシンプルなカラーリングで見やすくなるようデザインしていました。ポリシーとして文字っぽくなりすぎないように作ってはいますが、アルファベットのデザインということで、文字としても楽しめるよう、作ったものを並べて言葉を作れる機能など、作られたアルファベット達が綺麗に、そして楽しく見られるかを重視して制作してきました。

技術面で工夫したこと
デザインに比べるとだいぶ少ないです。診断結果によってアルファベットの各パーツの色を変えようと考えていたので、PNGやJPGではなくCSSやJavaScriptで動的に変更することができるSVGにしたことや、画像保存をするために領域内の要素を画像として保存するAPIを使用しているくらいです。
終わりに
最後までお読みいただき、ありがとうございました。今回ブログを書くのが初めてでかなり拙い文になっているかと思います。デザインのことばかりで機能に全然触れていないじゃないかと思った方、そこはまさにその通りです。またどこかで機能面で頑張ったものを紹介するときは詳しく説明したいと思います。作品名の部分で該当のサイトに飛べるようになっているので、よければ自分のイニシャルのアイコンを作ってみてください。ここからデザインもプログラミングもモリモリできる人間になる予定なのでどうぞよろしくお願いいたします。







![Microsoft Power BI [実践] 入門 ―― BI初心者でもすぐできる! リアルタイム分析・可視化の手引きとリファレンス](/assets/img/banner-power-bi.c9bd875.png)
![Microsoft Power Apps ローコード開発[実践]入門――ノンプログラマーにやさしいアプリ開発の手引きとリファレンス](/assets/img/banner-powerplatform-2.213ebee.png)
![Microsoft PowerPlatformローコード開発[活用]入門 ――現場で使える業務アプリのレシピ集](/assets/img/banner-powerplatform-1.a01c0c2.png)
