プロジェクト概要
SNSのハッシュタグ収集・活用サービス「Tagtoru（タグトル）」の新規ランディングページ（LP）制作プロジェクトです。2017年頃の同サービスは開発・運営企業にとって最も主要な主軸事業であり、その「顔」となる重要なLPにおいて、ワイヤーフレーム（WF）からのビジュアルデザインと、HTML/CSSによるフロントエンド実装（コーディング）を担当しました。豊富な機能や導入事例などの情報を整理し、見やすく信頼感のあるページへと仕上げています。
基本情報
サイト名：TAGTORU（タグトル）
URL：ページ全体のスクリーンショット（※現在はリニューアルによりページが変更されています）
担当領域
Webデザイナー / フロントエンドエンジニア
（提供WFを基にしたビジュアルデザイン / HTML・CSSコーディング）
プロジェクトの目的と課題
-
主力事業の顔としての信頼感構築: 企業の最重要サービスを担うLPとして、SNSツールとしての先進的でポップな印象と、法人向け（BtoB）ツールとしてのカッチリとした信頼感をデザイン上で同居させること。
-
無形サービス（ITツール）の視覚化: ワイヤーフレームで指定された構成をもとに、ハッシュタグ収集という形のないサービスの仕組みやメリットを、直感的に理解できるビジュアルへと落とし込むこと。
-
情報量が多い縦長ページの整理: 多数の機能紹介、導入事例、よくある質問などを、ユーザーがストレスなく読み進められるレイアウトとUIで実装すること。
施策とこだわったポイント
1. サービスの特性を表現するデザイン設計
SNS上のユーザーや投稿を収集するという特性を表現するため、多様なアバターのイラストやネットワークを連想させるラインを用いてキービジュアルを作成しました。SNSを連想させる鮮やかなグラデーションカラーをアクセントにしつつ、背景にダークブラウンやホワイトを敷くことで、主力事業にふさわしい法人向けツールとしての落ち着きと信頼感を担保しています。
2. 情報のメリハリをつけるレイアウト
提供されたワイヤーフレームの意図を汲み取り、コンテンツごとに背景色を切り替えることで、縦長のページでもユーザーが「今どの情報を見ているか」を直感的に把握できるように工夫しました。機能紹介のブロックではアイコンを効果的に用い、テキストを読まなくても概要が伝わるように視認性を高めています。
3. 情報をスッキリ見せるUIの実装（コーディング）
豊富な導入事例を紹介するセクションではスライダー（カルーセル）を実装し、省スペースで多くの情報を見せられるようにしました。また、ページ下部の「よくあるご質問」には開閉式のアコーディオンUIを採用し、必要な情報だけを引き出せるようにするなど、コーディング段階でもユーザビリティを意識した実装を行っています。
成果・評価
ビジネスの主軸を担うプロダクトの魅力を引き出すデザイン力
ワイヤーフレームという骨組みの状態から、企業の最重要サービスの特性を的確に捉えたビジュアルコンセプトを立ち上げ、デザインからコーディングまでを一貫して完遂しました。ITツール・SaaS系の商材において、複雑な情報を整理し、ターゲット層の関心と信頼を惹きつける見栄えの良いLPへと形にする実務対応力を示す実績です。
