こんばんは。大阪のWeb制作会社でWebデザイナー兼コーダーとして働いているたみ(@tami_design)と申します。
2024年4月24日、とあるイベントに参加してきました。それがこちら。↓
Webデザインをその場でフィードバック、デザイン、コーディングしていくイベント…！？
そんなイベント見たことない。そもそも他社（他者）がデザインやコーディングしていく様子を見る機会なんてそうそう無いのでは？
ということで、興味津々だった私は速攻申し込みました。主催の株式会社NASUは大阪にあるということで、現地参加してきました。
結論、ライブ感半端ない今までに無いイベントを体験することができましたので感想をまとめておきたくブログを書いています。
「デザインセッション」イベントとは？
イベントページ からの引用です。
前田がWebデザインをフィードバックしながら、NASUの中川がその場でリアルタイムにWebのデザインとコーディングをしていく5時間。クリエイティブディレクター目線、Webデザイナー目線、コーダー目線。３つの目線で学習できます。
制作するサイトは、NASUで秘密裏に進行しているプロジェクトのLPサイトです。作業中のPC画面をモニターで共有し、LPサイトが完成していく過程を話ながら詳しく解説していきます。さらに、会場参加者の方はコワーキングとしても利用可能なイベントですので、自身のプロジェクトに取り組むことも可能です。デザイナーの方はもちろんディレクターの方や、NASUの業務に興味をお持ちの方など、どなたでもご参加をお待ちしております。
https://design-session.peatix.com/
ちなみに「秘密裏に進行しているプロジェクト」についてはイベント参加者のみ知ることができる（プロジェクトの発表自体は後日）とのことでしたので、今回の感想でもLPの題材については触れずにいきたいと思います。
今回のイベントでクリエイティブディレクターとしてフィードバックをするのは株式会社NASU代表の前田高志さん(@DESIGN_NASU)。そしてデザイン・コーディングをするのがWebデザイナーの中川 誠也さん(@choooose_org_)です。
株式会社NASUといえば紙ものやロゴ、Web、キャラクターなど幅広いプロダクトをデザインしていて、最近ではイラストレーターのサタケシュンスケさんのポートフォリオサイトがSNSで話題となっておりました。
実は私自身NASUのイベントに参加するのは今回で2回目でイベントの空気感などをあまり知らないのでドキドキしていましたが、普段知ることができないデザインの様子を見学できる！と期待が高まります。
イベント当日の様子
まずはプロジェクトの概要を把握
前田さんから中川さん・イベント参加者へプロジェクトとロゴの説明があり、コンセプトやデザインものさしなど内容を確認していきます。
フレームワークに沿ってプロジェクトについて考えるシート（シートの名前は失念しました）に情報がまとまっており、整理されている印象。
デザインしていくとだんだん目的を忘れてデザインがブレていってしまうので情報を見返せるシートがあるというのは大事ですね。。また、忘れがちかもしれませんがサイトで与えたい印象だけでなく与えたくない印象も決めておくとデザインの方向性が定まりやすくなるなと改めて感じました。
ワイヤーフレームからデザインまで
情報の確認が終わったら、いよいよワイヤーフレームの作成へ。Figma上でMVやコンテンツのテキスト情報をばばーっとフレームに載せていきます。
中川さん、操作が早い早い！！
みるみるうちにフレームが文字で埋まっていきます。今回のイベントは5時間という制約の中でコーディングまで持っていく必要があるのでスピーディなのは分かるのですが、早過ぎて「あれ、今何やった？」となる瞬間もありました。参加者からの質問に回答したり今やっている内容の説明をしつつ手を止めずにやられていてすごい…。日頃からショートカットキーを駆使したりFigmaの機能を使いこなしてこその早さだと感じました。
ワイヤーフレームで大体のコンテンツの内容が決まった後はデザインに入っていきます。
デザインの過程で特に印象に残ったこと
グラフィックの観点から見るWebデザイン
デザイン中の前田さんと中川さんのやりとりで印象に残っているのが、Webデザインとグラフィックデザインの違い。Webでは特にアニメーションなどの動きを入れたり色々できるのでついつい装飾などの要素を入れたくなってくるものですが、グラフィックは要素を削ぎ落として文字で魅せると。（私の解釈が少し入っていますが、大体そのようなことをお話しされていたかと思います）
デザインのフィードバックで、前田さんからグラフィックデザインの観点で「この要素はいらない」と言われることが多いとお話しされていて興味深かったです。
アニメーションはデザインしながら考える
前田さんから伝えられたイメージから、実際にオブジェクトをフレーム上で動かして文字の出方などを考えられていました。普段デザインする時はアニメーションって後回しになりがち（私だけかもしれません。。）なので、デザインの段階で動きのイメージを共有しておくというのが新鮮でした。
また、アニメーションの参考にしている制作会社などもお話しされていたので早速チェックしていきたいと思います。
意図のあるデザイン
例えばこのセクションはどう見せたいのか？どういう意図があるのか？と疑問に思ったところを自分（中川さん）の解釈に任せずに前田さんに確認されていたのが印象的でした。（今回は社内プロジェクトが題材なので、クライアントワークだとまた違った確認方法になるのかもしれません。）
そのほかにも、ここはこう見せたいからこの色で視線を誘導する・こういう表現をする。逆にこの表現方法は意図と異なるので避けるといったことを論理的に説明されていて、まさしく中川さんの頭の中をのぞいているようですごく面白かったです。
「意図のあるデザインをしよう」と思っても、この表現が見る人にどういう印象を与えるのか分かっていなかったり、なんとなく見た目がいい感じだからこの表現にしよう、と決めてしまったりすることがあります。これを避けるには色々なデザインを見て「どういう意図があるんだろう？」と考える経験を積み重ねるしか無いのかな、と感じました。（要は見る目を養うこと。）
判断基準は気持ちいいかどうか
前田さんがデザインをチェックするときによく口にしていたのが、「気持ちいい」というワードです。感覚的な言葉ですが、重要な指標になるなーと感じました。アニメーションについても動きが気持ちいいかどうかを重視されていました。
最終的にできあがったデザインは、シンプルな装飾で美しく、まさしく目的を達成できるようなデザインになっていると感じました。
コーディングに突入
デザインを終え、ついにコーディング。ひたすらデザインをコードに起こしていく作業です。このパートが一番リアル（身近）に感じました。
ChatGPTを活用したり、詰まったらその都度調べたりと、コーディングのやり方に関しては自分と似ている部分が多く、「分かる〜そうやるよね〜！」と共感しつつライブ感を楽しみました！
話題の一つとしてmix-brend-modeについてお話しされていて、ヘッダーに文字がかかったりした時に色を反転させたりするデザインはやったことがなかったので挑戦してみたいと思いました。あとはGSAP。まだ触れたばかりの技術なので、そういう風に使うのね〜と勉強になりました。
5時間、完走
LP全てを完成とはいきませんでしたが、本当に1からワイヤーフレーム〜デザイン〜コーディングまで到達されていて中川さんの底力を感じさせられました…！
デザインやコーディング、ディレクションの過程を公開するということはとても勇気のあることだなと思います。（私は怖くてできない…。）
5時間（＋延長戦）、集中力を絶やさず走り切った中川さん、貴重なフィードバックをお話ししてくださった前田さん、運営されていた中山さんお疲れ様でした！！
終わりに
今回はワクワクするようなイベントを開催してくださりありがとうございます！
改めてWeb制作頑張っていきたいと思えました。
イベントの興奮冷めやらぬまま勢いで書いてしまいましたが、ここまで読んでくださりありがとうございました。
ツイートの引用や記事の内容に問題がございましたら取り下げますのでお手数ですがX(@tami_design)のDMまでお願いいたします。
イベントで出していただいた麻婆NASU丼を添えて
コメント