今回、一心舎のホームページをリニューアルしました。見た目も変えたんだけど、いちばん変わったのは「作り方」なんだよね。
うん。今回は、チャッピーと会話しながら作っていったんだよね。これまでとは、どんなところが違った？
今まではWordPressとElementorを使って、人が画面を操作しながら作ったり、更新したりしていたんだ。今回はWordPressを残して、Elementorを外したんだよね。
そうだね。WordPressは、記事やページを管理する土台。Elementorは、その上で画面を見ながらレイアウトを作れる道具だよ。
今回はWordPressの基盤はそのままに、ページの構成や見た目をHTML＋CSS中心のシンプルな構造に作り替えたんだ。
HTMLとかCSSって、聞いたことはあっても、何をするものかわからない人もいるよね。
ざっくり言うと、HTMLはページの骨組み、CSSは色や文字の大きさ、配置などを整えるものだよ。
家にたとえるなら、部屋の構成を決めるのがHTML、壁の色や内装を整えるのがCSS、というイメージかな。
その形にすると、サイトを軽くしやすいし、デザインの自由度も上がる。そこがメリットなんだよね。
うん。必要な構造や機能を整理して、読み込むものを減らせるから、軽量化につなげやすいんだ。
ただ、表示速度は写真の容量やサーバーなどにも左右されるよ。Elementorを外しただけで必ず速くなる、とは言い切れないので、実際の表示を確認していこうね。
デザインも「この余白をもう少し詰めたい」とか「スマホではこの順番で見せたい」とか、細かく調整できるのがいいね。
そうだね。HTMLやCSSを直接調整するので、用意された部品の設定だけでは合わせにくい部分も、狙った形に近づけやすくなるよ。
でも、いいことばかりでもない。コードがわからないと作るのが難しいし、わかる人でも、一つひとつ書くのには時間がかかる。
そこが制作のハードルだね。画面を見ながら直感的に編集できた部分も、コードの調整が必要になることがある。作ったあとの更新方法まで考えておきたいところだよ。
今回、そのコードを書く部分をチャッピーが代わりにやってくれたんだよね。それも、驚くほどのスピードと正確さで。
トッティーが「どうしたいか」を伝えて、それをチャッピーがコードにする。そんな役割分担だったね。
「ここをもう少しシンプルにして」「この部分はカードを並べるように見せたい」「スマホでは縦並びにして」。そんな感じで話すと、形になっていく。
それを見て「近いけど、もう少し余白がほしい」と伝えると、また直してくれる。自分でコードを書くのとは、進め方がずいぶん違ったね。
うん。コードを一行ずつ書く作業が、どうしたいかを言葉で伝える作業に変わったんだね。
その分、「何を伝えたいか」「どう見せるとわかりやすいか」を考えるところに時間を使えるようになるよ。
そうそう。しかも、こちらの意図をくみ取って形にするのが速い。正直、ここまでできるんだって驚いた。
ただ、一度の指示ですべて完成するわけではないよね。実際の画面を見て、意図どおりか、スマホで崩れていないかを確認して、必要なところを直していく。そのやり取りも制作の一部だよ。
だから、タイトルにも「ほぼ」と付けたんだ。方向を考えたり、できあがりを確認したりするところは、自分でもやっているからね。
そうだね。トッティーが方向を考えて、チャッピーがコードを書く。そして、できあがったものを確認しながら仕上げる。今回は、その形がうまくはまったんだね。
今までは、コードを書く負担を減らすためにElementorのようなツールを使っていた。そこに、AIにコードを書いてもらうという選択肢が加わったんだなあ。
うん。画面上で自分で編集できる道具にもよさがあるし、AIとコードを作る方法にもよさがある。どちらが合うかは、サイトの目的や、誰が更新するかでも変わってくるね。
とはいえ、まだまだ検証中。作るときはよくても、運用を続けてみないとわからないこともあるよね。
そうだね。文章や写真を更新しやすいか、ページを増やしても管理しやすいか。WordPressの更新への対応や、セキュリティ、メンテナンスも含めて確かめていこう。
まずは一心舎のホームページで実際に使って、気づいたところを直していきたい。その経験を積みながら、お客様にも安心して提供できる形にしていきたいと思っています。
作る速さに加えて、使い続けやすさも確認していくんだね。自社で試したことが、お客様への提案にもつながっていきそうだね。
うん。今回は、ホームページの見た目だけでなく、作り方の可能性も広がった気がする。ここからは運用しながら、また確かめていこう。
使ってみてわかったことは、このブログでもお伝えしていきますね。