FEATURE

テレ東BIZ 2周年感謝祭

作業内容

テレビ東京の感謝祭イベントLPのコーディングを行いました。

担当

コーディング（レスポンシブ）と画像調整

チーム構成

ディレクター2名、デザイナー1名、コーダー1名

使用言語・ツール

Photoshop,HTML5,CSS3,jQuery

サイト

WORKS

これまでの制作実績です

  • サイト制作

    建デポタスク管理サイト

    制作期間

    10日間

    作業内容

    デザイン制作、モック制作(レスポンシブ全10画面)
    ホームセンター従業員のタスクを管理するためのサイトです。

    担当

    デザイン、コーディング

    チーム構成

    デザイナー1名

    使用言語・ツール

    HTML5,CSS3,javascript,VSCode,

    サイト

    エディオン 印刷用帳票コーディング全9画面

    制作期間

    2日間

    作業内容

    モック制作
    社員間で使用する管理サイト内の印刷用帳票をコーディングしました。 印刷プレビューで見た際に、A4で綺麗に出力されるように制作（複数ページの場合改ページを入れる）

    担当

    コーディング(tailwindを使用)

    チーム構成

    デザイナー1名

    使用言語・ツール

    HTML5,CSS3,VSCode,tailwind

    サイト

    エディオン マスタ管理画面

    制作期間

    4時間

    作業内容

    モック制作
    社員間で使用する管理サイトです。 (全200画面あるうちの1部(20画面程)をコーディングしました。 ほぼ同じ作りの画面のため、一部掲載してあります。)

    担当

    コーディング(tailwindを使用)

    チーム構成

    デザイナー1名

    使用言語・ツール

    HTML5,CSS3,VSCode,tailwind,XD

    サイト

    SKIPSトップ画面リニューアル

    制作期間

    4日(制作時間のみで打ち合わせ等含まず)

    作業内容

    リニューアルに伴うデザイン、モック制作
    ★不動産を管理しているオーナーが使用する不動産管理サイトです

    担当

    デザイン / コーディング(レスポンシブ)

    チーム構成

    デザイナー1名 PHPエンジニア1名

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop,XD,SourceTree,VSCode

    サイト

    SKIPSBB物件一覧画面

    制作期間

    4日(制作時間のみで打ち合わせ等含まず)

    作業内容

    デザイン、モック制作
    ★不動産を管理しているオーナーが使用する不動産管理サイトです

    担当

    デザイン / コーディング(レスポンシブ)

    チーム構成

    デザイナー1名 PHPエンジニア10名

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop,XD,SourceTree,VSCode

    サイト

    SKIPSBBトップ画面

    制作期間

    4日(制作時間のみで打ち合わせ等含まず)

    作業内容

    デザイン、モック、ロゴ制作
    ★不動産を管理しているオーナーが使用する不動産管理サイトです

    担当

    デザイン / コーディング(レスポンシブ)

    チーム構成

    デザイナー1名 PHPエンジニア10名

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop,Illustrator,XD,SourceTree,VSCode

    サイト

    SKIPSエラー画面

    制作期間

    4時間

    作業内容

    デザイン、モック制作

    担当

    デザイン / コーディング(レスポンシブ)

    チーム構成

    デザイナー1名

    使用言語・ツール

    HTML5,CSS3,Photoshop,XD,SourceTree,VSCode

    サイト

    SKIPSエラー画面

    制作期間

    4時間

    作業内容

    デザイン、モック制作

    担当

    デザイン / コーディング(レスポンシブ)

    チーム構成

    デザイナー1名

    使用言語・ツール

    HTML5,CSS3,Photoshop,XD,SourceTree,VSCode

    サイト

    オーナーポータル

    制作期間

    1ヶ月(制作時間のみで打ち合わせ等含まず)

    作業内容

    リニューアルに伴うデザインとモック制作全26ページ
    ★不動産を管理しているオーナーが使用する不動産管理サイトです

    担当

    デザイン / コーディング(レスポンシブ)

    チーム構成

    デザイナー1名 javaエンジニア3名

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop,XD,SVN,VSCode

    サイト

    保証会社TOP画面

    制作期間

    2日

    作業内容

    リニューアルに伴うデザインとモック制作

    担当

    デザイン / コーディング(レスポンシブ)

    チーム構成

    デザイナー1名 PHPエンジニア1名

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop,XD,SVN,VSCode

    AI marketing

    制作期間

    2週間

    作業内容

    リニューアル

    担当

    デザイン / コーディング(Scss・レスポンシブ)

    チーム構成

    ディレクター1名・デザイナー1名・エンジニア1名

    使用言語・ツール

    HTML5,CSS3,Photoshop,Dreamweaver,Bulma

    サイト

    Eparkスイーツガイドのクリスマスケーキ

    制作期間

    1週間

    作業内容

    特集LPコーディング

    担当

    コーディング(レスポンシブ)

    チーム構成

    ディレクター1名・デザイナー1名・コーダー1名

    使用言語・ツール

    HTML5,CSS3,Photoshop,Dreamweaver

    サイト

    一流ホテルのクリスマスケーキ

    制作期間

    1週間

    作業内容

    特集LPコーディング

    担当

    コーディング(レスポンシブ)

    チーム構成

    ディレクター1名・デザイナー1名・コーダー1名

    使用言語・ツール

    HTML5,CSS3,Photoshop,Dreamweaver

    サイト

    メディアプロデュース要員の募集について

    制作期間

    2日

    作業内容

    recruitページ追加

    担当

    コーディング(レスポンシブ)・バナー制作

    チーム構成

    ディレクター1名・デザイナー1名

    使用言語・ツール

    HTML5,CSS3,Photoshop,Atom,FileZilla

    サイト

    トリミングサロン アラモード

    制作期間

    2週間

    作業内容

    リニューアルに伴うデザイン、コーディング（vue.js学習のための練習制作）

    担当

    デザイン/フリー素材を使用してのロゴ作成/コーディング

    チーム構成

    デザイナー1名

    使用言語・ツール

    Photoshop,Illustrator,xd,HTML5,CSS3,vue.js,jQuery,javascript

    サイト

    大森ベルポート

    制作期間

    2週間

    作業内容

    リニューアル

    担当

    デザイン / コーディング(レスポンシブ)

    チーム構成

    デザイナー1名

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop,XD

    サイト

    森内茶農園

    制作期間

    2週間

    作業内容

    リニューアルに伴いデザイン担当
    ★3名でチームを組み担当を決め練習で制作したサイトです

    担当

    デザインのみ

    チーム構成

    ディレクター1名・デザイナー1名・コーダー1名

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop,XD

    サイト

    bifirigo10000

    制作期間

    2週間

    作業内容

    LPリニューアル

    担当

    デザイン / コーディング(レスポンシブ)

    チーム構成

    デザイナー1名

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop,XD

    サイト

    福丸カフェ

    制作期間

    2週間

    作業内容

    リニューアル

    担当

    デザイン / コーディング(Sass・レスポンシブ)

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop

    サイト

    ヘアーサロンaooi

    制作期間

    2週間

    作業内容

    リニューアル

    担当

    デザイン / コーディング(レスポンシブ)

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop,Wordpress

    サイト

    シーサイド高浜

    制作期間

    2週間

    作業内容

    リニューアル

    担当

    デザイン / コーディング(レスポンシブ)

    使用言語・ツール

    HTML5,CSS3,jQuery,Photoshop

    サイト

    ペットシッターいいじま

    制作期間

    2週間

    作業内容

    リニューアル

    担当

    デザイン / コーディング(レスポンシブ)

    使用言語・ツール

    HTML5,CSS3,Photoshop

    サイト

    ラクジェルネイルキット

    制作期間

    2週間

    作業内容

    リニューアル

    担当

    デザイン / コーディング(レスポンシブ)

    使用言語・ツール

    HTML5,CSS3,Photoshop

    サイト

    Beauty Store

    制作期間

    2週間

    作業内容

    サイト制作

    担当

    デザイン / コーディング

    使用言語・ツール

    HTML5,CSS3,Photoshop

  • バナー制作

  • チラシ制作

  • ロゴ制作

  • その他制作

    • XDにて制作

    • Illustratorにて制作（フリー素材使用）

    • Figmaにて制作

    • 新規創業となる企業のHPトップ画面デザインをFigmaにて制作

      【以下要望をもとに制作】

      • ・作成目的は求人。訪問看護事業は集客をHPで行わないため、InstagramやTiktok等SNS運用にて求職者への雰囲気や業務の見える化を行いたい。
      • ・SNSとホームページを同じサイトに組み込み、SEO対策を行いたい
      • ・LINEでの求職の質問やエントリーをできるようにしたい

    • 新規創業となる企業のHPトップ画面デザイン、スマホ画面をFigmaにて制作

  • JavaScript制作

    javascript練習問題

    作業内容

    javascript練習問題を解き、ページ内の機能を追加しました。

    担当

    コーディング

    使用ツール・言語

    HTML5,CSS3,javascript

    サイト

    リノベーション

    作業内容

    javascriptを使用し、以下の機能を追加する。
    scssを使用しコーディングする。

    作業内容詳細

    ・メイン写真切り替え機能の作成

    ・タブ切り替え機能の作成

    ・アコーディオン機能の作成

    担当

    コーディング

    使用ツール・言語

    HTML5,CSS3,SCSS,javascript

    サイト

    ログイン画面作成

    作業内容

    javascriptを使用し、以下の機能を追加する。

    作業内容詳細

    ・画面表示時はログインID入力欄を選択している状態にする。

    ・開閉ボタンを押すと下のエリアが開閉する。

    ・追加ボタンを押すと、ユーザー一覧最下部に新たなユーザーが1行追加される。

    ・ユーザーID、ユーザー名をダブルクリックされた行に背景色が付与され、 ダブルクリックされたユーザー情報が、ログインIDとパスワード入力欄に自動入力される。

    ・ログインID、パスワードが入力されている時のみログインボタンを活性化。

    ・新規登録ボタン押下で、新規登録用モーダルウインドウを表示する。

    ・新規登録ボタン押下時に、バリデーションチェックを行う

    担当

    コーディング

    使用ツール・言語

    HTML5,CSS3,javascript

    サイト

    ログイン画面作成

    作業内容

    jqueryを使用し、以下の機能を追加する。

    作業内容詳細

    ・画面表示時はログインID入力欄を選択している状態にする。

    ・開閉ボタンを押すと下のエリアが開閉する。

    ・追加ボタンを押すと、ユーザー一覧最下部に新たなユーザーが1行追加される。

    ・ユーザーID、ユーザー名をダブルクリックされた行に背景色が付与され、 ダブルクリックされたユーザー情報が、ログインIDとパスワード入力欄に自動入力される。

    ・ログインID、パスワードが入力されている時のみログインボタンを活性化。

    ・新規登録ボタン押下で、新規登録用モーダルウインドウを表示する。

    ・新規登録ボタン押下時に、バリデーションチェックを行う

    担当

    コーディング

    使用ツール・言語

    HTML5,CSS3,jquery

    サイト

    ポケモン検索ツール

    作業内容

    APIを使用し、データ内のポケモンが全てリスト表示出力されるようにindex.htmlを作成する。

    ・ポケモンは全てで「151」番まで表示

    ・全ての取得処理は非同期で実行

    ・データ取得中は、Loading表示をする

    ・画像がnullの場合、「No Image」と表示

    ・図鑑番号で検索ができるようにする

    担当

    コーディング

    使用ツール・言語

    HTML5,CSS3,javascript

    サイト

    トリミングサロン アラモード

    作業内容

    リニューアルに伴うデザイン、コーディング（vue.js学習のための練習制作）

    担当

    デザイン / コーディング

    使用ツール・言語

    Photoshop,Illustrator,xd,HTML5,CSS3,vue.js,jQuery,javascript

    サイト

    JavaScript練習のためのLP制作

    制作期間

    1日半

    作業内容

    JavaScriptを使用し、以下機能を作成。

    • ・背景色を変更できる機能
    • ・商品の様々な写真を切り替えて大きく見る機能
    • ・タイムセール終了までの時間を表示する機能
    • ・商品を選択し数量を選択→買い物かごへ入れると合計金額が変わる機能
    • ・アコーディオンメニューを作成
    • ・アコーディオン内のお勧め商品を、for in文を使用して並べて表示する
    • ・アコーディオンメニューバーにあるハンドル「＋」「ー」の切替え

    使用言語・ツール

    HTML5,CSS3,scss,JavaScript

    サイト

    JavaScriptの基礎を学ぶ

    制作期間

    3日間

    作業内容

    参考書JavaScriptワークブックを使用し、JavaScriptの基本を勉強しました。 こちらは、勉強した内容をわかりやすくまとめたサイトです。

    使用言語・ツール

    HTML5,CSS3,jQuery,JavaScript

    サイト

    ドッグウエア通販サイトpetty口コミ投稿機能

    制作期間

    5日間

    作業内容

    JavaScriptを使用し、ECサイトの口コミ投稿機能を制作。 投稿された内容は、GoogleFormsに保存されるようにしました。

    使用言語・ツール

    HTML5,CSS3,jQuery,JavaScript,Photoshop,XD,GoogleForms

    サイト

    ドッグウエア通販サイトpetty

    制作期間

    2週間

    作業内容

    練習でJavaScriptを組み込んだサイトを制作

    担当

    デザイン / コーディング(レスポンシブ)

    チーム構成

    デザイナー1名

    使用言語・ツール

    HTML5,CSS3,jQuery,JavaScript,Photoshop,XD

    サイト

2019

現在勤務している会社へ就職

現在はSESとして様々なプロジェクトに携わっております。
どちらかというとデザインよりもコーディングの方を得意としています。

2018

WEBデザイナーを目指すために民間の学校で勉強

学んだ内容

  • ・Photoshop
  • ・Illustrator
  • ・HTML、CSS、JavaScript

2016

派遣社員として大手ECサイト企業に勤務

ディレクターアシスタントを担当しました。
月に3つの特集LPを制作するという事をメインに、コスメページの運用とメンテナンスを担当しました。
メーカーから入稿されてきた内容を取り纏め、特集ページを制作する際の素材作成をデザイナーへ依頼し、 完成した素材をCMSにはめ込んでいきLPを制作するという流れで行いました。
働くうちに、デザイナーに依頼している素材を自分で制作したいと思うようになり、ＷＥＢデザイナーを目指すようになりました。

  • 業務内容詳細

2015

職業訓練校でHTML,CSSを学ぶ

オフィスツール(Excelやaccess)をメインで学ぶ講座の一部に、HTML,CSSを学ぶ授業が組み込まれていました。
これをきっかけに、WEB業界へと転職しました。

2007

一般事務、営業事務職に携わる

通信会社で一般事務、営業事務として、7年ほど勤務しました。

  • ・保守部門アシスタント

    経費清算、出張手配、各種資料作成

  • ・建設部門アシスタント

    出張手配、部材発注（無線機）、発送、納期管理（調整）、鍵借用処理、作業申請処理

  • ・営業アシスタント

    社内システムへの登録、検収処理、サービスの受注登録、解約処理、代替機貸出処理、会議室予約、提供可否調査依頼

SKILL

HTML5/CSS3/SCSS

レスポンシブを含め、基本的なコーディングは問題ありません。

JavaScript

DOM操作であれば実装可能です。

Photoshop

画像加工や、基本的な操作は問題なくできます。

Illustrator

基本的な操作は問題なくできます。

XD

基本的な操作は問題なくでき、実務でも頻度高く使用しています。

Figma

基本的な操作は問題なくできます。

WordPress

制作したサイトをWordPress化させ、プラグインを組み込んだ経験はあります。

Excel

簡単な関数を組み込んだり、グラフの作成など、基本的な操作は問題なくできます。

Word

基本的な操作は問題なくできます。

PowerPoint

基本的な操作は問題なくでき、実務では提案資料の作成など行った経験もあります。

ページトップへ