TOP
屋号やVIとしての「原口沙輔」をFVに起き、スクロールするとタイピングのアニメーションが出現します。 実はここ、CMSになっていてCMS側ではシンプルなテキストエリアで入力する形になっています。 入力されたテキストからJSライブラリを使って読み仮名を抽出、対応したJSONを作るところまでをサーバー側で行なっています。 あとは一文字ずつタイピング → カタカナや漢字であれば変換されるという流れになっています。
About
ただの紹介文だけだと寂しいなと思い、原口沙輔さんがよく使われてる重音テトさんの配色を参考にしたグラデーションを背景に使いました。 一見CSSのfloatで配置しているように見えますが、こちらもまたCMSになっているため、最近話題になった。@chenglou/pretext というライブラリを使用させていただきました。 また背景のグリッドと馴染むように調節もされています。
Works
原口沙輔さんが今まで展開したアルバムなどを紹介するページです。 表現としては、アルバムの画像を「選ぼうとしている」状態をゴールとして作りました。 UIとしての親和性と、原口沙輔さんっぽさのバランスをとった形になりました。 選んだアルバムのタイトルの形で腕が作られる様子は単純なアスキーアートというわけではなく「選んだものによって構成される私」というイメージで作りました。
Discography
実はこのページが一番早く完成したページです。一番早くというのはデザインより先にこのページができていたということです。 インターネットの海から探すという体験や、SoundCloudから自分の好みの曲を探す。何かを見つける。見つけたいという欲求を体現しました。 実は製作者としてはPC版よりもスマホ版の体験の方が好きです。
404
404ページは、各ページに展開されてる音のシーケンストラックを見れる形にしました。 稲妻のように走る音の軌跡と、そぞれの音の塊をイメージして作りました。
終わりに
今回の原口沙輔さんのサイト、私としてもいいものが作れたと思います。
インターネットで活躍する今を生きるクリエイターのサイトを作り業界を盛り上げることが私の使命なのですが、それを体現するべく「原口沙輔さんらしいサイト」が作れたと肌で感じています。
ここまで作るのに何度か原口沙輔さんのレベールであるCDsのオフィスに通い打ち合わせをして作った甲斐がありました。私も彼も熱狂しながらいいものを作れたなと思います。
お問い合わせや、お仕事のご依頼など現在受け付けております。ぜひ、同じようにWebサイトを一緒に作りたい方、ご依頼したい方よろしくお願いします。
一つひとつのご縁を大切にしながら、その人らしさが伝わるWebサイトをこれからも作り続けていきます。
CONTACT | WALKALONE
お仕事のご依頼、カジュアルな面談やご飯のお誘いなど、お気軽にご連絡ください。ご連絡を確認し次第、折り返しご連絡いたします。また、ご提案の内容によってはお返事が遅れる場合や、ご返信できない場合もございますので、あらかじめご了承ください。