Googleサイトで社内ポータルを作ってみた｜AIとHTMLを活用した制作記- 働くママの広報ラボ

「WordPressでポートフォリオサイトを作った話」をブログに書きましたが、今回は別の話です。

職場（旅館はなや）のAI研修チームのプロジェクトとして、Googleサイトで社員紹介サイトを作りました。

WordPressとGoogleサイト、両方を使ってみた私が感じた違いや、制作過程で学んだこと・つまずいたことを正直にお伝えします。広報担当として社内ポータルを作りたい方の参考になれば嬉しいです。

なぜGoogleサイトで作ったのか

WordPressはポートフォリオサイトや外部向けブログには最適です。しかし社内向けのポータルサイトとなると、少し事情が変わります。

Googleサイトを選んだ理由は3つです。

① 無料で使える Googleアカウントがあれば、費用ゼロで作れます。社内向けツールにコストをかけたくない場面では理想的です。

② 社内で共有・編集しやすい Googleドライブと連携しているため、社内メンバーと権限を分けながら共同編集できます。「広報担当が作って終わり」ではなく、各スタッフが自分のプロフィールを更新できる仕組みも作れます。

③ 専門知識がなくてもある程度作れる テキストや画像の追加はドラッグ&ドロップでできます。HTMLの知識がなくても基本的なページは作れます。

Googleサイトのデフォルト機能だけだと、デザインの自由度に限界があります。特に社員紹介のプロフィール部分は、きれいに見せたい。

そこで活用したのがAI×HTML埋め込みです。

やり方はシンプルです。

これをやることで、狙い通りの色味・フォント・レイアウトを素早く再現できました。デザインの知識がなくても、AIが「見た目を言葉ではなく画像で理解して」コードを出してくれるので、イメージ通りのものが作りやすいです。

注意点：修正はコードを直接書き換える必要があります

AIが出してくれたコードを修正するとき、HTMLを直接編集する必要があります。全くの初心者だと少しハードルがあります。ただし構造さえ理解できれば、部分修正は意外と簡単です。「この色を変えたい」「この文字サイズを大きくしたい」という修正は、AIに「この部分をこう変えて」と依頼するだけで対応できます。

① PC・スマホ両方での表示確認が必要

HTMLで作ったプロフィールブロックは、PCでは綺麗に見えてもスマホで崩れることがあります。Googleサイト上でのページ全体の配置はPC・スマホで異なるため、必ず両方で実機確認することが大切です。

また、HTMLフレームのサイズを統一するとき、Googleサイト上では複数フレームを一括選択してサイズ変更ができません。個別に手動で調整する必要があり、スタッフが多い場合は少し手間がかかります。

② 画像の参照先に注意

最初、Googleドライブの画像URLをHTML内に埋め込もうとしたところ、アクセス権限の問題で画像が正しく表示されないトラブルが発生しました。

解決策として、外部公開を見据える場合はWebサーバーに画像を配置してURL参照する方法が最もスムーズでした。社内限定公開であれば、Googleドライブの共有設定を「リンクを知っている全員」にすることで解決できます。

③ 画像のリサイズ・トリミングは事前に

Googleサイトの画像埋め込み機能では、細かなトリミング調整ができません。スタッフ写真のサイズや顔の位置がバラバラだと、並べたときに統一感がなくなります。

事前にCanvaや画像編集AIで顔が中央に収まるようトリミング・リサイズしてからアップロードすることを強くおすすめします。

両方を使ってみて感じた使い分けの基準です。

広報担当者として、この2つを使い分けられると社内・社外の情報発信の幅が大きく広がります。

▼合わせて読みたい

クラウドワークス・coconalaからのご依頼もお気軽にどうぞ。 クラウドワークス　 coconala