見る人の心に 響くサイトを デザインする

デザイン・パフォーマンス・使いやすさの三位一体で、目的を達成するホームページを制作します。

制作実績を見る 作れるもの お問い合わせ
  • HTML5
  • CSS3
  • JavaScript
  • TypeScript
  • WebGL・GLSL
  • three.js
  • Canvas 2D
  • SVGアニメーション
  • React
  • WordPress
  • PHPフォーム
  • 技術的SEO
  • 構造化データ
  • sitemap・canonical
  • Core Web Vitals
  • 画像最適化（WebP）
  • アクセシビリティ
  • レスポンシブ設計
  • スクロール演出
  • Lighthouse計測
  • GA4・Search Console
  • 公開・サーバー移行
制作実績を見る
作れるもの できること 相談する
Scroll
プロフィール写真
HTML / CSS
JavaScript / TypeScript
WebGL / GLSL
Canvas / SVG
React
WordPress
Figma
技術的SEO
アクセシビリティ
公開・運用
自己紹介

はじめまして、現在大学生をしています。原井智基です。
このポートフォリオを見に来てくださりありがとうございます。

目的に合った
サイトを形にする

Webサイトの制作・コーディングに取り組んでいます。 企業サイト・LP・クリニック・アパレルなど、幅広いジャンルの制作経験があります。

どれくらい動かすかは、好みではなく目的から決めています。 スクロールに合わせて背景ごと動く「見せる」サイトも、動きを抑えて余白と文字で「読ませる」サイトも、 どちらも一から書けます。ご要望と、そのページで達成したいことに合わせて選びます。

動かして魅せる WebGL・GLSL / スクロール演出
静かに作り込む 余白・階調・タイポグラフィ
見つけてもらう SEO・MEO / AEO・GEO・LLMO
ちゃんと機能する Lighthouse 99点 / アクセシビリティ
Services

できること

6枚のカードを押すと、中身が開きます。

Showcase

実際に作れるもの

グラフ・UI部品・カルーセル・Before/Afterスライダーなど、様々なインタラクティブ機能を実装できます。タブで切り替えてご覧ください。

背景・文字・ボタン・画像の動きを、実際に触って確かめてみてください。 下の4つはその一部です。

もっと見たい方はこちら
背景を動かす 5種類・カーソルに反応します

ここに見出しや写真が載ります

文字を見せる 5種類・押すともう一度動きます

ひとつずつ、ていねいに

1文字ずつ奥から起き上がる

50年、地域とともに

塗りが下から満ちて文字が現れる

DIGITAL PARTNER

でたらめな字が左から確定していく

一枚ずつ、めくる

色の板が抜けた跡に文字が残る

0社の導入実績

実績の数字が0から回る

クリックの手ごたえ 押した後まで作り込む

どれも実際に押せます。カーソルを乗せる・押す・キーボードで辿る、どれでも動きます。ここに出しているのは39点のうち15点です。

ダウンロードの動き 待たせている間を見せる

ボタンを押すと、進み具合がボタン自身に溜まって、終わるとチェックに変わります。 下の3つは数十秒かかる処理用。洗濯機は途中で脱水に入り、荷物は道だけが流れ、ハムスターは走り続けます。

Motion Catalog もっと見たい方は
こちら 背景15種・文字12種・ボタン39点・グラフ・画像・読み込み中21種。 種類ごとに並べて、すべてその場で触れるページを用意しています。 ページを開く
ドーナツグラフ 流入元の内訳
棒グラフ 前年との比較
折れ線グラフ お問い合わせ件数の推移
比較グラフ（横棒） デバイス別アクセス
スマートフォン 62%
パソコン 28%
タブレット 10%
アコーディオン よくある質問など

小学生から高校3年生まで対応しています。受験対策はもちろん、定期テスト対策・苦手科目の補習にも最適です。

はい、初回は無料で体験授業（1コマ60分）を実施しています。授業の雰囲気を確認してからご入塾いただけますので、お気軽にお申し込みください。

担当講師がお子様の理解度を確認しながら授業を進めます。わからない点は何度でも丁寧に解説しますのでご安心ください。

プログレスバー 進捗・スキル表示など
サイト完成度 87%
予算消化率 63%
目標達成率 41%
顧客満足度 96%
タイムライン 制作フロー・沿革など
ヒアリング・要件定義 完了

ご要望・目的・ターゲットの整理

デザイン制作 完了

Figmaでワイヤーフレーム・デザイン確認

コーディング 進行中

HTML/CSS/JSで実装中

公開・納品 予定

テスト・修正後に公開

商品カード ECサイト・ショップ向け
NEW
プレミアム Tシャツ
¥4,800
★★★★★
SALE
リネン トートバッグ
¥3,200 ¥4,500
★★★★☆
コットン キャップ
¥2,600
★★★★★
プロフィールカード スタッフ紹介・医師紹介など
T
田中 誠司
Webデザイン担当
HTML/CSSFigma
S
佐藤 美咲
コーディング担当
JavaScriptReact
K
木村 拓也
SEO・分析担当
SEOAnalytics
統計ダッシュボード風 管理画面・レポートなど
2,480
月間UU
▲12%
¥184k
月間売上
▲8%
3.2%
CV率
▼0.4%
2:14
平均滞在
▲0:23
ニュース・ブログカード お知らせ・記事一覧など
お知らせ2026.05.01
新しいサービスを開始しました
実績2026.04.20
クリニックサイトのリニューアルが完了
コラム2026.04.10
表示速度を上げる3つのポイント

ご要望に合わせてスライダー・カルーセル・Before/After比較・料金テーブルなどのインタラクティブ機能も実装できます。以下はすべて実際に動作するデモです。

スライドカルーセル お客様の声・導入事例など

問い合わせが月3件から12件に増えました。どこを直せば効くのかを、数字で説明してもらえたのが大きかったです。

士業事務所コーポレートサイト刷新

スマホで見たときの崩れが全部なくなりました。写真を差し替えるだけの更新なら自分たちでできるようになっています。

飲食店店舗サイト・メニュー更新

地図からの来店が増えました。何をどう書けば拾われるのかまで一緒に整理してもらえて助かりました。

クリニックMEO・予約導線の整理

Before / After スライダー リニューアル比較・施工前後など

つまみを左右にドラッグ（キーボードの ← → でも動きます）

料金・プラン比較テーブル 塾・スクールの料金プランなど、このような比較表を作成できます
項目 ベーシック スタンダード プレミアム
（難関校対応）
対象 補習・定期テスト 受験準備 難関校受験
科目数 1科目 2科目まで 全科目対応
週授業数 週1コマ 週2コマ 週3コマ以上
進路相談 — ✓ ✓
保護者面談 — 月1回 随時対応
月謝 ¥15,000〜 ¥25,000〜 ¥35,000〜

※ 上記はサンプルです。実際の料金・プランはお客様のサービス内容に合わせてカスタマイズして制作します。

Works

制作実績

これまでに制作したサイトの一部です。クリックしてサイトを確認できます。

NEW
サイトを開く
眼鏡ブランド 2026/8

眼鏡ブランドサイト「LUMORA」

HTML / CSS / JavaScript

カーソルで色が戻る 明朝＋縦書き

色を抜いた写真の上を、カーソルでなぞった所にだけ色と光が戻ります。同じ写真の2版を canvas で重ねているのでズレません。金や装飾は使わず、余白・明朝・縦書きだけで品を出しました。

NEW
サイトを開く
美術館 2026/8

美術館サイト「R MUSEUM」

HTML / CSS / JavaScript / WebGL（three.js）

3Dの彫刻が回る スクロールで場面が変わる

彫刻を3Dモデルで置き、スクロールに合わせて視点と光が動きます。three.js もモデルも同じサーバーに置いてあるので、外部のサービスが止まっても表示は崩れません。

NEW
サイトを開く
旅行会社 2026/5

ブティック旅行会社サイト「巡 MEGURU」

HTML / CSS / JavaScript

スクロール演出 没入型デザイン

最近はスクロール連動アニメーションや没入感のある表現技術を新たに学び、このようなデザイン重視のブランドサイト制作にも対応できるようになりました。

NEW
サイトを開く
企業サイト 2026/4

海洋イノベーション企業サイト「BLUE CORE」

HTML / CSS / JavaScript

ヒーローカルーセル 企業ブランディング
サイトを開く
ベーカリー 2026/2

手づくりパン店 公式サイト

HTML / CSS / JavaScript

商品一覧 フィルタ・並び替え
サイトを開く
中小企業 2026/1

製造業コーポレートサイト

HTML / CSS / JavaScript

Perf 99 SEO 100
サイトを開く
フィットネス 2025/11

フィットネスジム公式サイト

HTML / CSS / JavaScript

Perf 98 SEO 100
サイトを開く
クリニック 2025/10

内科クリニック公式サイト

HTML / CSS / JavaScript

Perf 96 SEO 100
サイトを開く
美容室 2025/9

高級ビューティーサロン公式サイト

HTML / CSS / JavaScript

Perf 96 SEO 100
サイトを開く
アパレル 2025/8

アパレルブランド公式サイト

HTML / CSS / JavaScript

Perf 95 SEO 99
サイトを開く
英会話スクール 2025/7

英会話スクール公式サイト

HTML / CSS / JavaScript

Perf 98 SEO 100
サイトを開く
レストラン 2025/6

高級レストラン公式サイト

HTML / CSS / JavaScript

Perf 97 SEO 100
サイトを開く
個別指導塾 2025/5

個別指導塾公式サイト

HTML / CSS / JavaScript

Perf 97 SEO 100
サイトを開く
記事LP 2025/3

医療脱毛クリニック 比較記事LP

アドアフィリエイト / ランキング型記事LP

コピーライティング CTA設計
サイトを開く
記事LP 2025/2

オンライン予備校 比較記事LP

アドアフィリエイト / ランキング型記事LP

コピーライティング 比較表設計
Web Production

設計から公開まで、ぜんぶ一人で

ホームページの制作をお考えの方へ。何ができるのか、どう進めるのかをまとめました。

WEB CREATOR — HARAI TOMOKI

このサイトの設計から実装まで、
ぜんぶ一人で書いています。

デザインの設計、HTML・CSS・JavaScript の記述、背景の3D演出、公開後のサーバー設定まで、 一貫して担当しています。企業サイト・LP・クリニック・アパレルなど、 幅広いジャンルの制作経験があります。

いま見えている背景も、用意した画像ではありません。 粒と布の動きを、その場で1コマずつ計算して描いています。 同じように、目的に合わせたサイトを一から組み上げます。

01

サイトを、一式つくる

企業サイト・LP・採用ページを、設計から公開まで通しで。

  • PC・スマホ・タブレットに合わせた作り
  • お問い合わせフォームの実装
  • お知らせをご自身で更新できる形（CMS化）
  • 独自ドメイン・サーバーの設定
  • 公開後の移行作業まで
作れるものを見る 得意

02

動きで、魅せる

背景・ロード画面・スクロール演出まで、自分で書きます。

  • WebGL・GLSL で書く背景（このページの背景がそれです）
  • スクロールに合わせた登場・切り替え
  • 読み込み中の画面（ロード演出）
  • ロゴや文字の立体表現
  • 重い端末では自動で軽くする仕組み
動きの実例を見る

03

見つけて、もらう

検索・地図・AIの回答。3つの入口から、たどり着ける形に。

  • 構造化データ・sitemap・canonical の整備
  • 表示速度の改善（Core Web Vitals）
  • Googleマップからの来店を狙う（MEO）
  • AIの回答に載る形（AEO・GEO・LLMO）
  • Search Console の設定と計測
くわしく見る

01 DESIGN

動かす量を、好みではなく目的から決める

スクロールに合わせて背景ごと動く「見せる」サイトも、動きを抑えて余白と文字で「読ませる」サイトも、 どちらも一から書けます。どちらにするかは、そのページで達成したいことから決めます。

  • Figma
  • 画面設計
  • プロトタイプ

02 CODE

一行目から、自分で書く

テンプレートを当てはめるのではなく、構造もスタイルも動きも自分で記述します。 だから「ここだけ変えたい」に上限がなく、あとから直す場所もすぐに分かります。

  • HTML / CSS
  • JavaScript / TypeScript
  • WebGL / GLSL
  • React
  • WordPress

03 QUALITY

速さと使いやすさを、数字で確かめる

画像の軽量化、読み込む順番、表示のずれ。見た目の印象ではなく計測値で詰めます。 キーボード操作や読み上げ、「動きを減らす」設定への対応も、最初から織り込みます。

  • Core Web Vitals
  • Lighthouse
  • アクセシビリティ

04 AFTER

公開して、終わりにしない

独自ドメインとサーバーの設定、公開後の差し替え、お知らせをご自身で更新できる形への変更まで。 窓口が一つなので、「どこに頼めばいいか分からない」が起きません。

  • ドメイン・サーバー
  • CMS化
  • 計測設定

つくりたいものが、まだ形になっていなくても。

「何から決めればいいか分からない」からで大丈夫です。まずはご相談ください。

制作の相談をする 制作実績を見る
Contact

お仕事の
ご相談はこちら

「こんなサイトが作りたい」という漠然としたイメージでも大丈夫です。 まずはお気軽にご連絡ください。

tomokisales18@gmail.com

送信しました！

ご連絡いただきありがとうございます。