作ったもの

COLLECTION ROOM

登録画面
管理者ホーム画面
一覧画面
アイテム登録画面
カテゴリ管理画面
アイテム詳細画面

概要:
本アプリは、スクールの自主製作課題として開発したコレクションアイテムを管理するウェブアプリです。物理的なスペースの制約を受けず、オンライン上でコレクションを簡単に整理・閲覧できるように設計しました。

目的:
多くのコレクションアイテムは大切に保管しているものの、物理的なスペースに限りがあり、実際に並べてみたり管理することが難しいことがよくあります。そこで、このアプリを通じて、ウェブ上で気軽にコレクションを閲覧し、整理できる環境を提供します。

設計:
アプリはシンプルで直観的な操作性を重視しました。ユーザーが容易にアイテムを追加・管理できるように、カテゴリー追加機能を備え、汎用性を持たせています。また、スマートフォンでも快適に操作できるよう、レスポンシブデザインにも対応しています。

デザイン:
「COLLECTION ROOM」というタイトルに合わせた、全体的に柔らかい雰囲気を持たせたデザインに仕上げました。アイテムを並べる感覚を大切にし、視覚的にも心地よく感じられるようなインターフェースにしています。

製作範囲:
ユーザーインターフェースのデザイン / アイテム登録・管理機能の開発 / カテゴリー追加・編集機能 / アイテムの検索機能 / レスポンシブデザインの実装

仕様ツール・技術:
エディタ:Visual Studio Code (VS code) / バックエンド:Laravel, Node.js / フロントエンド:HTML, CSS, JavaScript, Bootstrap
データベース:Xserver (MySQL) / デザイン:デザインAC, GIMP / バージョン管理:Git, GitHub

製作期間:
約3ヶ月

公開URL: es-collection.site

Portfolio

トップ画面
works画面
コンタクト画面
作ったもの画面
作ったもの詳細画面
自己紹介画面

概要:
自身の経歴や製作物をまとめたポートフォリオサイトを製作しました。

目的:
フリーランスとして活動していくにあたり、これまでの製作物やその背景にある思考、経歴や強みを伝えることを目的としています。

設計:
まず自分に何ができるのかを伝えるため、タイトル直下に製作物の紹介を配置。各作品の詳細ページへスムーズに遷移できるよう設計しています。
自己紹介ページでは、プログラミングを始めたきっかけのエピソードや、スキルを一覧でまとめ、分かりやすく伝えることを目的としています。

デザイン:
自分らしさを表現するため、温かみのある親しみやすいデザインを心がけました。

製作範囲:
サイトの設計・デザインからコーディングまで一貫して対応。

仕様ツール・技術:
エディタ・言語:Visual Studio Code (VS code) / HTML / CSS / JavaScript / Swiper.js / Bootstrap / PHP
その他:Xserver / デザインAC / GIMP / Git / GitHub

製作期間:
約2ヶ月