Minami
Gouda

Overview

スクールの課題として、提供されたデザインカンプをもとに制作したカフェ書店のLPです。
デザインの再現をコーディングで担当し、余白や文字組みを一つずつ確認しながら、カンプに近い仕上がりを目指しました。

Point

• カードレイアウトは当初グリッドで組んでいましたが、ブラウザの中間幅で崩れる問題に気づき、可変幅でも整って見えるフレックスボックスに設計を変更しました。
• カードのフェードイン、ハンバーガーメニュー、FAQのアコーディオンをJavaScriptで実装し、静的なページに動きと使いやすさを加えました。
• カンプの再現精度にこだわり、余白・文字サイズ・行間を一つずつ確認しながら調整しました。

Overview

既存のスクールLPを参考に、改善案を盛り込んで一から実装した実案件です。
はじめは改善したい点をいくつか盛り込んだ案を作りましたが、「元の構成は大きく変えたくない」というご要望をいただき、ベースを保ちつつ見やすさを高める方向に調整しました。
第三者クライアント様の案件として、ご要望を汲みながら進めることを大切にしました。

※掲載の「Demo Site」は、コーディング学習・ポートフォリオ用に再現したデモです。
実際の納品先サイトとは異なります。

※本案件はPC版のみのご依頼のため、レスポンシブ対応はしておりません。
スマートフォンでご覧いただくと表示が崩れます。

※もし今スマホ対応を追加するなら、テーブル部分を横スクロールさせるか、カード形式に組み替える方向で調整します。

Point

• 「コピー&ペーストではなく一から実装」という条件のもと、BEM記法と分割SCSSを用いて、保守しやすい設計を意識して構築しました。
• フォントサイズ・余白・要素の配置を調整し、セクション数の多い長いページでも読み進めやすいレイアウトに整えました。
• 修正のご依頼にはその日のうちに対応し、都度確認いただきながら進めることを心がけました。

Overview

自身のスキルと仕事の進め方を伝えるためのLPです。
構成の叩き台づくりにClaude・Codexを活用し、方向性の指示や取捨選択、実装・デバッグ・細部の調整は自身で行いました。
色味やフォントは凝りすぎず、"見やすさ"を最優先に判断しています。

Point

• 長期的な運用を見据え、BEM設計とSCSSのファイル分割を採用。後から更新しやすく、制作会社の方が読んでも追いやすいコードを意識しました。
• 以前の複数ページ構成（1作品＝1ページ）をやめ、アコーディオンで1ページ内に情報を集約。ページ移動なしで作品を見比べられる、見やすい構成に改善しました。
• サイト全体で「思い込みで進めない、確認して正確に」の軸を統一。Hero・Worksの文章を、この軸に沿って見直しました。

Overview

デザインカンプをもとに実装した、架空のエナジードリンク「iromon」のLPです。
モンスターキャラクターを使ったポップな世界観を、BEM設計のSCSSで丁寧にコーディングしました。

Point

• デザインカンプの色・キャラクター性を崩さず再現
• フレーバー比較カードの星評価をHTML/CSSで実装
• 動き（アニメーション）は主役をドリンクの缶に定め、缶の浮遊を中心に構成。フレーバーカードのフェードイン、キャラクターはPCサイトのみ1体だけ、と見せ場に優先順位をつけて動かす要素を絞ることで、ポップな世界観を保ちつつ画面がうるさくならないよう調整しました。
• ハンバーガーメニューなど、基本的なUIのJavaScript実装にも対応