東京web3ハッカソンに参加してきた
Rails Girlsでスタッフをやって以来、何かを作りたいなぁと言う意欲が湧いていたのと...そしてテクノロジーとデザインの使い方の話を受けて、改めてスタイリングと内部設計の両方でのデザイナーをやりたいなと思っていて、東京web3ハッカソンに参加してみました。事前準備を含めると３週間ほどかかりましたので、その記録としてnoteにまとめます。
事前準備(Week1)
「新・日本一わかりやすいReact入門【基礎編】」観る
限られたメンバーでチームを組むため、事前にReactを理解していると更に助かるとのことだったのでキックオフまでに概要だけでも理解しようと「新・日本一わかりやすいReact入門【基礎編】」を一通り観て、実践編も途中までトライしてました。
実践編でFirebase使ってDeployしてみる
では実際にReactを書いてみよう、と言う手前の「環 境 構 築 !!」にチュートリアル通りには例に漏れず進まず…。同僚エンジニアにサポートしてもらいながら３日ほどかけて環境が出来上がりました。（ありがとう、ありがとう...）
VSCodeに使いやすいプラグインを入れる
VSCodeもアップデートされているからなのか、単に気づいてなかっただけなのか、エクステンションを入れなくてもデフォルトでEmmet入力できる。shift + option(alt) + Fでインデントも綺麗になる。私が喜んで使っているのはindent-rainbowくらいでした。
イーサリアム買う
今回参加したハッカソンがweb3をテーマにしたハッカソンなのですが、そもそもweb3？？分散型？？と言うところから理解が追いついておりません。少しでもその文化圏に足を踏み入れ、中の世界を感じてみるためにも、ウォレットや取引所のことについて調べ、実際に自分のお金を使って仮想通貨を購入してみました。NFTの購入や作成までできたらもっと理解が深まりそうだけど、それはまた次回。
ビルド前半(Week2)
設計図の作成
こちらは構想段階で作られた設計図を土台に、導線やページごとにできるアクションなどを作りました。設計図はFigjamで作成。OOUIの思想を意識しながら設計図を起こしました。「ガス代が発生する」「ウォレットに接続する」などNFT独自のアクションがあり、多少理解はできても、文化として感じ取るところ（＝NFT文化圏での”普通”の動きは何かを知るなど）までは辿り着けないので、チームメンバーに教えてもらいながら設計図をひいていきました。
OOUIについてのおさらい
OOUIはデザイナーだけでなく、UIデザイナーと仕事をするPMやディレクターの方に是非知っておいてもらえると良いと思う。と言うのも、真面目で仕事熱心でよく気づけるPMやディレクターほど、タスク指向でUIの土台まで作ってしまうことがあるからです。それは結果としてユーザーにとっては使いづらいプロダクトになってしまう危険があります。そしてデザイナー自身はそれを説明するために、オブジェクト指向とは何か、なぜタスク指向のUIに陥りやすいかを理解し、説明できるようになっていた方が説得力が増すと思います。
Q. なぜOOUIが良いとされるのか
A. オブジェクト（物）を見て行動（タスク）を取ると言う現実社会における人間の行動に近づいた設計思想だから。
Q. なぜタスク指向UIに陥るか
A. まずタスクを洗い出し、そしてそのままタスクをこなすUIになりがちだから。
洗い出されたタスクからオブジェクトは何かを抜き出して、オブジェクト指向とタスク指向、両方を用いて画面を設計するのがUIデザイナーの能力と言えると思います。
Tailwind CSSのComponentを用いての画面設計
今回はTailwind CSSを利用して、新たにcssを書くことは極力避ける開発方針でしたので、Figmaのコミュニティファイルにあるライブラリを使って、UI作成しました。FigmaのファイルはPagesと言う機能があるので、１ページ目に設計図、２ページ目にコンポーネント、３ページ目にUI制作と分けると言った使い方もできるので良いな。
ビルド後半(Week3)
フロント実装
前述した通り今回はTailwind CSSを利用したので、classNameに必要なクラス名を追加していくだけです。なんやかんやReact予習しておいてよかった！フロントをメインで担当してくれるメンバーの書いたコードを見ながら追加したり編集したりしました。こういう新しいことに挑戦できるのは普段の業務とは違うハッカソンだからこそですね。
それと、個人的なCSSのこだわりや考え方についても気づくことができました。どうも私はCSSに「カスケーディングであること」にこだわりたいみたいです。
コマンドラインやGitHubに少し強くなった
コマンドラインやGitHubについてもあまり業務で触らないのですが、この機会でだいぶ慣れた気がします。エラーが出た時に「原因はなんとなくわかる、でも直し方がわからない」とか「全く何もわからない、でも逃げ方はわかる」とか「ファイルがぶっ飛んでもこれはローカルブランチだし」くらいにはなった気がします。焦らなくなりました。
実際にハッカソン終わってから業務でgitを使うことがあったのですが、以前だったらエンジニアの隣りの席に移動しないと怖くて操作できなかったターミナルですが、リモート勤務の状態でプルリク出すところまで難なくスムーズにできました。
インタラクティブなプロトタイプのデモ動画
必要な提出物には「デモ動画」があり、提出期限ぎりぎりの23:59までコードをごりごり書いているだろうと見越し、デモ動画は実際のプロダクトではなくFigmaのプロトタイプを使って撮影することになりました。
プロトタイプを実際に作ると、UI制作の時点では気づかなかった不自然な導線や、ボタンや文字の大きさのギャップの違和感などを見つけてしまいます。
Figmaは業務で使うことはあまりなかったのですが、プロトタイプを作成して共有するのにとても向いているツールだなと感じました。
hoverやclickの時に設定したスタイルをプロトタイプ上でリアルタイムに確認できる
true/falseの切り替えデザインもプロトタイプ上で確認できる
言わずもがなのAuto Layout機能
言わずもがなのComponent /インスタンス機能
反省点とこれから
プロトタイプはさっさと作ろう
期限も決まっているし、メンバーの工数も決まっている。ミーティングをする度に仕様は変更されます。仕様変更が決まったミーティングに参加できないメンバーもいる。メンバー間での仕様の認識がズレてしまうのはよくあることです。そして一人一人の役割も大きく役割自体も異なるため、Discordの文章だけでキャッチアップするのは大変です。プロトタイプは設計図をひくと同時くらいに、遷移やアクションがわかる程度の簡単なものでも良いので準備して、リアルタイムで編集しつつみんなで見ながらミーティングを進めた方がよかったなと。これは反省点。
Reactはもうちょっとやろう
前述した通り環境構築に時間がかかってしまったので、動画の実践編まで完了できていません。そして同僚のフロントエンドエンジニアと話していると「今はその書き方しないんですよ」と言うこともありました。言語はアップデートされてゆく。一通り実践編で紹介されているデモアプリを制作して、そこから新しい書き方を学ぶように別のアプリも作ってみたいです。
Figma Communityにデザインファイルを公開しよう
Figmaでは誰かが作成したデザインファイルを他の人も利用できるFigma Communityというものがあります。今回のTailwind CSSもUI制作用にFigmaで利用できるライブラリを公開していてそれを使って制作しました。自分の中に公開して利用できるテンプレートのアイデアを一つ閃いたので、やっていきたいなと思います。
さいごに
私の初めてのハッカソン体験は７年くらい前で「なんとなくノリで」1人で参加しました。（詳しくはインタビュー記事で）初日に自分のアイデアを書いたボードを掲げ、一緒にやりませんか？と声をかけてくれた子がいました。ハッカソンに参加するデザイナーは多くはないのです。周りには顔見知りのビジネス仲間のような人たちがその場に何人かいて、「いや、やらないよね笑」と茶化すような反応をされていました。結局彼は自分のアイデアでは仲間が集まらず他のチームに入っていました。現在、彼はその時のアイデアで起業して、従業員50名ほどの会社の代表です。その会社は現在、健康管理システムの導入を検討しているようです。
ハッカソンで優勝することよりも、アイデアと仲間を信じて努力を継続していくことのが何倍も難しいことだと思います。その時に笑われたとしても、彼は彼のアイデアを諦めずに実現させて、そして自分の仲間である従業員に健康であってほしいとか、人事労務の仕事を楽にしてあげたいとか考えて健康管理システムの導入を検討するフェーズになっているのかと思うと、とても胸が熱くなります。
今回できたこと、できなかったこと、もっとこうしていればと思うことがたくさんあります。第一線で活躍している審査員からのフィードバックもいただけます。ハッカソンはイベントであり、一時の体験に過ぎません。自分が大切だと思うことを大切にしてまずは「反省点とこれから」に書いたことを達成していこうと思います。
ハッカソンに参加して、やってみたいことが増えてこれから楽しみです。一緒に頑張ったチームメンバー、サポートしてくれた同僚さん、ありがとうございました！