LP / HTML / CSS / JavaScript
架空訪問サービス「よりそい便」
サービス内容、対象外、料金、利用の流れを1ページで理解できる構成。利用時間と距離から料金目安を計算する機能を、外部送信なしで実装しました。
- スマートフォン対応
- 料金計算7ケースを自動検査
- 外部素材・API・Cookie・フォーム送信なし
ABOUT
伝える内容と、
使う場面から設計します。
見栄えだけでなく、「誰が何を理解し、次に何をするか」を先に整理します。スマートフォン表示、入力エラー、更新方法、個人情報を扱わない構成まで、納品前に確認します。
SELECTED WORK
自主制作
WEB PARTS / DATA DELIVERY
料金かんたん計算パーツ
プラン、数量、追加オプションから合計と内訳を表示する静的Webパーツ。料金表をもとに設定し、導入・更新手順と検査結果を添えてファイル納品します。
- 1～6プラン、0～8追加オプション
- 設定画面から料金データを更新
- 外部通信・Cookie・顧客情報保存なし
HTML / CSS / JAVASCRIPT REPAIR
静的Webページの表示崩れ修正
スマートフォンでのはみ出しや、既存ボタン・開閉機能の不具合を、受領した静的ファイル上で修正します。顧客サイトへログインせず、修正済みファイル、変更点、検査結果を納品します。
- 静的HTML 1ページ・関連する不具合1件
- PC幅・スマートフォン幅を確認
- 管理画面・サーバーへのログインなし
INFORMATION DESIGN
事業進捗ダッシュボード
複数案件の状態、次の判断、指標を一画面に整理したHTML表示。情報量が多い場合の優先順位と視線誘導を試作しました。
INTERACTIVE UI
質問・結果表示プロトタイプ
質問への回答、進捗表示、結果画面までをブラウザ内で完結させた試作。外部API・ログイン・回答保存なしで設計しました。
PROCESS
文章で確認できる進め方
- 01 要件整理目的、対象者、掲載内容、必要な行動を確認
- 02 範囲確定納品物、対象外、修正、検収条件を文章化
- 03 制作・検査表示、操作、境界値、秘密情報、素材権利を確認
- 04 納品ファイル、README、検収結果をまとめて引渡し
SCOPE
初回の対応範囲
対応候補
- 静的な1ページHTML/CSS
- スマートフォン対応
- 料金目安・絞り込み等の小機能
- README・検収チェック
対応外
- 電話・ビデオ会議
- 決済・予約・会員管理
- サーバー・顧客アカウント操作
- 売上・検索順位等の成果保証
CONTACT
ご相談はココナラから。
料金シミュレーターの設定納品と、静的HTML・CSS・JavaScriptの表示崩れ修正を受付中です。購入前に内容と対応範囲を確認します。
料金シミュレーター 表示崩れ修正