市役所のHPも、議会のHPも、読みにくくて仕方がない。別に行橋市の話ではない。
あらゆるものが読みにくいと思っていた。特に議事録は最たるものだった、どうにかならないか。
近い質問もしたし、個別に要望もしていた。市議が議会で指摘しても”どうせ、このあたりは直らない”のが通例で、私ですら半ば諦めムード。”うちの市がへっぽこなんですよ！”と言ってしまうのは簡単なのだろうが、それではただの悪口だ。
ゆえに『議員が、単独で作りました』と、純粋に成果物を突きつける手法を考えました。もっとも建設的で、かつパンチも効いているだろう。
仮想敵というか、ライバルは行橋市ではなく、全国の自治体であったり、ゆえに政令市のHPや、なんなら都道府県のHPなどを含む”可読性”に総力を投入してみました。プロでなくとも「あ、これは勝負あった」と体感できるだけのレベルにまで研ぎ澄ます。
しかし、議事録を議事録として公開するにあたっては、元データから引っ張らざるを得ない各種の要素データがある。項目数が多いのだ。当然、各定例会の議会名、せめて質問日は宣言せねばなるまい。件名がなければ意味もわからないし、発言通告だってある。決議意見書はどうするのだとなると、実は「表示すべき項目」は、地味に膨大であり、そのまま載せると（そら、そうよ）という見苦しいページになってしまう。
ここで出てくるのがインターフェースの設計。ユーザーインターフェース、いわゆるUI。
国立理系、元上場企業の技術者として、私なりの最適解を示したつもりです。
※ アンケートを実施後も、実は手直しが多数あって（気づいていた方もおられるかもしれませんが）すこーし、変わっています。微々たるファインリフレッシュを繰り返しています。
不定期発信にはなりますが、チャンネル登録をお願いします。
表示する要素・機能
可読性の向上の一環として、私の名前を消しました。
ここが最大の部分ではないでしょうか。単に表示エリアがバカ広い。
次に、表示している項目について示しておきます。
議事録を議事録として示すには、相当に多数の出典や文言が必要です。
見た方は、”意外にスッキリしてたやん”と思うかもしれませんが、ここは技術者としては腕の見せ所。掲載している要素データは意外にも多いのです。
・一般質問の表示（例 一般質問 第１部 / 全４部）
→予算を含む議案への、賛成討論や反対討論などの議事録もあるため。
・質問日 （例 令和８年６月１１日）
→サムネイル画像においても表示
・発言回数や所要時間 （例 発言 36回読了 約20分）
・各質問の件名（例 辺野古沖の女子高生死亡事故に関する当市の日教組の関係）
・同定例会中の、別の質問との並列（①②③④で件名への相互リンク）
・どの状態でも、同定例会の質問にジャンプできること。
・ページからページにジャンプした際に、どこにジャンプしたのか脳内が混乱し議事録カテゴリで迷子になることが私もしばしばあるので、遷移時の「画面の横移動（XY軸の左右）」および、上カテゴリの場合は「めくる（Z軸）、とじる」で、視覚的かつ体感的なUX設計を行うこと。
・YouTubeへのリンク （▶議会中継）
・YouTubeを、当該質問の場所に頭出しをして各ページに配置
・出典 （例 行橋市議会 会議録検索システム（令和8年6月定例会（第11回） 令和8年6月11日）の公式会議録より、小坪慎也の一般質問の部分を掲載しています。）
・邪魔にならないようシェアボタンを設置する、かつ利便性を向上させる。可読性も。
・採決日を明記
・可決や否決がわかること、全会一致は表示する。
・意見書の場合は提出先を明記、根拠法令として地方自治法９９条をページ内およびサムネイル画像に記載
・決議の場合は、議会の会議規則なのでそれも明記
・単独提出や起案に関わる等、深く関係する決議意見書（提出者など）と、単に賛同者である場合のインターフェースの差異。および１４年間分の（AIではない手動の）読み込み作業と突合
・関連する一般質問をページ内で表記（デザイン中。アンケート実施後に追加したもの）
・通告した質問の件名、可能な限り通告日
・各質問から戻れること、決議や意見書からも戻れること。
・ただし質問と、決議・意見書は、ページ内遷移において明確な差を設けること。
・一画面内で可能な限りの表示を盛り込み、かつ見た目を軽くすること。可読性の高いフォントを使用すること（JIS規格や国際基準、最新のフォント環境を勉強）
上記を達成するにおいては、要素の量が多くなりすぎるため、見た目がごちゃごちゃするのは当然と言えば当然なのです。それはわかるけれども、「読めない」議事録に意味はありません。
インターフェース仕様、可読性向上のため
単にスクロールする作戦はとりませんでした。いきなり真逆のことを言いますが、まず、すっきりさせればいいというわけでもないのです。それでは画面外に行って消えてしまう。最小限は必須項目で表すべきであり、ある意味でのスクショ対策も考えねばなりません。かつ、長文になりがちなものですから、せめて件名ぐらいは残さないと読んでいてわからなくなる、あまりに長文だと自分が何の議事録を読んでいるか分からない、特にスマホでは。（本音）
可読性の向上の一環として、私の名前を消しました。
ここが最大の部分ではないでしょうか。単に表示エリアがバカ広い。
読みやすさは、エリアの拡張以外に方法はない。昨今は、報道記事を見ていてもあらゆる場所が広告だらけで（読むサイトで）読む範囲が狭いのをバカらしいと思っていた。ストレスだった。
だが、できるかと言えば、難しい。
普通は至らない判断だとも言われた。政治家のサイトで、自分の名前が消えるという仕様は、やれそうでやれない。スクショ対策を述べましたが、なんなら消えていたとしても（自分の満足感が失われるだけで）我慢できると思った、それでも可読性向上のためエリアを広げたかった。
逆に、それぞれの定例会に戻る機能はごく小さなボタンだけども残し、スマホ版でも三本線のメニュー（正式にはハンバーガーメニューというらしい）は、常時表示した。ユーザーにとって重要なもの、利便性だけは残し、私が表示したい部分を削り取るという作業。
地味にインパクトを与えたのはＰＣ版も同様という点。これはノートパソコンで、私が閲覧する時に「（自分でも）自分が邪魔だった」から、なんとメニューを非表示にした。スマホのようなハンバーガーメニューに折りたたみ、クリックするまでは、通常のグローバルナビは畳むようになっている。ノートパソコンにおける一行は、地味に大きな差がある。こちらも画面サイズによっては私の名前すら消える。代わりに、「質問の件名」だけはどのページにおいても残るようになっている。見せるべきは、議事録だ。各定例会への導線も残している、ボタンサイズは小さいながらも。
また、後述するけれども、各定例会単位での、「通告書に記載の項目」の洗い出しについては、もはや通告書そのものを用いました。私たち議員が使っている通告書の、ワードの、ある意味では見た目の古臭い、しかし重みのある書式をそのまま読み込む。ただしワードではなく、html化してコードにして。スマホでもPCでも、生の通告書が触れれるように忠実に再現。
実際の議事録のページ
実物は下記になります。良ければご一読ください。
読むというか、見て欲しい。
私なりにやりたかったことを全部詰め込みました。
ある観点からはwebデザイナーら（プロの法人）からも高く評価されています。あと国会議員。
それは、「単に読みやすい」という一点。
嬉しかった。
一 般 質 問質問日令和8年6月11日テーマ1/ 4定例会令和8年6月定例会議事録件名東九州新幹線構想の推進に対する要望活動議員小坪 慎也議事録を読む。
一 般 質 問質問日令和8年6月11日テーマ2/ 4定例会令和8年6月定例会議事録件名辺野古沖の女子高生死亡事故に関する当市の日教組の関係議員小坪 慎也議事録を読む。
不要なものを洗い出して削り取る。カンナをかけるみたいな作業。
そもそも表記が必須となる項目数が多いわけです、出典なども徹底的にとられねばならない。半ば公文書に近い性格をもつためであり、web技術がどうのこうのではないからです。
必要な要素を徹底的に洗い出し、そして徹底的に削り取る。
AIを使ったんだろうと言われますが、明確にお答えします、使ってます。バリバリ使ってます。
では、必要な要素をAIが決めれるかと言えばそれはNOで、コーディングはAIがやっていますが、ノミとかカンナみたいな使い方をしていて、削りまくるのは私がやりました。便利な工具みたいな扱いです。
ついでに、上記の、それぞれの議事録へのリンクですが、綺麗な画像に見えると思います。
じつは、画像ではありません。
これは各定例会の要素を抜き出し、このようにhtmlに記述するようにショートコード化しました。
そのため、今後のblogで議事録を表示する際には、この形式になります。これも、実はやりたかった部分です。
アンケートしている内容について
背景の「青い部分」です。ほぼ見た目は同じという方もいると思います。
言われてみれば全然ちがうと思う。
①は基本の型です。
恐らく、これが正規採用されると思う。そのつもりでバランスをとりました。
PCもスマホも同様で、背景のブルーは（④に比較すれば）明るいもの。
使っている字体はブロック体です。
スマホでの可読性を最大化しようとすると、ある意味での答えがここになりました。
背景については、高級感のある布をモチーフにしています。
下部メニューの黒いところの「デザイン」を押すと選択して切り換えることができます。
②は、ブルーのドットにしています。
さしたる違いはないものの、件名の後ろに板をひいており、そのことにより発言通告のブロックが切り分けられて、脳としては受け入れやすい形になっていると思います。ここは、実際、板を置きたいとは思いました。
ただし、IT系というか、情報商材みたいな印象になってしまい、目指している高級感や上質さが損なわれると感じています。
ややチープだ、と。
③は、チープにみせないよう、またITっぽさを打ち消すように、板を白にしています。
ある意味では大成功で、目論見通りでした。しかし別の問題が生じます。
それは、目が痛い。
白はまぶしくて、暗い場所で見ると「うーん」というのが印象。
つまり、明るめのブルーをバックにしたブロック体の作りに対し、①からの派生として②や③があるわけです。
お示ししたのは、①②③でありますが、ここに至るまでにはもっと凄まじい数のサンプル数があり、取捨選択していまの状態になりました。
④です。
議員や政治関係者（党職員）からは人気のデザイン。
ちなみに私もこれが好き。
青い色がかなり濃く、どっしりとした印象。
また書体も明朝であり、議会人としては慣れ親しんだフォントです。
また数字の囲みも四角であり、堅い印象を受ける。数字の囲みは四角にしようかな。
しかし、最大の問題点がある。
見た目が重たいわけです。間口を広げる目的で、泣く泣くチャットアプリ風（ようはLINEみたいなページ）にしているのに、「高尚さが強く出すぎる」ことも設計概念とは違う。
そのため、”色調が明るい①”を、ブロック体で選ぼうかなとしている次第なんですね。
長年の私の読者からすれば「別に④でもいいよ」と言ってくれるかもしれませんが、一般化して考えると選びにくい選択肢。
ちなみに背景には幾何学的な文様をいれており、実は①～④はそれぞれ背景が異なります。
読者のみなさまへ（アンケート）
議事録のページ、どのデザインが読みやすいですか？
議事録を、”ブログの記事”として作り直しています。本文（チャットアプリ風の吹き出し）は今後すべての議事録で共通のデザインとします。アンケートは、『一番上の帯の見せ方』だけが違う４つの案です。小さな違いに感じるかもしれませんが、見た時の印象がそれぞれ違うのです。いつか、こういうアンケートを作ってみたかった。夢でした。
参考案も読者側で複数を閲覧できるように設計しており、画面の下の「DESIGN」で切り替えると、実際の画面でお試しいただけます。いちばん良いと思う案を１つ選んで、よろしければ理由もひとことお寄せください。コメントについては、本投票欄のコメントが通常のコメントとして処理されます。
※ 匿名での投票も可能です。
最終的に一本化してしまえば、誰も気づかないような小さな部分なのでしょう。
しかし、最初に目に飛び込んでくる可能性を鑑みれば、これは実は相当に大切な部分です。
ここは、本当にこだわりたい。
最終的な調整は、気が向いたとき。下手すれば１１月の半ばころになると思う。
結局は間口を広げるべく、今回はチャットアプリ風（LINEに似た形）を踏襲しますが、本来なら私が選択したいもの。
速読していくから、明朝で紙風のほうが恐ろしく速い。
今回はアンケート項目からも外しており、採用の可能性はないものです。ただ、単に最初からLINE風にしたわけではなく、この形状も相当に練り上げて検討したというのはお示ししておきたい。
年末とかになるかもしれませんが「集中モード」とかで、切り替え機能として実装する可能性も少しあります。
私個人としては使いやすいものだし。
ただ今回は可読性を最重要視しているので、①～④で決めてしまおうと思ってます。
通告書について
下記を押して頂けますと、「定例会のまとめページ」が表示されます。
これが冒頭の”小さなボタン”です。
定例会のまとめページです。
ここには「発言通告書」を使いました。
実際に、我々が議会で使っているものと同様で、かなり忠実に再現しています。
どれぐらい忠実かと言えば、今後、公開される過去の質問において、（ある意味では私のせいとも言われましたが）拉致問題で教育委員会と衝突したのち県知事からもコメント、行橋市は教育長が長期にわたって不在になっております。その際には、教育長の部分が「教育長職務代理者」になっていたのですが、各定例会の通告書に正式に従っており、通告書の様式が変化します。
また、過去においては一問一答式ではなく一括方式しかなかった時代は、通告書の様式が異なるものでした。そのため当時の議会においては、異なるフォーマットにしており、このページも作っているのは一種類ではありません。忠実に再現するレベルは、これぐらいはやりこまねばと思ったのです。
先ほど画像でお示しした赤い丸の部分を是非押してみてください。
押せます。
一見すると画像やpdfを貼り込んでいるように見えると思いますが、これはコードで書いてるので、
そのため、このエリアそのものがリンクになっており、通告書をそのままクリックできるようにしています。
何を言っているやら分からないと思いますが、とりあえず「ここが押せる」というのを覚えておいて欲しいです。
すごくダラダラと書きましたが、
機能としては、すごくシンプルに作りました。
決議意見書なども、直感的に動かせると思います。
説明書が不要で、しっかりと動作する。
定 例 会質問日令和8年6月11日令和8年6月定例会定例会令和8年6月定例会議事録一般質問①東九州新幹線構想の推進に対する要望活動②辺野古沖の女子高生死亡事故に関する当市の日教組の関係③行橋市職労と選挙、市の方針④廃棄物処理法（廃掃法）の改正と現状決議・意見書決議第１号東九州新幹線構想の推進を求める決議意見書第１号子どもたちのゆたかな学びの保障と学校の働き方改革の確実な推進に係る意見書意見書第２号地方財政の充実・強化に関する意見書議員小坪 慎也まとめを読む。
私は、こういうふうに「表現」したかった。
理系の議員として、そういうHPにしたかった。
これからは、議会の議事録を示して論じるときは、きちんとショートコード化されたhtmlで表現できる。
動かしてみればなんということはない。
そのシンプルな仕様を作り上げるまで、想像以上の試行錯誤があったこと。
備忘録として残しておきたい。
じわじわと更新していく。
サイトのデザインも、そして内容も。
ｂｌｏｇの更新は、かつてのように毎日には戻せないかもしれないが、
一定の時期を見て書いていけると思う。
年末までには完成させたい、資料整理を急いでいる理由もある。
国家単位とは言わないけれど、ＡＩによる個人情報の流出とは関係がある。
この議事録集が、実は一定の防御に転用できそうという理由があり、強化学習用に提供する意図がある。
まだかかるけれども、
もうすぐ戻ってきます。
不定期発信にはなりますが、チャンネル登録をお願いします。
コメント （頂いたご意見は、他ＳＮＳに比較し最優先で目を通しております。）