上流から下流まで
一貫したサイト作りを
目指します。
A Seamless Process.
上流から下流まで
一貫したロジックと表現で
無駄を排除したシンプルな
ウェブサイトを実現します。
プロジェクト全体を通した制作はもちろん、チームの状況に合わせて特定の工程から参画する場合でも、前後のプロセスを意識したスムーズな連携が可能です。要件を正しく解釈し、機能する形へと落とし込む。そのための最適かつ確実なプロセスを追求しています。
01
Requirements Definition
要件定義
02
Wireframe
ワイヤーフレーム
03
UIUX / Design
デザイン
04
Cording
実装
01
Requirements Definition
要件定義
プロジェクトの目的や要件を明確にし、ユーザーニーズを分析して最適なソリューションを提案します。
「何をしたいか」を
「何を作るか」へ翻訳する
目的定義
事業ゴール(売上・認知・採用・ブランド再構築など) を明確化し、KPI に分解する
ターゲット定義
ユーザーの課題、接触導線、利用環境、リテラシーを整理し、体験設計の前提条件を設定する
制約条件の整理
予算、スケジュール、運用体制、使用ツール、サーバー環境、更新頻度、アクセシビリティ・セキュリティ要件を明文化する
設計方針の策定
トーン&マナー、キーワード、ブランドの立ち位置、メインビジュアルの役割を定義する
アウトプット設計
Webサイト/LP/バナー/パンフレットなど最適な媒体を選定し、情報設計(WF)、デザイン、スタイルガイド、CMS構造まで落とし込む
02
Wireframe
ワイヤーフレーム
情報構造を整理し、ユーザビリティを考慮した画面レイアウトを設計します。
03
UIUX / Design
デザイン
ブランドイメージを反映した視覚的なデザインと、使いやすいユーザーインターフェースを制作します。
04
Cording
実装
デザインを忠実に再現し、レスポンシブ対応やパフォーマンスを考慮したコーディングを行います。
Works 制作実績
-
Corporate
-
EC / Fashion
-
Entertainment
Gallery ギャラリー
こちらのセクションでは、自身のスキルアップと表現の幅を広げるために制作した、自主制作（コンセプトワーク）を掲載しています。
WordPress 個人サイト
Development 個人開発
anet
公式サイト: https://anet.systems/
アプリサイト: https://app.anet.systems/
アネットはAIが組み込まれたOS型アプリケーションです。AIを単なる拡張機能ではなくOSの一部として設計しています。巨大なAIモデルが万能性を追求する一方で、アネットは『AIをOSの一部として統治する』という、全く別のベクトルから次世代のコンピューターのあり方を模索したプロトタイプです。2025年11月より開発をスタートし大晦日にベータ版を公開しました。アプリケーションの開発は初めてでしたがバイブコーディングで実装しました。
HTML / CSS
- セマンティックHTMLによる画面構造設計
- レスポンシブ対応 (PC/スマホ)
- ダークモード・テーマ切り替え対応
- デザインシステムを意識したCSS設計 (変数・トークン管理)
JavaScript (フロントエンド)
- UI状態管理(表示切替・モード管理・分岐制御)
- イベント駆動の画面操作ロジック実装
- 複数ペイン・分割ビューの制御
- 非同期処理(API通信・状態反映)
フロントエンドフレームワーク (React)
- コンポーネント設計・分割
- 再利用可能なUI部品設計
- 状態を持つインタラクティブUI構築
- View単位での責務分離設計
UI / UX設計
- OSライクなワークスペースUI設計
- ヘッダー・サイドバー・メイン領域の情報設計
- ユーザー操作を前提とした導線設計
- 「思考を止めない」ための操作単位・粒度設計
デザインツール (Figma)
- コンポーネント設計
- カラートークン・スタイル管理
- UI構造を前提としたデザイン設計
- 実装を前提にした現実的なデザイン設計
バックエンド基礎
- Node.js / JavaScriptによるAPI設計
- ファイルベースのデータ管理設計
- ユーザーごとのデータ分離設計
- 開発環境/本番環境の切り分け
AI API連携
- LLM(生成AI) とのAPI連携
- コンテキスト設計(履歴・状態・画面情報の受け渡し)
- 単純なチャットではない用途別AI設計
- AIをUI操作・補助ロジックとして組み込む設計
プロダクト設計
- 個人開発での要件定義~実装~公開
- ベータ版運用・改善サイクル
- 多言語対応を前提とした設計
- 海外ユーザー流入を想定した構造設計
インフラ/運用(基礎)
- Linuxサーバー運用
- Gitによるソース管理
- 本番環境へのデプロイ・更新
- 障害発生時の切り分け・修正対応
-
SKILLS
-
Design
Illstrator
Photoshop
Adobe XD
Figma
-
Cording
Vscode
HTML
CSS
javascript
-
cms
Wordpress
PHP
-
