APEXの画面をいろいろ作ってみてます
APEXというと、標準の表やフォームを並べた、お決まりの見た目を想像するかもしれません。でも、APEXの画面はもっと自由に変えられます。
APEXlangを使って、HTMLやCSSでAPEXの見た目をどこまで変えられるか、いろいろ試しています。ゲーム風のUIや、JavaScriptと3Dライブラリを組み合わせた画面など、作ってみたデザインをここに少しずつ置いていきます。
エンタメ系の画面一覧
| 画面 | デザインの例 | 見どころ |
|---|---|---|
 |
夜景を巡る3Dの街並み | 窓明かりのある夜景、自動で切り替わる視点、リアルタイムに動く人と車 3D描画：Three.js / WebGL |
 |
3Dと連動する画面演出 | 立体的な球場、カメラ切替、中継風の結果表示 3D描画：Three.js / WebGL |
 |
動きのあるパズルゲームUI 作成記事を読む |
タイルの移動と合成、色の変化、動く盤面と数値の対比 |
 |
世界観を切り替える3Dの町 | 穏やかな町、ネオンの街、ファンタジー風の浮島。3つの世界観と視点の変化 3D表示 |
 |
同じデータの3つのデザイン | 黒い映画配信風、白い業務画面、青と生成りの編集誌風 |
 |
劇場風のクイズUI | 深紅と金の配色、舞台の装飾、スコアボード |
 |
RPG風のマップUI | 青いウィンドウ、建物の画像、地図と情報パネルの組み合わせ 地図描画：MapLibre GL JS |
 |
RPG風のチャットUI | 青いグラデーション、白い枠線、ゲーム風のウィンドウ構成 |
ビジネス系の画面一覧
| 画面 | デザインの例 | 見どころ |
|---|---|---|
 |
余白を生かしたミニマルUI 作成記事を読む |
白と緑の配色、控えめな区切り、PCとスマートフォンのレイアウト |
 |
ダークネオンのダッシュボード | 暗い背景、明るいグラフ、情報量の多い画面の配色 |
 |
トーンをそろえたシンプルUI | 白と緑の統一感、シンプルな操作面とグラフのある画面 |
 |
文書と確認欄を並べるレビューUI | 原票を大きく見せる領域、隣接する確認欄、落ち着いた配色 |
 |
比較を見せる一覧と詳細のUI | 一覧、強調した金額、詳細パネルのまとまり |
エンタメ系のデザイン
3Dの街並み
制作例：都市ラボ
窓明かりの街を、自動で視点を切り替えながら巡ります。
リアルタイムで人が歩き、車が走り続けています。
カメラの移動と街の中の動きは、ブラウザでリアルタイムに描画。
街の配置はPL/SQLで生成し、Three.js / WebGLで描画。
3Dと連動する画面演出
制作例：プロ野球リプレイ
3D球場を大きく使い、スコアや結果表示を重ねた画面です。
カメラの切替やプレー後の演出で、静止画とは違う見せ方をしています。
Three.jsとWebGLで球場と選手を描画し、カメラや結果表示を連動させています。
動きのあるパズルゲームUI
制作例：Jev 2048 Arena
数字のタイルが移動して合成される、パズルゲームの画面です。緑の盤面と暗い情報パネルを並べ、動く部分と数値の見せ方を分けています。
世界観を切り替える3Dの町
制作例：ひだまりの町
ログイン画面
ミニチュアの町を3Dで表示した画面です。穏やかな町、ネオンの街、ファンタジー風の浮島。同じ町を、配色や建物、背景まで異なる3つの世界観で見せています。
同じデータの3つのデザイン
制作例：MovieStream
黒い映画配信風
白い業務画面
青の編集誌風
同じ題材を3つのスタイルで見せています。背景色、文字の大きさ、ポスターの並べ方を変えると、画面の印象も変わります。
劇場風のクイズUI
制作例：Cinema Royale
深紅と金を使った、劇場のようなクイズ画面です。舞台の装飾から回答ボタン、スコア表示まで、ひとつの世界観でまとめています。
RPG風のマップUI
制作例：外苑前カフェ探索地図
地図をRPGのフィールドのように見せた画面です。青いウィンドウと建物の画像を使い、地図の横に情報パネルを置いています。
MapLibre GL JSの地図に、建物の画像やRPG風の情報パネルを組み合わせています。
RPG風のチャットUI
制作例：AIクエスト
会話の画面を、JRPG風の青いウィンドウで見せています。白い枠線と複数のパネルで、ゲームのメニューのような見た目にしています。
ビジネス系のデザイン
余白を生かしたミニマルUI
制作例：余白・Todo
一覧画面
ログイン画面
白と緑、広めの余白でまとめた画面です。強い装飾を抑え、一覧とログイン画面のトーンをそろえています。スマートフォンでは配置を組み替えています。
ダークネオンのダッシュボード
制作例：在庫パルス
暗い背景に明るいグラフを重ねた画面です。棒、円、曲線など、形の違うグラフをネオン配色でまとめています。
トーンをそろえたシンプルUI
制作例：出退勤システム
打刻画面
集計画面
シンプルな操作画面とグラフのある画面を、白と緑でそろえています。画面ごとの情報量が違っても、配色や余白で共通の印象を持たせています。
文書と確認欄を並べるレビューUI
制作例：受注デスク
文書を大きく見せ、その隣に確認欄を並べた画面です。白と生成りを中心に、原票と入力内容を見比べられるレイアウトにしています。
比較を見せる一覧と詳細のUI
制作例：入金照合
一覧の下に金額を大きく配置し、数字の比較を見せる画面です。淡い背景色と区切りで、一覧と詳細のまとまりを示しています。
APEXlangについて
APEXlangはOracle APEXの画面や設定をテキストで記述するための言語です。
AI Codingツールと組み合わせてアプリを作れます。
画面の見た目にはHTMLやCSS、動きや3D表現にはJavaScriptやライブラリを使っています。3Dの描画はブラウザ側で行い、APEXの認証やADBへのデータ保存も組み合わせて使えます。
導入や作成環境については、こちらの記事を参照してください。
- APEXlangでVibe Coding：ログイン付きTodoアプリを作ってみた
- ssfujitaさん：Codex CLI × APEXlangで始めるOracle APEXアプリAI駆動開発