Webデザイナーが初めてReactでサイトを作ってTDCに応募してみた。
今年の8月くらいから2ヶ月ほどかけて、友人のグラフィックのギャラリーサイトを制作した。
初めてnext.jsを使って、ReactやJavaScriptの勉強をしながら進めた。デザインやアイデアの原案みたいなものは既にできていてどこかで作りたいと思っていたものを夏休みなどを利用して制作したという感じだ。ダラダラと作るのもアレなので、せっかくなのでTDCの締め切りが10/10ということでそれに応募して終わり、その中でできる範囲で終わらせようと決めた。
Reactに再トライする
3年ほど前にReactがすごいみたいなのを聞いて、その際にやってみたいと思い本を買ってサイト作りにトライしてみたけどわからん、まだ早すぎるというので挫折してその時は似たようなものとしてVue.jsというのがあるらしいということでそっちでサイトを作った。
Reactで挫折したポイントとしては、私がJavaScriptの基礎的な知識がないのが第一だが状態管理というかReduxの難しさにやられた。ユーザーの情報を保持して表示をコントロールするという上級者向けのものでなくても、何かしらカラーテーマの情報だったりを持っておくにはそういった部分に触れることになるが難しい。その際に、まずwebというのは状態管理というのが大事なんだとわからせられた。
ただ、今回久しぶりにReactに触れた際に大きいなと思ったのが新しく導入されたhookというものだ。特に同じコンポーネント内で状態を保持できるuseStateというhookにはとても助けられたし、この機能がなかったらおそらく二度目の挫折をしていたと思う。その上で、コンポーネント間を跨いで情報をやり取りするのがやりたかったができなかった。この辺は、classコンポーネントで外部に情報を持たせてという従来のやり方でないとダメな部分だろう。今回のギャラリーサイトのようなシンプルな構成のサイトであればとりあえずReactで何かしらサイトを作れるようになったのは大きい。とりあえず作れるようになれば継続して勉強ができるようになるし次のステップが見えてくる。デザイナーでも触りやすくなったしありがたい。
もう一つは、わかりやすい書籍が出たこと。3年前は正直どの書籍も微妙でわかりづらかった。極端に初心者向けのものか既に実践している上級者向けのTipsみたいなもので3冊ほど買ったがどれも良くなかった。Vue.jsの学習が進んだのは、「基礎から学ぶ Vue.js」という本がわかりやすかったというのがある。その点、今は「Reactハンズオンラーニング」がとてもわかりやすくて良い。ちょうど、hookが出た後のタイミングで学ぶのに基本となって何度も読み返しながらサイトを制作できた。
また、next/imageの画像の領域を保持してくれるplaceholderの機能にも助けられた。多くの画像の読み込み時に簡単なコードを追加するだけでやりたいことを実現できる。とにかく、デフォルトの機能を使う生かすことでなんとか形にしたりサイトとして今らしいフレッシュさを出したかった。
試してみたこと
せっかく自由にやれるんだし、自分にとって新しいことを入れたいというのでvariableフォントで遊べないかを調べていた。フォントについては、以前から使いたかったEverettというフォントを軸に進めるというのは決めていたので、そこに匹敵するようなものだとdinamoのGravityとか使えたらいいなぁとぼんやり考えてまだプレリリース段階なので問い合わせてみたらとんでもないお値段だった。現状では、Variableフォントを買う場合、その値段は全てのファミリーを買う額と同じになる。なので安易な気持ちで買って試すみたいなのはできない。インディー系ならフリーのものなどあるが今回はバランスが崩れるので見送った。
最近、同僚の有馬くんなどが使っているCavalryというモーションソフトが気になっていたのとLottieファイルを書き出せるというので使ってみた。触ってみるとCavalryはソフトウェアの設計が面白い。touch designerのような感じでコンポーネントをノードを繋いでいくみたいな感じで形とデータを紐づけることができる。また、googleスプレッドシートなどの外部データを読み込んでグラフを表示できる。グラフィックを作り込むような部分は簡素だがその展開をさせる部分に面白いアイデアが詰め込まれている。variableフォントのモーションにも対応していて以下のようなサンプルを作ってサイトで読み込ませてみた。midiやoscなどの入力に対応したら面白そう。出力ファイルはどんな形式になるんだとか問題はあると思いますが、可能性があるので遊んでいきたい。
レイアウトの設計をする際に便利なのが、CSS gridで今回も使っているがその中でiOSのウィジェットのように規則的なレイアウトの中で2カラム使って何かを表示するなどが難しい。ただ、現在策定中の機能でCSS gridでPinterestのようなmasonryレイアウトを実現できるものがあってFirefox Nightlyで試してみたが、たった一行のコードを追加するだけでリズミカルなレイアウトを作れて感動した。この機能が実装されたらCSS Gridのデザイナーフレンドリーなきっちりしたレイアウトを生かしつつ遊び的な要素も入れることができる。とても楽しみだ。
有限性の中でモノを作る
コードを書くのが得意ではない人間がwebサイトやアプリやゲームを作る場合、その可動範囲というかできる部分というのはかなり限られてくる。ただ、そこに面白さというか本職のエンジニアにはない部分が隠されていると思う。
Webを制作する場合、作るものを考えるときに持っている技術を先に考えるか純粋に作りたいものをベースに考えるかどちらもあるが何かを完成させたい場合、この技術を使って作ろうという方が完成させやすい気がする。これしか出来ないという無能さを制作のアウトラインにする。UIデザイナーがFigmaで仮の世界を作る。デザインで何かを構想するのは無限の可能性を持っている。しかし、それを自分で最後まで作ってみるのはどうか。その際に、自身の無能さに直面するはずだ。そこにおいて初めて制作が人生がスタートするのではないだろうか。ひとまず、自分の無能さを受け止めて手持ちの技術でとりあえず完成させてみること。
ただ、チュートリアルをこなすだけでは面白くない。文系の知識があるならばその構造に響きを与えることができる。イキイキとした制作物として作り上げる工夫を入れることができる。
できる部分を極限まで使いこなす。例えば、フォントを選んで表示ができるといった部分でもNoto sansやHelveticaで済ませるところを徹底的に考える。自作のフォントを入れることもできると考える。フォントが作れないなら手書きの文字をフォント化してみよう。一歩下がったレイヤーまで行けば自分が動ける領域かもしれない。フォントをフォントとしてでなく模様としてとらえる、フォントを使って装飾をできないか。カラーモードの実装やプラグインがあるならその色を10色まで増やしてみる。色のセンスを活かせるだろう。その際に大切なのはある要素、形や特性を剥き出しにしてみることだ。それっぽくする、ありもののUIライブラリっぽくしたいというのではダメだ。フォントを使うならその臭みを引き立たせる、それだけを使う。綺麗に並べたいけれど技術的に難しいならその綺麗にできていない部分をもっと強調してしまおう。遷移の際にカクツク、画像の切れ目が気になるならもっと気になるように画像の切れ目を押し出そう。できないからといってひっっこんでは行けない、できないからこそ前に出る「出来ないうまく出来ない」ということを世界に向かって叫ぶようにものを作っていけば良い。
今回はプラグインをいくつか試していく中でGSAPが使いやすかったのとscrollに合わせて発火させる部分とSVGのラインアニメーションをやりたかったので有料版を契約して使っている。簡単なコードで実現できてありがたい、variable fontのモーションなども対応しているので次回に取り入れたい。GSAPのExampleを眺めながらその範囲内でできることをやろうと後からは考えていった。デザインでもそうだが、最初に範囲を決めてしまってその中でや、その壁にぶつかる時に面白い表現が生まれるというのは同じだろう。
プログラミングの楽しさ
思う通りに動かないしこんな簡単な機能エンジニアだったら30分でできるだろうと思いながら3日かけて探ったりしていて辛いことも多かったけどやっぱり楽しい。実案件ではデザインしてエンジニアに実装をお願いしてみたいな流れだけどここまでお願いするのはやりすぎかなーとか躊躇するし気を使う、それに実装されてみてあれあんま良くないなみたいな時にザクッと大きくデザイン直すみたいなのはやりづらい、自分でやる場合は納得するまで直せる。あとは、エンジニアがいたら今度はこういう機能をお願いしたいなぁとかも思いつく。あと企画を思いついて、最後まで形にできるというのは気持ち良い。
最近、Bloodborneをまたプレイしているが狩人の悪夢というDLCで最初のセーブポイントまで長くてようやく建物についたと思ったら建物は開かない、そしてもう少し進んだ先に2体のめちゃくちゃ強い巨人がいて絶望した。それは、ゲームとしてここまでやったらいいだろうというのを意図的にぶっちぎっている。Bloodborneの最初のヤーナムキャンプファイヤにしても同じでやりすぎなくらいに難易度が高い、それはゲームとしてそこそこではなく思ってるのの10倍にしてゲームにしている。今公開しているMartin Margielaのドキュメンタリーもそうだった、服として2、3箇所が攻めていて気持ち良いだけではダメだ。そこからさらにモデルの顔を布で覆ったり、プロのモデルを使うのをやめたり思ってるものの何倍も規範から外れている。それが強烈な魅力になっている。何をするにしてもアイデアを思っている10倍、もしくは100倍の過剰さや思い切りの良さで制作することが必要なんじゃないかと思う。
この記事が気に入ったらサポートをしてみませんか？