このサイトの位置づけ = 自らを「デモサイト」に

「さくプロHP」は、「さく」っと短期間・低価格で、「プロ」の技術とノウハウを盛り込み、お客様のビジネスの「集客に役立つ」、「ハイクオリティ」なホームページを制作するサービスです。
このサービスを提供するにあたり、このサイト自体を事例/デモサイトの１つにしてしまおうと考えました。
さくプロHPで使用しているオプションサービスも使用することで、提供イメージを掴みやすくできれば、とおもいます。

制作する上で工夫した点

• Figma からStudioへのデザインの継承
  情報レイアウトの設定とデザインワークをFigmaで行い、Figmaの定義をStudioに連携して制作を行いました。
  実際、お客様サイトの制作を行う際も、Figmaによるデザインワークを行います。

• 独自の部品ライブラリによる表現の統一
  「さくプロHP」では、独自の部品ライブラリを制作し、継続的にバリエーションを増やしています。
  このサイトでも、全ページについて部品ライブラリを使用、情報レイアウトや表現を統一しました。

• CMSの徹底活用
  CMSをデータベースとして活用することで、高度なWebサイトを構築できます。
  このサイトでもデータベースと親和性の高い情報をCMSで管理するよう情報設計を行っており、容易にデータの追加などのメンテナンスをCMSで行えるようにしています。
  ■ 使用箇所： 業種別サンプル、事例、インタビュー、コラム、おしらせ など

• タグによる柔軟な検索
  CMSに関連しますが、データベースにタグをもたせることで、柔軟な検索ができるUI設計としており、複数の検索軸から閲覧者の興味にあわせて検索いただける仕組みを提供しています。

• LPとしても使用できるトップページ構成とし、オンライン広告でも活用

構築に利用したサービス

• さくプロHP・プレミアム・プラン

• ドメイン取得オプション

• AIライティング・オプション

• AI画像生成オプション

制作者目線での「さくプロHP」の印象

「さくプロHP」ではノーコードツール「Studio」を採用しています。
このツール自体、非常に使いやすく柔軟性の高いツールで、特にCMSの使い勝手がいいところがとても気に入り、制作ツールとして採用しました。デザインワークからサイト制作作業にシフトする際、FigmaとStudioが連携可能である点も、Studioを採用したきっかけの1つです。

ただ、自由度が高い分、制作作業において類似/重複する作業が多く発生しがちだと感じました。
そこで「さくプロHP」では、情報配置の事前定義（業種別）やパーツライブラリの整備、CMS構造のパターン化などにより、制作作業において再現性の高い環境づくりをおこないました。
これにより、一般的なサイト制作と比較しても、低価格で高品質なサイト制作サービスを提供できるのではないかと考えています。