TAKEMURA CHIHIRO PORTFOLIO

TAKEMURA
CHIHIRO
PORTFOLIO

Frontend engineer / Coder

WORKS

#Client Work -卒業制作-

株式会社さんだい名刺サービス LP

企画 / デザイン / コーディング / サーバー設定（さくらレンタルサーバー）・ドメイン取得・SSL設定

概要

地域密着型の印刷会社LPを制作。現場の業務理解を活かし、対面対応の信頼感を伝えるデザインを目指しました。

ターゲット

近隣在住、または起業した人。昔からの取引先ではなく新規顧客。

制作期間

WF: 2週間
デザイン: 2週間
コーディング: 4週間

使用ツール

Figma / HTML / CSS(BEM) / Java Script / GitHub

工夫した点

セマンティックHTMLとBEM命名で構造を整理しました。モバイルファーストの1ファイルレスポンシブ設計です。
モバイルは全画面ナビをハンバーガーメニュー開閉、PCは水平ナビに切替ています。
ヒーローはロゴ・コピー・人物をレイヤーにて分離し、背景はcoverでリフローを抑制しています。サービス／用紙紹介はカード化し、aspect-ratio＋object-fitで画像崩れを防止しています。
注文〜納期〜価格セクションは段階UIで理解負荷を軽減させ、CTAボタンはmailtoと外部サイトボタンで遷移を最短化しました。最小限のJava Scriptで動線を担保し、alt等の基礎アクセシビリティも整えています。

サイトを見る

#Portfolio

ポートフォリオ

企画 / デザイン / コーディング / サーバー設定（さくらレンタルサーバー）・ドメイン取得・SSL設定

概要

転職活動のために制作しました。

ターゲット

採用担当者の方々。

制作期間

WF: 2日間
デザイン: 3日間
コーディング: 2週間

使用ツール

Figma / HTML / CSS(BEM) / Java Script / GitHub

工夫した点

「保守性と再現性」を追求した実装を行いました。デザインの意図を正確に形にするため、CSS設計にはBEMを採用し、コンポーネント化を意識した管理しやすいコードを構築しています。特にレスポンシブ対応では、単に要素を並べるだけでなく、FlexboxやGridを使い分け、中身のコンテンツ量に左右されない柔軟なレイアウトを実現しました。
また、実務での運用を想定し、後からの修正や機能追加が容易な「メンテナンス性の高い構造」を意識しています。
細かな余白やタイポグラフィの再現といったデザインへのこだわりを、論理的なコードによって支える実装を心がけました。

GitHub

#Concept Work

化粧品ブランドサイト（架空）

デザイン / コーディング

概要

架空の化粧品ブランドサイトとして、「癒しと美しさ」を表現。視覚・導線設計を通じて共感と購買意欲を高めるサイトを目指しました。

ターゲット

30代前半の女性会社員。自然由来の香りやスキンケアが癒し。

制作期間

WF: 2週間
デザイン: 2週間
コーディング: 4週間

使用ツール

Figma / HTML / CSS(BEM) / Java Script / GitHub

工夫した点

セマンティックHTMLとBEM設計で保守性を意識し、構造を整理しています。
モバイルはハンバーガーメニュー開閉、PCではフル表示に切り替え、1ファイルでレスポンシブに対応しています。
トップはslickで自動スライダーを実装し、スクロール時のフェードインで動きを付与しました。商品詳細はモーダルで開閉を制御し、×や外側クリックにも対応しています。
レビューセクションでは自作スライダー＋ドットインジケータ連動で軽量化を図っています。
ページトップボタンはスムーススクロールでUXを高め、全体として視覚的演出と操作感の両立を意識しています。

GitHub Demo

#Concept Work

食器ブランドサイト（架空）

デザイン / コーディング

概要

色彩豊かな食器を展開する架空のブランドサイト。ブランドの魅力を視覚的・感覚的に伝えるデザインにしました。EC機能を実装予定のため、学習中です。

制作期間

WF: 1週間
デザイン: 1週間
コーディング: 3週間

使用ツール

Figma / HTML / CSS(BEM) / Java Script / GitHub

GitHub Demo

#Middle Assignment（中間課題）

野菜宅配サービス　スグ食べ LP

デザイン / コーディング

概要

デジタルハリウッドSTUDIOの課題である架空LPです。食へのこだわりが強い層に響くような内容にし、お試し購入につなげる目的の構成です。

制作期間

WF: 2週間
デザイン: 2週間
コーディング: 4週間

使用ツール

Figma / HTML / CSS(BEM) / Java Script / GitHub

GitHub Demo

PROFILE

Takemura Chihiro

竹村　千紘

1986年生まれ。栃木県出身。女子美術大学芸術学部芸術学科卒業。
卒業後は、窓回り製品メーカーにて販促ツール制作、品質試験機関にて品質評価試験業務などを担当。
2024年8月デジタルハリウッドSTUDIO by LIGにて Webデザインコースを修了。
ルールに基づいて形を構築するWeb制作に魅力を感じ、BEM命名規則やレスポンシブ設計を用いた保守性を意識したコーディングを行っています。
これまでに培った経験も合わせてデザインの意図を理解し、正確で再現性の高い実装をできるよう、学習を続けています。

VALUESわたしの強み

意図を汲む力

依頼者やデザインの背景にある意図を正確に読み取り、目的に沿った実装を行うことを大切にしています。スキルマーケットサイトでのイラスト制作で培ったヒアリング経験を活かし、すり合わせをこまめに行うことで認識のズレを減らす工夫をしています。

丁寧さと継続力

未経験分野でもとにかく調べ、理解し、試すことを積み重ねてきました。毎朝家族が起きる前の１時間を自主学習の時間とし、限られた時間の中で効率よく丁寧に、継続して学び続けています。

チームで進める対話力

年齢や経験を重ねる中で、状況を俯瞰し冷静に対応する姿勢が身につきました。進捗共有や疑問点の解決は早めに行い、急ぎの場面でも相手の立場を踏まえて対応することで信頼関係を築きながら業務を進めることを大切にしています。

SKILLSいまできること

HTML / CSS

セマンティクスを意識したHTML設計と、BEMを用いたCSS設計を行えます。レスポンシブ対応や保守性を意識し、あとから他の人が見ても理解しやすい構造でのマークアップを心がけています。使用しているエディターはVisual Studio Codeです。

JavaScript

JavaScriptとjQueryを使用してナビゲーションの開閉、モーダル、スライダーなどのUI実装が可能です。動きだけでなく、HTML構造やアクセシビリティへの影響も考慮しながら実装しています。

Git / Git Hub

GitHubを用いたソースコード管理が可能です。変更内容ごとにコミットすることを意識し、作業履歴がわかりやすく残るよう心がけています。

Why Frontend engineer / Coderフロントエンドエンジニア/コーダーを目指す理由

学生時代にデザインを学んだ経験や、イラスト制作をきっかけにWebに興味を持ちました。そこから、明確なルールに基づいて形を作るコーディングに強い適性を感じ、フロントエンドエンジニアを志望しました。模写やアレンジ経験に加え、LP/HPの分析を行うことで設計意図を読み解き、再現する力を磨いています。今後は再現性と保守性を意識した実装で、ユーザーに届くサービス作りに貢献したいと考えています。

おわりに

これまでの学習と制作を通して

「意図を理解し、正確に再現すること」に自分の強みと興味があると実感しました。まだ経験は浅いですが、コードの読みやすさや保守性、チームで進めやすい情報整理など、地に足のついた部分から積み上げていきたいです。

丁寧な実装ができるエンジニアを目指して

今後は、再現性と保守性を両立したコーディングを軸にしながら、丁寧な実装ができるエンジニアを目指しています。

「安心して任せてもらえる関係を作る力」を今後の強みにし、デザイナーやディレクターと細かく擦り合わせをしながら、一緒に仕事をする人たちが作業しやすいよう情報を整理することで、チームで同じ方向を向きながら業務をできるような環境づくりに関わっていきたいです。

CONTACT

下記のメールアドレスにお気軽にご連絡ください。

qianhongzhucun0@gmail.com