Gallery

完全未経験からスタートして約1年半、
試行錯誤を繰り返しながら多彩な作品を形にしてきました。
時には壁にぶつかることもありましたが、課題を1つずつ紐解き、
すべての作品を最後まで丁寧に作り上げています。
私の成長の軌跡をぜひご覧ください。

レシピの画像

仮想レシピサイト(フルスクラッチWebアプリケーション)

【概要】 プログラミング学習1年半の集大成として、企画・デザインからバックエンド実装まで、全工程を1人で完遂したフルスクラッチのWebアプリケーションです。

【デザインの挑戦】 サイトの顔となるヒーローエリアのレイアウトに苦戦しましたが、HTML/CSSの構造を徹底的に見直し、デザイン意図通りの美しいレスポンシブ配置を実現しました。機能面では、ユーザーが直感的に操作できる「春夏秋冬」のシーズン切り替えボタンを実装しています。

【バックエンドの挑戦】 PHPとデータベース(MySQL)の連携、特に複雑なSQLクエリの記述やデータの条件分岐で壁にぶつかりました。しかし、エラーログを自力で紐解きながら粘り強くデバッグを行い、理想の動的処理と、運用を考慮したレシピ・コラムの管理画面(ログイン・CRUD機能)まで一通り形にしました。

【得られたスキル】 ユーザーファーストなUI/UXデザインの追求に加え、PHP/MySQLを用いた実践的な動的サイト構築のスキルが劇的に深まりました。

HTML CSS PHP MySQL

作品を見る(サイト)→
作品を見る(管理者画面)→
お菓子が映ってる画像

仮想ECサイト(ログイン・お気に入り管理システム)

【概要】 「かわいいお菓子」のオンラインショップを想定し、初めてPHPとMySQLを使用したバックエンド開発に挑戦した作品です。

【技術的挑戦】 ユーザーごとにパーソナライズされた体験を提供するため、セッション管理を用いた「ログイン・ログアウト機能」と、データベースと連動した「お気に入り登録・削除機能」を実装。さらに管理者画面からシームレスに商品を追加できる仕組みも構築しました。

【課題解決】 画面遷移時にログイン状態を保持しながら、DBへ正確にお気に入りデータを紐付ける処理に物凄く苦戦しました。そこでAIを単なる答え合わせではなく「技術パートナー」として能動的に活用。エラー原因を一行ずつ紐解くことで、目標としていたバックエンドの基本サイクルを自力で完成させました。

【得られたスキル】 期間内に決済機能まで至らなかった悔しさはありますが、本作で培ったバックエンドの基礎と「AIを活用した高い自己解決能力」が、その後のレシピサイト構築における大きな原動力となりました。

HTML CSS JavaScript PHP MySQL

作品を見る(サイト)→
作品を見る(管理者画面)→
スロットの作品画像

JavaScriptスロットマシーン(ロジック学習のためのミニゲーム)

【概要】 HTML/CSS/JavaScriptを学び始めて1年未満の時期に、JavaScriptのプログラムロジックを鍛える目的で制作したWebゲームです。

【ロジックの挑戦】 視覚的な装飾以上に「JavaScriptで複雑なルールをどう制御するか」に重きを置きました。ただ絵柄が回るだけでなく、ゲームとして成立させるために「手持ちコインの増減システム」を導入。絵柄の揃い判定、コインが0になった際のスロット動作制限など、データの「状態」に応じた条件分岐ロジックを自力で組み立てました。

【デザインと今後の展望】 短期間でゲームの世界観を演出するため、黒背景にネオン風の文字を組み合わせたスタイリッシュなUIに仕上げました。実際に運用する中で「確率の偏り」などのゲームバランスの課題も見えており、これが現在の新たな学習モチベーション(確率制御のアルゴリズム理解)へと繋がっています。

【得られたスキル】 仕様通りのゲームシステムを一から構築できたことで、JavaScriptを用いた柔軟な論理的思考力が大きく養われました。

HTML CSS JavaScript

作品を見る→
レモネードが映っている画像

ポートフォリオサイト(デザインと技術の調和を目指したマイサイト)

【概要】 自身のスキルとこれまでの作品群を、採用担当者へ最も魅力的に、かつ分かりやすく伝えるために構築したポートフォリオサイトです。

【デザインのコンセプト】 「レモネード」をテーマに、シンプルで清潔感のある爽やかな世界観を演出。Canvaで自作したトップ画像をもとに全体のトーン&マナーを統一し、画像が泡のようにふわふわと動くインタラクティブなアニメーションをJavaScriptで実装してユーザーの回遊性を高めました。

【インフラへの挑戦】 技術的な新しい挑戦として、本作の公開にあたりレンタルサーバーの導入・設定をすべて自力で行いました。自身のPC(ローカル環境)を飛び出し、実際にドメインやサーバーを紐付けて世界中にWebサイトを一般公開するという、インフラ公開の一連の工程を経験できたことは大きな成長となりました。

【今後の展望】 企画・デザインの具現化からWeb公開までの総合的なアプローチを学びました。今後も最先端のトレンドやWeb技術にアンテナを張り、ユーザーの心を動かすサイトを追求し続けます。

HTML CSS JavaScript PHP MySQL

作品を見る→
戻る