STUDIOで「Box」がたくさん並んで、どこに何があるのか分からない！

ホームページを制作するとき、皆さんは何を大切にしていますか？

デザインの美しさ、スマートフォンでの見やすさ、必要な情報が伝わることなど、さまざまなポイントがあります。

私が最近、改めて大切だと感じたのは、「ホームページを作った後も、分かりやすく更新できること」です。

現在、私はノーコードWeb制作ツール「STUDIO」を使って、自分のホームページを制作しています。

その作業の中で、ちょっとした問題に気づきました。

モックアップをSTUDIOに反映するため、Codexを活用しています

今回のホームページ制作では、まず完成イメージとなる「モックアップ」を用意しました。

モックアップとは、ホームページのデザインやレイアウトを事前に確認するための見本のことです。

現在は、このモックアップを参考にしながら、STUDIOの編集画面で一つずつボックスを配置し、手動でデザインを再現しています。

その際、相談相手として活用しているのが、OpenAIの開発支援AI「Codex」です。

「この部分はどのような構造にすればよいか？」

「ボックスをどのように整理すれば、後から修正しやすいか？」

といったことをAIに相談しながら、実際の操作は自分で行っています。

AIが自動的にホームページを完成させてくれるわけではありませんが、構造を考えたり、作業方法を検討したりするうえで役立っています。

「Box」がたくさん並んで、どこに何があるのか分からない！

STUDIOでは、文章や画像、ボタンなどを「ボックス」という仕組みで配置し、ホームページを組み立てていきます。

ところが、制作を進めていくと、レイヤーパネルに「Box」という名前がたくさん並んでしまうことがあります。

例えば、文章を少し変更したいだけなのに、どのボックスを選べばよいのか分からない。

似たような名前が並んでいると、目的の場所を探すだけでも時間がかかってしまいます。

制作している本人でも迷うことがあるのですから、後から別の人が更新する場合は、さらに大変かもしれません。

AIの自動命名は便利。でも、思わぬ落とし穴も

STUDIOには、AIがレイヤーの名前を自動で付けてくれる便利な機能があります。

キラキラした稲妻のようなアイコンをクリックすると、AIが名前を付けてくれる仕組みです。

ただ、私自身、作業中にこのアイコンを誤ってクリックし、意図せず名前を変更してしまったことがあります。

自分で考えて整理した名前が別の名前に置き換わり、元に戻すのに手間がかかりました。

AIによる自動命名は便利な機能です。

ただ、ホームページ全体で名前の付け方を統一したい場合には、自動化に任せきりにせず、確認しながら使うことも大切だと感じました。

役割が分かる名前に整理しています

そこで、Codexにも相談しながらボックス名を整理しています。

例えば、ホームページの上部なら「Header」、サービス紹介なら「Service」、お問い合わせ部分なら「Contact」といったように、役割が分かる名前を付けています。

これは、今すぐ見た目が変わる作業ではありません。

でも、将来ホームページを修正するときには、きっと役立つと考えています。

AIにすべてを任せるのではなく、AIの力を借りながら、自分でも内容を理解して整理していく。

そんな使い方を実践しています。

お客様が自分で更新できるホームページを目指して

ホームページを制作会社に依頼した後、

「営業時間を少し変更したい」

「新しいサービスの説明を追加したい」

「写真を入れ替えたい」

といったことは、きっと出てくると思います。

そのたびに制作会社へ依頼しなければならないと、時間も費用もかかってしまいます。

もちろん、専門的な修正は制作者に任せた方が安心な場合もあります。

しかし、簡単な文章や画像の変更については、お客様自身で対応できる環境があると便利です。

そのためには、管理画面の分かりやすさや、ホームページ内部の整理も重要だと感じています。

見えない部分にも、使いやすさへの工夫を

ホームページの品質は、見た目だけで決まるものではありません。

制作後の管理のしやすさ、更新のしやすさ、将来の修正のしやすさ。

こうした、普段は見えない部分への配慮も大切だと思います。

私自身、STUDIOでホームページを制作しながら、今もさまざまなことを学んでいます。

今回のボックス名の整理も、その一つです。

これからもAIなどの新しい技術を取り入れながら、お客様が安心して使い続けられるホームページ制作を目指していきたいと思います。

ホームページの制作や更新、管理についてお困りのことがありましたら、お気軽にご相談ください。