相手を思い描く。
年齢や業種だけでなく、訪れたきっかけ、知りたいこと、迷いを整理。ページの順序と情報量を決めます。
WEB PORTFOLIO / SELECTED CONCEPT WORKS2026 — VOL. 02
伝わる。その先の行動まで、デザイン。
訪れる人の気持ちから考える、Web制作。
業種も、目的も異なる6つのHP・LPに、
それぞれの伝え方を。
- WORKS
- 06
- LIBRARIES
- 00
- STACK
- HTML / CSS / JS
WORKS
このページの背景はWebGLシェーダーで描画しています。フレームワーク・外部ライブラリは使っていません。
01 / SELECTED WORKS
目的から、かたちに。
すべて架空ブランドの自主制作です。
カードから実際のサイトをご覧いただけます。
02 / LIVE PREVIEW
幅を変えて、確かめる。
画像ではなく、作品ページそのものを読み込んでいます。
幅を動かすと、その場でレイアウトが切り替わります。
03 / APPROACH
見た目に、理由を。
誰に、何を伝え、どう動いてもらうか。
目的に合わせて、構成から考えます。
らしさを、伝える。
写真、文字、配色、余白。カフェの空気感と製造業の技術力では、伝えるための表現も変えています。
使うところまで。
スマートフォンでも読みやすく、操作しやすく。メニューや絞り込み、フォームの動きまで制作します。
04 / HOW IT'S BUILT
このサイトの、つくり。
見た目だけでなく、実装と確認の中身も
そのままお見せします。
00外部ライブラリ・フレームワークHTML・CSS・JavaScriptのみ。ビルド不要で動きます。
—自動チェック項目（合格）Playwright Chromiumで確認。
320–1440確認した画面幅（px）320・390・768・1440pxで横スクロールが出ないことを確認。
06フォームのデモ動作必須入力の検証と、送信しない完了表示を全作品で確認。
- WebGLヒーローの等高線はGLSLのフラグメントシェーダー。画面外では描画を止めます。
- View Transitions作品の絞り込みは、対応ブラウザでカードが位置を保ったまま切り替わります。
- ScrollIntersectionObserverでの表示演出と、スクロール連動のパララックス。
- Accessibilityキーボード操作、フォーカス表示、「視差効果を減らす」設定での動きの停止に対応。
05 / ABOUT & CONTACT
つくる前も、
つくった後も、丁寧に。
Webエンジニア WEB ENGINEER
エンジニアとしての実務経験を活かし、ホームページ・LP・Webアプリの新規制作から、既存サイトやシステムの修正・機能追加まで対応しています。
ご相談の目的、対応範囲、納期、修正条件を整理し、進め方をご提案します。制作のご相談は、各サービスのプロフィールからお寄せください。
公開しているWebアプリ：FilmMatch ↗