架空のキャリア相談サービス「TUGI(ツギ)」を想定して制作した、LINE登録型LPの自主制作デモです。「転職するかは、話してからでいい。」を軸に、相談前の迷いから次の行動へ自然につながるページを設計しました。
写真と文章で、相談の入口をつくる
大きな日本語の見出し、朝の光が差す写真、深緑と朱色を組み合わせました。サービスの説明を並べるだけでなく、「今のままでいいのかな」「自分の強みがわからない」といった、相談する前の気持ちから読める構成です。口コミや実績数値に頼らず、相談の流れそのものを確かめられるようにしています。
ボタンの先まで試せる相談体験
体験ボタンから、気になるテーマを選ぶ、会話例を見る、振り返りのヒントを読む、という流れを試せます。テーマは3種類。選び直しや戻る操作、未選択時の案内、キーボード操作にも対応しました。会話はあらかじめ用意したサンプルで、個別の相談やAIチャットではありません。
担当した範囲
- 架空サービスの企画・情報設計・文章制作
- 完成イメージ画像の制作と、デザインの再現
- 専用のAI生成写真・画像の制作と選定
- HTML・CSS・JavaScriptによる実装
- PC・スマートフォン表示、主要操作、入力案内の検証
- WordPressへの組み込みと掲載用の整理
LINEへの実接続、公式アカウントの作成、求人管理、予約受付、顧客情報の保存は含めていません。実際の案件では、依頼者が管理するアカウント、原稿、受付方法などを確認したうえで、必要な連携と運用を別途設計します。
表示と操作で大切にしたこと
スマートフォンでは文字と写真を縦に整理し、画面下からも体験を開けるようにしました。FAQは開閉でき、体験画面は閉じると選択がリセットされます。個人情報の自由入力欄は設けず、選択内容を外部へ送信・保存しない構成です。サイト全体のアクセスログ等とは区別しています。
制作年月:2026年10月。ページ全体の実装画面を見る
画像内の人物はAI生成で、実在の利用者や担当者を表すものではありません。TUGIは自主制作のための架空のサービス名です。
よくある不具合・機能追加・プラグインの限界を相談室で探せます。自分の環境だけで起きる場合は個別相談も可能です。