PORTFOLIO

Web Site (original)

池袋にある女性が好むテイクアウト専門店のWebサイト作成（架空）

Persona

  • 28歳女性、フリーランスのデザイナー。
    お洒落で洗練されたビジュアル、フォトジェニックなグルメ情報に敏感。
    作業前後のテイクアウト利用や、散歩・公園タイム中のちょっとしたリフレッシュにも喜ぶユーザーを想定。

theme

  • 「素材の魅力 × フォトジェニックなテイクアウトショップ」をテーマに設定。
    近年のレトロ感あるブランディングや、余暇時間の過ごし方の変化に合わせ、天然酵母パン・揚げたてドーナツ・フレッシュサラダといった、素材の良さが際立つ商品を中心にした世界観を軸にしました。

Issue

  • “店内で過ごす時間” がないため、体験の価値を伝える情報設計が必要。

Information

  • 大きなビジュアルスライダーで、パン・ドーナツ・サラダをフォトジェニックに表現。
    bxSlider を活用して、複数商品の魅力をダイナミックに訴求。
    見るだけで「買ってみたい」と思わせる世界観を演出しています。

Process

  • ・bxSlider によるメインビジュアルスライダーで商品の魅力を視覚的に展開
    ・lightbox で商品画像を拡大表示し、詳細をしっかり伝えられる体験
    ・AOS（Animate On Scroll） でスクロール時に自然な演出を付与
    ・ハンバーガーメニューを JS で実装し、 スマートフォンでも使いやすくシンプルなナビゲーション設計にしました。

favicon

  • 水色で清潔感と親しみやすさを表現し、 店名の頭文字を白で配置することで視認性を確保。
    小さなアイコンでもブランドを即認識でき、 ユーザーの記憶に残りやすいUIを意識しました。

touch-icon

  • 背景色をfavionと同じ水色で統一し爽やかさと軽やかさを、 茶色でドーナツの温かみと素材感を表現。
    商品であるドーナツのイラストを組み合わせ、 ホーム画面上でも店舗の世界観が伝わるUXを設計しました。

Production time

  • 企画 1日
    デザイン 8日

Tools used

  • Illustrator、Photoshop、生成AI（imageFX）、HTML / CSS、JavaScript、jQuery（bxSlider / lightbox）、AOS（Animate On Scroll）

Web

  • Coffee Festival

    • SCSS使用
    • 弁当（Bento）ボタンを実装
    • 多言語化対応（Google翻訳連携）とカレント表示
    • CSSのみで実装した「インタラクティブ・フォトギャラリー」
    • 背景演出と動的コンテンツの制御（Particles.js & Ticker）
    • CSSのみでスワイプ可能なカルーセル実装

  • 結婚式場

    • bxSliderによるヒーローヘッダーの実装
    • CSS擬似要素による「全画面背景固定（パララックス風）」
    • アコーディオンパネル
    • レスポンシブ・ドロワーメニューの構築
    • JavaScriptによる「自動更新型コピーライト」の実装

  • 縦書きレイアウト

    • 縦書きレイアウト実装
    • 和風配色デザイン
    • 擬似要素（::before）を活用したアイコン実装
    • CSS変数（:root）による効率的なカラーマネジメント
    • 要素の配置順序が交互になるようCSSでコントロール

  • パン教室

    • セマンティックなHTML
    • 擬似要素での装飾
    • ハンバーガーメニュー（ドロワー）
    • Google Mapsのカスタマイズ
    • オリジナルのロゴマークをAIを使用しillustratorで作成

  • 会計事務所

    • 背景画像の最適化（CSS Background Properties）
    • コーポレートカラー（青）に基づいた一貫性のあるUI
    • 余白（マージン）の設計による「情報のグルーピング」

  • Landing Page

    • AOSによるスクロール演出
    • CSS変数による「テーマ切り替え」の実装
    • 相対パスと絶対パスを意識したディレクトリ設計
    • navは構造的なボーダーデザイン

JavaScript

About

長澤　佳代

はじめまして！長澤佳代です。
「起業する友人たちのホームページを作りたい！」と思ったことがきっかけで、職業訓練校（フェリカテクニカルアカデミー）でWeb制作を学び始めました。

20年以上の事務・経理経験で培った「正確さ」と、相手のニーズを汲み取る「サポート力」が私の強みです。
使う人が笑顔になれるような、温かみのあるサイト作りを目指しています。どうぞよろしくお願いします！

  • Design: Illustrator, Photoshop
  • Coding: HTML5, CSS3(Sass), JavaScript, jQuery
  • Office: Excel ,Word, PowerPoint, Google Spreadsheet
  • Communication: Slack, Teams, Zoom
  • Skill: 簿記3級, 漢字検定準1級
  • Hobby: 食べること / 家族旅行