本文へ移動
← 制作実績・開発事例の一覧へ
PROJECT / DESIGN & DEVELOPMENT

LINE登録型LPデモ|キャリア相談サービス「TUGI」

架空のキャリア相談サービスを題材に、写真・文章・デザインから、LINE登録を想定した3段階の相談体験まで制作した自主制作LP。PC・スマートフォンに対応。実際の登録・送信は行いません。

事例の区分
自主制作サンプル
制作年月
画像の種類
掲載許可をいただいた制作画面

架空のキャリア相談サービス「TUGI(ツギ)」を想定して制作した、LINE登録型LPの自主制作デモです。「転職するかは、話してからでいい。」を軸に、相談前の迷いから次の行動へ自然につながるページを設計しました。

実際の相談窓口ではありません。デモ内では個人情報を入力せず、LINEの友だち追加やメッセージ送信も行いません。採用支援業務を受託・納品した実績とは区別しています。

目次

写真と文章で、相談の入口をつくる

大きな日本語の見出し、朝の光が差す写真、深緑と朱色を組み合わせました。サービスの説明を並べるだけでなく、「今のままでいいのかな」「自分の強みがわからない」といった、相談する前の気持ちから読める構成です。口コミや実績数値に頼らず、相談の流れそのものを確かめられるようにしています。

ボタンの先まで試せる相談体験

体験ボタンから、気になるテーマを選ぶ、会話例を見る、振り返りのヒントを読む、という流れを試せます。テーマは3種類。選び直しや戻る操作、未選択時の案内、キーボード操作にも対応しました。会話はあらかじめ用意したサンプルで、個別の相談やAIチャットではありません。

担当した範囲

  • 架空サービスの企画・情報設計・文章制作
  • 完成イメージ画像の制作と、デザインの再現
  • 専用のAI生成写真・画像の制作と選定
  • HTML・CSS・JavaScriptによる実装
  • PC・スマートフォン表示、主要操作、入力案内の検証
  • WordPressへの組み込みと掲載用の整理

LINEへの実接続、公式アカウントの作成、求人管理、予約受付、顧客情報の保存は含めていません。実際の案件では、依頼者が管理するアカウント、原稿、受付方法などを確認したうえで、必要な連携と運用を別途設計します。

表示と操作で大切にしたこと

スマートフォンでは文字と写真を縦に整理し、画面下からも体験を開けるようにしました。FAQは開閉でき、体験画面は閉じると選択がリセットされます。個人情報の自由入力欄は設けず、選択内容を外部へ送信・保存しない構成です。サイト全体のアクセスログ等とは区別しています。

制作年月:2026年10月。ページ全体の実装画面を見る

画像内の人物はAI生成で、実在の利用者や担当者を表すものではありません。TUGIは自主制作のための架空のサービス名です。

WordPressで似た悩みがありますか?

よくある不具合・機能追加・プラグインの限界を相談室で探せます。自分の環境だけで起きる場合は個別相談も可能です。

相談室を見る

制作年月とポートフォリオ登録日は、確認できた原記録に基づいて記載しています。この紹介ページの公開日とは異なります。

VISUAL ARCHIVE

掲載許可をいただいた制作画面

元サイズで見る ↗
自主制作LP「TUGI」の実装画面。写真と明朝体、深緑と朱色で相談前の迷いからデモ体験までをつなぐデザイン。
掲載許可をいただいた制作画面画像を拡大して見る ↗

次の制作・改善を、
具体的に相談する。

必要な画面、今の困りごと、更新したい内容から整理します。

制作の相談へ ほかの事例を見る
お問い合わせフォームへ