Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TOPOSTOPOS
Search
Shohei Yoshida
April 10, 2026
Design
160
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
TOPOSTOPOS
CREATIVE STUDIO DESIGN AND WEB DEVELOPMENT
Shohei Yoshida
April 10, 2026
Other Decks in Design
See All in Design
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
karad
0
180
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
3
610
Accelerating performance improvement based on a software review evaluation matrix
kitanosirokuma
0
290
ポートフォリオ_あやの
ngyenmazt1412
0
1.5k
ClaudeCodeでマーケターの課題を解決する
kenichiota0711
11
14k
Warner Bros. Discovery 2025 Box Office Booklet
samb1rd
0
120
decksh object reference
ajstarks
2
1.8k
デザインツールを開く前に その画面は誰に何と言わせたい?受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
garyuten
1
190
なぜ、インサイトを貯めるのか?
tajima_kaho
3
2.7k
(2026 FlowCon Keynote) Sociotechnical Architecture Finding Flow
xinyao
0
110
Basket_of_love.pdf
terencebasart
0
280
kintone開発におけるライターの役割の変化〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
keroyama
0
190
Featured
See All Featured
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
260
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.3k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
The untapped power of vector embeddings
frankvandijk
2
1.8k
Speed Design
sergeychernyshev
33
2.1k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.8k
エンジニアに許された特別な時間の終わり
watany
108
250k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.9k
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
4.3k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
69
64k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
310
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.6k
Transcript
CREATIVE STUDIO DESIGN AND WEB DEVELOPMENT
いいクリエイティブをあなたと 株式会社TOPOSTOPOSは、戦略からグロースまで一貫した WEBサイト開発を中心に、 システムのメンテナンス・企業さまのロゴ、 ブランディング発足・パンフレット・DM制作などWebサービスやクリエ イティブにおいて知識のあるメンバーで構成されたチームです。 スタートアップから上場企業まで様々な環境で蓄えた経験やスキル をもって自分たちにできることを、 より自分たちらしく還元できたらと思 っています。
いいクリエイティブを私たちと 1
FOUNDING MEMBERS 吉田 昇平 藤原 慎也 CEO / Founder /
Engineer Founder / ArtDirector 2008年4月スタートトゥデイへ新卒として正社員入社。 システム部に配属されインフラ部門を担当。 「ZOZOTOWN」の年2回セール の大規模トラッフィクに耐えるインフラ構築・新規機器導入などの経験。 「WEAR」のインフラ全般、CRMシステム導入などサービスを支えるインフラ 全般を担当。退職後、業務委託でのiOS開発・インフラ導入などの業務を経 て2015年5月スタートトゥデイの同期と共にジンユウを創業。 「KITCHEN BROTHERS」の提供開始にあたり、Web・システム開発全般をCTOとして 大学院在学中、建築デザインの勉強と並行し、建築事務所にて実務経験を 積む。卒業後、2008年4月スタートトゥデイ入社。デザイン部に配属。 「ZOZOTOWN」サイト、広告等のデザイン全般を担当。 その後、国内外のハ イブランドを取り扱う 「ZOZOVILLA」の立ち上げ、 「 WEAR」のPCサイト、 ア プリ、広告のアートディレクションを担当。退職後、業務委託・フリーランスで のデザイン業務を経て2015年5月、 スタートトゥデイの同期と共にジンユウを 創業。 「KITCHEN BROTHERS」の提供開始にあたり、 デザイン全般をア 統括。 ートディレクターとして統括。 2021年TOPOSTOPOSとして活動開始。2022年TOPOSTOPOSを法 吉田とともに、 アートディレクターとしてTOPOSTOPOSを創業。 人化し、代表就任。PM兼エンジニアとして数々のPJに携わっている。 2
BUSINESS DOMAIN 01 Website development サイト開発 戦略からグロースまで一貫したモノづくり ヒアリングで課題やニーズの抽出を行うことにはじまり企画・制作・開発 03 Branding
design ・実装と戦略からグロースまで一貫したモノづくりを得意としています。 「こんなことってできるのかな?」 「こんなふうにできたらいいのに」 という 想いをデザインと開発視点の両側面からアプローチし、 カタチにしてい きます。 ・ロゴ ・商品パッケージ 02 Infrastructure base インフラ基盤 ・プロダクトディレクション ・パンフレット /DM など紙媒体販促物 安全性やセキュリティ性を向上・安定させる サイトが完成した後も、安全・安心して使ってもらうためにセキュリティ面 も強化しています。サイトの運用・保守や、 すでにあるものを改善したい、 hearing ヒアリング planning 企画 designing 設計 production 制作 growth グロース より良くしたいという場合(システムリプレイス)もおまかせください。 シス テムの老朽化、 セキュリティリスクや機能不足など様々な要望の背景 にある課題に対して、 お客さんにとってベストとなる答えを共に探してい ・WEB サイトの運用・保守 01 Website development き解決していきます。 ・システムリプレイス ・セキュリティリスクのレポート作成 ・CMS のセキュリティ更新チェック ・脆弱プラグインの除去・代替 03 Branding design ブランディングデザイン WEB サイトに+a でブランドコンセプトや世界観を強める ブランドやサービスの個性であり欠かすことのできない世界観やコンセ プト(ブランディング)は、WEBサイトのみならず、 ロゴ、 ショップカードにパ ッケージデザイン、 あらゆるクリエイティブにおいて重要です。 クライアン 02 Infrastructure base トさんが目指すブランディングに必要となるクリエイティブや、 サービスの 成長に伴って必要となるクリエイティブを、 「らしさ」 を大切にしたモノづ くりでサポートさせていただきます。 3
OUR SOLUTION 02 01 total creative 名刺 ロゴ パッケージ デザイン
UI メディア branding design WEB サイト 画面デザイン レイアウト フォント 配色 ボタンなどのパーツ UI/UX design synergy ユーザビリティ 信頼性 使いやすさ 感情 機能 etc etc 印刷物 システム開発 UX Total Creative UXUI Design クライアントさんが目指すブランディングに必要となるクリエイテ どちらかだけが優れていればいいという問題ではないUXと ィブや、 サービスの成長に伴って必要となるクリエイティブを、 UIデザイン。最適解を求め両側面からアプローチをし、 「らしさ」 を大切にしたモノづくりでサポートさせていただきます。 ベストなUXUIデザインを目指します。 4
OUR SOLUTION 04 03 front end back end PCやスマートフォン・タブレット等の ブラウザからアクセスや操作
ユーザーからは見えないアプリケーションを 機能させるデータやインフラストラクチャ バックエンド フロントエンド P ・商品検索 / フィルタ 現状把握 施策の検討 ユーザー ・商品詳細 / カート ・会員更新処理 ・注文データ ・お気に入り登録 A Improvement 施策の実行 D ・会員更新処理 ・お気に入り登録 ・会員登録 / ログイン ネクスト アクション 決定 ・注文処理 / 在庫引当 ・在庫 / 商品マスター ・通知 / クーポン /CMS ・閲覧ログ / 分析基盤 front end(administrator) フロントエンド ( 管理者 ) サイト管理者 ・注文データ ・決済 / 配送 /SNS 連携 ・価格 / クーポン サイトの管理者が、PC ブラウザより データ操作・分析 施策の効果 測定検証 ・会員データ external integration 外部サービス連携 外部システムと社内の 基盤システムのデータ連携 ・商品 / 在庫 / 価格 管理 ・物流 ・注文 / 返品 / 返金 管理 ・決済 ・会員サポート ( 権限 ) ・SNS ・クーポン / バナー /CMS ・メール ・レポート / 分析 ・税率 API 等 C Growth Hacking System Solution WEBサイト・システム開発・メディアなど、 どのクリエイティブに フロントエンド・バックエンドの面でのサポートはもちろんのこ おいても 「つくったら終了」 ということはありません。数字や長 と、 サイト運営において必要不可欠なデータ分析や外部シ 期的な視点からみた改善点やブラッシュアップできる点など、 ステムとの連携など、皆さんがシステムにおいて抱えるいく より良いものへと成長させるお手伝いをさせていただきます。 つもの課題に対して解決策をご提案させていただきます。 5
ISSUE / OUR STANCE CASE 01 サービスの作り方・育て方がわからない、 良いアイデアがあっても、 どうやって作るかわからない。 また作ったは良いけどどうしたら成長するか、
どうしたらファンができるかわからない。 CASE 02 WEB開発者が社内にいないため、何かあったとき どのような対応をしたらいいかわからない。 経験豊富な伴走できるエンジニア、デザイナーがサービス成長を支援 ワークショップ形式のミーティングを通して、 サービスの「課題」 「 価値提供」 「ターゲット」 「競 合」 「 収益構造」 をチームで言語化。 プロジェクト全体の共通認識を形成し、以後のデザイン・ 開発判断の軸となるサイト設計方針を明確にします。 開発だけではなく、 インフラ基盤対策もお任せください Webサイトの開発だけでなく、 セキュリティに強いエンジニアをアサイン可能なので安心して サポートが受けられます。安定した稼働を守るインフラ基盤も弊社の強みです。何かあった ときの不安のために、運用・保守にてサポートさせていただくことも可能です。 また、何か起き てからではなく根本からの改善をご要望であれば、安全・安心を前提にしたシステム構築と セキュリティの強化、継続的な安定稼働を守るための運用の両軸からのアプローチをさせ ていただきます。 6
ISSUE / OUR STANCE CASE 03 既存システムのセキュリティに不安があるけど、 どれから手をつけていいかわからない。 WEBサイトを制作したはいいものの、 使い勝手やセキュリティの面で不満や不安がある。
取り組むべき課題と目的を明確にしてからがスタート 弊社はシステム企業ではなく、Webクリエイティブ企業なので、 システムをつくって終わりとい うわけではありません。オーナー様のつくりたいものをヒアリングし、要件定義やスケジュール 管理→制作→リリース後の対応まで伴奏可能です。Webシステムの改善(システムリプレイ ス)も安心してお任せください。 システムの老朽化、 セキュリティリスクや機能不足など様々な 要望の背景にある課題に対して、 オーナー様にとってベストとなる答えを共に探していき解決 していきます。 CASE 04 予算が多くないので、スポットでの支援や少額での 定期的なサポート支援をお願いしたい。 予算内でクリアするべき課題をご提案 低額の予算や、 スポットでのシステム支援も可能です。限られた予算内で、最優先に取り組 むべき課題を長期的な視点を含めてご提案させていただきます。オーナー様のご要望や規 模感に合わせて柔軟な対応ができるのも、 コンパクトに動ける弊社の特徴の一つです。 CASE 05 作りたいもののイメージはあるけど、パッケージなど デザイン面に関してはあまり知識がないのでわからない。 グッズやアイテムを制作するにあたり細かなこだわりが あるけど、 それが現実的に作れるのかどうかわからない。 隠された想い、カタチにするお手伝いいたします。 私たちはオーナー様の根底にある、想いや伝えたいことなどをカタチとして表現するクリエイテ ィブを目指しています。サービスやブランドの世界観(らしさ)を捉え、明確に表現する。わかって もらえないかもしれない、 うまく伝わらないかもしれないという想いにこそ らしさ が隠れているは ずです。より良いクリエイティブを目指す皆様のお手伝いをさせてください。 7
CASE STUDY EC SITE CLIENT:KAN Brewing SERVICE:WITCH CRAFT MARKET URL:https://witchcraftmarket.com/
ホームページをWordpress、ECをStoresとバラバラで管理していたため、 それらを一つにまとめ、 オンラインストアをベースにした自社のホームページ サイト構築を行いました。店舗をベースに売上を伸ばしていましたが、ECサ イトでの売上成長を希望されていましたので、比較的にUI・レイアウトがカ スタマイズ可能な Shopify(Liquid) を採用し制作。 ECサイトを制作するにあたって 「誰に向けて、 どんな価値を提供するのか」 を明確にすることから始めます。UIの優劣はもちろん、 ブランドの価値や伝 えたいことを明確に設計に落とし込むことが最優先だと考えています。 また、 「将来的な運用・拡張性の視点」 を持つことを大切にして制作してい ます。 さらには、安定稼働やセキュリティ担保の強化においても重要視し ています。 8
CASE STUDY ORIGINAL SERVICE SITE CLIENT: 博報堂ミライの事業室 SERVICE:Neighbors Food Market
URL:https://neighbors-foodmarket.com/ 飲食店と飲食向け卸業者を結ぶプラットフォームサービスの制作をご依 頼で、 サービスの戦略企画や、具体的な要件定義・ワイヤー作成・サービ スブランディングのディレクション・サイトデザイン制作・システム開発と全 工程に参画。 オリジナルサービスサイト開発において重要なのが、 プロダクト全体のテー マを決定することです。何を目指すかはテーマによって変わってくるので、 最初に指針を定めておくことが大切です。 また、BtoB(オリジナルサービス サイト)はユーザーだけではなく、企業(サプライヤー)と企業(ユーザー)の各 業務フローをシステム化するなど、普通のECサイトとは異なる動きが多く あります。弊社では開発前のプロダクト全体のテーマ決めから様々な視点 から考慮した実装まで一貫して行うことができます。 9
CASE STUDY OWNED MEDIA CLIENT: 株式会社マガジンハウス SERVICE: ananweb URL:https://ananweb.jp/ 既存サイトデザインリニューアルのご依頼。すでにシステムリニューアルを
行っていましたが、 イメージ通りのデザインやコンテンツを掲載できていな い状態でした。Webメディアに最適な情報を入れ込むことや、ananならで はのデザインやイラスト、 バナー画像などブランディングを再構築。 オウンドメディア制作を依頼される方々は 「自分たちの伝えたいことをしっ かり発信したい」 といった要望をお持ちの方が多いです。 そのためにも自 分たちらしさ(世界観)の確立、 さらにSEO対策などユーザーとの接点とな る場所を明確にすることに重点をおいて取り組んでいます。 また、 オウンド メディア完成後も課題の抽出、課題から見えるプランの策定・実装改修・ 効果測定を繰り返し、 より良いメディアへと共に育てていきます。 10
CASE STUDY TOTAL CREATIVE ショップカード、飲料パッケージ、 PRODUCTION:ブランドロゴ、 ステッカー、名刺、 タブロイド、 オリジナルグッズなど ECサイト制作をはじめ、
ロゴ・コースター・オリジナルビールラベル・ショップ カードなどブランディングデザイン観点によるトータルクリエイティブや、周 年の記念グッズ制作、 タブロイドなどの印刷物など、弊社デザイナーによ るモノのデザイン制作も承っております。アートディレクターを中心に、制 作前のヒアリングからデザインパターン制作、納品まで一貫した制作フロ ーにてサポートさせていただきます。 11
CASE STUDY MAINTENANCE DEVELOPMENT CLIENT:友桝飲料 SERVICE: 友桝飲料ホームページ URL:https://www.tomomasu.co.jp/ 創業100年以上の歴史を持つクライアントさんから、継続的な安定稼働を 目指すためシステム周りを一新。SEOのページ検索ランキングの下落や、
既存サービスの売上向上を目的とした既存機能の改修・メンテナンスを実 施。すでに稼働中のWebサービス、ECサイトのメンテナンス開発も合わせ て行いました。 弊社ではアパレルや家具、食品などのライフスタイル系のECサイトやWeb マガジン、BtoBのWebサービス、 コーポレートサイトなどの改修を承っていま す。必要があれば打ち合わせを行い、課題確認から解決策の提案をさせて いただき、各ページの改修を実施。 また、安定して運営ができる土台作りを 目指した伴走型のサポートもお任せください。(月額の費用を定期で頂戴し ます) 12
FLOW 01 02 伴走型支援 サイトの立ち上げ初期フェーズからWebディレクターとクリエイティブ制作の両側からサポート さらに、定例mtgを開催しリリース後のサービスグロースを実施。 ワイヤー作成 お見積もり Webディレクターとして定例mtgに参加し密接にやり取りを行い、Web・クリエイティブ制作を実施。 リリース後にお引き渡し。
サイト立ち上げやクリエイティブ制作 ヒアリング スポット型支援 A サイト立ち上げやクリエイティブ制作 デザイン作成 システム開発 テスト & 修正 リリース ヒアリング お見積もり ワイヤー作成 デザイン作成 システム開発 テスト & 修正 リリース お引渡し サイト制作後の定常業務 週次定例 MTG で システム開発 改善企画 デザイン改修 テスト & 修正 リリース 繰り返し実施 ・オリジナルサービスサイトの開発 ・リッチなアニメーションを使ったランディングページ制作 ・ブランディングを考慮したデザインおよびシステム開発 ・企業サイト制作 ・オウンドメディアの制作 対応事例 対応事例 ・既存オウンドメディアのシステム(Wordpress,データベース,セキュリティアップデート等の作業)の ・Shopifyのデザインテーマを使ったECサイト制作 etc・ ・ ・ フルリニューアル ・Webサイト、 システムの定期メンテナンス、機能追加、 月次SEOレポート作成,分析,改善提案 ・企業サイト制作 納品目安 1〜2カ月 支払い条件 着手時に制作費の50%、納品後に残額(50%) etc・ ・ ・ 納品目安 支払い条件 ・サイト立ち上げ制作 : 3ヶ月〜 ・サイト制作後の定常業務 : 作業内容に応じて相談(小規模改修1日〜、大規模改修1〜2カ月) ・サイト立ち上げ制作 : 着手時に制作費の50%、納品後に残額(50%) ・サイト制作後の定常業務 : 当月末締め、翌月末 13
FLOW 03 04 スポット型支援 B Web制作において、 クリエイティブ制作のみの部分を行う。 リリース後にお引き渡し。 スポット型支援 C
システムもしくはデザイン、 どちらかのみのクリエイティブ制作を行う。 リリース後にお引き渡し。 お客様もしくは外部 PM による、弊社制作前作業 ヒアリング お見積もり ワイヤー作成 要件定義や構成作成 お客様もしくは外部 PM による、弊社制作前作業 ヒアリング お見積もり デザイン作成 デザイン作成 システム開発 テスト & 修正 リリース ヒアリング お引渡し お見積もり リリース お引渡し ・既存サイトの部分的な改修 ・既存ECサイトの商品ページ改修や簡易的な機能追加 対応事例 テスト & 修正 弊社によるクリエイティブ制作 ・既存ホームページのページ追加 ・ランディングページ制作 納品 or システム開発 弊社によるサイトの立ち上げやクリエイティブ制作 レビュー & 修正 対応事例 ・Shopifyのデザインテーマを使ったECサイト制作 ・簡易的なページの制作 ・バナー、 アイコン制作 etc・ ・ etc・ ・ ・ 納品目安 1〜2カ月 納品目安 1〜2週間(内容によっては2〜3日納品も可能) 支払い条件 納品後、即時振込(翌月未支払いは相談可) 支払い条件 納品後、即時振込(翌月未支払いは相談可) 14
CONTACT 自分たちが抱える課題も対応してもらえるのだろうか? WEB 制作について知識がなく不安・・・ 金額に予算があっても大丈夫? FLOW にて紹介させていただいた以外にも、 まずは少額・スポットでのご提供や定額での対応など柔軟な参画が可能です。 ご要望に合わせて最適なプランのご提案もできますので、 まずはご相談・お見積もりなどご気軽にお問い合わせください!
[email protected]
15