Web Design / Portfolio 2025

Brand website

sobolon accessory website

Brand website のPCモックアップ

Project Overview

海洋マイクロプラスチックを素材にしたハンドメイドアクセサリーブランドを想定し、ブランドサイトを制作しました。

「可愛い」と「環境へのやさしさ」を両立するブランドの世界観が伝わるよう、柔らかな色使いと写真を活かした親しみやすいデザインに仕上げています。

ブランドのコンセプト、商品の特徴、商品情報、お知らせ、お問い合わせまでを1ページにまとめ、初めて訪れたユーザーにもブランドの想いや商品価値が自然に伝わる構成を意識しました。

学習課題用サイト

Technologies

  • HTML
  • CSS
  • JavaScript
Visit Website

Project Details

制作種別
ブランドサイト
想定業種
アクセサリー / ハンドメイド / 環境・サステナブル
制作期間
約2週間
ページ数
1ページ
担当範囲
コーディング / アニメーション / レスポンシブ
制作年
2026
参考価格
サイト制作 200,000円〜
コーディング 60,000円〜

POINTS

制作ポイント

  1. ブランドコンセプトが伝わるビジュアル設計

    「可愛い」と「環境へのやさしさ」というブランドの特徴が直感的に伝わるよう、柔らかな色使いと写真を活かしたデザインに仕上げました。

  2. 商品だけでなく背景の想いまで伝える構成

    アクセサリーの商品情報だけを見せるのではなく、素材やブランド誕生の背景、環境に対する考え方まで段階的に伝わるページ構成にしています。

  3. 写真を活かした商品訴求

    アクセサリーの色や質感、ハンドメイドならではの個性が伝わるよう、商品写真を大きく見せ、視覚的に興味を持ってもらえるレイアウトを意識しました。

  4. 親しみやすく分かりやすいUI

    ブランドの柔らかな雰囲気を保ちながら、各セクションの役割が分かりやすく、ユーザーが迷わず情報を閲覧できるUIにしています。

  5. 商品・ニュース・問い合わせまでの導線設計

    ブランドを知るところから商品を見る、お知らせを確認する、問い合わせを行うまでを1ページ内にまとめ、自然に行動へつながる導線を設計しました。

  6. レスポンシブと保守性を考慮した実装

    PC・タブレット・スマートフォンで快適に閲覧できるよう調整し、HTML・SCSS・JavaScriptを用いて更新や修正にも対応しやすい構成で実装しています。

SCOPE

制作範囲

デザイン

  • UIデザイン
  • レスポンシブデザイン
  • ページレイアウト設計
  • ブランドイメージに合わせた配色・装飾設計
  • 商品・コンテンツの導線設計

開発

  • HTMLコーディング
  • SCSS実装
  • JavaScript実装
  • ナビゲーション実装
  • スクロールアニメーション
  • レスポンシブ対応
  • お問い合わせフォームの画面実装

公開

  • SEO初期設定
  • 表示確認
  • 動作確認
  • 公開サポート

PRICE GUIDE

参考価格

サイト制作(デザイン込み)

200,000円〜

含まれる内容

  • ヒアリング
  • 情報設計・導線設計
  • UIデザイン
  • レスポンシブデザイン
  • HTML / SCSSコーディング
  • JavaScript実装
  • スクロールアニメーション
  • SEO初期設定
  • 表示確認・動作確認
  • 公開サポート

コーディングのみ

60,000円〜

含まれる内容

  • HTML / SCSSコーディング
  • JavaScript実装
  • スクロールアニメーション
  • レスポンシブ対応
  • 表示確認・動作確認

※サイト制作(デザイン込み)は、情報設計・デザイン制作から公開までを含む場合の参考価格です。
※コーディングのみは、Figma・Adobe XD・Photoshopなどの完成したデザインデータをご支給いただく場合の参考価格です。
※商品登録、EC機能、オンライン決済、CMS構築、フォームの送信機能は含まれていません。
※ページ数・商品数・機能・フォーム・CMS・アニメーション・原稿や写真の準備状況により料金は変動します。

創りたい未来を、 聞かせてください。

あなたのビジョンを、ともに形に。
まずは気軽なご相談から始めましょう。

お問い合わせはこちら