HABU Kouichi’s
Portfolio
Web Developer
Web Design
Direction & Marketing

HABU
Kouichi

つくることを楽しみ、伝えることを大切に。
可能性の輪郭を鮮明にして、
新しい価値をそえます。

つくることを楽しみ
伝えることを大切に。
可能性の輪郭を鮮明にして
新しい価値をそえます。

Works

Webサイト /
グランピング・レジャー施設 

Web Development /
WordPress

先方が自ら更新できるサイトを、プラグイン設計で実現する

全30ページで構成されるサイトを担当し、要件定義から実装設計、コーディング、WordPressでのサイト構築まで一貫して手がけました。
大まかなご要望をもとに、FAQ・食事メニューなど4種類の管理機能をオリジナルプラグインとして開発。
1つの投稿データを複数箇所で出力する構成とし、情報を一元管理することで、更新性と運用効率を高めています。

Webサイト /
宿泊施設 総合サイト 

Web Development /
WordPress

開業直前に合流し、要件定義から予約連携までを担う

積水ハウスが設計・施工を手がける邸宅型ホテルの公式サイトで、ブランド全体を案内する総合ページを担当。
要件定義から実装設計、コーディング、WordPressでのサイト構築まで一貫して手がけました。
公開を数日後に控え、機能要件も未決定という状況から参画。要件の決定と実装を同時に進め、4日間で構築を完了しました。
カスタムフィールドによる投稿機能、グループ内の他施設を紹介する機能に加え、外部予約エンジンとの連携と、それに連動する検索フォームを実装しました（現在は非表示。施設の追加開業にあわせて公開予定）。

Webサイト / 宿泊施設 

Web Development / WordPress /
Direction

PCデザインのみの支給から、UIとスマートフォン設計を起こす

旧サイトから担当する宿泊施設の、公式サイトリニューアルでディレクションと実装を担当。
旧サイトでの経験を踏まえて要件を整理し、コーディングからWordPressでのサイト構築まで手がけました。
支給されたデザインはPC版のビジュアルのみだったため、UIの挙動やスマートフォンのレイアウトは自ら設計しています。
先方からのご要望に応え、ローディングアニメーションや、背景に漂う霧のエフェクトを実装しました。

Webサイト /
地域創生プロジェクト 

Web Development / WordPress /
Direction

関係者の要件を束ね、地図で探せるUIへ

地域創生プロジェクトのWebサイトで、ディレクションと実装を担当。
ディレクターとして全体の進行を管理しながら、UI設計、コーディング、WordPressでのサイト構築まで手がけました。
支給されたPCデザインをもとにスマートフォンのレイアウトを設計し、関係者と要件を調整しながら制作を進行。
先方からのご要望に応え、マップ上のアイコンやメニューの選択に応じて情報が切り替わるUIをJavaScriptで実装し、オリジナルプラグインの開発も行いました。

Webサイト /
元祖白熊公式 複数ページ制作 

Web Development /
WordPress

担当ページのコードを、サイト全体で使える共通部品へ

鹿児島を代表する飲食店の公式サイトリニューアルで、制作チームの一員として実装を担当。
担当ページ： 天文館本店1階 / 天文館本店2階 / 白熊について / 白熊販売情報 / よくある質問 / メニューガイド
コーディングとWordPressでのページ構築を行い、担当ページで作成したコードは他ページにも展開できる共通部品として設計。カスタムフィールドの実装にも対応しました。

Webサイト / ネイルサロン 

Web Development / WordPress / Design / Direction

スマートフォン中心の運用はそのままに、サイトを設計する

ネイルサロンのWebサイトで、企画・ディレクションからデザイン、UI設計、コーディング、WordPressでのサイト構築まで、全工程を一人で担当しました。
スマートフォンで情報発信や予約受付を行う先方の運用を変えずに済むよう、サイトの構成を設計。
操作の一貫性を考え、スクロールに応じてナビゲーションがハンバーガーメニューに切り替わる挙動を、メニュー展開時にも適用しています。

Webサイト / リノベーション企業 

Web Development / Design

ラフサイトを出発点に、構造からデザインまで作り直す

リノベーション企業のサイトリニューアル案で、実装を担当。
別の担当者が作成したラフサイトをもとに、HTML構造の再設計からデザインの見直し、レスポンシブ対応まで行い、情報を把握しやすい構成へ全面的に組み直しました。
制作時に提案した改善内容の一部は、現行サイトにも採用されています。

Webアプリ / ECショップシステム 

Web Development / UI Design

バックエンドと連携する、ECの画面設計を担う

Java（Spring Framework）を用いたECシステムのチーム開発で、画面設計と実装を担当。
商品一覧・カート・購入画面のUIを制作し、ショップページから移動してもカート情報を保持できる仕様に対応しました。
テスト用画面の挙動は、JavaScriptで実装しています。

※ポートフォリオ化にあたり、ブラウザ上のみで動作するデモを、本サイト内の別ページに設置しています。

デスクトップアプリ / 家計簿

UI Design / Development / Direction

チーム開発で進行管理と画面設計を担う

JavaのGUIライブラリSwingを用いた家計簿アプリのチーム開発で、進行管理・画面設計・実装を担当。
入力や閲覧のしやすさを考慮し、各画面のUIをJavaでカスタム実装しています。

LINEスタンプ 

Design / Graphics

伝えるために、まず作ってみる

グラフィック系の講義で、LINEスタンプ制作について質問を受ける機会が多くありました。
知見を深めるため愛猫のスタンプを制作し、イラスト制作から申請・販売までの工程を一通り経験しました。

Webサイト / ポートフォリオ

Web Development / Design

実装を軸とする制作者として、メインビジュアルもコードで

当ポートフォリオサイト。
シンプルな見た目を意識しながら、コーディングによる細部の動きや演出にこだわっています。
メインビジュアルには Vanta.js の「Rings」を採用。
ただ導入するだけではなく、マウスホバー時にモノトーンからじんわりと色づく演出（スマートフォンではタップ）、背景として使用する際の視認性を考慮した透明度調整など、独自のカスタマイズを施しています。

Other Works

Web Development / UI Design / Marketing, and more

単ページからサイト構築まで、そのほかの制作実績

特設サイト、宿泊・観光、求人、多言語ページ、楽天トラベルのカスタマイズページ、ASP型ECサイトなど、幅広いWebサイトの制作に携わってきました。
新規制作に加え、ページ更新、機能改修、不具合対応、保守を継続的に担当。
Google AnalyticsやSearch Consoleのデータをもとに、SEO・コンテンツ・流入経路を踏まえた改善提案も行っています。

About

大阪出身、鹿児島市在住。
宿泊・観光業界を中心としたWeb制作会社で、新規制作やリニューアルから公開後の運用まで、Webサイトの実装に携わっています。
サイトを利用するユーザーと、更新・運用を担う担当者の双方にとって使いやすい構成を考えた実装を心がけています。

<略歴>

2005年
独学でWebサイト制作を始め、制作・更新業務に携わる。
2018年
フリーランスとしてWeb関連業務の受託を開始。
2022年
Web・IT事業会社のWeb部門に勤務開始。
主に講師業務やスクール運営に従事。
2025年
鹿児島市へ転居し、現在の制作会社に入社。
Webサイトの実装・運用を担当。

Skill

Strengths

一人でもチームでも、各工程を確かな品質で担う

クライアントとの折衝や要件定義から、設計、実装、サイト構築、公開後の集客を見据えた改善提案まで担当。
デザインも監修できる水準で、一人で制作を完結できます。
要件が固まりきらない段階や限られた期間でも、仕様の決定と実装を並行させて形にします。

チーム制作では実装と進行管理を担い、工程間の認識をそろえて円滑に進行。
問題につながりそうな点は早期に察知し、先回りして対策。
顧客への投資と自社の採算のバランスも考慮し、役割にとらわれず、必要な工程で確実に成果を出します。

Web Creation & Development

SEOやAI検索を意識した、セマンティックなHTML設計が得意です。
レスポンシブ設計やCSS・JavaScriptによるアニメーションを、操作性と表示速度まで意識して実装。
WordPressはテーマもプラグインもゼロから開発。
サイト構築全般から、サーバー移管やドメイン設定まで対応。
SEOに加え、Googleマップ検索向けのMEO対策も行います。

  • HTML / CSS
  • JavaScript / jQuery
  • WordPress / PHP
  • Web Deployment
  • デザイン全般
  • SEO / MEO / アクセス解析

Back-end

バックエンド開発の基礎を習得し、短期間ながら実務も経験。
システム開発の工程やデータの流れへの理解を、Webサイトの実装にも生かしています。

  • Java
  • Spring Framework
  • SQL / PostgreSQL
  • C / C++

Web / IT Instruction

Web制作を中心に、講師として指導を担当。
専門用語をそのまま伝えず、相手の知識や理解度、目的に合わせて説明することを大切にしています。
この経験は、クライアントとの要件調整や操作説明、改善提案の場でも生きています。

  • Webコーディング実践
  • プログラミング基礎
  • Webデザイン全般
  • SEO / MEO
  • プロジェクトマネジメント
  • ポートフォリオ制作
  • PC基礎 / 安全衛生
  • 資格取得 (IPA,Web関連など)
  • 動画編集

Main Tools I Use

制作から運用、アクセス解析、チームでの情報共有まで、日常的に使用している主なツールです。

  • Visual Studio Code
  • Figma
  • Canva
  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Premiere Pro
  • Git / GitHub / GitLab
  • Google Analytics
  • Google Search Console
  • Google Workspace
  • AI Assistants

Other Professional Skills

Web制作以外にも、さまざまな分野で実務を経験してきました。
観光の現場や事業の立ち上げに携わった経験から、クライアントの業種や事業の目線に立って、サイトの目的を考えることを大切にしています。

  • 音楽制作 / プロデュース
  • 映像制作 / 動画編集
  • イベント企画 / 運営
  • ネイチャーガイド (観光,山岳)
  • 事業に関する協会立ち上げと運営
  • 障害者福祉 (就労移行支援)
  • 職業訓練校 (責任者,主任講師)
  • 事業立ち上げ (インバウンド,外国人材派遣など)
  • 就職相談 / 支援