YKUCMR.COM

fkxsh

自分自身がインターネットで使用している「不可意思 / fkxsh」名義の個人サイト

概要

自分自身がインターネットで使用している「不可意思 / fkxsh」名義での活動をまとめるために作成した個人サイトです。

担当

  • 企画 / 構成
  • 情報設計
  • デザイン
  • マークアップ / アニメーション実装

制作背景

前職に入社してすぐの数ヶ月間は担当案件が少なかったので、業務中の空いている時間に自主学習する事を上長から推奨されました。このタイミングで前から気になっていたVue.jsを学習しました。
同じタイミングで、3Dモデルを簡単に作成できる「VRoid Studio」というピクシブがリリースしているアプリも触っていたのですが、Three.jsとthree-vrmというライブラリを組み合わせると作成した3DモデルをWebサイトで表示させる事ができると知り、試してみたいと考えていました。
学習しているVue.js + 興味を持っているThree.jsとthree-vrm、せっかくであればこれらの2つを組み合わせたWebサイトを作成したいと考え、自分自身の活動をまとめる個人サイトを作る事にしました。

制作目的

  • Vue.js, Three.js(three-vrm)のスキルアップを図る
  • 最終的には、この個人サイト経由で副業や案件の依頼を受注する

情報設計

  • 掲載要素としては自己紹介文と制作物のみ
  • 公開時点では各制作物に詳細ページを作成できるほどの情報量がなかったため、ページ構成としてはシングルページを採用
  • 閲覧者には、まず自分について知ってもらいたいという思いがあったので、コンテンツはABOUT→WORKの順番に設定

デザイン

  • 前述の通り、3Dモデルを使用することを前提でデザインを作成
  • 3Dモデルが常に背景に固定表示されるデザインなので、テキストには座布団を敷いて可読性を担保
  • 当時は単色でデザインされているサイトがカッコイイと感じていたので、このサイトも単色でデザインした
  • 単色だと色でテキストに情報を付与できないため、フォントの種類 / サイズ / ウェイトを変える事で、各テキストの役割（見出し / 本文など）が表現できるように心がけた

実装

  • 動画ではなく3Dモデルを使用する意義を作るために、マウスカーソルの位置で3Dモデルの傾き加減を変えるインタラクションを取り入れた
  • スマホではスクロールによってアドレスバーの表示 / 非表示が切り替わり、その度に3Dモデルのサイズが変化してしまった（ブラウザの縦幅に合わせて都度可変する仕様）ので、アドレスバーが常時表示されるような実装をして、3Dモデルのサイズが一定に担保されるようにした
  • 各見出し（ABOUT, WORK）の挙動をposition: stickyにすることで、視覚的なフックを作った
  • CSSアニメーションの練習として、スクロールすると各要素がアニメーションを伴って表示される仕様にした

案件から得たもの / 効果

  • 今までに2件、TwitterのDM経由でWebサイト制作の依頼を受注したが、どちらもこのサイトを評価してもらった上での依頼だったので、制作目的に挙げた内容を達成することができた

反省点 / 今後の課題

  • 当時はVue.jsの理解が足らなかったということもあり、コンポーネント化や共通化が上手くできていないため、リファクタリングしたい（そもそも今回の要件であれば、SPAとして振る舞う必要がなかったので、Nuxt / Next.jsなどでSSG化したい）
  • マウスカーソルの位置で3Dモデルを操作している部分の動きが少し違和感があるので、調整したい
デザインツール
Adobe XD
技術スタック
Vue.js, Three.js(three-vrm), Firebase

🏠 Back to Home

/

🌐 Visit Website