ブラウザ上で手軽にあみだくじを作成できる、オリジナルのWebツール「HARULAB AMIDA」を制作しました。

景品名と参加者の名前を入力するだけで、あみだくじを作成できるシンプルな設計です。

参加者は最大10人まで登録可能。イベントやゲーム内の抽選、ちょっとした景品決めなど、さまざまな場面で気軽に利用できるツールを目指しました。

デザインはダークカラーをベースに、ブルーとパープルのネオンカラーを採用。グラデーションや発光表現を取り入れ、抽選のワクワク感が伝わるUIに仕上げています。

PC・スマートフォンの両方で利用できるレスポンシブデザインに対応しています。

【制作情報】
制作内容：Webアプリ制作・UIデザイン
使用技術：HTML・CSS・JavaScript
対応端末：PC・スマートフォン（レスポンシブ対応）
制作区分：自主制作

【公開ページ】
https://harulab.work/amida/

オンラインゲームのギルド内で、アイテムを公平に分配するための抽選ツールを制作しました。

参加者の登録とアイテム名・当選人数の設定を行い、ブラウザ上で抽選できるWebアプリです。

抽選結果の確認に加え、次回抽選からの参加者除外や抽選履歴の表示にも対応。複数回のアイテム分配をスムーズに進められるよう、必要な機能をひとつの画面にまとめました。

PC・スマートフォンの両方に対応したレスポンシブデザインを採用し、利用する端末に合わせて画面レイアウトが調整されるように設計しています。

デザインはダークカラーをベースに、紫のアクセントカラーで操作ボタンや重要な情報を強調。ゲーム中でも使いやすい、シンプルで視認性の高いUIを意識しています。

【制作情報】
制作内容：Webアプリ制作・UIデザイン
使用技術：HTML・CSS・JavaScript
対応端末：PC・スマートフォン（レスポンシブ対応）
制作区分：自主制作

【公開ページ】
https://harulab.work/roulette/

HARULABのブランドカラーであるブラックとゴールドを基調に、Windows向けのオリジナルマウスカーソルセットを制作しました。

通常のポインターやリンク選択、文字入力、サイズ変更など、17種類のカーソルを統一感のあるデザインで作成。

32px・48px・64pxの3サイズに対応し、待機中などに使用するアニメーションカーソルも2種類用意しました。

暗い背景と明るい背景のどちらでも視認しやすいよう、輪郭や配色を調整しています。

【制作情報】
制作内容：マウスカーソルデザイン・UI素材制作
対応環境：Windows
収録内容：17種類・3サイズ（32／48／64px）・アニメーション2種類
制作区分：自主制作

砥石セットを題材に、ECサイトの商品一覧で目を引くサムネイル画像を自主制作しました。

「蘇る切れ味」をメインコピーに、包丁の切れ味が伝わるビジュアルと、商品の特徴がひと目で分かるレイアウトを意識しています。

生成AIを活用して画像素材を制作し、商品本体や付属品の見え方を調整しながら、情報の分かりやすさと視覚的なインパクトを両立させました。

【制作情報】
制作内容：EC商品画像・サムネイルデザイン
使用技術：生成AIによる素材制作・画像編集・レイアウト構成
画像サイズ：1000×1000px
制作区分：自主制作（販売・商用利用を目的としたものではありません）

将棋学習アプリ「鬼殺しAI」をテーマに、将棋の戦法を擬人化したキャラクターイラストを制作しました。

今回制作したのは「角換わり」と「居飛車穴熊」の2種類です。

【角換わり ～ Kaku-Gawari ～】

柔軟な駒組みと攻守のバランスをイメージし、緑を基調とした忍者風のキャラクターに仕上げました。

【居飛車穴熊 ～ Anaguma ～】

堅固な守りが特徴の戦法を、熊をモチーフにした重厚感のあるキャラクターで表現しました。
それぞれの戦法の特徴が視覚的に伝わるよう、キャラクターの衣装や配色だけでなく、紹介文や将棋盤の図解を組み合わせて構成しています。

【制作情報】
制作内容：キャラクターデザイン・イラスト制作・紹介画像デザイン
使用ツール：ChatGPT（生成AI）、画像編集ソフト
制作区分：クライアント向け制作作品（ポートフォリオ掲載許可取得済み）