ポートフォリオ

職務経歴と作品、このサイトの作成手順を紹介します。

デザイン コーディング 開発

職務経歴

大学卒業後、IT技術者として2社に従事しプログラミングのスキルをつけました。 その後WEB制作業務に従事し、ECサイトのLPやバナーの作成、 インハウスでのサイト運用やメルマガ作成、ページデザイン、コーディングなどを経験しました。

Header Image
キャリア1

コーチング会社での自社Webサイトの更新、作成

  • 記事サイトの作成、更新
  • メルマガのHTML作成、バナー作成
  • リニューアル対応
  • Movable Typeの改修

使用ツール:Photoshop CC, Illustrator CC, Adobe XD, HTML, CSS, javascript, Movable Type, Slack, zoom, googlemeet

期間:2020/8~2024/10

キャリア2

ショッピングECサイトのバナー、LP作成

  • バナー作成(素材を使用しサイズ展開)
  • LP作成(既存のページから作成)

使用ツール:Photoshop CC, Illustrator CC, HTML, CSS, Movable Type, 自社チャットツール, Jira

期間:2018/7~2019/9

キャリア3

印刷会社ECサイトの運用

  • 案件資料の作成、Webサイトの素材作成、HTML実装、システムテスト
  • 保守運用(商品登録・修正作業、ツールの作成、PostgreSQL、マニュアルの作成、エラー監視)

使用ツール:VBA, HTML, CSS, JavaScript, JQuery, Photoshop, PostgreSQL

期間:2010/10~2014/7

キャリア4

保険会社のシステム開発

  • 詳細設計~結合テスト、現行システムのリニューアル対応、新システムの開発

使用ツール:Java, PL/SQL, HTML, JavaScript, Illustrator

期間:2006/4~2010/3

作品紹介

仕事で作成した成果物

作品1

写真加工、画像の文字入れ

記事サイトで使用するメイン画像の選出、
文字入れ、写真加工などを行いました。

加工 デザイン
> View project
作品2

ウェブサイトデザイン

ロゴに合わせ、サイトのリニューアルを行いました。

デザイン コーディング
> View project
作品3

メルマガデザインのリニューアル

         

メルマガのHTML作成、デザインのリニューアルなどを行いました。

デザイン コーディング
> View project
作品4

ウェブサイトデザイン

既存ページからリニューアルの構成提案、
デザイン、コーディング、
Movable Typeへの組み込みまで行いました。

デザイン コーディング
> View project
作品5

バナー作成

サイトバナーやメルマガ用バナーなどを作成しました。

デザイン
> View project

作成手順と使用ツール

  1. Relume
    ステップ 1
    Relumuで構成案作成
  2. Relume
    ステップ 2
    Figmaでワイヤーフレームを作成
  3. Relume
    ステップ 3
    Photoshop、Affinity Designer2でイメージ作成
  4. Relume
    ステップ 4
    Cursor、VS Codeでコーディング
  5. Relume
    ステップ 5
    WordPressに組み込みアップロード