Web制作実績

247eigo

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

担当業務・役割

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

FW

Gatsby.js

UI ライブラリ

Material UI

CMS

Sanity.io

プラットフォーム(デプロイ先)

Gatsby Cloud

ツールや言語など

  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • 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
  • Github (Private)

開発期間

1 ヶ月

開発規模

1 人

コメント

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

URL

https://straylancer.com/

Shinobi Works 公式サイト

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

担当業務・役割

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

フレームワーク

Nuxt.js

UI ライブラリ

Vuetify

CMS

WordPress (WP REST API)

プラットフォーム(デプロイ先)

Netlify

ツールや言語など

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

開発期間

1 ヶ月

開発規模

1 人

コメント

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

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

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

URL

https://shinobiworks.com/

Shinobi Blocks(シノビブロック)

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

担当業務・役割

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

概要

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

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

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

ツールや言語など

  • HTML
  • CSS
  • PHP
  • JavaScript
  • 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
  • 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