Tera’s portfolio

T e r a Tera’s portfolio

正確さの先に、
伝わる力を。

デザインを引き立てる
実装にこだわります。

パソコンの画面

実績紹介

信念とこだわり

  • 信頼は、誠実な積み重ねから

    どんなに良いものを作っても、やりとりに不安があれば信頼は生まれません。
    ひとつひとつのご依頼に対して、誠実に、丁寧に向き合うこと。
    それが、成果以上に大切だと考えています。

  • ニュアンスまで汲み取る実装力

    「意図通りに動かない」「思った通りの実装にならない」そんな不安を感じさせないように。
    デザインの設計意図や細かなニュアンスを丁寧に読み取り、
    再現性と安定感のあるコーディングで、“伝わる体験”をかたちにします。

  • 「安心して任せられる」対応力

    朝5時から夜9時まで、年中無休で対応。
    即レス・即対応でやり取りのストレスをなくし、
    進捗は 情報共有シート でいつでも確認可能。
    安心してお任せいただける体制を整えています。

安心して
ご依頼いただくために

お客様に心からご満足いただけるよう、細部までこだわった安心の体制を整えています。

  • 緊急対応・仕様変更への柔軟な対応

    • ご相談いただければ、当日・翌日の緊急案件にもできる限り対応します。
    • 修正のご依頼は、完了までにかかる日数をすぐにご案内し、安心してお任せいただけるよう努めています。

  • 納品ルールの遵守と品質の担保

    • FLOCSSやBEMなどの一般的な設計はもちろん、プロジェクト固有ルールにも対応します。
    • 意味に合ったHTMLタグを適切に使い分け、適切な構造化データのマークアップを行うことで、SEOやアクセシビリティにも配慮した設計を心がけています。

  • スムーズな進行管理と報連相

    • 情報共有シート を使って、進捗情報を共有・可視化しています。
    • どんな内容でも当日中に必ずご返信します。対応の早さで、安心と信頼をお届けします。>

  • 使用ツール・環境への柔軟な対応

    • 対応カンプ： Figma / XD / Photoshop / Illustrator>
    • 対応ツール： Zeplin / Backlog / Git>
    • 対応ブラウザ： Safari / Chrome / Firefox / Edge>
    • 対応OS： Mac / Windows / iPhone / Android>

提供サービス

  • コーディング

    FLOCSSやBEMといった設計ルールに沿い、保守性・再利用性の高いコーディングを行います。命名の一貫性や可読性を重視し、デザインの意図を正確に反映できるよう努めています。

  • WordPress構築

    シンプルで運用しやすいサイトを設計・実装します。カスタム投稿やカスタムフィールドの設計、既存テーマの改修にも柔軟に対応。編集者の使いやすさを大切に、無駄のない構成にします。

  • アニメーション実装

    GSAPやScrollTriggerを使い、視線誘導やUX向上に効果的な動きを実装します。過剰な演出は避け、見る人にとって心地よい動きを意識。デバイス差や表示負荷にも配慮し、適切な場面に最適なアニメーションを提案します。

  • 修正対応・スポット作業

    文字・画像・リンク修正など、軽微な修正にも柔軟に対応します。「ここだけ直したい」といったスポットのご依頼も歓迎です。お急ぎの場合、可能な範囲で即日対応します。タスクの優先度や緊急度に応じて、全体進行に支障が出ないよう対応します。

ご依頼の流れ

  1. STEP 01

    お問い合わせ・ヒアリング

    まずはお気軽に、お問い合わせフォームやX（旧Twitter）のDMからご連絡ください。 ご希望の内容やご予算、スケジュールなどをざっくりでも構いませんので、お聞かせください。

  2. STEP 02

    お見積もり・スケジュール提示

    内容をもとに、お見積もりとスケジュールをご提案いたします。あわせて、サーバーやドメインの有無も確認し、必要であれば取得支援も可能です。 公開方法（納品形式やアップロードの有無）についても、このタイミングで擦り合わせます。

  3. STEP 03

    作業開始

    共有いただいた資料やご要望に沿って、制作をスタートいたします。進行中も適宜ご連絡を差し上げ、ご確認いただきながら進めますので、はじめての方でも安心してご依頼いただけます。

私について

プロフィール写真

テラ

千葉県在住。

趣味：ドライブと旅行。

一番の思い出：千葉 → 御殿場アウトレット → 伊勢神宮 → 出雲大社 → 伊勢神宮 → 草津温泉 → 千葉の6泊ロングドライブ旅行。

  • バイクレーサー時代

    真夏のレースでは、路面温度は60℃を超え、ヘルメット内の体感温度は40℃近くに達します。
    汗が止まらない過酷な環境の中、0.01秒単位でタイムを更新するために瞬時の判断を何度も繰り返しながら、数時間にわたって走り抜きます。
    限りなく限界に近い状態で集中力と持久力を維持し続ける訓練を積んできました。
    この経験は、限界に近い環境でも思考を止めず、高速かつ持続的に課題を解決し続ける力として、Web制作に直結しています。

  • 通信会社のSV時代

    店舗スタッフ・お客様・本部、それぞれの立場や事情が異なる中で、
    「今、この状況で最も良い着地は何か」を冷静に見極め、丁寧に調整し、的確に行動する力を磨いてきました。
    ときには利害がぶつかり合う場面でも、感情に流されず、相手の意図や背景を汲み取りながら合意形成を進めてきた経験があります。
    この経験は、Web制作においても、関係者の意見や要望を的確に読み取り、状況に応じて最善の判断を下しながら、制作を着実に前に進める「巻き取り力」として活かされています。

  • 大型トレーラー運転手時代

    真夜中でも20時間を超える稼働があるトレーラー運転では、
    周囲の変化を一瞬たりとも見逃さず、集中力を切らさずに運転し続ける力が求められます。
    そのためには、日々の体調管理や天候リスクへの備え、ルートの確認など、事前準備を徹底し、常に安定したコンディションを維持することが不可欠でした。
    この経験は、バイクレーサー時代に身につけた「瞬発力」とは対照的に、
    長期的に成果を積み重ねていく冷静さと持久力として、Web制作の現場にも活かされています。

  • 限界への挑戦、現場を俯瞰する視点、地道な準備と調整。
    異なる仕事で培ってきたこれらの力は、Web制作においても大きな武器になっています。

お問い合わせ

1営業日以内に必ずご返信します！
（5:00〜21:00対応）
お気軽にお問い合わせください。

で連絡する

    • プライバシーポリシー


      当サイトでは、お問い合わせ時にいただいた個人情報（名前、メールアドレスなど）を、ご相談への対応や連絡のためにのみ使用いたします。お預かりした情報は厳重に管理し、第三者に開示・提供することはありません。安心してご利用いただけるよう、個人情報保護に努めてまいります。ご不明な点があれば、お気軽にお問い合わせください。

    Copyright © 2025 Tera’s portfolio All rights reserved.

    求人サイト（サンプル）

    • 制作期間と費用の目安

      • 制作期間：1週間程度

      • 製作費：5〜6万円

    • サイト仕様

      • 種類：ランディングページ

      • セクション数：10セクション

      • 縦の長さ：約11,500px

    • 使用アニメーションなど

      • ハンバーガーメニュー/ドロワーメニュー

      • ヘッダーのドロップダウンメニュー

      • Swiperによるスライダー、またカスタムプログレスバーのドラッグ操作によるスライド制御

      • アコーディオン

      • タブ切り替え

      • モーダルウインドウ

      • GSAP ScrollTriggerを利用したスクロール連動アニメーション

      • 線やドットの伸長アニメーション

      • CTAボタンの表示・非表示制御

      • パララックス

    • 担当範囲

      • コーディング

    • サイト概要

      • 架空の採用ランディングページです。

      • GSAPとScrollTriggerを用いて、斜めに動くスライダーやフェード、拡大アニメーション、スクロールに応じて伸縮するタイムラインなど、多様な演出を組み合わせました。

      • タブ切り替えとアコーディオンを組み合わせることで、情報量が多くても快適に閲覧できるよう配慮しました。

    • 実装の工夫

      • 斜めスライダーは、どのデバイスでもレイアウトが崩れないよう、スライド幅や余白を細かく調整しています。

      • タイムラインの各ポイントをテキスト量に左右されることなく精緻に配置するJavaScript実装により、ユーザーは時系列情報を直感的に理解できる高い視認性と操作性を得られます。 さらに、動的なコンテンツの変化にも柔軟に追従することで、堅牢かつ拡張性の高いUIを実現しています。

      • FAQセクションでは、表示数を画面幅に応じて自動調整。タブ切り替えやリサイズ後も状態を維持できるよう設計し、全体を関数化することで再利用性や拡張性も意識しています。

      • 横スライダーのプログレスバーを自作し、バーをマウスドラッグしてスライド可能な実装を行いました。これにより操作性が大幅に向上し、ユーザーは直感的でストレスのない体験を得られます。

    サイトを見る

    クリニックサイト（サンプル）

    • 制作期間と費用の目安

      • 制作期間：2〜3週間程度

      • 費用の目安：10〜12万円

    • サイト仕様

      • 種類：WordPressサイト

      • ページ数：15ページ

      • トップページ1ページ、固定ページ7ページ（About、Contact、診療内容、予約など）、投稿系ページ6ページ（お知らせ・ブログの一覧／詳細／カテゴリ）、404ページの合計15ページ構成になっています。

    • 使用アニメーションなど

      • ハンバーガーメニュー/ドロワーメニュー

      • ヘッダーのドロップダウンメニュー

      • Swiperによるスライダー

      • アコーディオン

      • モーダルウインドウ

      • GSAP ScrollTriggerを利用したスクロール連動アニメーション

      • CTAボタンの表示・非表示制御

      • 問い合わせフォーム

      • 投稿機能

      • カスタムフィールド

      • カスタムHTML組み込み

      • 自動バックアップ対応

    • 担当範囲

      • コーディング

    • サイト概要

      • WordPressで構築した架空のクリニックサイトです。

      • カスタム投稿（例：お知らせ、スタッフ紹介、事例など）を導入し、クライアントが迷わず管理できる構成です。

      • カスタムフィールド（ACF）を用いた柔軟な入力フォームの構築です。

      • アーカイブページ、タクソノミー、ページネーションの動的生成にも対応しました。

    • 実装の工夫

      • トップページのファーストビューには、GSAPによる立体的なスライドアクションを採用しました。
        テキストは一文字ずつ上下にアニメーションさせながら表示し、印象的かつメッセージ性の高い演出を実現しています。

      • お問い合わせフォームは、自動フォーカスやカナ変換、電話番号補正など入力支援機能をJavaScriptで実装しました。
        ラジオ・チェックボックスもTab操作時に強調表示しています。

    サイトを見る

    自作ポモドーロタイマー

    • 制作期間と費用の目安

      • 制作期間：3日

      • 費用の目安：応相談

    • 担当範囲

      • 企画・設計・デザイン・フロントエンド実装（HTML / SCSS / JavaScript）まで、すべて個人で制作しました。

    • サイト概要

      • 自作のポモドーロタイマーです。

      • 実際の時刻に応じて自動的に作業用・休憩用・昼休み用のYouTube動画を再生することで、集中力を高めつつ、自然な時間管理ができるツールです。

      • 動画再生にはYouTube IFrame APIを利用しており、Javascript上で動画IDを指定するだけで切り替え可能な仕組みを構築しました。

    • 実装の工夫

      • 小さな演出や制御もすべてJavaScriptとGSAPで実装しています。

      • 実際の時刻に連動し、毎時00分〜50分を「作業時間」、50分〜00分を「休憩時間」、12時台は「昼休憩」として、それぞれ自動で動画が切り替わるよう実装しました。

      • 画面上のセレクトボックスからアラーム音を選択できるほか、フリー音声ファイルをHTMLとJavaScriptに記述することで、リストに任意のアラーム音を追加することも可能です。

      • 音量調整には自作のスライダーUIを実装し、アラームとYouTube動画の音量はそれぞれ個別に設定可能です。
        各音量設定はローカルストレージに保存され、次回以降も同じデバイスでタイマーを開くと、前回の設定が自動で反映されるようになっています。

    サイトを見る

    ポートフォリオサイト

    • 制作期間と費用の目安

      • 制作期間：1週間程度

      • 費用の目安：応相談

    • 担当範囲

      • コーディング

    • サイト概要

      • このポートフォリオサイトは、これまでの制作経験の集大成として制作しました。

      • セマンティックなHTMLでは、見出しやリスト、ナビゲーションなど意味を持つタグを厳選して配置。 これにより、検索エンジン最適化（SEO）の強化やスクリーンリーダーなど支援技術のアクセスビリティ向上を両立させています。

      • 本サイトでは最初に目を引くローディングアニメーションを実装し、ユーザーの期待感を高めつつスムーズなページ遷移を演出しています。 一方で、ページ本文では過剰なアニメーションを控え、コンテンツの可読性と集中しやすさを重視しました。

      • お問い合わせは専用ページを設けず一画面で完結させ、ユーザーが迷わずスムーズに問い合わせできるよう、視認性や操作性、アクセシビリティを重視して設計されています

    • 実装の工夫

      • 再生中の動画をタップ・クリックするだけで再生・一時停止ができます。見た目はシンプルに保ちつつ、操作性を大幅に向上。商品紹介やプロモーション動画など、多くのコンテンツで快適な視聴体験を実現します。

      • 初回アクセス時にのみ再生されるローディングアニメーションは、GSAPのタイムラインで滑らかな同期とイージングを制御し、カラーグラデーションやシャドウの動的変化で視覚的な広がりを演出。訪問者に高品質で洗練された体験を提供します。

      • ヘッダーはスクロールに応じて動的に状態を切り替え、視認性と操作性を大幅に向上させています。 特に、IntersectionObserverを用いて各セクションの視認状況を効率的に検知し、GSAPでスムーズな背景色や文字色、影の変化を制御しています。

      • timeline形式のprofileセクションでは、各項目がスクロールトリガーにより順次フェードインし、GSAPを使って透明度、位置、拡大縮小、ぼかし効果を組み合わせたトランジションで動きを演出しています。 特に最終項目には、時間経過とスクロールに連動した光の流れを加え、洗練された印象と動的な演出によりユーザーの注目を集めやすく設計しています。 さらに、スクロール進行に合わせて項目間をつなぐtimelineラインの長さを動的に調整し、視覚的に進行度をわかりやすく示しています。

      • 問い合わせセクションでは、表示時に最初の入力欄へ自動でフォーカスを当てることで、ユーザーがスムーズに入力を開始できるようにしています。フォーカス時には適切に視覚強調のクラスを付与し、キーボードユーザーやスクリーンリーダー利用者にも配慮しており、ラジオボタンなど特定要素は除外して誤った強調を防ぐ細やかな制御も行っています。また、タブキー操作で入力欄の区切りがわかりやすく、視覚的なフォーカスクラス付与により迷わずスムーズに入力できる工夫がされています。

    サイトを見る

    キャンペーンサイト（サンプル）

    • 制作期間と費用の目安

      • 制作期間：1週間程度

      • 費用の目安：3〜4万円

    • 担当範囲

      • コーディング

    • サイト概要

      • 架空のキャンペーンランディングページです。

      • スライダー（Swiper）、モーダル、アコーディオン、テーブルレイアウト、問い合わせフォームなど、実務でよく使われる要素を網羅したキャンペーンサイトのサンプルです。

    • 実装の工夫

      • CSSや構造の理解を深めることを目的としました。細かなレスポンシブ対応や擬似要素の調整など、基本の積み上げを意識しました。

    サイトを見る