Web制作実績

Shinobi Works 公式サイト v3.5

Shinobi Works 公式サイト v3.5

Nuxt3で構築した静的サイトをTailwind CSSでリニューアル

担当業務・役割

  • コーディング
  • テスト

フレームワーク

Nuxt.js 3

UI ライブラリ

Tailwind CSS

CMS

WordPress (WP REST API)

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

Cloudflare Pages

ツールや言語など

  • WordPress (WP REST API)
  • JavaScript
  • TypeScript
  • Vue.js
  • Github (Private)

開発期間

2日

開発規模

1 人

コメント

Nuxt3 と Vuetify で構築した Shinobi Works の公式サイトを Tailwind CSSでリニューアルしました。ダークモードにも対応し、モバイルファーストでデザインされています。

URL

https://shinobiworks.com/

会員ポータルサイト

会員ポータルサイト

Next.jsとDjangoで構築した会員サイト

担当業務・役割

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

フロントエンド

Next.js

UI ライブラリ

Tailwind CSS

バックエンド

Django

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

ツールや言語など

  • Python
  • Django
  • JavaScript
  • TypeScript
  • React
  • Github (Private)

開発期間

4 ヶ月

開発規模

1 人

コメント

AIを活用した中規模な会員ポータルサイトを作成しました。

会員登録、ログイン、退会、パスワードリセット、メール認証、会員限定のコンテンツ閲覧などの機能を実装し、フロントエンドとバックエンドの連携を確認しながら開発を進めました。

AIの機能はOpen AIのGPT-3.5を利用し、特定のデータを基に新しいデータを返すユニークな機能を実装しました。

当プロジェクトでは、実験的に開発にもAIを導入し、これまで扱ったことのない言語やフレームワークでの開発が、どの程度実用的に行えるかを検証しました。まだまだ実用的に使えない部分もありましたが、開発のスピードアップには大きく貢献してくれました。

デプロイ先にはデファクトスタンダードなEC2を選択し、それに伴い、ファイルアップロードにS3、メール送信にSES、ドメイン管理にRoute53、CDNにCloudFrontなど、AWSサービスを活用しました。

初めて尽くしの開発だったため、開発期間は予定よりも長くなりましたが、開発を通して新しい技術やサービスを学ぶことができ、今後の開発への自信にもつながりました。

Ringorin公式サイト

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

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

https://startoo.co/class/

247eigo

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

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（シノビブロック）

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）の制作

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

担当業務・役割

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

概要

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

ツールや言語など

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

開発期間

1 日

開発規模

1 人

Shinobi Reviews（シノビレビュー）

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テーマ制作

WordPressテーマ制作

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

担当業務・役割

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

概要

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

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

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

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

ツールや言語など

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

開発期間

3 週間

開発規模

1 人

4536

4536

多機能型WordPressテーマ

担当業務・役割

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

概要

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

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

ツールや言語など

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

開発期間

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

開発規模

1 人

URL