シングラム創立記念日の7月1日。
3年ほど前から毎年この日を目処に
「シングラム文化祭」と称して発表会をするようになりました。
発表会のテーマはシバリがあったり、自由だったり。
そして今年は、あえてのシバリありで
「そうだ、WEBサイトを作ろう!」
…という(笑) なんだか聞いたことのあるようなコピーで発表されました。
んん? そもそもシングラムってWEB作ってる会社じゃん?
なんてツッコミもあるかと思います。
というのも今年のテーマの目的は
スタッフ各自がこれまで新たにやってみた試みや技術
他社でやられてるデザインや技術の解析
アピールしたい、サービスにしたいデザインやビジュアルなどなど
シングラムスタッフそれぞれが、日頃考えている「WEBサイト」を
その手で作って共有しましょう。というもの。
発表会は各自の忙しさもあり創立記念日には行われず延期となりましたが
なんだかんだいって当日は、全員が何かしら出してきました。
ということで前置き長くなりましたが、発表されたものを少し紹介していきます。
終わりがなかなか見えない？超ーーロングなWEBページです。
Adobe After Effects で動画を作成することはよくありますが、
今回はそれをSVGアニメーションに変換できるライブラリ「Lottie」を使用しています。
作者の趣味によるイラストとサウンドを取り入れ、実に36個の音当てアニメーションで作品化していました。
ねらった動きをAfter Effectsで作りやすい点と、それを軽量なSVGアニメにできる点で様々に活用できそうです。
Lottieで作られたアニメーションが楽しいサイト
スクロールで画面が変化していくWEBページは制作機会も多いと思います。
今回の発表会では、２名がそれぞれ違った表現で作成していました。
通常の上下スクロールであっても、奥行きに変えたとしても、
基本はどちらもpageTopからの位置を計算する手法を使っています。
ページの縦ポジションに連動して背景や装飾を動かす
奥に行くスクロール
制作案件でもVue.jsを使ったSPAの開発機会が増えています。
こちらの２人は別のフレームワークを使用していますが、
画面遷移のスムーズさという点で方向が似ていました。
barba.js は実際には別のhtmlファイル間の移動をSPAの様にエフェクトしながら遷移ができるので、画面遷移が気になる方にはよい方法だなと感じました。
もう1人は初めてVue.jsを触ったとのことですが、SPAライクなWebサイトの形に実現できていた様です。
ドキュメントも多く、ゴリゴリの開発はムリ! なWebデザイナーでも少しだけ入りやすそうな気がしました。
barba.jsを使ったWEBページ
Vue.jsを使ったWEBサイト
上で紹介した作品は、表現手法やUIにこだわっていますが、
こちらは自分の技術ノウハウや気付きなどをしっかりと詰め込んだWordpressで作られたサイトです。
WordPressのテーマ開発に必要な情報をまとめたサイト
サイトは作者の「ちゃんと理解したい」という気持ちから作られてるようですが
リモートワーク続きでなかなか情報共有がしづらい中、こうしたサイトでコミュニケーションできるのは良いことですね。社内からはもう公開してもいいのでは？という意見を多く得ていました。
「あえてwebを作るというテーマに背中を押されて新しい事にチャレンジすることができました。文化祭で社内の皆に楽しんでもらいたいと思ってがんばりました。」
「今回はちょっと仕事寄りのテーマだったけれど、文化祭という面ではもっと発散するために、少し幅をもたせてもよいかなと思った。」
「全体的にはこれから使いそうなこと、役に立ちそうなことをみなさんから教えてもらった感じ。」
「コロナ禍では社内のレクリエーション的な部分が一緒にできていないので、1年に1回の文化祭はもう少し仕事から離れて、みんなの違う一面を発見したり、楽しむ場にできたら、と思いました。」
普段の業務の中では技術や手法が偏ったり、ワンパターンになりがちかもしれませんが
その枠を超えて各自が日頃からやってみたいと思っているものに
自由に取り組んで発表し合うことで、それが他のメンバーにとっては
役にたちそうなものだったり、使ってみたいと思わせられるものだったりしたのがよかったです。
また、個人の趣味が反映された作品や、この人がこんなのを作るなんて…みたいな意外性もあり
テーマの中に各自の普段知り得ない一面が見えそうなものを入れてみると、盛り上がるかもなーと思いました。
来年の発表会でまた、各自の新たな気づきや成長に刺激をもらえるのが楽しみです。