クオックスでは、社内ポータルサイトをGoogleサイトを使って作成し、社内全員で編集しながら運用しています。

長年なんとなく使っていたのですが、なんとなく使っていたため、よくわからないページが増え、メニュー分類もわけがわからなくなり、見た目が悪いだけでなく、必要な情報を探すのも更新するのも面倒になってきました。

これはいけない！　と思い立ち、ポータルサイトを整理することにしました。その備忘録です。

リニューアル前後の比較

トップページのリニューアル前後を比較するとこんな感じです。

モザイクを入れたとはいえ、ぐちゃぐちゃな状態をお見せするのは恥ずかしいですが……。

片付けるとスッキリしますね！

まずはサイト内のメニューを把握する

ポータルサイト内にどのくらいメニューがあるのか？

サイト内のページと外部リンクを一覧にしました。「とりあえず」で貼ったリンクや、作ったまま隠されたページ、下層リンクまで抽出し、この先も必要か、削除するか、どのように分類するかを検討しました。

• まとめられるものはまとめる
• もう使わないページは削除
• 読み物のようなページや文書化できるページはPDFにして共有ストレージに保存し、ポータルサイトにはリンクをまとめる
• 頻繁にアクセスする外部サービスへのリンクを追加

全部で85のメニューが存在していましたが、50まで減らしました。

完成イメージを妄想する

メニューリストをGeminiに渡して、トップページのデザイン案を作ってもらいました。

Googleサイトの機能で再現可能なデザインで、使うフォントはこれ、メニューを勝手に増やしたり合成したりしない、とか指定しても無視しますね。

Googleサイトでこのデザインはできないよね？　と聞いても「こうしたらできますよ！」と自信満々でトンチンカンな答えを返してきます。

なんか10年以上前に流行ったダッシュボードテンプレートっぽい色だし、ぱっと見はまとまってても視認性悪いしメニューのつながりがわからないし、なんかさぁ見た目は綺麗でもこれデザインじゃないよね？　わかってる？　とか言いたくなりますが我慢して先に進みます。

まあね、参考程度にね、うん。

ありがとうね、Gemini。

Googleサイトのテンプレート販売ページなどを見ながらイメージを固めていきました。

https://www.kirksvillewebdesign.com/google-sites/google-sites-templates

https://www.imaketemplates.com/google-sites-free-templates

https://www.templateheaven.store/google-sites-templates/popular-google-sites-templates

LPやポートフォリオ向けのデザインが多く、社内ポータルサイトとは毛色が違うんですが、シンプルなレイアウトであっても、画像・色・フォントでできることって多いんだなあ……と気持ちが引き締まります。

画面を作っていく

ちくちくと１ページずつ内容を整理していきます。

見た目も整えつつ、文章もわかりやすくリライトしました。

社内の決まりやツール類の設定方法など、記載事項を総務にも確認しながらまとめ直します。

上部固定メニューだと下層ページを探しにくかったので、左袖メニューに変更しました。

用意されているテーマがイマイチだったので、コーポレートカラーに合うようにカスタムテーマを設定しました。

Googleサイトにパンくずリンクの機能はないので、地道にテキストとリンクで作っています。

数日かけてリニューアルが完了しました。

見栄えのためのテクニック

今回のリニューアルで見栄えを少し良くするために使ったテクニックをまとめておきます。

カラムの基本

まず、セクションは12カラムに分割され、横並びレイアウトを作ることができます。

タブスペースを使った横並びレイアウト

Googleサイトで用意された要素では、カラム内に入れ子で横並びにできるアイテムやテーブルは用意されていません。

HTMLをブロックとして挿入することもできますが、表示が重くなり、HTMLを知らない人には編集が難しくなります。

見た目がテーブルっぽく見えればよく、HTMLを知らない人でも簡単に編集できるようにしたいので、カラム内で横並びレイアウトにする際はタブスペースを使って文字を揃えるように統一しました。

フォント追加

フォント選択時に表示される「その他のフォント」メニューから、フォントを色々と追加できます。

Googleフォントに登録されているものなら使えるのでは。

今回、絵文字がアイコン風に見えるよう、Noto Emojiフォントを使用しました。

行間隔設定

色々と制約が多いGoogleサイトですが、行間隔だけは細かく数値で設定することができます。

組み合わせる

カラム設定・絵文字フォント・タブスペース・行間隔設定を組み合わせると、アイコンとグリッドレイアウトを組み合わせたような見た目にすることが可能です。

ただし勝手にレスポンシブ設定にされるので、スマートフォンなどの横幅が狭い端末で見るとカラムごとに改行されます。それが許せる方は試してみてください。