レンタルサーバー「MIC-Sサーバー」のご契約者様向けサポートサイト（以下「本サイト」という。）を制作しローンチいたしました。
弊社で、コンテンツ企画、デザイン、コーディングおよびデプロイまで全工程を行いました。
デザイン
これまで弊社では、ページやUIのデザインは、Adobe XDで行なっておりましたが、本サイトは、Figmaで制作してみました。
コンポーネントの作り方、バリアントの設定などXDとは異なる部分もありますが、Figmaの方がUIやコンポーネントを管理しやすく制作スピードも速かった印象があります。
本サイトのUIは、「shadcn/ui」ベースに、一部を「MUI」でデザインしました。
コーディング
フロント側は、Next.jsで構築し、CMSは、WordPressで構築しました。
本サイトでは、GraphQLを使用しWordPressの投稿記事をフロント側に表示させる方法を取りました。
マニュアルやFAQページは、CMSを使用せずにドキュメントライブラリ「Markdoc」を使用してみました。
初期設定など学習コストがありますが、マークダウン記法で書けるため、記事の作成は簡単に行えます。
メールフォームは、UIは、MUIをベースで使用し、react-hook-form、zodなど王道のライブラリを使用し、メール送信は、Resendのサービスを利用しています。
MUIのdatepickerコンポーネントの設定にやや苦労したものの大きな問題なくできました。
最後に
結果的に、CMSは、WordPressにしなくても良かったかもしれませんが、中小企業のクライアントが多い弊社では、無料で利用できるWordPressの要望が多く出ます。
Next.jsを利用したモダンなサイト構築をしつつ、WordPressも併用できるので、同じようなご要望を持つ企業様、ぜひご依頼ください。