nohara

web

  • Adobe Illustrator

  • Adobe Photoshop

  • HTML

  • CSS

  • JavaScript

  • PHP

  • Illustration

Webサイトやグラフィック、映像、印刷物など、これまで制作してきたものをまとめたポートフォリオサイトです。現実世界の男の子、その男の子が操作するゲーム世界の女の子のキャラクターの二人でサイトの世界観を構成しています。二人が直立している絵では装備の変更中を表現しており、それがよりゲームの世界に感じられるよう、カーソルの位置で女の子の装備が実際に変わるようになっています。また、装備だけでなくポージングもカーソルの位置で変えており、二人が前のめりな姿勢になる箇所では、ボス戦前の緊迫した雰囲気を表現しています。楽しい瞬間、緊迫した瞬間など、実際に私がゲームを通して体験してきた思いがそのままサイトに表れるよう工夫いたしました。

  • 手描きの原案から広げたキャラクター制作

    キャラクターは自分で原案を考え、紙に描いたラフをもとに、ChatGPTやOpenArtなどの生成AIを使いながら本番素材へ仕上げました。
    単に画像を生成するのではなく、髪型や服装、頭身、線の強弱などを調整しながら、自分が思い描いていたキャラクターへ近づけています。
    さらに、サイト上での配置やアニメーションも想定しながら複数のポーズや表情を制作し、メインビジュアルから各所の演出まで一貫して活用しました。
    もともと得意だった絵を起点に、新しい制作手段を組み合わせることで、サイト全体の世界観につながる素材へ発展させています。

  • アニメーションを前提とした作字とグリッチ表現

    ロゴだけでなく、各セクションのタイトルにもオリジナルの文字を使用しています。
    Web上で動かすことを前提に、形を変化させたときにも扱いやすいよう、アンカーポイントの位置や数にルールを持たせながら制作しました。
    さらに同じ文字をベースにグリッチ表現へ展開し、映像制作で使ってきた表現や考え方をWeb上の演出にも取り入れています。

  • 規則と不規則を組み合わせた電気表現

    文字自体はルールに沿って作る一方、そこに流れる電気はあえて不規則に動かし、画面の中に強いアクセントを加えました。
    動きが自由に見えても制御しづらくならないよう、電気の形はアンカーポイントの数や基本的な構造を揃えて制作しています。
    また、文字・キャラクター・電気を一つの動画やGIFにまとめず、Web上では別々の要素として扱い、タイミングや見え方をコーディング側で調整できるようにしました。
    見た目の勢いと、実装後の扱いやすさの両方を意識しています。

  • サイト全体をつなぐ背景設計

    メインビジュアルのキャラクターや漫画を意識したフォントだけでなく、スクロール中も同じ世界観が続くよう、各セクションをまたぐ一枚の背景を制作しました。
    背景が主張しすぎて文字や作品が見づらくならないよう、場所ごとにグラデーションの濃さを調整し、パララックスも加えています。
    どこまでスクロールしたときに、どの絵が画面に入るかまで確認しながら構成を何度も調整しました。
    自分のポートフォリオだからこそ、デザインと実装を行き来しながら細部まで詰めています。