Enter a prompt to generate a new theme.

Caution: All prompts are recorded.

Works

時期
Mattermost アナリティクス「mmdash」のダッシュボード画面。直近の日別メッセージ投稿数がグラフや一覧で表示され、サークル内の活動状況を把握できる。

mmdash

サークル内で稼働している Mattermost（コミュニケーションツール）のアナリティクスを表示する Web アプリです。

第29回大宮祭ウェブサイトのトップ画面。動きのあるデザインでイベント情報が表示されている。

第29回大宮祭ウェブサイト

第29回大宮祭の公式ウェブサイトを開発しました。

カラフルなグラデーション背景に「GingaUI」という白抜きロゴを中央配置したプロモーションバナー。周囲の白い角丸カードが機能を説明しており、左から時計回りに「UI Component Library for React（React ロゴ）」「20 + Components（パズルピースのアイコン）」「Accessible（立体ハート）」「Simple to Use（笑顔の絵文字）」「Generate Theme with AI（パレットのアイコン）」「Free and Opensource（札束のアイコン）」「Support SSR（ドライバーのアイコン）」「TypeScript Based（TS ロゴ）」と記載されている。

GingaUI

LLM を活用し文脈に合わせたテーマを生成する UI コンポーネントライブラリを開発しています。

Webアプリケーション「Lounge Books」のスクリーンショット。上部にヘッダーがあり、サイバーエージェントのイメージカラーである緑を使ったデザインで「Lounge Books」というタイトルと「本を登録する」というボタンが配置されている。そのすぐ下にセレクトボックスと検索ボックスがあり、セレクトボックスは「カード表示」が選択されている。その下には本のカードが並んでおり、それぞれのカード内でカバー画像が表示されている。「RESTful Webサービス」や「Pythonで理解する統計解析の基礎」「集合知プログラミング」などのタイトルが確認できる。

Lounge Books

サイバーエージェントの技術コミュニティ「CA Tech Lounge」で、蔵書を確認するための Web アプリケーション「Lounge Books」を開発しました。ラウンジには多数の技術書があり、ひと目で目的の本があるかどうかを確認するのが難しかったため、手元でどこからでも検索ができるよう、蔵書管理アプリを開発することになりました。

シンプルな リアルタイム時刻表 Web 画面。上部に緑色のヘッダーがあり「水曜日 08:15」と現時刻を表示。中央を左右 2 カラムに分割し、左側で大学行のバスが8時23分に来ることを示し、右側で東大宮駅行のバスが8時17分に来ることを示している。それぞれ時刻の下に、あと何分で来るかの情報と緑色で「次のバスを見る」というリンクがある。フッターには4つのリンクが横並びで配置されていて、それぞれ「現在時刻」「公式の時刻表」「GitHub」「Twitter」と書かれている。

SIT Bus

東大宮駅<->大宮キャンパス間を走る学バスが次に来る時間を表示します。

木製デスク上のノート PC 画面を写した写真。ブラウザには入退室管理システム「Roomkeeper」が表示され、画面左上に大見出し「Roomkeeper」、下にカメラ映像のプレビューエリアがあり、 QR コード付きカードを読み取り中であることがわかる。右側に「放課後自習室」という見出しがあり、「IDを直接入力する」入力欄と「滞在中のゲスト」の一覧を表示している表がある。下部には連続で同じゲストをスキャンするか確認するポップアップが表示されている。PC 左横には透明ケースに入った読み取りデバイスと USB ケーブルが見える。

Roomkeeper

学校内で行われるプログラムのために、生徒の入退室時刻を記録する Web システムを開発しました。

余白の大きい白背景に、立体感のあるパープルの「F」アイコンと、右側に濃紫色で「もじまち」、その下に「フォントビューワーソフト」と書かれたブランドロゴ

もじまち

デバイス上にインストールされたフォントの一覧を表示する、デスクトップアプリケーションです。

模擬店の売上を管理するダッシュボード画面。左側の黒背景サイドバーに緑円と「3-9」のリボンをつけたキャラクターで構成されるロゴがあり、メニュー項目「ホーム／入店処理／精算処理／注文履歴／統計」が表示されている。メインエリアの上部に時間帯別売上を示す折れ線グラフが、下段左に売上比の円グラフがある。画面右下に総売上「185,250円」、総注文数「625 個」の文字がある。

sh309cafe

栄東祭 2023 において、喫茶店の販売管理システムを開発しました。

黄色の角丸ブロックをレンガ状に配置し、太字黒文字で 「Local Font Emulator」と記載。右中段のブロックに「newt239 / local-font-emulator」のリポジトリ名が小さく入ったビジュアルバナー。

Local Font Emulator

ローカルフォントの一覧を取得し、それらをブラウザ上で表示することができる Web アプリです。

Webアプリ「Score Watcher」のスクリーンショット。画面上部に形式名「5by5」、第20問、問題文と解答が表示されている。

Score Watcher

クイズ大会におけるプレイヤーの得点状況を可視化するソフトです。

校舎内のピロティでプロジェクター付きホワイトボードに映された展示ごとの滞在者数を、制服やクラスTシャツを着た生徒たちが距離を取って閲覧している写真。

Gateway

栄東祭 2022 において、来場者の滞在状況を記録するシステムを開発・運用しました。

校舎内を 360 度のパノラマ画像で確認できるウェブサイトのスクリーンショット。画面左上に「Look Inside View」ロゴがあり、中央に校舎ピロティのパノラマ画像、下部に施設名と説明文が表示されている。左下にナビゲーションメニューがあり、「施設一覧」「企画について」「栄東祭トップ」というボタンが並んでいる。

Look Inside View

栄東高校・中学校の校舎内を 360 度の画像で紹介するサイトです。2021 年度のオンライン文化祭用の作品で、同じ同好会のメンバー 3 人と制作しました。

Discordデスクトップアプリのサーバー「SHIP Info」のチャンネル「高校連絡事項」を表示したスクリーンショット。左側のナビゲーションにはカテゴリー別チャンネルが並び、メッセージエリアにはBOT「SHIP-Assistant」が「高校1年 日帰り校外学習の目的地変更について」や「第42回 卒業証書授与式 ライブ配信」など学内連絡をカード形式で投稿している。

SHIP Notify

SHIP （ Sakae Higashi Internet Program ） や栄東中高ホームページの栄東ニュースを定期的にスクレイピングし、更新があれば通知するシステムです。SHIP の閉鎖に伴いサービスの提供を終了しました。

「ne​wt239.dev」のポートフォリオ Web サイトのトップページ画面。左上に幾何学模様で象られたマスコットロゴとサイト名、右上にテーマ生成のためのボタンがある。ヒーローセクションはブルーグレーのグラデーションカードで、見出し「Welcome✨」と箇条書き「19さい」「すきなもの: Webフロントエンド, UI/UX」「言語: TypeScript, Python, Go」「趣味: アニメ, ボカロ等」と記載されている。その右側にソーシャルリンクボタンが縦並びで「Twitter @newt239」「GitHub @newt239」「Zenn @newt_st21」「Qiita @newt239」とある。下部には見出し「Works」と 4 件のカードが並び、それぞれ「Gateway」「Score Watcher」「Look Inside View」「Roomkeeper」と記載されている。

ポートフォリオサイト

このサイトです。一番長いあいだ作り込んでいるものであるとも言えます。

モバイル UI を 3 画面並列にキャプチャした Web アプリ「Quiz Flasher」のダークテーマ画面。左端はホーム画面で、「このサイトは何？」「プリセット」「その他のツール」「このWebアプリについて」という見出しが並ぶ。中央はクイズ出題画面で、画面上からシート IDとシート名、「次の問題」のボタン、問題文、橙色による正解文、回答履歴のテーブルが並ぶ。右端は「スプレッドシートのidから検索」画面で、URL入力欄と検索結果として抽出されたシート名一蘭があり、それぞれリンクテキストとして表示されている。

Quiz Flasher

問題データを入れた Google スプレッドシートのファイルから、ランダムに問題を出題する Web アプリです。すべてのシートから出題させたり、特定のシートの特定の問題のみで出題させることもできます。自分が JavaScript を初めて使って作った作品です。バックエンド的に使うのももちろんですが、モーダルウィンドウなどデザイン面で利用したのもこれが初でした。

トップへ戻る