ポンコツwebデザイナーが一年間プログラミングを一生懸命やった話 2018
昨年の9月にUNIBA INC.というプログラミングが強い会社から、日本デザインセンターというデザインの領域を主とする会社に転職しました。
前職においては、そこまでコードを書かずに（html cssの基本的な知識、調整程度だったり、gitの
使い方程度は覚えている）sketchでデザインを作って、エンジニアに渡すまでが主な仕事の領域でした。
つまりは、プログラミングにおいては初心者レベルのポンコツです。ただ、意欲はありOpen Frameworksの本などを写経したりなどはしていました。
前職が9割エンジニアの会社から、こちらではエンジニアはいないという環境になったこともあり自分でやらなくてはという気持ちや、なんとなく技術力のある会社にいたということでキャプテンにおける元青葉の谷口くんよろしくそのイメージに影の努力で合わせるなんてイメージもありました。結果的に、webサイトをいくつか実装までやってリリースできたり、次にやりたいことを技術ベースでも考えられるようになってきたように思えます。割と、この一年半ぐらいの勉強で別の何かに生成変化できつつあるように感じます。
なので、この一年ちょっとの技術的な方面の振り返りを実際に作ったデモを交えて書いてみます。
gulpを使う。
入って早々に自分で実装できそうな規模の案件が出たので、コーディングについてどうやろうかと相談していたところgulpという、ビルドシステムが便利そうだということで使ってみる。
しかし、一から作るのではなく既に作ってあるつけダレを利用させてもらうことに。ローカル環境での確認や、画像の圧縮などがスピーディーに行えること、プロトタイプが素早く作れることなどある程度雛形がある状態からのスタートだったので助かりました。
デザイン、実装したwebサイト
http://www.miguide.jp/globalgreen/
Code Gridの購読を始める。
Javascriptの勉強をしていくうちに、今っぽいを技術をまとまった情報量で提示しているサイトということで購読を始めました。結果的に、今っぽいものには全くついていけずに３〜4年前の記事を中心に基礎的な部分の勉強にとても役立っています。ハンバーガーメニュー の実装などはここをみて参考にしています。
後述しますが、Reactの記事などは読んでも全く理解できず。。
Javscriptでメニューを作る。
Javascriptを少しでも書けるようになりたいので簡単なメニューを作ってみたりしました。
その派生でパララックスを使ってみたり。
技術力が低いので、アイデアやデザインと合わせることでなんとかしようとしていますね。。
Three.jsでギャラリーっぽいやつのデモ
こちらは、相談があった案件のプロトの一つとして以前から触ってみたかったので試してみました。これも、「初めてのThree.js」という本に書いてる内容をほとんどそのままです。とりあえず、本を一冊写経してみたという感じですね。
Unityで簡単なゲームを作る。
年末パーティーというものが会社であり、そこの出し物として作ってみたほとんどUnityのチュートリアルを改造しただけのゲーム。（と言えるのか？）
おそらく、作り込もうとしたら勉強にも実作業にも膨大な時間がかかるのでこれでいけそうじゃんみたいな感じで玉転がしを改造してステージを増やしていきました。
玉転がしをクリアすると、レコードの盤面が変わって次の曲へ行くというジュークボックス的なアイデア。
ステージ間移動のプログラムはエンジニアの友達に書いてもらっています。
Variable Fontで遊んでみる。
Instagramなどで流れてくる、太さや形を無段階で変えられるフォントの映像。
それは、新しいフォントの形式でイラストレーターでも当時ベータな機能として試してみることができます。
( instagramで#variablefontsで検索すると面白い事例が見られます ）
なので、この時やろうとしたのはyugopなどがよく使う、テキストシャッフルの別バージョンを作れないかということ。ただ、今の仕様のVariable Fontは別の形に変わるにしても頂点数を同じにしなくてはいけません。もし、Aから別の単語にモーフイングするフォントを作るとしたら全てのグリフが同じ頂点数のものを作る必要があります。
P5.jsでアニメーション
本当は、写真などのイメージを分解して表示するところまで行きたかったが興味の方向が変わりとりあえず触っただけみたいになってしまった。
その後、別のデザインでパターンを作るという試みをしたので少しは使えるかもという手応えもありつつ、日常的に触っていないと忘れてしまうので機会を作っていきたいです。
Reactに挑戦するも挫折する。
SPA案件というのはなかなかないんだけど、よく目にするしコンポーネントとかデザイン側からの興味もあるしというので、これも本をいくつか買って挑戦してみました。
やってみよう的なものを写経するところまでは良かったが、それを改造したりしようとすると途端に分からなくなります。ただ、この時やりたかったのはMaterialデザインであったり、Reactのコンポーネントを誤用すること。例えば、Materialデザインと他のデザインコンポーネントを一つの画面内に共存させられないかということです。複数のテーマがコンポーネントごとに振り分けられる、ページをまたいで違うデザインではなく、１ページ内でのデザインの不協和（または共和）みたいなものが可能だろうか。もし、コンポーネント化に面白い点があるとしたら私にとってはそのような点だと考えています。部屋の中に複数のメーカーの家具があることをwebのデザインにおいて再現できないでしょうか。
Vue.js(Nuxt.js)でポートフォリオサイトを作る。
部署のポートフォリをサイトを作ろうとして、なんとなくやったことなかったajaxぽい遷移ができたらいいなぁとぼんやり考えていたのだけれど、reactでボコボコにされたがもう少しダメな書き方というか小さく取り入れやすいVue.jsでやってみることにしました。
また、その時にみたこのwebサイトの次世代間にも惹かれたのでNuxt.jsを使ってみることにしました。
https://nitta.studio/
ブログ記事などでいろいろ書かれていたり、基本的な機能しか使わないようにしたり（これ大事、なんかやろうとすると絶望する）でなんとかそれっぽい形になりました。しかし、いまだに製作中なんですが、スプラッシュとか作ろうとすると途端に詰まる、Vue.jsの基礎的な部分の理解が足りてない。
製作中のwebサイト
振り返り
思ったよりもやればできるという部分と、すこしでも応用っぽい、フレームワークのデフォルト機能以外のことをやろうとするとつまったりというのはどちらも感じたことです。
その中で、自分のスタイルを模索しているが、一つは自身の特性を活かすなら既存のフレームワークやライブラリーを使って何かを作るということ、その際にほとんどデフォルトに近い状態で使うことでそのフレームワークそのものが持つなにかを別の方法で引き出せないかということです。
もちろん、これからもプログラミングの勉強は続けていくのである程度自分で作れるようになれば変わってくるかもしれません。
ただ、現状では小さくても成果物を積み重ねながらやることが精神衛生上とても良い気がしています。デザインにおいてもエッジなフォントを使う側から自作のフォントを使うように変化すること。
また、大きな分野の話でいうと今年は既に多くの先人が開拓したwebの領域での遊びが多かったが、これからはもう少し実務とは遠いエリアのプログラミングなり思考をちゃんとやりたいと思います。
もしくはデザインやめて、違うことするか、分からないけど「今」にフォーカスした何かを一つでもやれたら最高です。
この記事が気に入ったらサポートをしてみませんか？