はじめに
皆様はじめましてウコンパワーと申します。
この度私が所属しておりますジュニにてひとつWebサイトを公開しまして、せっかくなのでそのフローを皆さんにも共有できればと思いこちらの記事を書くことになりました。
(Zennに書くことなのか？という疑問も持ちつつきっと誰かの役にも立つことを祈って書いてます、温かい目で見ていただけますと幸いです。)
技術的な内容にフォーカスした記事も作成しておりますのでそちらもよろしければ参照ください。
早速ですが、今回制作したものはこのようなものになっております。↓↓
PCのファンが回りますね!!
なぜ作ったか
サイトを見ていただいた方はお察しかもしれませんが、
このサイトを作った明確な意図はありません。（驚
強いていえば採用というところで、最後にWantedlyへのリンクを張ったりしていますが、 まずはなんかいい感じのサイトを作りたいなあ...という感情がベースになっているというのが大きいです。
体制
今回は一応、会社の仕事としての制作だったわけですが、普段であれば、
- 構成作成 (プランナー)
- デザイン (デザイナー）
- 実装 （エンジニア）
のような流れで制作を進めるのですが、今回に限っては、
- 実装(≒デザイン)
という、"流れ"と言っていいのかわからない進め方でやってみました。
デザインは基本的にはなく、実装である程度原型を作り、その見栄えをアートディレクター(AD)と相談しながら整えるという形です。
なぜこうなったかというと最小限の立ち回りでサクッと作れたらという思いがあったのと、デモベースでの制作というものをしてみたかったというところです。
チーム編成としては主に
- AD
- エンジニア（ボク）
の２名です。それプラス、なにかテキストがほしい！というときに社長に依頼という形でした。
過程
1. サイトの全体像を考える
本サイトを作るにあたって一番困った箇所です。
載せたい情報は弊社のいくつかのSNSリンク以外一切無いので頭を抱えます。
とりあえず自分が実装するということはWebGLを使うことだけは絶対前提(???)だったので目や感情へ直接訴える表現ではあるなと思っていました。
このあたりの考えをまとめるのにはMiroを使用してなんとなくのイメージをペタペタ貼って行きます。便利ですね。
弊社にはバクのマスコット的キャラクターがいます。
色々考えた末このバクを中心にジュニの多様性だったり、"もっといろんなことしたいんじゃー"の思いをグラフィカルに表現するのが良いではないかとまとまりました。
ADメインでイメージや演出の詳細の参考を貼っていただき、ページ全体の質感を確定します。
最終的には色々変わっているところもありますが、このようなイメージで、
- ポップ
- スタイリッシュ
- かっこよい
- ゆるい
を表現することに決定しました。また、全ページを通して"Junni is ~"をキーワードに展開しています。
2. デモづくり
テーマが決まったので早速実装です。
Blenderでシーンを作りながらとりあえずWebに表示してみます。
それぞれのシーンの見栄えをある程度整えてみます。
トップの壁を壊すシーンも作ってみます
3. デザイン落とし込み
このあたりで流石に実装だけで見栄えを整えるのには限界を感じてきていたため（特にテキスト的な要素）、軽くデザインとして落とし込む作業をしました。
作業にはFigmaを使用して、ヘッダーや各要素を入れてみます。
余談ですがFigmaはWebで完結して非常に動作も軽いため、WebGLで使うようなちょっとしたアセットづくりにも非常に役立ちました。これはディスプレイに表示する用のテクスチャです。
4. ひたすら調整
その後はただただひたすらに見栄えを整えていく作業でした。
流れとしては
- 大まかな動きをデモとして実装
- ADが演出要望や参考を提案 & デザインアセット作成
- 実装をトライ
- ADジャッジ、2or3へ戻る。たまーーーに5へ進む
- OK!!
これをセクションごとに何度もやっていく形です。
トップを手探りでレイアウトしたり...
以下の２つのセクションは特にしっくり来るまでに時間がかかり、何度もパターンを試しました...。
もともとは文字を物理演算で落としたりもしてました。
最終的にアートディレクターの方に具体的なビジュアルを作っていただき、それに近づける形で実装をしました。
完成
そしてかれこれ結局2ヶ月ちょっとをかけてようやく完成しました。
(サクッと...?)
最終的にはかなりインパクト重視のサイトとなりなかなかハチャメチャで他にはあまり見ないサイトになったのではないかと思います。
なんとなく自分の感覚ではある意味ではこのハチャメチャ感もジュニというものをそのまま表現できてるのでは？と思ったり思わなかったりしてます。
まとめ、と言うか感想
とても良い機会だったかなと思います。
普段から、デザインで固めすぎないサイトづくりというものに憧れていたのですが、その大変さというか過酷さが身にしみました。デザイナーってすごいなあ～と思う日々でした。
今回のサイトは技術ベースではなかなか面白いものになったかなと思ったりもするのですが、テーマ、見せ方、その他超いっぱいなおすことができるような気もします。
けど、もうボクには限界です！
このサイトを見て興味を持ってくださった方で、もっとこうしたら良いのに..とか思ってくださる方...助けてください！
Discussion