(過去記事) このサイトを作りました

注: この記事はmatsuraiの個人事業主時代の記事です。
将来的にはアーカイブし、閲覧できなくする可能性があります。

まつらいです。

進捗です、最初のアニメーションを整えている pic.twitter.com/q01Xj3yWG4
— 松元蒼太 / matsurai (@matsurai25) 2019年1月6日

1年ほど前から少しずつ作っていたのですが、ようやく公開できる形になりました。

デザイン、アニメーション、実装はすべて自分で行っています。

最近はPdMとして仕事をしているため、自由に遊びのあるコードを書く機会は減っておりましたので、やりたいことを全部詰めることにしました。

また、ソースコードはすべて以下で公開しています。
https://github.com/matsurai25/souzen

デザイン

普段企画と一緒にUI/UXを少しやっているのですが、UIとしてのデザインって「透明に」使えることで、デザイナーとして自分の味みたいなのってほとんど出せないなぁ(出せる域になってない)と思っていて。

なので自分のサイトは自分の好きなようにやってやろう！と思い立ち、オブジェクトいっぱいアニメーションもりもりな、こんな感じのデザインになりました。

ただ好きなだけのグラデーション置くのは楽しい。

このデザインをしたのは2018年12月-翌年1月の年末年始休み中だったのですが、今でも気に入っています。

トップページに関してはIllustratorで要素と配置を組み、AfterEffectsで動きを作成、Lottie(BodyMovin)でJS制御して動かしています。

フロントエンドエンジニア業は最近疎かになりつつも、同僚がコードレビューなどで色々情報を教えてくれるためそれなりに今風に書けました。

技術選択については無難にWordPressでとも思いましたが、個人サイトなので最終的には自分で保守できる範囲で楽しくやろうということで、GatsbyJSを使ってマークダウンから静的サイトを作成、Netlifyでホスティングする感じでやってみることにしました。

アニメーションはLottie+CSS3で作成してます。LottieはAfterEffectsで作ったアニメーションを全ブラウザ対応の形式に書き出してくれるので便利。詳しくは下の投稿などを見てね。