Figma → HTML / React
Figmaの意図を読み取り、レスポンシブまで実装
コンポーネント、余白、文字階層を確認し、PC/SPの主要幅で表示を合わせます。実装後はビルドと実機幅の表示を確認します。
- 対応
- Figma / HTML / CSS / React
- 納品
- 実装コード・確認結果・更新手順
- 検証
- ビルド・PC/SP主要幅
TASKAL
ポートフォリオ
Figmaでのワイヤー・PC/SP設計から、WordPressオリジナルテーマ、LP、フォーム実装、公開後の検証まで。匿名実績と公開デモを分け、担当範囲が分かる形でまとめています。
SELECTED WORK
デザインだけ、実装だけで終わらせません
構成整理からFigmaでのPC/SP設計、WordPress実装、フォーム・公開確認まで。実案件と公開デモを分け、担当範囲と検証内容が分かる形で掲載しています。
WordPress custom theme
情報設計からオリジナルテーマ実装まで一貫対応
固定ページ、更新項目、問い合わせ導線を整理し、事業に合わせたテーマへ実装。スマホ表示とフォームを確認して公開します。
- 担当
- 構成・UI設計・テーマ実装
- 成果物
- 固定ページ・フォーム・更新項目
- 実績納期
- 小規模サイト 7日間
制作の進め方
- 01目的・ターゲット・診断導線を整理
- 02ワイヤーとPC/SPデザインを作成
- 03WordPressテーマとフォームを実装
- 04主要幅・フォーム・更新手順を検証
公開許諾のない案件は社名・URLを匿名化し、公開デモは「デモ」と明記しています。実案件とサンプルを混同させません。
DEMONSTRATIONS
公開デモ・画面共有サンプル
以下は実案件ではなく、対応できる構成や機能を確認するためのサンプルです。
多言語サイト導線サンプル
日本語、英語、韓国語、中国語の切り替えと、海外向けページの見せ方を確認できます。
海外のお客様にも案内したい店舗・体験サービス向け
言語切り替え海外向けコピー問い合わせ導線
MultilingualLanding
公開サンプルを見る 地域SEOページ構成サンプル
地域名、業種、サービス内容を組み合わせたエリアページ展開の考え方を一覧で見られます。
地域密着サービスで検索流入を増やしたい事業者向け
地域ページ設計サービス別導線SEO記事構成
Local SEOPortfolio
公開サンプルを見る 出張買取業界向けデモ
買取品目、地域対応、問い合わせ前の不安解消を整理したサービスサイトの例です。
出張買取・査定・訪問サービスを行う事業者向け
品目別ページ査定前FAQ相談フォーム導線
ランディングページContent
公開サンプルを見る 問い合わせ・顧客管理ミニツール
フォーム、顧客一覧、対応ステータス、CSV出力までを小さく始める管理画面です。
問い合わせや対応状況が表・チャットに散らばっているチーム向け
顧客一覧対応ステータスCSV出力
顧客管理CSV非公開
相談時に確認する 仕訳・経費精算ミニアプリ
経費申請、領収書メモ、承認ステータス、会計ソフト向けCSV出力までを小さく始める社内ツールです。
経費精算や仕訳確認が表計算・チャットに散らばっている小規模チーム向け
経費申請承認ステータスCSV出力
経費精算仕訳確認非公開
相談時に確認する 受付・レセプションミニアプリ
来訪者の受付入力、担当者通知、対応ステータス、CSV出力までを小さく始める社内ツールです。
受付、来訪者対応、面談予約、担当者呼び出しを紙やチャットで管理している事業者向け
来訪受付担当者通知対応ステータス
受付アプリレセプション非公開
相談時に確認する 画像・提出物アップロード基盤
画像や添付ファイルをまとめて受け取り、管理画面から確認する業務向けの土台です。
写真、資料、申込情報をフォームで受け取りたい事業者向け
ファイル受付提出物一覧確認ステータス
アップロード提出物管理非公開
相談時に確認する