見出し画像

ポートフォリオサイトを公開しました。


こんにちは、野島といいます。
都内でデザイナー・エンジニア(今はほとんどフロントエンドエンジニア)としてご飯を食べてます。

7月末を持って現在勤めている会社を退職することになりまして、
今後活動していくにあたって必要だと思い、ポートフォリオサイトを製作しました。
といっても実績としてあまり出せる物がないので、
実務向きではない、クリエイティブに寄った製作物をアウトプットする場としました。

屋号を「FAB2(ファブツー)」といいます。


製作環境

デザイン、実装、全て1人で行いました。
ロゴも作りました。


・デザインツール:photoshop
・ビルド環境:gulp.js
└HTML:pug
└CSS:postcss
└Javascript:babel
└browserifyでモジュール管理
└画像自動最適化

特に変わったところはなし。


やりたかったこと

・WebGL(three.js)の導入
・pjax非同期遷移の導入
・typekitの導入(フォントはacuminを使用)
・追従カーソルを使ったインタラクションの導入
・WebGL以外は極めてシンプルなデザインに


こだわったこと

・topのWebGLデモ(インタラクション、イージング、シェーダー)(一番苦労しました)
・three.jsビルトインのmaterialは使用せず、shaderMaterialを使用し質感を作る
・演出的に魅せる部分と、コンテンツ部分にメリハリを付ける
・jquery依存からの脱却


改善・導入していきたいこと

・パフォーマンスの向上
・react.jsでSPA化
・smooth scrollの導入
・topのシェーダーのバリエーションを増やす
・sketchを増やす


総括・反省

とりあえず最低限のやりたいことはできました。
が、パフォーマンスであったり...シェーダーの完成度であったり...イージングであったり...
まだまだ自分としては物足りなさを感じます。
それは今後アップデートしていきたいと思います。

感想などいただけましたら嬉しいです。


余談

instagramにシェーダーアートをポストしたりもしているので、
よかったら見てください。

https://www.instagram.com/fab2_nojima.kosuke/

ありがとうございました。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

22
creative developer.
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。