スプラトゥーンの非公式Webサービス「ブキルーレット」のサイトデザインをやりました。
サイトはこちら。レスポンシブ対応です。

ブキルーレット｜Splatoon Erupyon

画像はサンプル版です。

今回のデザインの意図について

前提として、元々あるシステムにデザインだけリニューアルという感じだったので、出来ることと出来ないことがあった。その点も含めて勉強になった。

最近のサイトでは特に、サイトのパーツのデザインは極力フラットに抑え、ページ遷移やボタンを押した時の反応を凝るような流れが主流になっている。今回デザインを行ったわけだけど、ゲームのユーザー層としては結構幅広く、スプラトゥーン世界観そのままでデザインを作ると、単なるサポートサイトなのに自己主張が強すぎてうざいかなと思ったので若干スプラトゥーン感を控えめにしている。それでいてインクの色合いは本家のものを使わせてもらったりとかして、まあスプラトゥーンっぽさもあるよねくらいの、中間くらいのデザインを目指した。

また、サイト内で何か行動を起こすこと（ボタン押すとかフォームに入力するとか）に対する反応をインタラクションとかって言ったりする。
最初はスプラトゥーンの世界観を模したようなインタラクションを入れようと思ってたんだけど、先ほど書いた通り、このサイトはあくまでもゲームの遊びを広げるためのものであり、遊ぶためのものではない。そんなサイトの、例えばルーレットボタンを押す度に変なアニメーションが流れてなんやかんや待たされたとしたら、ユーザーに（時間的に気持ち的に）負担をかけてしまうので、ルーレットのインタラクションは無しにした。ボタンとかには最低限付けてるけど、もう少し出来る所もあったと思う。そこは反省点。

僕がもっと可愛いはっとするようなアニメーションを作れれば、もっとこうしたかったというのも実装できたんだけど、そこも今後の課題です。マイクロインタラクションはいろいろ出来たほうが現代のフロントエンドエンジニアとして生きていきやすいと思う。というか必須。精進精進٩(๑´3｀๑)۶。

お礼

stylecaseさん

ブキアイコンをチェックボックスとして使用したんだけど、そのブキアイコンを提供してくださった方。シンプルでフラットな方のアイコンを最終的に使わせて頂きました。イベント中お忙しい中すみません！ご対応ありがとうございました！

さぴるすさん

「CSS出来る方」との文言でモチベを沸かせてくれた本サイト制作者の方。その日のうちになんでも対応してくれて、フットワークが軽いなと思いました。羨ましいです。あまり合体を意識せずにスクリプト書いたんですけど、上手いことインテグレートして頂き、無事完成とすることが出来ました。ありがとうございました！

まとめ

Twitterにも書いたけど、誰かに納品するという形は何回かしか経験がない。
少ない経験の中で思うのは、こういうの好きだなあということ。つまり「不特定多数のユーザーに喜んでもらいたいと思ってるクライアント」に喜んでもらいたい。そのクライアントために多くのユーザーが使いやすい、楽しめるものを考えるのが好きなのかなと。だから洋楽ファンサイトのリニューアルいつまでも進まないんだよ。

承認欲求が分かりやすく満たされるのが好きってことですかね(^q^)
まだまだ未熟ですが、これからも自分に出来ることは頑張ってやっていきたいと思うので、宜しくお願いいたします。