@import url(‘
https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap’);
#gbpf{
–gb-navy:#12365C;
–gb-blue:#1A6DB5;
–gb-blue-pale:#EAF2F9;
–gb-orange:#FF6600;
–gb-ink:#26313B;
–gb-paper:#FAFAF7;
–gb-line:#D8DFE5;
font-family:’Zen Kaku Gothic New’,’Hiragino Kaku Gothic ProN’,sans-serif;
color:var(–gb-ink);
background:var(–gb-paper);
line-height:1.8;
font-size:16px;
max-width:640px;
margin:0 auto;
}
#gbpf *{margin:0;padding:0;box-sizing:border-box;}
#gbpf section{padding:52px 24px;}
#gbpf h2{
font-family:’Zen Old Mincho’,serif;
font-weight:700;
font-size:24px;
letter-spacing:.05em;
color:var(–gb-navy);
margin-bottom:26px;
}
#gbpf .gb-label{
font-size:12px;
letter-spacing:.22em;
color:var(–gb-blue);
font-weight:700;
margin-bottom:6px;
}
#gbpf a:focus-visible{outline:3px solid var(–gb-orange);outline-offset:3px;border-radius:2px;}
@media (prefers-reduced-motion: reduce){
#gbpf *{transition:none !important;animation:none !important;}
}
/* hero */
#gbpf .gb-hero{
position:relative;
background:var(–gb-navy);
color:#fff;
padding:64px 24px 56px;
overflow:hidden;
}
#gbpf .gb-hero::before{
content:””;
position:absolute;inset:0;
background-image:url(“data:image/svg+xml,%3Csvg xmlns=’
http://www.w3.org/2000/svg’ width=’72’ height=’72’ viewBox=’0 0 72 72’%3E%3Cg fill=’none’ stroke=’%23FFFFFF’ stroke-opacity=’0.09′ stroke-width=’1’%3E%3Cpath d=’M36 0 L72 36 L36 72 L0 36 Z’/%3E%3Cpath d=’M36 0 V72 M0 36 H72’/%3E%3Cpath d=’M18 18 L54 54 M54 18 L18 54’/%3E%3C/g%3E%3C/svg%3E”);
background-size:72px 72px;
}
#gbpf .gb-hero > *{position:relative;}
#gbpf .gb-hero-tag{
display:inline-block;
font-size:12px;
letter-spacing:.18em;
color:#BFD4E8;
border:1px solid rgba(255,255,255,.35);
padding:4px 14px;
border-radius:999px;
margin-bottom:22px;
}
#gbpf .gb-hero h1{
font-family:’Zen Old Mincho’,serif;
font-weight:900;
font-size:30px;
line-height:1.5;
letter-spacing:.04em;
margin-bottom:18px;
color:#fff;
}
#gbpf .gb-hero h1 .gb-accent{color:var(–gb-orange);}
#gbpf .gb-hero p{
font-size:14.5px;
color:#D7E3EE;
max-width:480px;
}
#gbpf .gb-hero-name{
margin-top:30px;
display:flex;
align-items:center;
gap:12px;
}
#gbpf .gb-hero-name .gb-mark{
width:44px;height:44px;
border-radius:10px;
background:var(–gb-orange);
color:#fff;
font-family:’Zen Old Mincho’,serif;
font-weight:900;
font-size:22px;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
#gbpf .gb-hero-name .gb-name{font-weight:700;font-size:16px;letter-spacing:.06em;}
#gbpf .gb-hero-name .gb-role{font-size:12px;color:#BFD4E8;letter-spacing:.08em;}
/* strengths */
#gbpf .gb-strengths{background:#fff;border-top:4px solid var(–gb-orange);}
#gbpf .gb-strength{
display:flex;gap:16px;
padding:18px 0;
border-bottom:1px solid var(–gb-line);
}
#gbpf .gb-strength:last-child{border-bottom:none;}
#gbpf .gb-strength .gb-no{
font-family:’Zen Old Mincho’,serif;
color:var(–gb-orange);
font-weight:900;
font-size:15px;
padding-top:2px;
flex-shrink:0;
width:2.4em;
}
#gbpf .gb-strength h3{font-size:16px;color:var(–gb-navy);margin-bottom:4px;}
#gbpf .gb-strength p{font-size:14px;color:#4A5560;}
/* works */
#gbpf .gb-works{background:var(–gb-blue-pale);}
#gbpf .gb-card{
background:#fff;
border:1px solid var(–gb-line);
border-radius:12px;
overflow:hidden;
margin-bottom:22px;
}
#gbpf .gb-thumb{
height:150px;
position:relative;
display:flex;align-items:center;justify-content:center;
}
#gbpf .gb-mini{
width:104px;height:120px;
background:#fff;
border:2px solid var(–gb-navy);
border-radius:6px;
position:relative;
box-shadow:6px 6px 0 rgba(18,54,92,.15);
display:flex;flex-direction:column;gap:5px;
padding:8px 7px;
}
#gbpf .gb-bar{border-radius:2px;}
#gbpf .gb-thumb-lp{background:linear-gradient(135deg,#1A6DB5 0%,#12365C 100%);}
#gbpf .gb-thumb-lp2{background:linear-gradient(135deg,#3E8ECD 0%,#1A6DB5 100%);}
#gbpf .gb-thumb-app{background:linear-gradient(135deg,#FF8A3D 0%,#FF6600 100%);}
#gbpf .gb-thumb-wp{background:linear-gradient(135deg,#4A6B8A 0%,#12365C 100%);}
#gbpf .gb-card-body{padding:20px 22px 24px;}
#gbpf .gb-cat{
display:inline-block;
font-size:11px;font-weight:700;
letter-spacing:.1em;
color:var(–gb-blue);
background:var(–gb-blue-pale);
border-radius:999px;
padding:3px 12px;
margin-bottom:10px;
}
#gbpf .gb-card-body h3{font-size:17px;color:var(–gb-navy);margin-bottom:8px;line-height:1.5;}
#gbpf .gb-card-body p{font-size:14px;color:#4A5560;margin-bottom:12px;}
#gbpf .gb-spec{
font-size:12.5px;
color:#6B7680;
border-top:1px dashed var(–gb-line);
padding-top:10px;
}
#gbpf .gb-spec b{color:var(–gb-navy);font-weight:700;}
#gbpf .gb-card-link{
display:inline-block;
margin-top:12px;
font-size:14px;
font-weight:700;
color:var(–gb-blue);
text-decoration:none;
border-bottom:2px solid var(–gb-blue);
padding-bottom:1px;
}
#gbpf .gb-card-link:hover,#gbpf .gb-card-link:focus-visible{color:var(–gb-orange);border-color:var(–gb-orange);}
/* flow */
#gbpf .gb-flow{background:#fff;}
#gbpf .gb-step{
position:relative;
padding:0 0 26px 34px;
}
#gbpf .gb-step::before{
content:””;
position:absolute;left:9px;top:8px;bottom:-2px;
width:2px;background:var(–gb-line);
}
#gbpf .gb-step:last-of-type::before{display:none;}
#gbpf .gb-step::after{
content:””;
position:absolute;left:3px;top:6px;
width:14px;height:14px;
border-radius:50%;
background:#fff;
border:4px solid var(–gb-orange);
}
#gbpf .gb-step h3{font-size:16px;color:var(–gb-navy);}
#gbpf .gb-step p{font-size:14px;color:#4A5560;}
#gbpf .gb-flow-note{
margin-top:6px;
background:var(–gb-blue-pale);
border-left:4px solid var(–gb-blue);
padding:14px 16px;
font-size:13.5px;
border-radius:0 8px 8px 0;
}
/* price */
#gbpf .gb-price{background:var(–gb-blue-pale);}
#gbpf .gb-table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:12px;
overflow:hidden;
border:1px solid var(–gb-line);
font-size:14px;
}
#gbpf .gb-table th,#gbpf .gb-table td{
padding:14px 16px;
text-align:left;
border-bottom:1px solid var(–gb-line);
border-left:none;border-right:none;border-top:none;
}
#gbpf .gb-table tr:last-child th,#gbpf .gb-table tr:last-child td{border-bottom:none;}
#gbpf .gb-table th{
background:var(–gb-navy);
color:#fff;
font-weight:500;
width:52%;
font-size:13.5px;
}
#gbpf .gb-table td b{color:var(–gb-orange);font-size:16px;}
#gbpf .gb-price-note{font-size:12.5px;color:#6B7680;margin-top:12px;}
/* about */
#gbpf .gb-about{background:#fff;}
#gbpf .gb-about-box{
border:1px solid var(–gb-line);
border-radius:12px;
padding:24px 22px;
background:var(–gb-paper);
}
#gbpf .gb-about-box p{font-size:14.5px;margin-bottom:12px;}
#gbpf .gb-about-box p:last-child{margin-bottom:0;}
/* cta */
#gbpf .gb-cta{
background:var(–gb-navy);
color:#fff;
text-align:center;
padding:56px 24px 64px;
}
#gbpf .gb-cta h2{color:#fff;}
#gbpf .gb-cta p{font-size:14.5px;color:#D7E3EE;margin-bottom:26px;}
#gbpf .gb-btn{
display:block;
background:var(–gb-orange);
color:#fff !important;
font-weight:700;
font-size:16px;
text-decoration:none;
border-radius:999px;
padding:16px 20px;
max-width:360px;
margin:0 auto 14px;
box-shadow:0 4px 14px rgba(255,102,0,.4);
transition:transform .15s ease;
}
#gbpf .gb-btn:hover,#gbpf .gb-btn:focus-visible{transform:translateY(-2px);}
#gbpf .gb-btn.gb-sub{
background:transparent;
border:2px solid rgba(255,255,255,.6);
box-shadow:none;
}
#gbpf .gb-foot{
background:#0C2540;
color:#8FA6BC;
text-align:center;
font-size:12px;
padding:20px;
}
HTML / CSS CODING
建具職人の精度で、
Webを組む。
本業は建具職人。ミリ単位の仕事で培った「正確さ」と「納期を守る責任感」を、そのままコーディングに持ち込んでいます。モバイル最適化LPの実装が得意です。
STRENGTHS
できること
壱
HTML / CSS コーディング
デザインカンプや参考ページをもとに、レスポンシブ対応のページを実装します。スマホ表示の最適化(640px設計)を標準対応。
弐
LP(ランディングページ)実装
訴求ブロックの構成からCTA設計まで、成果につながるLPを一枚もので実装。追従CTAボタン、計測タグの設置にも対応します。
参
WordPress への組み込み
カスタムHTMLブロックへの実装、Cocoonテーマのカスタマイズ、Xserver環境での運用経験があります。
肆
AIを活用した高速コーディング
AIツールを実務に組み込み、品質を保ったまま制作スピードを大幅に短縮。ページ数の多い量産案件も対応できます。
WORKS
制作実績
LP実装
バイク保険一括見積もり 訴求LP
スマホ特化の縦長LP。夜のツーリングをイメージしたビジュアル構成に、PR表記バー・追従CTA・計測タグを実装。
担当: 構成 / コーディング / WordPress実装
技術: HTML / CSS(モバイル最適化)
実際のページを見る →
LP実装
ウォーターサーバー / 生活系サービスLP 多数
食材宅配・美容・生活サービスなど、ジャンルの異なる訴求LPを多数制作。ジャンルごとのトーン設計と、離脱させないブロック構成が持ち味です。
担当: 構成 / コーディング / WordPress実装
技術: HTML / CSS(モバイル最適化)
実際のページを見る →
Webアプリ
MotoLog — バイクメンテナンス記録ツール
オイル交換や消耗品の履歴をブラウザだけで記録できるWebツールをReactで開発。登録不要・データはユーザーの端末内に保存する設計。
担当: 企画 / 設計 / 開発
技術: React / localStorage
実際のページを見る →
サイト運営
WordPressメディア運営(Cocoon / Xserver)
自身でWordPressサイトを構築・運営中。テーマカスタマイズ、GA4計測設置、サーバー周りの実務まで一人で対応しています。
担当: 構築 / 運営 / 記事・LP実装
技術: WordPress / Cocoon / Xserver / GA4
実際のページを見る →
FLOW
ご依頼の流れ
1. ヒアリング
参考ページ・素材・ご要望を確認し、お見積もりと納期をご提示します。
2. サンプル1ページの先行納品
ご希望があれば、本契約の前に1ページを先に実装してお見せします。仕上がりを確認してからご判断いただけます。
3. 制作・順次納品
ページ数が多い場合は、完成したものから順次納品も可能です。進捗はこまめにご報告します。
4. 検収・修正対応
納品後の軽微な修正は無償で対応します。
職人仕事と同じで、「現物を見てもらうのが一番早い」が信条です。まずはサンプルからお気軽にどうぞ。
PRICE
料金の目安
シンプルな1ページ
(社内資料のHTML化など) |
700円 / ページ〜 |
LP実装
(デザインあり・レスポンシブ) |
15,000円〜 |
LP構成込み実装
(構成のご提案から) |
25,000円〜 |
| WordPress組み込み |
+5,000円〜 |
※税抜表記です。分量・仕様により変動しますので、まずはお気軽にご相談ください。
ABOUT
自己紹介
本業は建具職人。木を測り、削り、ミリ単位で建具を納める仕事を続けています。
「図面どおりに、正確に、期日までに納める」——この職人仕事の基本は、コーディングでもまったく同じだと考えています。
Web制作では、モバイル最適化のLP実装を中心に活動中。AIツールを積極的に取り入れ、品質とスピードの両立を追求しています。プライベートではバイク乗り(リターンライダー)です。
毎日頑張るあなたを助けたいブログ 