OUTPUTS / WEB SITE
Astro、microCMS、Cloudflareを組み合わせて構築した、BIZarmの事業サイトです。
使用している技術がどのようなものか、なぜ採用したのか、このWebサイトでどのように使用しているのかを紹介します。あわせて、デザインの考え方と、設計・文章・実装におけるAIの使い方についても説明します。
OVERVIEW
BIZarmのWebサイトには、事業の紹介、支援実績、記事、商品、購入前の案内、利用者向けガイドを掲載しています。
掲載する情報によって、更新する頻度や、画面を細かく調整する必要性が異なります。そこで、すべてを同じ仕組みで管理するのではなく、記事はmicroCMS、商品ページや利用ガイドはAstroのファイルとして管理しています。
BUSINESS SYSTEM
Webサイトは、見た目を整えるだけでは機能しません。
誰に何を伝えるか。情報をどの順番で見せるか。商品をどのように選び、購入後にどう利用を始めてもらうか。さらに、誰が情報を更新し、公開後にどう運用していくか。Webサイトには、事業のさまざまな要素がつながっています。
BIZarmのWebサイトでは、事業、商品、記事、購入、利用開始、問い合わせまでの流れを整理し、それぞれの役割に合ったページ、技術、外部サービスを組み合わせました。
デザインも単独で考えるのではなく、整理した情報や仕組みを、利用する人へ分かりやすく届けるための設計の一部として考えています。
TECHNOLOGY
DESIGN
BIZarmのWebサイトでは、目を引く演出や、装飾を多く使ったデザインを採用していません。
白い背景、左揃えの文章、細い罫線、広めの余白を基本としています。BIZarmの黄色も、見出しやリンクなど、必要な箇所に限って使用しています。
一見すると、特別なデザインには見えないかもしれません。その代わり、文章の幅、要素の位置、上下の間隔、見出しの大きさ、改行の場所を、実際の画面で繰り返し確認しています。
目指したのは、現行サイトと同じくらい普通でありながら、位置、幅、余白、改行がきちんと整っている状態です。
INFORMATION
この方向性を整理する中で、参考になったのがデジタル庁のWebサイトです。最初から見た目を模倣したわけではありません。
BIZarmのサイトを検討した結果、「情報の役割と順序を整理し、その結果として画面がシンプルになる」という考え方が近いと分かりました。
装飾を減らすこと自体を目的にするのではなく、誰が、何を確認するページなのかを決め、必要な情報を配置する。その結果として、必要なものだけが残るデザインを目指しています。
RESPONSIVE
スマートフォンでは、パソコン版の要素を小さくして押し込むのではなく、内容を上から順番に読めるよう配置しています。
横幅の必要な表は表示方法を切り替え、ナビゲーションはメニューボタンへまとめています。パソコンとスマートフォンの両方で、文章の読みやすさと操作のしやすさを確認しています。
DESIGN VARIATIONS
Webサイトに適した表現は、伝えたい内容と、訪れる人にしてほしいことによって変わります。現在のサイトとは異なる2つのデザインサンプルで、同じBIZarmをどのように見せられるかを比較できます。
AI-ASSISTED DEVELOPMENT
BIZarmのWebサイトでは、技術の選定、サイト構成、文章、デザイン、コードの実装にAIを使用しています。
最初に完成した仕様書をAIへ渡し、一度にサイト全体を生成したわけではありません。ページの役割や文章をAIと相談し、合意した内容を実際の画面へ反映する。画面を確認し、違和感があれば、その理由を整理して修正する。この作業をページごとに繰り返しています。
サイトの目的、掲載する情報、更新方法をAIへ伝え、使用する技術と構成を比較しました。提案をもとに、BIZarmの規模と運用方法に必要かどうかを確認しています。
既存のページと今後追加する商品を整理し、サイトマップと情報の階層を検討しました。既存URLの維持や、検索結果に表示しない利用者向けページも含めて設計しています。
AIが文章案を作成し、人が内容を確認しています。抽象的な言葉が続いていないか、実態以上に期待を持たせる表現になっていないかを一文ずつ確認しています。
画面のスクリーンショットとコードをAIが確認し、余白、文字サイズ、要素の位置、改行などの修正案を出します。修正後の画面を人が確認し、採否を判断します。
合意した構成と文章をもとに、AIがAstroのコードを編集します。編集後はWebサイトを生成できるか、パソコンとスマートフォンで表示が崩れていないかを確認しています。
OPERATION
Webサイトは、公開した時点で完成するものではありません。記事を追加し、商品や案内を更新し、利用状況に応じて内容や導線を見直していく必要があります。
一方で、すべての情報を頻繁に更新するわけでもありません。更新する人、内容、頻度に合わせて管理方法を分けることで、必要以上に複雑な仕組みを持たずに運用できます。
BIZarmのWebサイトでは、記事はmicroCMS、構成や表示を細かく調整するページはAstro、問い合わせや決済は外部サービスというように、それぞれの役割を分けています。
公開後も無理なく更新し、必要に応じて改善できることまで含めて、Webサイトの構成を考えています。
Webサイトの新規作成やリニューアルについては、構成を検討する段階からご相談いただけます。
お問い合わせフォームを開く →