Shunsuke Kondo
Portfolio Site

背景・課題

受注の約9割が元請け経由だったため、自社への直接問い合わせによる新規案件の獲得を強化したいという課題がありました。
また、人手不足を背景に採用募集も強化したいという要望があり、新規顧客と採用候補者の双方に会社や事業内容を伝えられるコーポレートサイトが必要でした。

アプローチ・施策

◼︎専門性の高い事業内容を、初めて見る人にもわかりやすく

競合サイトを調査し、消防設備に関する専門用語だけでは業務内容を理解しづらいと考えました。そこで、専門性を保ちながらも平易な言葉を使い、どのような設備に対応している会社なのかを理解しやすい情報構成にしました。

◼︎写真を活用し、消防設備を視覚的に伝える

消防設備ごとに写真と短い説明を組み合わせ、設備の役割や点検内容を視覚的に把握できるようにしました。専門知識がないユーザーでも、自分が依頼したい内容と照らし合わせながら読み進められるよう意識しています。

◼︎採用情報へ自然につながる導線を設計

採用強化という課題に対し、各ページの下部に共通の採用CTAを設置しました。会社情報や事業内容を理解した流れのまま採用情報を確認できるよう、サイト全体から採用ページへつながる導線を設計しています。

制作のプロセス

01｜要件整理・競合調査

新規顧客の獲得と採用強化というサイト制作の目的を整理したうえで、同業他社のコーポレートサイトを調査。情報の見せ方や専門用語の使われ方などを確認し、メイソウテクノのサイトで改善すべきポイントを整理しました。

02｜情報設計・コピー

消防設備に詳しくないユーザーでも事業内容を理解できるよう、掲載する情報と伝える順序を整理。専門用語だけに頼らず、初めて見る人にも理解しやすい表現を意識しながら、サイト内のコピーを作成しました。

03｜Webデザイン

消防設備という専門性を伝えながらも、堅くなりすぎない見せ方を意識してデザイン。設備紹介では写真と説明文を組み合わせ、事業内容を視覚的にも理解しやすい構成にしました。また、新規顧客向けの情報と採用情報の双方へアクセスしやすい導線を設計しています。

04｜Studio実装

完成したデザインをもとに、Studioでサイト全体を実装。要件整理から情報設計、コピー、デザイン、実装まで一貫して担当し、公開まで対応しました。

担当領域

• 既存ページの改善提案・UI改修

• 情報設計・情報優先度の整理

• UX・状態設計

• デザインシステムを活用した画面設計

• 必要に応じた新規コンポーネントの設計・追加

• ステージング環境での挙動確認・リリース前検証

• 新規企画における価値仮説・ユーザーストーリー・MVPの検討

• LP・広告・ガイド・ロゴなどのビジュアル制作

代表的な取り組み

01｜飲食店の業務に合わせた予約管理画面のUI設計

既存のネット予約機能は「メニュー×時間」を前提としており、飲食店特有の「席（テーブル）×人数×時間」の予約管理には対応しづらい状態でした。そこで、店舗スタッフが日々の予約状況を把握し、設定から来店処理まで迷わず操作できる管理画面を設計しました。
席の定員・禁煙／喫煙・連結設定などを1画面で管理できるよう整理し、予約枠は一括設定と個別調整の双方に対応。予約カレンダーでは週・月・テーブル軸の表示を用意し、予約状況や未入力項目、リクエスト予約などの状態を視覚的に把握できるよう設計しました。

02｜新サービスの価値を伝える販促LP

エキテン有料店舗会員向けに提供する「公式ホームページ作成オプション」の販促LPを制作しました。サービスの特徴を短時間で理解し、申し込みにつなげることを目的に、情報設計からコピー・デザイン・イラスト制作まで担当しました。
ターゲットとなる美容師・整体師・ハウスクリーニングなどの店舗事業者をイラストで表現し、自分ごととして捉えやすいビジュアルを設計。また、「申し込み → ヒアリング → 公開」の3ステップで利用開始までの流れを整理し、ページ内の複数箇所にCTAを配置しました。

https://www.partner.ekiten.jp/homepage-info

成果

• リリース後3ヶ月で導入100店舗を突破

• リリース後8ヶ月で300店舗に到達

03｜問い合わせ削減を目的とした店舗向けご利用ガイド

エキテン正会員店舗向けに配布する「ご利用ガイド」を制作しました。申し込み後に発生していた問い合わせを減らし、営業担当者の対応負荷を軽減することを目的に、約30ページの情報を整理しました。
PC・スマートフォン・印刷のいずれでも読みやすい文字サイズとレイアウトを設計。また、紙面内にQRコードを配置し、より詳しい情報が必要な場合はWebへスムーズに移動できるよう、紙とWebをつなぐ導線も設けました。

04｜既存プロダクトの継続改善

新規機能だけでなく、既存ページの改善にも継続的に取り組みました。定量・定性の気づきから課題仮説を立て、情報の優先順位やUIを整理し、改善案として提案。既存のデザインシステムに準拠しつつ、必要なコンポーネントがない場合には新たに設計し、システムへ追加しました。
また、新規企画では価値仮説やユーザーストーリーを整理し、MVPを検討したうえで提案するなど、画面制作だけでなく企画段階から関わりました。

Other Works

プロダクトUI以外にも、サービス運用に伴うビジュアル制作を担当しました。

15周年記念ロゴ

エキテン15周年を記念した社内配布用ロゴを制作。「1」と扉で店舗、「5」と吹き出しで口コミというエキテンのサービス要素を表現し、マグカップなどのノベルティにも展開しました。

広告・キャンペーンバナー

無料店舗会員の獲得や資料請求、キャンペーン訴求を目的とした広告バナーを継続的に制作。限られた表示領域でも訴求内容を短時間で理解できるよう、コピー・情報の優先順位・視認性を調整し、複数サイズへ展開しました。

背景・課題

新規サービスの立ち上げにあたり、遺品整理を依頼したいユーザーが、自分に合った業者を探し、比較・検討できるサービス設計が必要でした。
また、サービスの運用が進む中で、画面ごとに色・余白・UIパーツの解釈が揺れ、制作担当者によってデザインの再現性に差が生まれていました。ロゴについても媒体ごとにサイズ・色・余白のばらつきが発生しており、サービス全体を継続的に運用するためのルール整備が課題となっていました。

アプローチ・施策

◼︎地図から直感的に業者を探せる検索体験

TOPページの業者検索には日本地図を採用し、地域から直感的に遺品整理業者を探せるUIを設計しました。検索方法を視覚的に分かりやすくすることで、初めて利用するユーザーでも迷わず業者探しを始められる構成にしています。

◼︎比較に必要な情報を絞り、業者を判断しやすく

業者一覧では、写真・業者からのメッセージ・業者名・評価など、比較時に必要な情報を中心に整理しました。情報量を絞ることで、複数の業者を短時間で比較し、詳細を見る業者を判断しやすい構成にしています。

◼︎ファーストビューで業者の特徴を把握できる構成

業者詳細ページでは、ファーストビューの左側に写真、右側に業者情報を配置。業者からのメッセージ・業者名・評価・特徴などを最初に確認できるよう整理し、「この業者に依頼できそうか」を判断したうえで詳細を読み進められる構成にしました。

◼︎サービスの仕組みを抽象化したロゴ設計

新規サービスの立ち上げに伴い、サービスロゴも制作しました。「故人の遺した品」と「依頼者と業者をつなぐマッチング」というサービスの特徴を整理し、3つの四角形によって依頼者・業者・両者をつなぐサービスを表現。マインドマップやラフスケッチから複数案を検討し、採用案のブラッシュアップまで担当しました。

◼︎属人化を減らすデザインシステムを構築

運用が進む中で発生していた、ページごとの色・余白・UIパーツのばらつきを改善するため、デザインシステムを構築しました。カラー、タイポグラフィ、余白、角丸、シャドウなどのデザイントークンに加え、ボタン・入力フォーム・セレクトボックス・モーダル・テーブルなどのコンポーネントを整理。状態やサイズ、優先度などのバリエーションも定義し、誰が制作しても一定の品質を保ちやすい環境を整えました。

◼︎ロゴを正しく運用するためのガイドラインを整備

リリース後、媒体ごとにロゴのサイズ・色・余白などの使われ方にばらつきが発生していたため、ロゴガイドラインを作成しました。表示色、アイソレーション、背景、最小表示サイズ、使用NG例などを整理し、A4/PDFの資料として関係者に共有。制作担当者ごとの解釈の差を減らし、ロゴを統一して運用できる状態を目指しました。

制作のプロセス

01｜要件整理・競合調査

新規サービスの立ち上げにあたり、必要なページや機能、ユーザーが業者を探して依頼を検討するまでの流れを整理しました。あわせて競合サービスを調査し、検索方法や業者情報の見せ方、比較時に必要な情報などを検討しました。

02｜情報設計・UI/UXデザイン

地域から業者を探す検索画面、業者一覧、業者詳細など、ユーザーが「探す・比較する・判断する」までの導線を設計しました。表示する情報の優先順位を整理し、初めて利用するユーザーでも業者を選びやすいUIを目指しました。

03｜サービスロゴの制作

サービスの特徴や「遺品整理ドットコム」という名称から連想される要素をマインドマップで整理し、ラフスケッチから複数の方向性を検討。

A案
遺品整理に使う「箱」とドメイン名（e-hinseiri.com）の頭文字「e」を組み合わせて抽象化したロゴです。「e」には「e（良い）遺品整理ができますように」という願いも込められています。さらに、ロゴの一部にデジタルを表現する四角ドットを取り入れることで、「世の中のオコマリごとをテクノロジーで解決する」というオコマリ様の理念を視覚的に表現しました。

B案
故人の遺した「品」と、サービスの特徴「マッチング」を抽象的な図形で表現。
3つの連なる四角形は、それぞれ「ご依頼者」「業者」そしてそれらをつなぐ「遺品整理ドットコム」を表しています。
角の丸みと斜め上に向いた形状は「あたたかみのある関係性を築くサービスへ発展するように」という想いを込めました。

C案
安心、遺族の感情や想いを象徴する「ハート」と、厳選した優良業者を掲載していること、業者を探して選ぶという当サイトの特徴を表す「チェックマーク」を組み合わせたロゴです。「安心して業者を選べる場を提供したい」という想いを込め、信頼と温かみのある印象を目指しました。

04｜業者向け管理画面のデザイン

ユーザー向けWebサイトに加え、掲載業者が利用する管理画面のデザインも担当しました。表側だけでなく、サービスを運営するための管理側UIまで含めて制作に携わりました。

05｜デザインシステムの構築

リリース後の運用で発生していたデザインのばらつきや属人化を改善するため、デザイントークン、コンポーネント、テンプレート、運用ルールを整理しました。Figma上でUIを体系化し、Confluenceを用いて社内でも参照できるよう共有しました。

06｜ロゴガイドラインの整備

ロゴ運用時の誤用を防ぐため、既存の使用状況を整理したうえで最低限守るべきルールを定義。表示色、余白、背景、最小サイズ、NG例などをA4/PDF形式のガイドラインにまとめ、関係者へ共有しました。

背景・課題

既存サイトは、TOPページ内に代表挨拶、MVV、アクセス、採用情報など複数の情報が並び、「どのページに何があるのか分かりにくい」という課題がありました。

一方で、キュリーズには標準化支援やICT・情報通信領域への専門性、同じ担当者が継続してクライアントに寄り添う姿勢といった特徴があります。検索をきっかけに標準化支援やITに強い事務所を探して問い合わせにつながるケースもあり、こうした強みをサイト上で分かりやすく伝える必要がありました。

また、採用情報の強化や海外クライアント向けの情報整備もリニューアルの目的となっており、新規クライアント・採用候補者・海外クライアントそれぞれに必要な情報を整理しながら、主となる導線を分かりやすくすることが課題でした。

アプローチ・施策

◼︎新規相談を主軸に、TOPと下層ページの役割を整理

主なクライアントが企業の知財部であることを踏まえ、新規相談につながる情報をサイトの中心に置きました。
TOPページですべてを説明するのではなく、事務所紹介、弁理士・技術者紹介、各サービス、料金表、採用情報などに役割を分け、ユーザーが知りたい内容に応じて下層ページへ進める構成に整理。採用や海外向けの情報は必要な導線を確保しつつ、新規クライアント向けの情報と同列に並びすぎないようにしました。

◼︎強みを伝えながら、対応範囲を狭く見せない設計に

ヒアリングでは、標準化支援やICT・情報通信領域への専門性がキュリーズの特徴として挙げられた一方、「専門性を強く出すと、それ以外の分野には対応できないように見える」という懸念もありました。
そこで、標準化支援やICT領域は特徴としてしっかり見せながら、その他の技術分野にも対応していることが伝わるよう、サービスや専門領域の見せ方を整理しました。
弁理士・技術者紹介では、職種と専門分野から絞り込めるようにし、相談内容に合う担当者を探しやすくしました。

◼︎外国案件の増加に合わせ、必要なページを多言語化

案件要件として、英語対応は「事務所紹介」「弁理士／技術者紹介」「料金表」の3ページを対象に制作しました。
制作途中で中国語対応も追加となったため、英語版と同様の設計を展開しながら、言語ごとの文字量や改行に合わせてレイアウトを調整。日本語版と内容が異なる箇所についても個別に対応しました。
あわせて、ナビゲーションやページタイトル、検索結果の表記まで確認し、各言語で表示が破綻しないよう調整しています。

◼︎更新方法まで考え、Studio上で運用しやすい構成へ

公開後の更新も考慮し、情報の性質に合わせてStudioのCMSとデザインエディタを使い分けました。
たとえば料金表は、更新時の操作や日本語・外国語ページで掲載内容が異なることを踏まえ、CMS化せずデザインエディタから編集できる形を採用。
弁理士・技術者紹介など、継続して情報を追加・更新するページについては、更新しやすい構造を意識して実装しました。

制作のプロセス

01｜要件整理・キックオフ

クライアントとのキックオフを進行し、リニューアルの目的、ターゲット、現行サイトの課題、強みとして打ち出したい領域、採用・外国語対応、更新方法などを確認しました。
制作前に仕様やスケジュールもすり合わせ、後の設計・デザインで判断がぶれないよう整理しました。

02｜情報設計・ワイヤーフレーム

ヒアリング内容をもとに、ユーザーがサイトを訪れてから必要な情報を確認する流れと、各ページの役割を整理しました。
現行サイトの情報をそのまま配置し直すのではなく、TOPに残す情報と下層ページへ分ける情報を整理しながら、サイト全体の構成を作成しました。

03｜UI・ビジュアルデザイン

コーポレートカラーを軸に、士業としての信頼感を保ちながら、情報の区切りや見出しのメリハリが分かりやすいデザインを検討しました。
専門性の高い内容でも読み進めやすくなるよう、余白、写真、図版、カード、見出しなどの情報量をページごとに調整しました。

04｜Studio実装・CMS構築

確定したデザインをもとにStudioで実装し、お知らせや弁理士・技術者情報など、更新が必要な領域にCMSを設定しました。
職種・専門分野の絞り込み、ヘッダーのスクロール時の挙動、モバイルメニュー、文章の折り返し、ボタン幅、余白、アニメーションなども実機表示を確認しながら調整しました。

05｜多言語・更新機能の対応

日本語ページをもとに、事務所紹介・弁理士／技術者紹介・料金表を中心とした外国語ページを制作しました。
また、ニュースやメンバー情報など更新が発生するコンテンツについては、公開後の運用を考慮してCMSや編集方法を整理しました。

06｜QA・公開・納品

実装後は各ページの表示、レスポンシブ、リンク、文言、画像、alt、アニメーションなどを確認し、クライアントからのフィードバックを反映しました。
最終調整後はサイトの公開作業を行い、クライアントの確認・納品対応まで進行しました。