ポートフォリオ

Scroll
Top

WORKS作品紹介

LP

BLOSSOMシャンプーの初回購入キャンペーン(架空サイト)

Webサイトへ
  • ターゲット

    30代-60代 男女

  • 目標

    シャンプー初回限定サンプル5,000個を完売する

  • コンセプト

    高品質・若返りを目指す自然由来のシャンプー。 男女問わず爽やかでクオリティーが高いことを実感いただけるよう、緑と黒で統一しました。

  • 工夫したこと

    ブランド名をインプットしていただけるよう、サイト全体のイメージとブランド名が一致するようにしました。

  • 苦労したこと

    伝えたい情報を分かりやすく伝えるための見た目のデザインや効果的な動きをつけるのに苦労しました。 好印象で内容が伝わってきやすいと感じたサイトをいくつも見て分析、取り入れました。

  • 制作期間

    企画・デザイン: 1週間 / コーディング: 2週間 / 修正: 3週間

  • 使用ツール

    PhotoShop / Visual Studio Code / HTML / CSS / JavaScript

Website

サト皮膚科クリニック皮膚科専門医のクリニック (架空サイト)

Webサイトへ
  • ターゲット

    10代~60代 男女

  • 目標

    予約率の2割増を実現する

  • コンセプト

    クリニックへの信頼がおけるような、シンプルなデザインのサイト。 診察時間やお知らせ等の知りたい情報まで、なるべく最短で到達できるようにしました。

  • 工夫したこと

    予約サイトへすぐにアクセスできるよう、予約ボタンの位置や色をベースにサイトを構成しました。 どのような診療をしているのか、様々な皮膚疾患や治療方法が目に付くようにしました。

  • 苦労したこと

    技術が高い皮膚科を表現するためのホバーアクション等のアニメーションを洗練されて見えるようにするのが大変でした。 様々なサイトからイメージ通りのものを見つけて実装しました。

  • 制作期間

    企画・デザイン: 1週間 / コーデ ィング: 2週間 / 修正: 2週間

  • 使用ツール

    AdobeXD / Visual Studio Code / HTML / CSS / JavaScript

Kitchen Kimuraハンバーグが美味しい洋食屋 (架空サイト)

Webサイトへ
  • ターゲット

    20代-50代 男女

  • 目標

    大人数での会食利用を1割増やす

  • コンセプト

    お手頃価格で美味しいお肉を楽しく食べれる洋食屋。 黒・赤・茶色でなるべくシックにすることで、B級グルメなのに高品質な印象をもっていただけるようにしました。

  • 工夫したこと

    予約フォームを、大人数での会食を気軽に相談できる様式にしました。

  • 苦労したこと

    勉強の都合上デザインカンプなしでのスタートだったので、コーディングしながらデザインを何度も変更してサイトを作っていくことが大変でした。 この洋食店の目玉のハンバーグや、目標を達成するための予約フォームを強調するために、どうすれば効果的に見せられるか、自分で考えたり参考サイトを研究したりしました。

  • 制作期間

    企画: 3日 / デザイン・コーディング: 6週間 / 修正: 1週間

  • 使用ツール

    Visual Studio Code / HTML / CSS / JavaScript

PLOFILE 自己紹介

About me

  • 幼い頃から書道を習っており、高校3年の頃に八段に到達。
    文字を読みやすく表記したり、イメージに合わせてフォントで表現したりすることが得意です。
    Web制作では、ユーザーに情報が伝わりやすいバランス・余白をとることを心がけています。
    * 大学では言語文化学科で学び、卒業後は米国でのインターンシップを含む短期留学を経て コストコホールセールジャパン商品購買部に就職。
    在庫管理により売上を積み上げていく仕事を、産休育休を挟んで実質10年程続けました。
    * 会社の木更津移転に伴い退職し、Webの勉強を開始。 デザイン・プログラミング・マーケティングについて勉強しました。
    今後も新しい知識や変化にも対応しながら勉強を続けていきたいと思います。
  • 趣味

    BeLifeヨガ・ストレッチ / 料理 / Mr.children音楽鑑賞

SKills

  • HTML5html5
    マークアップ・読解が問題なくできます。 誰が見ても分かりやすいセマンティックコーディングを心がけています。
    CSS3
    疑似要素による装飾や、CSSのみでのアニメーションの実装が可能です。レスポンシブ対応ができます。
    JavaScript
    ソースコードを読解してから実装することができます。jQueryやGitHubを利用した動作設定が可能です。
  • PhotoShop
    レイヤー構造について理解しており、マスク処理・画像の修正・デザインカンプの作成ができます。
    AdobeXD
    基本的な操作が可能です。ワイヤーフレーム/ デザインカンプの作成が可能です。
    Google
    Analytics
    GA4でトラッキングコード貼り付け・分析を学習しました。目標達成の為に問題点を改善できる分析を目指します。

Contact お問い合わせ

ご質問・ご相談など、お気軽にご連絡ください。Please feel free to contact me.

Contact Form