Portfolio

20+ years experience in web production Plan
Requirements
Direction Design
Information architecture
Marketing UI / visual design
HTML CSS
Clean code Accessibility
JavaScript
React TypeScript AI coding
WordPress …and more
Build Operate
Client communication
Mentor
Maintenance Website operation Web analytics Building the workflow

Experience

経験してきた領域

Web制作で経験してきた領域

  • Plan / Requirements

    要望のヒアリング、要件整理、企画、情報設計、提案書作成、見積

  • Project / Direction

    顧客折衝、制作進行、案件管理、進捗・工数管理、制作物レビュー

  • Design / Build

    Webデザイン、UI設計、HTML、CSS、JavaScript、CMS、アクセシビリティ

  • Operate / Improve

    サイト更新・運用・保守、サーバ移行、ドメイン移管・DNS設定、アクセス解析、SEO、運用環境の改善提案

制作を超えて経験してきたこと

  • Management

    制作チームのマネジメント、メンバー育成、売上・予算管理

  • Building The Workflow

    新設Web制作部署で、問い合わせ・商談・見積・契約・制作から、公開後の保守・運用までの業務フローを設計・整備

  • Proposal

    自治体・公的機関等のプロポーザルで、企画立案、提案書作成、プレゼンテーションを担当

  • Information Security

    ISMSの内部監査および外部審査への対応

  • Manual Preparation

    サイト更新方法など、CMS操作方法のマニュアル作成

  • Seminar Speaker

    アクセス解析・SEOなどをテーマにしたセミナー・勉強会の講師

  • Mentor / Support

    Webデザイン・制作のメンタリング、学習・制作進行支援

2006年から2021年、15年以上の経験

制作会社での実務経験Production Company

新設されたWeb制作部署の初期メンバーとして入社し、制作業務とともに部署運営にも携わる。

制作業務

企業サイトのほか、自治体・公的機関・大学・病院など、多様なWebサイトを制作。要望のヒアリングから要件整理、企画・情報設計、提案、見積・契約、制作、公開後の保守・改善提案まで、Web制作の一連の工程を経験。

規模の大きな案件では、企画・提案や情報設計、クライアントとの調整、ディレクションを中心に担う。

自治体・公的機関等のプロポーザルでは、RFPをもとに企画を立案し、提案書の作成からプレゼンテーションまで担当。

部署運営・マネジメント

自社サービスサイト、問い合わせ対応、商談、見積、契約、制作・納品、保守・運用へとつながる業務フローを設計。 対応手順や各種テンプレート、見積基準、契約書類などを整備。

制作実務を続けながらグループマネージャー・課長を務め、案件・進捗管理、メンバー育成、売上・予算管理など、制作チームの運営・管理も担う。

2022年から現在、4年以上の経験

個人事業Independent

独立後は企業サイトの制作・運用等に携わり、直近の案件では契約更新を重ねながら2年以上継続参画。

スクールにてWebデザイン・制作のメンターも経験。

企画やディレクションの経験も活かしながら、現在も制作・実装を軸にWebに携わっている。

直近の案件

  • BtoB企業サイトの運用・改善に2年4ヶ月継続参画
  • スクールメンター業務に2年10ヶ月継続参画

Tools

使用している技術と道具

Front-End

  • HTML
  • CSS
  • Sass
  • Tailwind CSS
  • JavaScript
  • jQuery

Currently Exploring

  • React
  • TypeScript

Design

  • Figma
  • Adobe XD
  • Adobe Photoshop
  • Adobe Illustrator

CMS

  • WordPress
  • etc.

Development Tools

  • Git
  • GitHub
  • npm
  • Vite

Ai

Currently Exploring

  • Codex

Analytics

  • Google Analytics
  • Google Search Console

Communication

  • Slack
  • Chatwork
  • Google Meet
  • Zoom
  • Microsoft Teams

Case Study

実務での課題と取り組み

事例01

CMSの制約の中で、
会員限定コンテンツの閲覧導線を設計する

要求Requirement

記事の冒頭部分を一般公開し、続きはログインした会員だけが閲覧できるようにする。未登録ユーザーには会員登録への導線も設ける。ログイン済みの会員・未ログインの会員・非会員それぞれに適切な導線を用意する。

制約Constraint

CMSでは、通常ページ全体をログイン状態によって切り替えることはできるが、ページ内の一部だけを切り替えることはできない。

また、通常のログインでは認証後にマイページへ遷移するため、ログイン後に閲覧していた記事へ直接戻ることができない。

検討Approach

通常ページだけで実現できないか、会員限定ページへの導線を利用できないかなど、担当者と複数の方法を検討し、CMSベンダーにも標準機能での対応や調整の可否を確認。

通常ページ(ログイン済み/未ログインを切り替え)と会員限定ページ(ログイン済みのみ)、それぞれの認証後の挙動を踏まえて閲覧導線を整理。

判断Decision

通常ページでは、未ログイン時に「冒頭+ログイン/会員登録導線」、ログイン済みの場合は「冒頭+本文」を表示。 ログインが必要なユーザーには会員限定ページを経由させ、認証後に会員限定ページ全文を表示する構成とした。

コンテンツが通常ページと会員限定ページで二重管理となるが、CMSの制約と既存の認証機能を前提に、運用効率とユーザーの閲覧体験のトレードオフを検討した結果、既存会員のUXを優先する判断をした。

会員限定記事の閲覧導線。ログイン済みの場合は通常ページで全文を表示。未ログインの場合は冒頭とログイン・会員登録への導線を表示し、「続きを読む」から認証を経て会員限定ページの全文へ進む。

Lab

つくって、試して、確かめる

EXPERIMENT SHEET

DATE

実験01

React / typeScript / UX

検索はいつ実行する?
ボタン検索とリアルタイム検索を比較してみた

Question

検索ボタンを押して実行する方式と、入力に応じてリアルタイムに実行する方式。使いやすさだけでなく、処理回数やデータ量まで考えると、どちらを選ぶべきか。

Test

同じユーザー検索を2つの方式で実装。操作感に加え、検索が実行されるタイミングや回数、APIを利用する場合の負荷、データ量による違いを比較した。

Result

対象データや検索処理のコスト、求められる操作性によって適した方式は変わる。実装方法ではなく、利用条件から選択する必要がある。

EXPERIMENT SHEET

DATE

実験02

Accessibility / HTML / CSS / JavaScript

開閉できればアコーディオンなのか?
アクセシビリティの観点から実装方法を比較してみた

Question

クリックすると開閉する見た目が同じアコーディオンでも、実装方法によって操作性や伝わる情報に違いはあるのか。アクセシビリティの観点から、必要な要素を考える。

Test

複数の方法でアコーディオンを実装し、マウスだけでなくキーボードでの操作、フォーカスの移動、開閉状態の伝わり方などを比較する。

Result

IN PROGRESS...

Thinking

調べて、考えて、言葉にする

  1. CSS / Web Standards / History

    なぜ float はページレイアウトに使われたのか

    CSSには長い間、ページレイアウト専用の仕組みがなかった。floatは本来の用途を越えてその不足を補い、制作現場の工夫によってレイアウト手法へと発展した。FlexboxやGridの登場後はページレイアウトの役割を終えつつも、本来の回り込み機能として現在もCSSに残っている。

    note
  2. Work / Organization

    役職とは「役割と責任」の違いでしかない……と思う

    果たして管理職は「偉い」のだろうか?制作現場にいれば「下」なのだろうか。実際には、制作する人にも、進行する人にも、チームを管理する人にも、それぞれ異なる役割と責任がある。役職を上下ではなく、仕事を進めるための役割の違いとして考える。

  3. CSS / Web Production

    昔の正解はいつまで正解として使えるのか

    かつて合理的だった実装方法が、仕様やブラウザの進化によって必要ではなくなることがある。しかし古い書き方が間違いで、新しい書き方が正しいとは限らない。時代とともに変わったCSSを例に、当時その方法が必要だった理由を振り返りながら、現在の条件に合った実装を選ぶことについて考える。