Web制作実績

担当業務・役割

• コーディング
• テスト

フレームワーク

Nuxt.js 3

UI ライブラリ

Tailwind CSS

CMS

WordPress (WP REST API)

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

Cloudflare Pages

ツールや言語など

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

コメント

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

担当業務・役割

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

フロントエンド

Next.js

UI ライブラリ

Tailwind CSS

バックエンド

Django

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

• Cloudflare Pages
• EC2

ツールや言語など

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

コメント

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

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

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

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

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

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

担当業務・役割

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

フレームワーク

• Astro
• Tailwind CSS

CMS

WordPress (WP REST API)

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

Cloudflare Pages

ツールや言語など

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

コメント

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

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

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

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

担当業務・役割

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

フレームワーク

Nuxt.js 3

UI ライブラリ

Vuetify 3

CMS

WordPress (WP REST API)

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

Cloudflare Pages

ツールや言語など

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

コメント

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

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

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

担当業務・役割

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

概要

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

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

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

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

ツールや言語など

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

担当業務・役割

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

FW

Gatsby.js

UI ライブラリ

Material UI

CMS

Sanity.io

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

Gatsby Cloud

ツールや言語など

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

コメント

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

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

担当業務・役割

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

フレームワーク

Next.js

UI ライブラリ

Material UI

CMS

WordPress (WP REST API)

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

• 現在：Cloudflare Pages
• 以前：Vercel

ツールや言語など

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

コメント

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

担当業務・役割

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

フレームワーク

Nuxt.js 2

UI ライブラリ

Vuetify 2

CMS

WordPress (WP REST API)

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

Netlify

ツールや言語など

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

コメント

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

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

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

担当業務・役割

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

概要

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

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

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

ツールや言語など

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

担当業務・役割

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

概要

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

ツールや言語など

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

担当業務・役割

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

概要

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

担当業務・役割

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

概要

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

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

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

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

ツールや言語など

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

担当業務・役割

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

概要

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

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

ツールや言語など

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