SueokaAkira
CalmNote は
「静けさ」「整う」「続けられる」をテーマに構築した
アプリ紹介サイトのデザイン作品です。
水泡・淡色のグラデーション・広い余白を使い、
ブランドとしての“静けさの世界観”を大切にしながら、
5ページの構成を一貫したトーンでデザインしました。
•FigmaでのWebデザイン制作（構成・レイアウト・配色設計）
•サイト全5ページのデザイン（Top / Features / Product / About / Pricing）
•カラーパレット、余白・影・角丸などのUIルール作成
•ロゴ・Typographyの設定
•テキスト・コピーライティング
•Webサイトとしての導線設計
•画像素材の選定およびAI生成（※UI部分はイメージ素材として使用）
Web Design
フランスをテーマにした 高級紅茶ブランド「Lumiere Tea」 のECサイトを想定し、
デザイン制作〜WordPress構築まで一貫して担当した自主制作サイト です。
ブランド世界観と商品の魅力が伝わるよう、
落ち着きのある配色と余白設計を意識して制作しました。
•情報整理・サイト構成
•Figmaデザイン（UI設計・カラー／タイポグラフィ設定）
•WordPressテーマ作成
テーマ編集
•ACF（カスタムフィールド）
•カスタム投稿（商品）
•ショートコード設計
•Post Gridで商品並び替え
•WEBP化で読み込み高速化
•ACFによる商品登録フォーム構築
•商品一覧ページ（Post Grid）実装
•レスポンシブ対応
•画像軽量化（WEBP化）
•SEOを意識したHTML構造
Web Design, logo, code
本ポートフォリオは、
デザイン制作・UI/UX設計・コーディング・WordPress構築・ブランド制作 を一貫して行った自主制作実績をまとめたものです。
Webデザインに必要な「考え方」「再現性」「情報整理力」「世界観づくり」を総合的に証明できる構成になっています。
Web Design, logo, code
自身の制作物を掲載するためのポートフォリオをHTMLおよびCSSの講義が終わった段階で作成することとしました。
こちらは、Figmaで制作したデザインをもとにHTML／CSS（Sass）で正確にコーディングを行った実績一覧 です。
デザインの再現性・構造の理解・レスポンシブ対応を意識し、実務に近いフローで制作しています。
Web Design, logo, code
インテリア・ライフスタイル系ブランド「Atarayo」を想定した
1カラム構成のWebページを、HTML／CSS でコーディングした実績 です。
デザインカンプをもとに、
余白・写真・文字組みを正確に再現し、
柔らかく落ち着いた世界観を損なわないよう制作しました。
code
課題素材を使ったPCデザインカンプトコーディング
Web Design, code