TSUCHIYA SATOMI

PORTFOLIO

Mirainoatorie Logo

略歴と自己紹介

1973年生まれ。2001年頃よりフリーランスとして約8年、また大小さまざまな企業において約11年、ウェブデザイナーとしてキャリアを積んでまいりました。
2018年に山形へUターンし、現在は山形を拠点にリモートワークを中心とした活動を再開。
仕事の合間には農業にも携わりつつ、地域に根ざした働き方を続けています。

現在は、UI/UXデザインやマーケティング、さらにアプリ開発などの領域も業務フローへ取り入れられるよう、継続して学習・実践を重ねています。

クライアント様の課題に真摯に向き合い、丁寧なヒアリングと積極的なご提案を通じて、「目的を達成するデザイン」の提供を心掛けています。

以下のようなデザインができます

情報設計(サイト構造の整理、ワイヤーフレーム制作)から、ロゴなどのVIも含めたデザインのご提案、バナーなどパーツ素材やサイトコーディング用のデザインデータ制作まで対応します。

クライアント様から直接ヒヤリングし、曖昧で抽象的な価値・思いを、適切な形にして提案します。また、その際のデザイン技術とコミュニケーション能力には定評があります。

コーディングやWordpressなどのCMS構築も行うので、システムの構造を理解し、要件を考慮しながら設計、デザインし、エンジニアへの適切なガイドを作ることができます。

SKILLSスキル

Thumbnail
Figma
サイト・ロゴ・バナー作成などデザイン全般
年以上使用
Thumbnail
Photoshop
写真画像などの加工に使用
:5年以上
Thumbnail
Illustrator
単ページの印刷物や細かなロゴ作成などに使用
:5年以上使用
Thumbnail
Adobe XD
サイトデザインなど
:1年以上使用
Thumbnail
Visual Studio Code
コーディングエディターとして
:5年以上使用
Thumbnail
Wordpress
既存テーマカスタム、デザイン〜htmlからのオリジナルテーマ作成など。カスタムフィールド等の設計は初歩程度(複雑すぎないものを作ることはできる程度)。
:5年以上使用
HTML
:5年以上使用
CSS
:5年以上使用
SCSS
:4年以上使用
PHP
変数やセッション、ENT_QUOTES、XXS、CFRF対策、header関数などを使用したメールフォームの構築、Wordpressのテンプレート作成時の条件分岐やループなど。:
5年以上使用
Javascript,JQuery
ハンバーガーメニューやプルダウンメニュー、アニメーションなど、サイト制作時に必要な一般的なUI機能等に使用
:5年以上使用

WORKS実績

旅行関連会社様向け 年末年始広告バナー デザイン案

年末年始広告バナー
【役割】
デザイナー
【ツール】
Figma
【工数】
計20時間程
【制作時期】
2025年11月 - 2025年11月

自社サイトの年末年始特集用バナーとして、写真の魅力を最大限引き立てつつ、 タイトルの視認性と季節感のある華やかさを両立するデザインを担当。 写真を主役としたシンプルなレイアウトを軸に、最小限の装飾とコントラスト調整で可読性を確保。

旅行関連会社様向け Instagram投稿テンプレート デザイン案

Instagram投稿テンプレート
【役割】
デザイナー
【ツール】
Figma
【工数】
計20時間程
【制作時期】
2025年6月 - 2025年10月

旅行会社のInstagram・TikTok投稿用テンプレートをデザイン。
ツアー紹介投稿を量産できるよう、写真とテキストを差し替えるだけで使える構造に設計。
プラットフォーム特性を踏まえ、視認性を重視したシンプルなレイアウトに、世界観を損なわない程度の装飾を加えてブランドらしさを演出。
Figmaを使い慣れない運用チームが継続的に更新しやすく迷わないテンプレートとして、シンプルで制限的な構造で作成

旅行関連会社様向け 環境イベントチラシデザイン

モック画像
【役割】
デザイナー
【ツール】
Figma、Adobe Illustrator
【工数】
3日程
【制作時期】
2025年11月 - 2025年11月

旅行関連会社の環境イベント向けチラシをデザイン。
アピールポイントである「登山初心者には少しハードルのある、高尾山の奥まで行ける体験」を直感的に伝えるため、イラスト地図の一部を使って到達ポイントを視覚化するディレクションを実施。
AIのディープリサーチにていくつか高尾山ルートのマップを作り、それを参考にイラストを作成
イベントの魅力がひと目で伝わる構成と分かりやすい情報整理を行い、短期間で完成度の高いチラシに仕上げた。

IT企業様向け  サイトデザイン

モック画像
【役割】
デザイナー
【ツール】
figma
【工数】
デザイン初稿:PC版のみ10hほど、SP版のみ5hほど
【制作時期】
2023年5月 - 2023年5月

【役割】

チーム内デザイナーとして、要件の抽出 → 情報設計(ワイヤーフレーム)→ ビジュアルデザイン までを一貫して担当。 クライアントヒアリング内容をもとに、課題の整理と、ターゲットである若手ITエンジニアに響くトーン&マナーの方向性を主導して策定した。

【課題】

既存サイトのリニューアルデザイン。ITエンジニアのリクルーティングに力を入れたい。元々持つ親しみやすさやわかりやすさを損なうことなく、若いターゲット層にアピールできるサイトにしたい。

【目指すゴール・仮説】

サイトの訪問者が迷わずに情報を見つけやすいUIを構築すること。洗練されたモダンで魅力的なデザインを取り入れ、若いITエンジニア層にアピールすること。複雑な情報を視覚的に整理し、目的に沿った情報の理解・活用をサポートするデザイン。

【結果・成果】

既存サイトの情報を階層的に整理し、ターゲットに必要な情報を明確に伝える構造整理から始め、特にリクルーティングのプロセスがスムーズに進むよう、無駄な情報を削いでシンプルで直感的なデザインにリニューアル。

文字の読みやすいフォントやカラー、文章の明確さなどに合わせ、視覚的にも文章を補佐するイメージ画像やインタビュー記事を提案として盛り込むなど、キャッチコピー「ITをわかりやすく」を体現するUIにも力を入れた。

外資系輸入販売業者様向け LPデザイン

モック画像
【役割】
デザイナー
【ツール】
figma、Photosop
【工数】
デザイン初稿:PC版のみ13hほど、SP版4hほど
【制作時期】
2023年8月 - 2023年11月

【役割】

チーム内デザイナーとして、ヒアリング内容の整理 → コンセプト設計 → 情報設計(ワイヤーフレーム)→ LPデザイン作成 までを一貫して担当。
クライアントが求める「大人向けの可愛さ」「遊び心のある企画ページ感」という抽象的な方向性を、ターゲット層(20〜30代女性)に適したトーン&マナーとして具体化し、デザインコンセプトの確立を主導した。

【課題】

輸入販売事業を行う外資系の会社で、ぬいぐるみを日本に向けて販売するにあたり、Amazonサイトへ遷移させる為のLP作成。商品の特徴や魅力を伝えるデザインを求められた。

【目指すゴール・仮説】

カチカチの商品紹介でなく、企画ページのような遊びの要素がデザインのどこかに欲しい。
可愛らしさや遊び心は欲しいが、子ども向けにはしないでほしい。
ぬいぐるみは結婚式などにも使われており、大人の女性や女性向けのプレゼントを意識した商品としてのデザインしたい。

20〜30代女性のリバイバルトレンドを意識した淡くカラフルなデザインと、黒をキーカラーで引き締め甘過ぎない大人向けの可愛さをデザインとして押し出し、ターゲット層にリーチすると仮定。

【結果・成果】

ぬいぐるみの会話風の希望や、参考サイトにあった企画ページ風の希望を取り入れ、デザイン初稿提出時は社内で好評だったものの、Amazonサイトとの間を何度も回遊するには、情報過多で賑やかすぎるとの意見が出て、遊びを適度に残しつつ背景要素などを極力抑えてシンプルなデザインに落ち着いた。

NPO団体様向け LPデザイン

モック画像
【役割】
デザイナー
【ツール】
figma
【工数】
デザイン初稿:PC版のみ8hほど、SP版4hほど
【制作時期】
2023年7月 - 2023年11月

【役割】

チーム内デザイナーとして、ヒアリング内容の理解 → 既存課題の抽出 → コンテンツ構成案の策定 → ワイヤーフレーム → ビジュアルデザインまでを一貫して担当。
既存サイトの専門性ゆえの「分かりにくさ」と、クライアントが求める「一般向けの共感」を両立するため、 団体が持つ写真・言葉の“資産”を整理し直し、ストーリーとして届けるための構成とトーン&マナーの方向性を主導して提案した。

【課題】

代表のメディア露出を予定しており、アクセスが見込まれるので、それに合わせて新規で活動紹介のLPを作成。
既存サイトは専門的な議論が中心で、新しく見る人には内容がわかりにくい為、一般向けに団体を端的にわかりやすく紹介しつつ新しい会員獲得を目指したい。
一度提出済みのデザインは、イメージ主体の写真やSDGsなどのコピーの言葉の扱いが、一般向けとはいえ「テンプレートっぽくて印象が薄っぺらく、伝わりにくい」。
実際にやっていることの深さやすごさを伝え、もう少し共感性に訴える内容にしたい。

【目指すゴール・仮説】

既存の言葉や表現したい写真などの団体側で持つ資産で、コンテンツ内容のヒントを考えていただき、深い内容が伝わるようにする。
ボリュームが重めになる歴史や団体説明を整理し、わかりやすく伝える。
デザイン面では写真や内容が深刻なものが多いので、既存サイトの固め重めの印象とは別に、若い人達にむけて、カジュアルにストレートに伝わる新しい印象のデザインにする。

【結果・成果】

団体が選んだ写真と言葉によるシナリオを、前半で少しリッチに表現し引き込んだ上で、後半で団体情報をコンテンツとして見せていく2部の形にデザイン改変。
前半は想定していたKVのスライダーなどでは収まりきらない写真や言葉のボリュームの為、パララックス風のコンテンツの見せ方や写真の切り替わりを、スクロールによりユーザーがコントロール可能な形で見せていくことで、長さを感じない形にした。
既存サイトの濃い緑はポイントとして使い、淡く爽やかな色やキレイめなグラデーションなどを多めに取り入れることにより、新しく美しい印象のデザインが団体に喜んでいただけた。

防災グッズ ブランドサイトデザイン

モック画像
【役割】
デザイナー
【ツール】
figma
【工数】
デザイン初稿:PC版のみ14hほど、SP版6hほど
【制作時期】
2023年4月 - 2023年8月

【役割】

チーム内デザイナーとして、要件整理 → 商品理解 → コンテンツ構成案の策定 → ワイヤーフレーム → ビジュアルデザイン → SNS連携を想定した導線設計までを一貫して担当。
「家族 × 防災 × 普段使い」というテーマを、視覚的・体験的にどうサイトへ落とし込むかを主導し、ブランドにとって初めてのオウンドサイト構築をゼロからデザインした。

【課題】

「普段使いできる防災グッズ」を特徴とした防災グッズを販売にあたってのサイトを0から作成。販売は問い合わせによるので、ECサイトでなく、問い合わせ先をコンバージョンとした商品紹介サイトでよい。家庭向けで、家族をテーマにしたサイト構成にしたい。

【目指すゴール・仮説】

サイトからSNSや動画へ誘導し、SNSでの口コミや拡散により商品認知や新規顧客を目指す。
商品の情報訴求と共に、防災情報やインフォメーションの充実と家族をテーマにしたコンテンツにより、ユーザーがサイトに長く滞在することを目指す。

【結果・成果】

ブランドや同じような商品のアピールポイントを3つに絞りわかりやすく、家族で使うイメージがわいてくるよう「普段使い」の使い方やイメージを動画やSNSを交え紹介。全ページの最後にCVに繋がるよう構成した。

デザインは鮮やかで温かみのある色彩や画像で家庭向けの雰囲気と、防災を日常中の非日常として家族でアウトドア感覚で楽しんでもらえるよう、ポップで楽しげな雰囲気を目指した。これからの認知が必要なブランド・サイトなので、ブランドのアイデンティティが記憶に残るよう、ロゴの形を強調しデザインに取り入れた。

地元密着特定学生アパート専用 不動産会社様 サイトデザイン

モック画像
【役割】
デザイナー、サイト制作全般、更新補助(デザイン、wordpress既存テーマのカスタムコーディング、googleビジネス登録管理、制作中のサポートなど)
【ツール】
Photosop、Dreamweaver、Wordpress
【工数】
制作会社にて週2〜3日通勤で3ヵ月ほど制作
【制作時期】
2019年8月-2019年11月

【役割】

制作兼更新までのクライアント担当として、
ヒアリング → 要件整理 → 情報設計(ワイヤーフレーム)→ デザイン → WordPress実装 → 管理者向け操作性の最適化までを一貫して担当。
「学生 × 保護者 × 地元不動産 × 更新に慣れていない管理者」という複数の視点から課題を抽出し、“安心して利用できるサイト”と“運用が負担にならない仕組み”を両立する構成・UI設計を主導した。

【課題】

山形の特定の大学学部生のみを扱う学生アパート専門、地元密着の不動産サイトをリニューアル

【目指すゴール・仮説】

今から社会に出る若い学生と両親が期待と不安を持って見る地元不動産サイトとして、実直な誠実さと、親しみやすさや温かさを感じるデザインで安心して使ってもらう。
部屋や地元の特徴を直感的に理解しやすく、選びやすいUIを重視。
あまりPCに明るくない管理者に向けて分かりやすく使いやすいUIで、管理を簡単に。

【結果・成果】

お部屋の紹介だけでなく、ターゲットに特化したポイントや選びやすいUIや、申込みフローなどを載せ、使いやすくした。
また、コンテンツとして先輩のインタビュー動画などを撮り、新天地での生活への不安を払拭し、楽しい期待を膨らませるデザインにした。

wordpressのカスタムフィールドなど使い、システム管理上も分かりやすく使いやすいUIにすることで、更新レクチャー後も難なく使っていただけていた模様。

NPO団体様向け サイト制作

モック画像
【役割】
デザイナー、サイト制作全般
【ツール】
AdobeXD、Photosop、Dreamweaver、VScode、Wordpress
【工数】
デザイン2ヵ月、制作9ヵ月、更新引き継ぎ等3ヵ月
【制作時期】
2018年5月-2019年3月

【役割】

デザイナー/サイト制作全般として、 要件整理 → 情報設計 → VI設計(ロゴ・キービジュアル)→ ワイヤーフレーム → UI/UXデザイン → WordPress構築(テーマ設計・カスタム投稿・編集UI設計)→ 運用レクチャー → 更新体制構築支援 までをフルリモートで一貫して担当。

学生メンバーが多い団体特有の「更新体制が不安定」という課題を踏まえ、 誰が引き継いでも運用できるシステマチックなサイト設計と 若く活発な団体イメージを定着させるデザイン構築を一貫して行った。

【課題】

  • デザイン面で、簡易的なデザインや古いシステムのナビゲーションなどで、プロデュース人材を扱う団体としての若く活発なNPOの活動イメージの印象が薄く、団体としてのメッセージが伝わりづらいサイトだった。
  • 学生会員による手作業の作成と更新のため、たびたび情報の遅延が生じていた
  • モバイル閲覧が増加しているのに、サイトがモバイルに最適化されていない

【目指すゴール・仮説】

  • WordPress導入により、役割が変わっても混乱が起きない運用システムを構築する
  • VIデザイン(ロゴ・色・写真ディレクション)により、若いプロデュース人材を惹きつける“活発で爽やかなNPO”像を明確化する
  • ナビゲーションや回遊設計を見直し、初めて訪れる講師陣・学生双方にとって情報が探しやすいUIを作る
  • モバイルファーストで再設計し、スマホからの閲覧でもストレスなく情報が取得できるようにする

【結果・成果】

● CMS(WordPress)による運用改善
カスタム投稿・カスタムフィールドを用いて情報構造を整理し、学生が引き継いでも迷わず更新できるUIに刷新。
更新スピードが改善し、情報の正確性が向上。
● デザイン・VIの刷新
若く活発な活動イメージが伝わるよう、VI(ロゴ・色・余白設計・写真表現)を再構築。
バナー・資料など外部発信にもVIが広がり、団体全体のブランドイメージが統一・強化。
公開時、講師陣から「爽やかで若さを感じる」と好評。
● UI/UX改善による参加促進
情報探索のしやすいナビゲーション、わかりやすい導線、活動内容が伝わるレイアウトで、学生・講師ともに参加ハードルが低減。
モバイル最適化によりアクセスが増加し、イベント集客やプロデュース人材の確保につながったとの報告を受領。

SAMPLEサンプルデザイン・コーディングなど

バナーなど

バナー バナー バナー バナー バナー

ウェブサイト

【架空LP】架空建設会社PCデザイン

モック画像
【役割】デザイン
【ツール】figma
【制作時期】2025年11月
【工数】 2日

【制作課題】

トライアル案件として、架空の建設会社をクライアントとして想定し、ヒアリングシートとワイヤーフレームを基に、TOPページ(PC版)のデザインカンプをFigmaにて制作しました。

情報設計(ワイヤー)は課題で配布された内容をベースとし、レイアウト・構造・要素の配置を厳密に踏襲した上で、
ユーザーが読みやすく、企業の信頼性がより伝わるようデザインをブラッシュアップしました。

ロゴ・キャッチコピー・写真・テキストは、すべて“実在しそうなリアリティ”を重視し、架空の素材として作成ししました。

【制作条件(課題内容)】

  • 架空の建設会社を想定
  • 配布されたヒアリングシート/ワイヤーフレームを確認・理解したうえでデザイン
  • PC版 TOPページ 1ページのみをデザイン
  • ロゴ・テキストはすべて架空で自由に作成
  • Figma を使用して PCカンプを構築

【制作資料(ヒアリングシート/ワイヤーフレーム)】

Sample Image 1
Sample Image 2

【架空LP】介護派遣サービスLP
(デザイン・コーディング)

モック画像
【役割】
デザイン・コーディング
【ツール】
figma、VScode
【制作時期】
2024年10月 - 2025年1月

【制作課題】

  • Figmaバリアブルと連動したカラー管理、SCSSファイルの見直し
  • 小さな規模のデザインシステムの構築テンプレート実例作成

【概要】

介護派遣スタッフの募集と登録を促す架空のLPを設定しています

【LPの目的】

このLPは、介護業界での就業を目指す幅広い女性をターゲットとし、登録数を増やすことを目的としています。
初めて介護に挑戦したいが自信が持てない方や、他業界からの転職を検討している方、より良い条件を求める経験者の方など、経験やキャリアを問わず、多くの女性が介護派遣スタッフとして安心して就業できるように、『未経験でも安心して働けるサポート体制』と『スピーディーで簡単な登録フロー』に重点を置き、求職者が自信を持って新しい一歩を踏み出せるLPを設計しました。

デザイン面では、オレンジを基調とした女性的な温かみの中に、自らのキャリアを預ける信頼感と、そこに一歩を踏み出せる勇気を持つ凛とした雰囲気を目差し、魅力的でユーザーフレンドリーなデザインを通じて、求職者が安心して登録プロセスを進められる体験を提供することを目的としています。

架空コーポレートサイト(デザイン・コーディング)

モック画像
【役割】
デザイン・コーディング
【ツール】
AdobeXD、figma、VScode
【制作時期】
2022年 - 2023年

【制作課題】

  • FigmaとSCSSを活用したデザインセットの構築
  • FLOCSS規則に基づいたSCSSテンプレートの作成

【概要】

ポートフォリオ用の架空のコーポレートサイトです。 工業製品などを扱う会社を想定しています。
ScssのベースはFLOCSSルールですが、ネーミングの長さを緩和するためネーミングルールのみ他ルールを併用しています。

【架空LP】コスメLP(デザイン・コーディング)

モック画像
【役割】
デザイン・コーディング
【ツール】
Photosop、Dreamweaver
【工数】
コンテンツ内容の想定含め3週間ほどで制作
【制作時期】
2021年3月

【概要】

ポートフォリオ用の架空化粧品のサンプルLPサイトです。 実際のコスメサイトを参考に想定したコンテンツから、PhotoshooとDreamweaverにてデザイン、コーディングを行いました。

ノート

最後までご覧いただきありがとうございました。
その他過去のポートフォリオはこちらのPDFでもまとめてあります。

http://eurekaseed-design.com/works/portforio190129.pdf