2007–2012

印刷会社・デザイン事務所

制作進行、DTP 紙からWebへ

2013–2016

フレックスエージェント

Web制作 受託制作、システムUI

2017–2018

プラットイン

採用サイト制作 取材・撮影・コピー

2018.08–2021.11

Acall

SaaSインハウス 主にWebを担当

2021.12–2022.08

2nd Community

フロントエンド 業務システム

2022.09–

TYL

事業会社 複数事業の制作

相手に合わせて描き分ける

業界や立場の違う相手に向けて、 色・写真・言葉のトーンを変えて届ける。 登録フォームLPは6サイトで40本以上。

全体像を整理して伝える

機能が増えて複雑になったサービスを、誰に何を伝えるか決めてから構成に落とす。

デザインを実装までつなぐ

実装とCMSまで理解しているので、運用しやすい形まで含めて設計できる。

アニマルジョブフェスタ

動物病院が主体。獣医師・動物看護師向け／アニマルジョブに合わせた青系

フレッシュジョブフェスタ

酪農・農業などに関わる人向け／フレッシュジョブに合わせた緑系

たべジョブ合同企業説明会

飲食関係で働く人向け／楽しそうな雰囲気の黄緑系

• トップに開催日程を置き、各会場の詳細へ進める

• イベントの内容と、参加するメリットの説明

• 参加者の声、出展を検討する企業向けの導線

ねらい

骨組みを共通にすることで、開催のたびに短い期間で展開できる。相手に合わせて変えるのは、色・写真・イラスト・言葉づかい。

ターゲットと、親サービスに合わせた色の設計

対象

3シリーズのWebサイト（アニマルジョブフェスタ／フレッシュジョブフェスタ／たべジョブ合同企業説明会）

体制

下層ページなどは、そのときに手が空いているメンバーが対応

自分の担当

トップページ、メインビジュアル、共通のテンプレート

課題

開催のたびに一から作っていて、デザインに時間がかかっていた。担当者ごとにテイストも変わり、シリーズとしてのブランドの統一感がなかった

工夫

基本レイアウトを共通にし、色・写真・イラスト・コピー・日程だけを差し替えればよいテンプレートにした。見本のページも作り、ほかのメンバーが同じ型で下層ページを作れるようにした

結果

1回の開催ページのデザインにかかる時間が、丸1日から約3時間に短縮。開催のたびに必要な作業が差し替えだけになった

そのまま使う　基本レイアウト

シリーズ・開催回ごとに差し替える

色の例

アニマルジョブフェスタ（藤沢 2026年6月21日）

青系。求人サイト「アニマルジョブ」の紹介、4大オススメポイント、会場の廻りかた

フレッシュジョブフェスタ（群馬 2026年8月30日）

緑系。同じ構成のまま、色・イラスト・コピー・日程を差し替え

会場案内図（アニマルジョブフェスタ 札幌）

会場案内図（フレッシュジョブフェスタ 浜松）

告知チラシ（A4）

フレッシュジョブフェスタ 東京

アニマルジョブ学生版 Vol.25（表紙・裏表紙）

学生向けフリーペーパー。裏表紙はフェスタの告知と開催予定

• チラシは写真を大きく使い、開催日と会場をひと目でわかるように

• 学生版の裏表紙は号ごとに同じ型を使い、開催予定と写真を差し替え

• Web・紙・会場で、ロゴと色を統一

色の決め方

飲食に関わるサービスなので、黄色をベースにしました。ほかの4サイトと同じ骨組みの上で、色と写真で食品・飲食の仕事らしさを出しています。

横展開した主なセクション・機能

結果

2サイト目以降は、約3分の1の労力

最初の1サイトは手間がかかりますが、同じ構成を使うことで残りのサイトは約3分の1の労力で作れるようになりました。

役割

マーケティング担当が立てた訴求の仮説を、画面の見せ方に落とし込む。検証結果の分析はマーケティング担当が担当。

担当したLP

栄養士の求人（既存のイラストを組み合わせて構成）／「スキルアップできる環境」を訴求するLP

見せ方の工夫

・選択肢のアイコンの有無、写真とイラストの使い分け ・縦並び／横並びなどの項目のレイアウト ・スマートフォンで質問と選択肢が1画面に収まる構成 ・チェックボタンからプルダウンへの入力方式の見直し

進め方

マーケティング担当の訴求に合わせて、メイン画像の見出しと選択肢のアイコンを作り分け。共通の枠組みを作り、訴求ごとに画像と見出しを差し替えて展開。

一般の獣医師

競馬

研究

水族館

動物園

女性獣医師

役割

マーケティング担当の「掲載している職種ごとのLPにしたい」という依頼を受けて、デザインを担当。

工夫

質問と選択肢は共通のまま、職種ごとに背景色・上部のキャラクター・バッジの配色を変え、その職種に関心のある人に合った世界観にした。

シンプル版

コンセプトは持たせず、シンプルにまとめたLP。

エグゼクティブ向け

暗い色調で、高級感のある雰囲気に。

求人媒体を見せる

求人媒体の画面を少し見せて、興味を引く構成。

役割

ターゲットや狙いの違うLPを、デザイナーとして制作。

ペットナースエージェント

動物看護師向け。職種の選択、STEP形式、高収入の訴求など、見せ方を変えた複数パターン。

全15パターン

アニマルジョブ

ペット業界の求人サイト。入力フォーム型、職種選択型、色やイラストを変えたパターンなど。

全5パターン

トリマーエージェント

トリマー向け。縦長のフォーム、1問ずつ答える形式など、見せ方の違うパターン。

全5パターン

ファームエージェント

農業・酪農・牧場の求人サイト。サイト型や、STEPで1問ずつ答える形式など。

全6パターン

会社

Acall株式会社（SaaSスタートアップ）／インハウス

時期

2021年（在籍 2018年8月〜2021年11月）

担当

ディレクション、デザイン、フロントエンド実装、CMS設計、アクセス解析、SEO

体制

制作2人。自分は主にWeb、もう1人はグラフィックを担当。動画制作は外注

技術

Nuxt.js / microCMS / AWS Amplify / Vuetify

• プロダクトの理解、新機能やイベントの告知

• 資料請求・導入の問い合わせ、アップセル

決めたこと

まず全体の世界観を見せ、そこから個別の機能へ案内する。

当時のトップページ（インターネットアーカイブより）

情報システム部の主任・35歳

方針を、画面でこう形にした

ビル・不動産／エンタープライズ／シェアオフィス／スタートアップ

ここから決めた方針

「社内で説明できる材料」を、すぐ持ち帰れるサイトに。

ペルソナの作り方

営業・カスタマーサポートへのヒアリングをもとに作成。

STEP 01

ファーストビュー（動画）と特徴

世界観をつかむ

STEP 02

機能一覧

課題に合うか確かめる

STEP 03

導入事例

導入後をイメージする

STEP 04

資料請求・問い合わせ

次の行動へ

工夫したところ

まず全体像、次に個別の機能。プロダクトが広がっても、同じ骨組みで説明を足せる構成にしました。

当時のトップページ（ファーストビュー付近）

CONCEPT

やさしく、かしこく、うつくしく

KEYWORD

はたらきやすさ／つながる

TYPOGRAPHY

UD新ゴ

• トンマナとスタイルガイドをプロダクトと共有

• プロダクトと同じVuetifyで、UIの部品をそろえた

色と書体の決め方

ベースの青はブランドカラーを継承。ボタン色はオレンジ・緑・黄・赤系・青系でABテストし、クリック率とCV率で決定。書体はコンセプトに合うUD新ゴ。

動画の外注

「新しい働き方」をテーマに、外部へ制作を依頼。

公開後の変化

共催セミナーの告知画像

• 表計算ソフトで議事録を残すと、ファイルの管理が煩雑になる

• 参加できなかった会議の内容を知りたい

• 過去の会議の内容を後から探したい

設計のポイント

プロジェクト → 会議 → アジェンダという入れ子で整理し、担当（ファシリテーター、議事録係、タイムキーパー）と資料を会議の前に決められるようにした。