HTML / CSS / JavaScript

PORTFOLIO SITE.

HTML・CSS・JavaScript と Tailwind CSS を用いて一から構築した、自身の作品をまとめるポートフォリオサイトです。

Preview

サイトプレビュー

AIMI PORTFOLIO
open_in_newサイトを見る

※ 新しいタブで開きます

Concept

制作コンセプト

The story behind this portfolio

Mending Hearts, Building Stories.

心を整え、物語を築く

format_quote

迷いを、自分らしい物語の形に。
想いを、心に寄り添うデザインに。

ファーストビューに添えたこの言葉には、バラバラになってしまった悩みや、大切にしている想いをひとつずつ丁寧にすくい上げて、新しい物語として編み直していきたい……という願いを込めています。ただサイトを作るだけでなく、その人らしい歩みをデザインでそっと支えられるような、そんな存在でありたいという気持ちを表現しています。

public

Orbit

太陽系の軌道という着想

ファーストビューの背景に広がる柔らかなラインは、太陽系の軌道をイメージしています。中心にある「一番伝えたい想い」を核にして、デザインや技術が星のように心地よいリズムで巡り、ひとつの小さな宇宙ができあがっていく様子を形にしました。

grid_on

Alignment

整列の美しさと、優しさの共存

繊細な線の重なりによる整った佇まいと、おだやかな色合い。理屈だけじゃない「整列の美しさ」と、心に触れるような「優しさ」が、この場所でふわっと溶け合うようにデザインしています。

auto_stories

Story

デザインで、歩みをそっと支える

「Mending Hearts, Building Stories.」という想いがすべての起点です。ただ情報を見せるのではなく、訪れた人が自分の物語を思い描けるような、余白と温度のあるデザインを目指しました。

Design

デザインコンセプト

Color Palette

#FFB5BA — Primary Pink

アクセント・ホバー・ラベル

#AEE2FF — Accent Blue

背景ぼかし・サブ装飾

#FDFCF8 — Cream

ライトモード背景色

#1A1A1A — Charcoal

テキスト・ダークモード背景

Typography

Inter

英数字・見出しに使用するモダンなサンセリフ体。トラッキングを詰めた極太ウェイトでインパクトのある見出しを構成。

Zen Maru Gothic

日本語テキストに使用。角のない丸みが親しみやすさと読みやすさを両立。

Concept

「見てもらう人の目を引きつつ、作品が主役になる」をテーマに設計。クリームホワイトとチャコールの組み合わせで上品な余白感を出しながら、ピンクのアクセントカラーで視線を誘導します。

背景のパステルぼかし（pastel-blur）はCSSのblurフィルターで実装。ページ全体に奥行きと空気感を与え、コンテンツが浮かび上がるように見せる工夫をしています。整列の美しさと優しさの両立という制作コンセプトが、色彩とレイアウトに反映されています。

Overview

サイト概要・ファイル構成

web 主要ページ構成

  • index.html
    ヒーロー・作品ピックアップ・Aboutセクション・お問い合わせフォームを1ページに集約したトップページ
  • index.html（トップページ）
    全作品を一覧表示。カテゴリフィルターでインタラクティブに絞り込める作品一覧をトップページに統合
  • index.html#profile-name
    スキルセット・使用ツール・学習経歴をまとめたプロフィールページ
  • training.html
    スクールでの研修・学習記録をまとめたページ

integration_instructions 技術スタック

  • HTML5 / CSS3
    セマンティックなマークアップと、カスタムアニメーションを含む手書きCSS
  • Tailwind CSS（CDN）
    ユーティリティクラスによるスタイリング。darkMode・レスポンシブ対応をすべてTailwindで統一管理
  • Vanilla JavaScript
    ハンバーガーメニュー・スクロールアニメーション・検索フィルター・フォームバリデーションをフレームワーク不使用で実装
  • PHP（contact.php）
    お問い合わせフォームのサーバーサイド処理・メール送信をPHPで実装
Key Points

実装・デザインのポイント

smartphone

Point 01

モバイルファーストのレスポンシブ設計

スマートフォン・タブレット・PCすべてで崩れないよう、Tailwindのsm/md/lgブレイクポイントを徹底活用。モバイルではヘッダーをスクロール方向で自動表示・非表示にするUX改善も実装しました。

search

Point 02

インタラクティブな作品フィルター

トップページでは、カテゴリボタンをJavaScriptで連動。data-category属性を使ってリアルタイムに作品カードを絞り込める検索機能をライブラリ不使用で自作しています。

speed

Point 03

WebP全面採用による軽量化

サイト内のすべての画像をWebP形式に統一。PNG比で最大93%のファイルサイズ削減を実現し、ページの読み込み速度を大幅に改善しています。アニメーションGIFのみ例外的に保持しています。

mail

Point 04

PHPによるお問い合わせフォーム

フロントエンドでのバリデーション（JS）とサーバーサイド処理（PHP）を組み合わせたお問い合わせフォームを実装。入力チェック・送信・完了メッセージ表示までを一貫して設計しています。

Tools

使用ツール

code

VSCode

HTML / CSS / JS / PHP 記述

smart_toy

Claude AI

コード生成・デバッグ支援

image

Adobe Photoshop

サムネイル・OGP画像制作

auto_fix_high

Adobe Firefly

生成AI・画像制作

chat

ChatGPT

文章・アイデア生成

psychology

Gemini

文章・アイデア生成

arrow_back トップに戻る