Web制作実績

Ringorin公式サイト

AstroとTailwind CSSで構築した静的サイト

担当業務・役割

  • 企画立案
  • 要件定義
  • コーディング
  • テスト
  • 保守・運用

フレームワーク

  • Astro
  • Tailwind CSS

CMS

WordPress (WP REST API)

プラットフォーム（デプロイ先）

Cloudflare Pages

ツールや言語など

  • HTML
  • CSS
  • PHP
  • JavaScript
  • TypeScript
  • React
  • Tailwind CSS
  • Github (Private)

開発期間

2 ヶ月

開発規模

1 人

コメント

イラストレーターのポートレートサイト制作を担当しました。

Web フレームワークに Astro、CSS フレームワークに Tailwind CSS を採用。どちらも初めて扱うものでしたが、これまでの知見を流用することができたため、すぐに慣れました。

作品一覧とブログが混在する形でしたが、展覧会のように作品をちゃんと見せたかったため、トップページからブログや他のページへの動線は目立たせないようにしました。

全体的に画像が多めのサイト構成ですが、Astro の強力な静的ビルド機能と、Cloudflare Pages のレスポンスの速さが功を奏し、パフォーマンスも SEO 対策もベストな状態で稼働しています。

URL

https://ringorin.com/

Shinobi Works 公式サイト v3

Nuxt3で構築した静的サイト

担当業務・役割

  • 企画立案
  • 要件定義
  • コーディング
  • テスト
  • 保守・運用

フレームワーク

Nuxt.js 3

UI ライブラリ

Vuetify 3

CMS

WordPress (WP REST API)

プラットフォーム（デプロイ先）

Cloudflare Pages

ツールや言語など

  • HTML
  • CSS
  • Sass
  • PHP
  • JavaScript
  • TypeScript
  • Github (Private)

開発期間

半年以上（正式版リリースの待機期間含む）

開発規模

1 人

コメント

Nuxt2 で構築した Shinobi Works の公式サイトを Nuxt3 でフルリニューアルしました。サイトの構成だけが変わった形です。

v3 用のブランチを切ったのは開発終了の半年以上も前ですが、デモ、RC 版の時からの開発だったため、実際の開発期間は数ヶ月程度です。

今回のフルリニューアルでは、余計なことはせずに、シンプルに Shinobi Works について表現することが目的だったため、トップのヒーローエリアのアニメーションにlottie-webを使っている以外に、デザインやレイアウトに関して特筆すべきポイントはありません。

URL

https://shinobiworks.com/

子供の習い事教室検索ポータルサイト

Next.jsとLaravelでポータルサイトを構築

担当業務・役割

  • 要件定義
  • コーディング
  • テスト
  • デプロイ

概要

様々な経路で全国の習い事教室を探せるポータルサイトの開発を担当しました。

サイトの稼働環境や納品後の保守性も考慮し、フロントエンドに Next.js、バックエンドに Laravel を採用しました。

Laravel を扱うのは初めてでしたが、公式のドキュメントも充実していて、特に大きくつまづくこともなく進めることができました。教室情報は手入力の他に Excel でのインポートにも対応。全国の教室情報を扱うため、膨大なデータ量と情報の正確性をチェックする必要がありましたが、Laravel Excelのエラーハンドリングを駆使し対応しました。

デプロイ先に指定があったこともあり、SSG の他に一部ページで SPA を採用。バックエンドからSWRでコンテンツを取得しています。

ツールや言語など

  • HTML
  • CSS
  • PHP
  • Laravel
  • React
  • JavaScript
  • TypeScript
  • Github (Private)

開発期間

1 ヶ月半程度。

開発規模

1 人

URL

247eigo

Gatsby.jsで構築した静的サイト

担当業務・役割

  • 企画立案
  • 要件定義
  • コーディング
  • テスト
  • 保守・運用

FW

Gatsby.js

UI ライブラリ

Material UI

CMS

Sanity.io

プラットフォーム（デプロイ先）

Gatsby Cloud

ツールや言語など

  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • React
  • Github (Private)

開発期間

1 ヶ月

開発規模

1 人

コメント

オンライン英会話スクールを様々な角度から比較できるサイトを構築しました。一般的な PHP サイトとは違い、ソートや絞り込みの結果をすぐに表示に反映できるため、ストレスなく使うことができます。

CMS に Sanity を選んだ主な理由は、何を、どのように、どれくらい、データベースに格納するかを構造的に設計できるためです。また、Sanity 側でデータをホスティングしてくれるため、オンラインで管理できる、モノレポ化できる、などの副次的なメリットもありました。

URL

https://247eigo.com/

フリーランスお悩み相談室

Next.jsで構築した静的サイト

担当業務・役割

  • 企画立案
  • 要件定義
  • コーディング
  • テスト
  • 保守・運用

フレームワーク

Next.js

UI ライブラリ

Material UI

CMS

WordPress (WP REST API)

プラットフォーム（デプロイ先）

ツールや言語など

  • HTML
  • CSS
  • PHP
  • JavaScript
  • TypeScript
  • React
  • Github (Private)

開発期間

1 ヶ月

開発規模

1 人

コメント

フリーランスのよくある悩みを回答するサイトを構築しました。フロントエンド側の構築は Next.js で、コンテンツ管理のみ WordPress で行っています。

URL

https://straylancer.com/

Shinobi Works 公式サイト v2

Nuxt2で構築した静的サイト

担当業務・役割

  • 企画立案
  • 要件定義
  • コーディング
  • テスト
  • 保守・運用

フレームワーク

Nuxt.js 2

UI ライブラリ

Vuetify 2

CMS

WordPress (WP REST API)

プラットフォーム（デプロイ先）

Netlify

ツールや言語など

  • HTML
  • CSS
  • Sass
  • PHP
  • JavaScript
  • TypeScript
  • Github (Private)

開発期間

1 ヶ月

開発規模

1 人

コメント

Shinobi Works のポータルサイトです。提供サービスや制作実績などを紹介しています。

型安全な開発のために TypeScript を導入し、データの管理には Vuex を使用しています。トップのアニメーションはアフターエフェクトで動きをつけたものを svg 形式で出力し、lottie-webで表示しています。

SEO 対策としてブログも更新しており、毎日多くのユーザーが訪れていました。

URL

https://shinobiworks.netlify.app/

Shinobi Blocks（シノビブロック）

リッチスニペットに対応したWordPressブロックプラグイン

担当業務・役割

  • 企画立案
  • 要件定義
  • コーディング
  • テスト

概要

wordpress.orgから配布している公式の WordPress プラグイン。

「How To」と「FAQ」の表示ができるだけでなく、構造化データとして保存することで、リッチスニペットへの表示も可能にしました。

WP Tavern に掲載された実績も。

ツールや言語など

  • HTML
  • CSS
  • PHP
  • JavaScript
  • React
  • Github (Private)
  • Subversion

開発期間

初期リリースまで 2 ヶ月。（現在は開発休止中）

開発規模

1 人

URL

https://ja.wordpress.org/plugins/shinobi-blocks/

ランディングページ（LP）の制作

LPのコーディング・ホスティング

担当業務・役割

  • コーディング
  • ホスティング

概要

Adobe イラストレーターのデザインカンプを元にコーディングを行う業務に携わりました。

ツールや言語など

  • HTML
  • CSS
  • Sass
  • PHP
  • jQuery
  • JavaScript
  • TypeScript
  • Github (Private)

開発期間

1 日

開発規模

1 人

Shinobi Reviews（シノビレビュー）

カスタマーレビューを集めるためのWordPressプラグイン

担当業務・役割

  • 企画立案
  • 要件定義
  • コーディング
  • テスト
  • 保守・運用
  • ユーザーサポート

概要

wordpress.orgから配布している公式の WordPress プラグイン。

データ管理でのみ WordPress の機能を使っており、その他の、表示や動きの部分は純粋な React で構成されています。プラグイン自体が持っている機能が多く、品質を維持・向上するために、PHPUnit でのテストおよび TypeScript での型安全な開発を行っています。

バックエンド側は、他のプラグインとの干渉がないため、UI にMaterial UIを使用。データの取得や保存はaxiosで非同期に行っています。

フロントエンド側は、他のプラグインとの干渉が考えられるため、Emotionでコンポーネント毎にスタイリングを行っています。スパム防止にreCAPTCHAの v3 を使用し、ユーザーの判定を非同期に行っています。

フォームの送信には、フロントエンド、バックエンドともにReact Hook Formを使用。

ツールや言語など

  • HTML
  • CSS
  • PHP
  • JavaScript
  • TypeScript
  • React
  • Github (Private)
  • Subversion

開発期間

初期リリースまで 2 ヶ月。（現在も開発中）

開発規模

1 人

URL

WordPressテーマ制作

Google for Jobs（Googleしごと検索）に対応したWordPressテーマ制作

担当業務・役割

  • 企画提案
  • 顧客折衝
  • 要件定義
  • Web デザイン
    • ワイヤーフレーム制作
    • UI デザイン
  • コーディング
  • テスト

概要

「求人サイト」のコンペティション案件。20 件ほどの応募の中から選ばれました。

デザインでの提案が王道でしたが、自然検索での露出には時間がかかること、そして、人員が充足した場合の検索結果からの削除にも一定の時間を要することから、※Google for Jobs（Google しごと検索）に対応したページが必要だと判断し、提案しました。

コンペティション案件で納品後のサポートができないため、担当者自身で更新ができるよう、すべての機能をパッケージ化した WordPress テーマで構築し、納品しました。

※求人関連のクエリで表示される特別なリッチスニペット。重要な情報のため、すぐに更新内容が反映される専用のインデックスシステムがある。

ツールや言語など

  • HTML
  • CSS
  • PHP
  • jQuery
  • JavaScript
  • Github (Private)

開発期間

3 週間

開発規模

1 人

4536

多機能型WordPressテーマ

担当業務・役割

  • 企画立案
  • 要件定義
  • コーディング
  • テスト
  • 保守・運用
  • ユーザーサポート

概要

無料で配布していた多機能型 WordPress テーマ。

テーマカスタマイザーでのカラーやレイアウトの変更を始め、htaccess ファイルへのリダイレクト情報の書き込みや、リッチスニペットに対応したレビュー機能の実装など、多くの機能を実装していました。

ツールや言語など

  • HTML
  • CSS
  • PHP
  • JavaScript
  • Github (Private)

開発期間

初期リリースまで 3 ヶ月。その後、4 年以上ユーザーからのフィードバックをもらいながら継続的に開発。（現在は開発停止）

開発規模

1 人

URL