Frontend/Design/Illustration | 落花

doxasさん(@h_doxas)主催のGLSLスクールの課題において、「落花」という言葉をテーマに描いたシリーズ物イラストを展示したサイトを制作しました。

Creative Concept

シェーダーのランダムな動きが、花びらの落ちるランダムな動きを連想させた

もともとGLSLスクールの作品制作課題として提出したものです。スクールの中でシェーダーの偶然性やノイズの美しさが個人的にツボにきた私は、ノイズを使ったランダム性の高い作品を作りたいなと思っていました。

その中で、ちょうど私が自分の趣味で描いた「花が落ちる瞬間の美しさ」をテーマにした連作となんとなく相性が良さそうだな？と思い立ち、その連作用のイラストポートフォリオサイトとして制作しました。

■アイディアラフ

• 初めの着想はCoderopから得る

全体的な構成のイメージはCoderopの上記の記事を参考にして実装の設計を行い、そこから今回のサイトに合うアニメーション演出を考えていきました。全体的にどこか儚げな雰囲気を出したかったので、書体は明朝ベース、アニメーションはフェードを主軸として組み立てていきました。

• 各種演出実装はモックを作りつつ実装

サイトの演出やデザイン的方向性をある程度固めた段階で、演出モックを適宜作成し、サイトに落とし込んでいきました。

※以下のツイート時点ではSP対応が入っていませんでしたが、現在はSPでも見れるように対応入れ込みました

Detail

■制作期間

　1ヶ月弱

■制作ツール

[イラスト]

　コピック/ボールペン/筆ペン（イラスト制作）

　Adobe Photoshop Express（色調補正）

[デザイン]

　Adobe Photoshop CC（デザイン制作）

■開発環境・使用ライブラリ

　Webpack / Pug / SCSS / TweenMax / Three.js / Preload.js 

Special Thanks

doxasさん

GLSL school