SP WEBCREAT.

0%

logo SP WEB CREAT.
Portfolio website

Build Your Digital Castle.

コードは、ただの文字列じゃない。

設計図であり、構造体であり、

誰かの「こうしたい」を形にする素材。

美しい城には、見えない土台がある。

堅牢な基盤、緻密な設計、細部への執念。

それはWebサイトも同じだと思っている。

約15年、数えきれないサイトを手がけてきた。

デザインもコードも、自分の手で。

その一つひとつが、今の土台になっている。

AIが当たり前になった時代。

素材は増えた。できることも広がった。

でも、城を設計するのは、人だ。

どの素材を選び、どう組み、
何を届けるか。

その判断ができるのは、
積み上げてきた者だけだと思う。

経験と技術、そして新しい力を携えて。

次の城を、創造しにいく。

Scroll

ABOUT

Profile
清水 春雄
HARUO SHIMIZU
Web・UI・UXデザイナー
Webエンジニア
名称: SP WEB CREAT. （エスピーウェブクリエイト）
所在地: 大阪府
事業内容: Webサイト・Webアプリ制作全般

10年以上のWEB制作会社での勤務を経て2022年10月より フリーランスのWEBエンジニア / Web・UI・UXデザイナー として活動しております。

デザイン・コーディング・WordPress・モダンJavaScript、 またSEO対策やアクセス解析などのWEBマーケティング についても経験してきた事から幅広いスキルを駆使し、 近年はAI技術も取り入れながらクライアント様のニーズに 応じ柔軟な仕事をさせて頂いております。

MarkUp

  • HTML
  • CSS
  • JavaScript
  • PHP
  • TypeScript
  • TailwindCSS
  • Sass

AI

  • Claude API
  • Gemini API
  • OpenAI API

Framework

  • React.js
  • Next.js
  • Astro.js
  • Gatsby.js
  • Three.js
  • Laravel
  • WordPress

Database / Infrastructure

  • MySQL
  • PostgreSQL
  • Supabase
  • Firebase
  • Prisma
  • Docker
  • Vercel

Design

  • UI/UX Design
  • Web Design
  • Figma
  • Adobe XD
  • Photoshop

PROJECTS

profile https://ai-monster-creator.vercel.app/
AI MONSTER CREATOR.
ユーザーが入力した特徴と属性を基にAIを使用してユニークなモンスター画像を生成できるサイトです。フロントエンドはNext.js 14、バックエンドはVercel KV、Vercel Blobを使用しています。
  • Next.js 14
  • Axios
  • AI画像生成(Getimg.ai)
  • TypeScript
  • Tailwind
  • Vercel KV
  • Vercel Blob
profile https://www.sp-webcreat.pro/
SP WEB CREAT.
動きのある3DグラフィックスはReact Three Fiberを使用しています。フロントエンドはモダンJavaScript、ブログはAstro Content Collectionsで構築。サムネイル画像はGemini APIで自動生成しています。
  • Astro.js
  • Three.js
  • TypeScript
  • Tailwind
  • Gemini API
profile https://wp-manage.site/
WP MANAGE PORTAL.
フルスクラッチ業務システム。現在10サイトの運用保守を一元管理し、月次レポートの自動生成・PDF出力・クライアント配信を行う自社開発の業務効率化ポータルです。独自のChild Plugin REST APIでサイトデータを収集し、カスタムテーマとTCPDFで構築しています。テストアカウント（ID: test1@test.com / Pass: test9999）
  • WordPress
  • PHP 8
  • REST API
  • TCPDF
  • Chart.js
  • Vanilla JS
  • MySQL

Works

FOR U様 https://bhf-4u.com/
FOR U様
Design Coding
パーティーのプロデュースを行う会社様。楽しいキャラクターが随所に登場します。Figmaでデザイン、WordPressでコーディングと制作全般・インフラ周りすべてを担当。
  • Wordpress
  • PHP
  • MySQL
  • GSAP
合同会社CLAB.様 https://www.creative-laboratory.co.jp/
合同会社CLAB.様
Design Coding
販売促進に役立つクリエイティブを制作する会社様。Figmaでデザイン、WordPressでコーディングと制作全般・インフラ周りすべてを担当。
  • Wordpress
  • PHP
  • MySQL
  • Lenis.js
  • GSAP
SOU様 https://sou-space.osaka/
SOU様
Design Coding
大阪市北区にある100坪のリノベーション倉庫を活用したレンタルスペース・スタジオのWEBサイト。ウエディング・フォトスタジオ・イベントなど多彩な用途に対応する施設の魅力を伝えるデザインに。Figmaでデザイン、WordPressでコーディングと制作全般・インフラ周りすべてを担当。
  • Wordpress
  • PHP
  • MySQL
  • SVGアニメーション
  • GSAP
WEDDING様 https://sou-wedding.osaka/
WEDDING様
Design Coding
完全貸切のオリジナルウエディングをプロデュースするサービスのWEBサイト。1日1組限定の特別感を演出する上品で洗練されたデザインに仕上げました。Figmaでデザイン、WordPressでコーディングと制作全般・インフラ周りすべてを担当。
  • Wordpress
  • PHP
  • MySQL
  • WebP最適化
  • GSAP
株式会社てりとりー様
沖縄料理飲食店様
Design Coding
沖縄料理飲食店様のWEBサイト。Figmaでデザイン、WordPressでコーディングと制作全般・インフラ周りすべてを担当。企業さまの魅力を活かしつつ、沖縄らしさを波やシーザー・首里城などで表現。多彩な表現やページ速度対策のため軽量のLottieアニメーションなども採用してみました。
  • Wordpress
  • PHP
  • MySQL
  • Lenis.js
  • LottieAnimation
  • GSAP
株式会社フィールド様
不動産会社様
Coding
コーポレートサイトと採用サイトのコーディングを担当。デザインや構成がそれぞれ異なり、2サイト分のボリュームがある案件です。デザインカンプを元にWordPressでのコーディング・テーマ構築と制作全般を担当しました。
  • Wordpress
  • PHP
  • MySQL
  • CSS設計
  • レスポンシブ
Coeur à Coeur様
結婚相談所様
Coding
結婚相談所のランディングページのコーディングを担当。信頼感と親しみやすさを両立するデザインカンプを元に、HTML/SCSS/JSでのコーディングを担当しました。
  • HTML
  • SCSS
  • JavaScript
  • レスポンシブ

BLOGS

さくらサーバー × GitHub Actions FTPデプロイで詰まった3つのポイント
Tech
さくらサーバー × GitHub Actions FTPデプロイで詰まった3つのポイント
GitHub ActionsFTPさくらサーバーCI/CD
お問い合わせフォームに届く営業メール、AIで自動振り分けしてみた
Tech
お問い合わせフォームに届く営業メール、AIで自動振り分けしてみた
AIGAS
初投稿。
Diary
初投稿。
All Posts →