フロントエンドから、
UX・アクセシビリティ・実装まで
Sola Studio は、画面・言葉・仕様・実装のあいだにある論点を見えやすくし、 次に進める形へ整理・改善するスタジオです。
事業者向けには、開発前の相談整理、UI/UXレビュー、アクセシビリティ改善レビュー・実装支援、MVP支援、フロントエンド画面設計・開発支援を。 個人向けにはAI時代のプログラミング思考を扱う1対1サービスを提供しています。
Sola Studioについて
Sola Studio は、見た目、文章、実装のあいだにあるズレや問題を扱うスタジオです。
ユーザーに伝わりにくい理由、操作しづらい理由、アクセシビリティ上の障壁が残る理由、社内で話が噛み合いにくい理由。そうした問題は、複数の前提や条件が重なって起きることがあります。
情報設計、画面の使いやすさ、アクセシビリティ、実装上の制約、言葉の選び方、前提のズレ。Sola Studio では、そうした複数の論点を見えやすくし、いま何を確認し、何を整え、どこまで実装で改善するかを判断できる状態にしていきます。
実務の場と、読み物の場
Sola には、実務として課題を整理し支援する Sola Studio と、観察や考えを読み物としてまとめる Sola Journal があります。どちらも同じ Sola から生まれた場ですが、Studio は実務へ、Journal は読むことそのものへ向かっています。
Sola Studio
実務・サービスの場
UI/UX、アクセシビリティ、MVP支援、フロントエンド実装など、具体的な相談・整理・実装支援につなげる場です。
Sola Journal
読み物の場
言葉、画面、文化的な前提、働き方、日常の違和感や観察を、独立した読み物としてまとめる場です。
Sola Journal を読む
Yoko Shiina
フロントエンド実装・UX / アクセシビリティ整理支援
Frontend / Accessibility / Product Clarity
Yoko Shiina について
技術・画面・言葉・アクセシビリティ・判断のあいだにあるズレを整理し、誰にとって何が伝わり、どう使える形にするかまで含めて、実装や次の意思決定に進める形へ落とし込みます。
フロントエンドエンジニアとして実装に携わりながら、UXの視点から情報・体験・言葉を整理する仕事をしてきました。
React / Next.js / TypeScript を中心に、画面仕様、API連携、データフロー、フォーム、アクセシビリティまで横断して扱えることを強みとしています。アクセシビリティ領域では、IAAP CPACCを保有し、フロントエンド実装の観点も含めて実際の画面やフォーム、フローを確認し、必要に応じて実装支援へ接続します。
広告・集客支援の仕事では、店舗や事業者が届けたい価値、地域ごとの顧客像、競合環境、価格やメニュー、実際の反応データを見ながら、誰に何をどう伝えると行動につながるのかを考えてきました。
その後、Web制作、フロントエンド開発、多国籍チームでの協働を通して、言葉・画面・実装・文化的な前提の違いが、ユーザーや関係者の理解・判断にどう影響するかを扱ってきました。
複雑な画面や業務フロー、要件が曖昧な状態でも、何が伝わりにくいのか、どこで操作しづらさが生まれているのか、どこまでをレビューし、どこから実装で改善するのかを見えやすくすることを得意としています。
Sola は、Sola Studio や Sola Journal などで使用している活動名です。事業者向けの文脈や外部実績では、Yoko Shiina 名義もあわせて使用しています。
一目でわかる実績
- Web領域での実務経験
- 10年+
- 多国籍チーム・マルタ共和国での実務／生活経験
- 国際環境
- UX Collective / JS in Plain English ほか
- 外部掲載
- UX・アクセシビリティ・Agile・Engineering関連の資格・認定
- 10件+
Sola Studioにつながる歩み
2010〜2012年
Recruit / 広告営業・クライアント戦略
美容室・サロン向けの広告・集客支援として、経営者や店舗スタッフと直接向き合いながら、店舗の方向性、来てほしい顧客像、価格やメニュー、競合環境、地域ごとのユーザー像、広告の反応データをもとに、広告・コピー・見せ方を改善していました。
事業者が届けたい価値と、実際のユーザーが反応する言葉・見せ方の間にあるズレを見る経験が、現在のUX・情報設計・市場向けコミュニケーション整理の土台になりました。
2013〜2020年
フリーランス / Web制作・情報設計・実装
Webディレクション、ヒアリング、サイトマップ、ワイヤーフレーム、デザイン、HTML / CSS / JavaScript / WordPress実装まで、大小さまざまなWebプロジェクトに関わりました。
聞く、整理する、画面に落とす、実装する流れを、自分の手でつなげる経験になりました。
2018〜2019年
Udemy / オンラインコース制作・進行支援
オンライン講座制作のプロジェクトコーディネーションに関わり、講師候補の方の動画講座の企画・コンテンツ制作・進行管理の支援を行いました。
人が学ぶ順序、説明の構造、個人で活動する人たちの課題に触れる経験になりました。
2020〜2021年
Microverse / ソフトウェアエンジニアリングへの転換
ソフトウェア開発プログラムを通して、世界各国のエンジニア志望のメンバーとペアプログラミング、コードレビュー、リモートでの協働を通し実際のプロジェクトや課題に取り組みながらプログラミングの技術・知識を培いました。
技術を英語で学び、背景の違う多国籍なメンバーと協働する現在の開発スタイルの土台になりました。
2022〜2025年
金融SaaS・Web3 MVP・国際チームでのフロントエンド開発
React / Next.js / TypeScript / Vue.jsを用いて、UI実装、API連携、認証機能、データ管理、社内向けツールの開発などに携わりました。多国籍チーム、リモート環境、マルタ共和国での生活・就業を通して、日本の文脈を内側と外側の両方から見る経験にもなりました。
UXと実装、フロントエンドとバックエンド、個人の判断とチームでの合意形成を行き来しながらつなぐ経験になりました。
現在
Sola Studio
現在は、事業者向けにUI/UXレビュー、アクセシビリティ改善レビュー、アクセシビリティ実装支援、MVP支援、フロントエンド実装・設計支援を提供し、個人向けにはAI時代のプログラミング思考サービスを提供しています。これまでの経験を、Sola Studioのサービスとして再構成しています。
これまでの経験を、Sola Studioのサービスとして再構成しています。
資格・認定
アクセシビリティ、UX、プロダクト、アジャイル、ソフトウェア開発に関する主要な資格・認定です。IAAP CPACCは、障害・アクセシビリティ・ユニバーサルデザイン・関連基準を扱う国際認定資格です。
- IAAP CPACC Certification2025-11
- Google UX Design Certificate2025-04
- Certified ScrumMaster®2025-02
他の資格・修了証は LinkedIn プロフィールで確認できます。 LinkedIn
一緒に仕事をした方からの声
"Yoko’s projects were consistently high quality and often ahead of schedule. She combines best practices with creative problem solving, and uplifts everyone around her."
"She possesses a rare combination of technical prowess and language proficiency. Her adaptability and contribution to our TypeScript/React projects were invaluable."
"She breaks down complex topics into simple steps and completes projects ahead of schedule. Her working style makes collaboration smooth and effective."
"終始よりそってくれて、相手目線で仕事を進めてくれます。毎回丁寧に説明してくれたので、非常にプロジェクトをすすめやすかったです。"
ご相談いただけること
事業者の方
事業者向けには、開発前の相談整理、UI/UX改善レポート、アクセシビリティ改善レビュー、アクセシビリティ実装支援、MVPシリーズ、フロントエンド画面設計・開発支援を提供しています。相談や依頼の前に何を整理するかを確認したい段階から、具体的な画面・仕様・実装改善へ進めたい段階まで、状況に応じて扱います。
アクセシビリティ領域では、IAAP CPACCを保有する担当者が、主要ページ・フォーム・申込フロー・特定フローの確認から実装改善まで、フロントエンド実装の観点も含めて支援します。
Sola Studioでは、画面・フロー・文言のレビューに加えて、事前に確認した対象範囲に沿ってフロントエンド実装改善まで支援できる点が特徴です。
個人の方
個人向けには、AI時代のプログラミング思考として、体験セッションと7回コースを提供しています。AI・デジタルツール・エンジニアとやり取りする時に、条件・前提・データ・処理といった概念を手がかりに、技術説明を読み、依頼し、確認し、自分の意図を伝えるための見方を扱います。
コードを書くためではなく、技術を自分の状況に引き寄せて扱うための1対1セッションです。専門用語を暗記するのではなく、技術の話を自分の言葉で捉え、AIの回答を読み解く、エンジニアに依頼する、自分の意図を伝えやすくするための小さな見取り図をつくっていきます。
実装・設計を支える技術スタック
Frontend
- JavaScript10年
- TypeScript4年
- React4.5年
- Next.js3年
- HTML510年
- CSS310年
Backend / Data
- Ruby1年
- Ruby on Rails1.5年
- Java0.5年
- Supabase3年
- API連携4年
- DB設計1年
- SQL1年
UI
- Material UI2.5年
- Tailwind CSS2年
- SCSS4年
- Storybook1.5年
- Figma3.5年
- Sketch2年
Testing
- Jest4年
- React Testing Library4年
- Cypress0.5年
- Playwright0.5年
Sola Studio の公開ツール
Sola Studio では、フロントエンド実装、アクセシビリティ、UX整理、プロダクトに関わる実務フローをテーマにした公開ツールも制作しています。
画面上の判断をすばやく確認する、練習や準備の流れを整理する、アクセシビリティ上の摩擦を減らす、実務上の判断を扱いやすくする。そうした具体的な問いから、ツールやアプリを形にしています。
Contrastly は、Tailwind CSS のカラーパレット、カスタムHEX、セマンティックトークンのコントラスト確認を支援するオープンソースツールです。Promotee は、面接回答の音読練習を支援する公開フラッシュカードアプリです。
AIを前提に、設計と実装の判断を整える
Sola Studio では、AIツールを設計・実装・確認のプロセスに必要に応じて取り入れています。
AIを使う場面が広がるほど、何を作るのか、どこを確認するのか、出力が目的・仕様・データ・アクセシビリティ・実装条件に合っているかを見ていくことが重要になります。
AIの力を使いながら、目的と現実のあいだを確認し、実際に使える形へ整えていく。Sola Studio はそのための設計・実装支援を行います。
課題を形にしていく流れ
現状の把握
相談や依頼の前の段階から、既存のフロー・画面・文言・実装制約・アクセシビリティ上の既知の課題まで、何がすでにあり、何がまだ整理されていないかを確認します。問題の所在を特定する起点です。
論点の特定
問題がどこにあるのかを明確にします。今判断すべきこと、条件が揃ってから判断すること、保留してよいことを分けます。
判断できる形への落とし込み
レビュー、仕様設計、課題リスト、確認論点の整理、ドキュメントなど、案件に応じて判断・実装相談・共有に使いやすい形へ整理します。
実装・確認
必要に応じて、事前に確認した対象範囲に沿って実装支援を行います。内部チームや既存ベンダーと連携する形にも対応できます。
進め方の方針
目的、優先順位、制約、トレードオフ、必要な論点を整理しながら、実現したいことに近づける形を探っていきます。
1回完結のレビューや相談から、仕様設計、アクセシビリティ改善レビュー、実装改善、継続的な外部パートナーとしての関与まで、必要な支援の形に応じて対応します。
言語化
まだ言葉になっていない課題や価値を、関係者やユーザーにとって理解しやすい言葉に整理します。誰に何を伝える必要があるのかを見えやすくし、判断が必要なものと、保留してよいものを分けます。
合意形成
実装の前に「何をなぜ作るか」を整理し、次に進みやすい状態へ整えます。工程が進んでから負担になりやすい認識のずれを、早い段階で見つけやすくします。
曖昧仕様からの提案
仕様が固まりきっていない段階でも、複数案と判断ポイントを整理し、実装に乗る粒度へ近づけます。
レビューから実装への接続
問題を指摘して終わりではなく、何を実装で直し、何を別スコープにするか、どこまでをクライアント判断として残すのかなど、実装がスムーズに進むための判断軸や方針を整理します。アクセシビリティやUI改善では、レビュー結果を現実の画面・コード・運用に実際に接続できることを重視しています。
どこを見ることで、改善が進みやすくなるのか
Sola Studio の価値は、見た目を整えることとあわせて、何が引っかかりになっているのかを見えやすくし、改善を判断しやすくすることにあります。
- 情報設計のズレを見つける
- UIの違和感や操作上の詰まりを整理する
- アクセシビリティ上の障壁を、画面・コード・フローの文脈で確認する
- 伝える相手や市場に合っていない言葉・前提・説明順を見直す
- レビュー結果と実装改善のあいだをつなぐ
こうした視点を通して、何を今直すべきか、どこを整えると全体が進みやすくなるかを判断できる状態にしていきます。
公開記事・発信
Sola Journal や Medium では、UX、アクセシビリティ、フロントエンド実装、コミュニケーション、言葉や文化、前提のズレについて書いています。
一部の記事は Medium Boost の対象となり、UX・アクセシビリティ関連のパブリケーションにも掲載されています。
Medium 記事Medium BoostedFeatured by UX CollectiveThe UX Lesson I Learned in a Quiet Tokyo SalonA personal essay about turning local observation and a salon owner’s quiet vision into customer-facing messaging — an early lesson in emotional insight, trust, and UX before the term “UX” entered the frame.
human-centered designemotional designstorytellingux design
Medium 記事Featured by UX CollectiveFrom Universal Design to Personalized Interfaces — Rethinking AccessibilityAn essay questioning whether “one interface for everyone” is enough for real inclusion, and exploring how accessibility, Universal Design for Learning, and adaptive UI can point toward more personalized digital experiences.
inclusive designuniversal designuxaccessibility
UX Lens field noteSola Journal / UX LensCasual Chat, Serious CancellationA cancellation chat felt lightweight, but lacked the confirmation and traceability needed for a higher-stakes service request.
customer supportcancellation flowconfirmation & traceability
こういうご相談に向いています
事業者の方
- UXと実装の両面から見てほしい
- 画面・文言・ユーザーフローの詰まりを整理したい
- アクセシビリティ課題を整理し、必要に応じて実装改善まで相談したい
- 実装リソースが足りず開発が止まっている
- 継続的に相談・整理・実装支援を依頼できる外部パートナーがほしい
個人の方
- AIやツールを使う前提で、条件・構造・データ・処理の見方を身につけたい
- AI・ツール・エンジニアとのやり取りで、技術の見通しをもう少し持てるようになりたい
- 技術の話を聞いても、自分の意図や目的とどうつながるのか見えにくい
関連ページはこちら
何をどう進めるかがまだ曖昧な段階から、はじめられます。
事業者向けサービスと個人向けサービスでは、確認する内容や申込み前に見るべき情報が異なります。
該当するページから、サービス内容と流れをご確認ください。