Me

Me
  • M.M.
  • 女性
  • 30代

閲覧ありがとうございます。

本業でコーダーをしています。
デザインをもらってコーディングを行う部署で働いておりコーディングでの実務経験は3年です。
個人でデザインも勉強しています。

html/css,jsを使ったコーディングや
svg等を使ってサイト内にアニメーションを組み込むのが得意です。
jsを書くのも好きです。

パフォーマンス対策やSEO対策もできます。
コンプライアンスや著作権についても勉強済みです。
以前、テスターをやっていたのでテスターの心得もあります。

以下に詳しい経歴などをまとめています。
ご確認いただけると幸いです。

最終更新：2025年3月　随時更新中！

経験したこと

  • LPコーディングを10～15個ほど
  • 複数ページにわたる規模の大きいWebサイトをいくつか
  • 元あるページの改修など

会社では上記の実績があります。
分業制のため、会社ではデザインをやらずコーディングのみ行っております。
実務では3年、独学では1年ほど、Web制作やプログラミングをしています。
作業は早い方だと思います。
社内での評価にはなりますが、デザイン通りのコーディング精度も高いそうです

可能なこと

レスポンシブ対応
デザインそのままで縮小するパターンと、
文字の視認性確保のため、文字サイズはそのままに表示崩れなく自然に幅を狭められるようにアレンジするパターンができます。
スライダーやモーダル等、jsを使用したパーツの実装
わりとjsを書いています。
ちょっと捻ったような動きも実装できることがあるのでご相談ください。
SEO対応
タグの意味を理解し使い分けることができます。
納品前に記述チェックを行いエラーが出ないようにしています。
パフォーマンス対策
読み込み順を考え効率よく表示できるようにしています。
基本的にFVを優先して表示できるようにコーディングします。
無駄なcssを減らしたり画像の圧縮を行うことでファイルサイズを小さくしています。
cssで表現できそうなものはcssで表現し、画像ファイルを減らしています。
その際、なるべく空のタグは使わないようにしています。
Lighthouseでの確認を行い、高スコアを目指します。
アニメーションの付与
svg、css、jsを使ってアニメーションを作ることができます。
このポートフォリオ内のアニメーションもすべて自分で作成しました。
なんでもとは言えませんが、実装できるアニメーションも多々あるかと思いますのでご相談ください。
端末ごとの仕様の違いの把握
GC,FF,edge,Safari,Android,iPhoneで仕様が異なる部分があり、特有の表示崩れが発生することがあります。
100%取り除くことは難しいですが、ある程度は意識してコーディングできます。
特にSafari系統（Mac,iPhone）は同じcssでも表示が違うことが多々あります。
発見した際はSafariでも近しい表示にできるよう対応できます。
印刷対応
需要があれば印刷時に発生する表示崩れがなるべく少なくなるように対応できます。
※ブラウザごとに印刷の仕様が変わる為、すべての対応はしきれない可能性があります。とくにFF…。
画面上でのやりとり
本業が完全在宅のため、画面のみのやりとりに慣れています。
同チームだけでなく他部署や先方ともやりとりをしているため、知らない人とやりとりすることに抵抗はないです。
「大丈夫」や「いいです」等、どっちともとれるような言葉は使わないようにしています。
なるべく短く簡潔に伝えたいことを伝えられるように意識しています。
ポリシー
どの環境でも閲覧でき、読み込みにストレスが無いことを目標にしています。
画像はなるべく使わず、cssで表現できる箇所はcssで、文字の部分はなるべく文字で表現しています。
快適に表示できるように作っていきたいです。

扱える言語等

  • html/css
  • JavaScript
  • jquery
  • scss

php,javaも少し知っています。
必要になればその都度調べています。

扱えるツール

  • Photoshop
  • illustrator
  • XD
  • Excel
  • Word
  • PowerPoint

Photoshop,illustrator,XDに関しては軽く触れて少し編集ができる程度です。
いただいたデザインを確認する程度は問題なく行えます。
Photoshopから素材を切り出すこともできます。

作業環境

  • PC（Windows）
  • Android
  • iPhone
  • iPad

Macがないため、Macでの表示確認はできません。
ただし、Macで発生する不具合はiPadやiPhoneでも発生する傾向があるため、疑似的に確認は行えます。

資格

MOS Excel 365&2019
2021年6月
MOS Excel 365&2019 Expert
2021年6月
MOS Word 365&2019
2021年6月
MOS PowerPoint 365&2019
2021年6月
基本情報技術者試験
2021年6月

経歴

2020年7月
プログラミング学習開始。
友人に進められて「C」を少し勉強した後、「java」の勉強を始める。
後々、Webサイト作りにハマる。
2021年6月
IT系の資格を複数取得（詳細は「資格」にて）
2021年7月
転職活動の為のポートフォリオとして当サイトを作成する。
デザイン、アニメーション、画像はすべて自作。
アニメーションさせたくてMVに力を入れる。
2021年12月
Web系の部署にコーダーとして就職。
SEO対策やパフォーマンス対策等、現場で多くの技術を学ぶ。
2025年3月
当サイトの内部を作り直す。
元のデザインを残しつつ、見た目と情報を充実させる。
2025年現在
会社でコーディングスキルを磨きながら、GCの拡張機能等、コーディングに便利な機能を随時作成中。
日々、スキルを磨いています。

Work

Gallery

趣味で作ったものの紹介。随時更新していきます。

拡張機能

  • 小物類
    痒いところに手が届くようなこまごました機能を作って集めた。ブラウザからすぐアクセスできて便利。どの機能もわりと使う。
  • 画像を重ねる
    ブラウザに画像を重ねるやつ。
    ピクセルパーフェクトにこだわっていた時に作った。ドラッグアンドドロップや値の受け渡しで苦労した。
  • メモ
    ブラウザですぐ使えるメモが欲しかった。
    メモの数は増減できる。値の保存でものすごく悩んだ。会社特有の項目もつけた。

ブラウザで動く
ちょっとしたツール

  • ブラウザで画像を表示させるやつ
    デザイン画像をブラウザで確認する時に使う。
    入社してすぐくらいの時に使った。
    操作パネルで画像サイズや位置を変えられるのでなにげに便利。
  • 含まれてるかな
    リストにある単語がhtmlやcssに含まれてるかを探すツール。
    使われていない画像やcssを洗いだせる。
    たぶん探せば似たようなツールはすでに作られている。

その他、業務の効率が上がるようなツールをブラウザやExcelで作ってる。
キリがないのでコーディングでよく使うものだけ紹介しました。