【試作・改】メールフォームの完成、ナビ試作の開始。次に手を入れるのは議事録

　無事に完成させることができました。簡単かと思いきや意外に苦労しました。ご協力に感謝いたします。
　小さなことですが、グローバルナビも入れ替えています。ここも地味に凄いとは思っています。今日はチラ見せ程度ですが、新機能を一つ。

　何ごとも経験です。サイトを自力でリニューアルします。大掛かりな内容で半年程度はかかると思う。blogをどう書いていくかも、なんとなく方針を決めました。
　楽しみにしてもらいたい新機能もあります。

　あと、ランキングボタンも変更しています。
　サイズやデザインは変え方がわかったので、「少し縦幅がでかいな」とか、「なんか違う」と思ったら作り直します。

不定期発信にはなりますが、チャンネル登録をお願いします。

自力での、サイトリニューアル

　スマホの方も多くおられるので、PC版から紹介します。
　自分なりにはこだわりのデザインで、特に背景にこだわりました。

　ネットではありますが、我々政治家にとって紙は重要なものであり、質感も含めて紙をイメージしたい。
　理系ゆえ製図用の図面をイメージしました。
※　説明しないと理解してもらえませんでした。

　謎のこだわりですが、メニューが紙の下に沈み込みます。
　こう、紙を優先するというか、（皆様に送ってもらう声である、）フォームのほうを上に扱う感じにしたくて。

　どうでもいいと言われそうだし、言われないと気づいてもらえなさそうだし、
または「なんか壊れてない？」と言われそうですが、こういうデザインです。

　PCの方は、是非、右上から「お問い合わせ」を開いて、スクロールさせてみてください。
逆に使いにくいと言われそうな気もするんですけど。

　スマホ版も同じで、ちょっとメニューを隠す仕草とかいれてみました。

お洒落だと思ってご満悦だったのですが、スクロールさせていくと単にメニューがなく、『そもそもホーム画面に戻れない、または他のページに移動できないということに気づいて、慌てて追加しています。

※１　そのためスマホの右上のメニューは二つあり、上から二つ目のメニューを被せています。途中でデザインが変わるのはそのためです。
※２　いまは無事にメニューがあるので、是非、見てみてください。

　あまり自作する分野ではないかもしれません。
　ですが、私は理系です。AIがここまで発達すれば、インターフェースそのものは（機械系とはいえ）分からなくはないはず。

　気軽に始めたのですが、楽な道のりでもありませんでした。
　しかし思うがままのデザインや機能が盛り込めるのは良いものですね。

新型のナビの帯（すりガラス調）

　ほぼ見た目は変わりません。
　ただ、高級感や上質さにこだわりました。

　PC・スマホ兼用で、「すりガラス」をイメージしています。いままでよりも、背景の色が透けて見えると思います。
　文字を読んでもらうサイトだから、できるだけ画面を広く。

　どのサイトを見ても広告だらけで、何かをクリックさせよう！とする仕組みがたくさんあって、「読む範囲が狭い」のが苦痛でした。

　閲覧していて不快だったし、なんだかなぁ、と。私はノートパソコンも使うのですが、（自分のサイトも）少し狭いと思っていました。
　そのため、極わずかにですが、PC版のグローバルナビもスマホ版も、「縦幅を狭く」しています。
　使用感とか、いままでの感じと違和感なく、”元からこうだったよね？”と思ってもらえる範囲を目指しています。言われないと気づかないと思う。気づかない範囲に収めるために、物凄く調整しました。

　透明にしたりというテクニックもあるのですが、それもなんか違うな、と。
　単に半透明だと面白くないので、それで「トレーシングペーパー」とか「すりガラス」に近いイメージのものを。
　小さなこだわりですが、一点一点を選抜して作っています。

　作っていて思うのですが、スマホってすごいなぁ、と。
　このサイトは、ガラケー時代から更新していました。当時は最新だったデザインもやがて古くなり、記憶を振り返れば絵文字対応とか（コメント欄で表示がバグるとか）、ね。SSLを初期から導入したり、レスポンシブ対応も早い段階でやったんです。最近は少し古めかしくなってきたな、と。

　時代変化でスマホも、webデザインも進化し、いろんな表現ができるようになった。
　すごいなって思う。実は、一回でいいから触ってみたかったというのが本音です。

　このサイトを立ち上げたときは、WindowsXPだったと思う。（初当選は2012年、XPのサポートが2014年でした。）
　卒論を書いていたときはミレニアムエディションじゃなかったかしら。当時は「半透明にする効果」とかは、やたら再計算が重たくてOSについていたら、速攻でカットしていたのに。いまはスマホでも表現できる。すごいことだよ。

　しかも、どんな効果がいいか、どんな表現がいいか、自分で選択肢がある。
　選べなかったよ、昔は。動く端末そのものがないし。

　むかーしのね、初当選のころに議事録を読みながら、ある意味での初心に振り返りながら、どんな質問をしたか懐かしみながらデザインをしています。何がしたかったのかとかも含め。

　このHPは、blogサイトであるのみならず、ちゃんと議事録とかの過去ログが読めるようにという設計思想をもって作成したものだったという記憶。情報発信もですが、それとは違う意味での「検証可能性」とかも念頭に置いておりました。けど、更新されていく議事録の、テキストのメンテなどの手動作業の煩雑さから結局は一番最初に断念していった部分ともなってしまったのです。

新型ナビメニュー（試作・改）

　新型のナビメニューには、暫定でデザインをいれています。
　ここはもう少しこだわります。ちょっとだけパリッとしたかな、と。

　新しく追加したのは、議事録のメニュー機能。

　分かっている方は、メールフォームのデバッグの際に気づいていましたが、下から順番にリニューアルしています。プライバシーポリシーも同時にリニューアルしました。

こういう風に開きます。

ながいこと、議事録ページの更新も怠ってしまってました。
少しパリッとした議事録メニューからジャンプすると、もさっとしたデザインに「うーん」と思うかもしれませんが、懐かしの産まれて初めての一般質問の議事録です。中身は、いきなり外国人の国保問題でした。

平成２４年度６月議会（１）

小坪しんやのHP|行橋市議会議員

平成２４年度６月議会（１）

https://samurai20.jp/gijiroku/h2406/h2406-1

○議長（城戸好光君）　おはようございます。定足数に達していますので、これより本日の会議を開きます。　本日の議事日程につきまして、議会運営委員会で協議願っていますので、委員長から報告を願います。議会運営委員会委員長。◆１９番（豊瀬尉君）　おはようございます。先刻、議会運営委員会を開き、本日の議事日程について協議を行いましたので、その結果をご報告申し上げます。　本日の議事日程につきましては、日程第１として、一般事務に関する質問を行うことといたします。今回、質問通告のあった方は、１０名であります。本...

一期目の質問を選択すると、こんな感じで展開します。

　本当は議会ごとに更新しないといけなかったのに、もはや平成時代から更新が滞っていました。

　ただ、あまりに量が多く、あとはリンクを張る人的コスト。手動でやるには限界に来ていて、貼って治して、リンク切れを起こしての繰り返し。デザインもやりたかったのですが、手をこまねいていた理由です。

　メニューの部分は、さしたるデザインはしてなくて、メールフォームとかでお願いしたデバッグの結果、似たイメージで作っているだけです。開き方とかは工夫したいし、見た目や機能はもう少し触る予定なので、試作・改ということで。

　こだわったのは、議事録を見せるための「インターフェース」です。
　量が量ゆえ、どう表現してどう階層構造を作るか。あーでもない、こうでもないと。

　逆にいままで、更新する側として悩んでいた部分を、自分なりに設計として表現したのがこのメニュー部分です。こういう階層構造で、造る、と。

次のリニューアルは議事録

　次のデザインは、「一般質問の議事録を読むためのページ」を作ります。
　メニューではなく、議事録の”記事”です。メニューは試作状態ですが、議事録ページは、かなりデザインをいれています。

　これはブログの記事として、議事録ページを新設する形で、いま読んでいるblog記事はそのままに、「議事録」のオリジナルデザインを付与するもの。

　これは、本音を言えば、ずっとやりたかった部分。
　多分、お金をかければ（機能的には）できたのだけど、なかなか仕様もうまく決まらなくて。
　ゆえにAIでコードを書けるようになったのは、本当に感謝しています。

　ページごとにCSSを入れること自体は可能で、見る記事ごとに別のデザインを付与できるんです。ただ、とんでもない負荷（外注コスト）がかかるし、どういう仕様で発注するかも悩んでました。手を出したかった分野なんですよね。

　いろいろと実験中ですが、機能面はだいたい固まってきました。
　下記は、開発環境でのチラ見せです。

　PC版は、こんな感じになります。
　そして、前述の「読むための画面の面積が少ない」という問題に、私なりの解決方法を見出しました。

　スマホ版もチラ見せしたいのですが、そこは驚いて欲しいので今は黙っておきます。ちなみに画面の拡大幅は、スマホのほうが遥かに大きいです。「そう来たか！」というぐらいの。
　どんなサイトよりも文字に特化したページになるでしょう。

　ある日突然、blog記事を踏んだら、謎のページが表示されてビックリするかもしれませんが、それは普通にblogですのでご安心ください。議事録ページを記事で表示しても、ランキングのボタンも自動挿入されるように作りこんでいます。このあたりは機能として完成してるのでご安心を。

　まだデザインについて何案かで悩んでいるので、その際にはアンケートとかも予定しています。
　意見もお伺いしたい。小さなことですが、〇で囲むか□で囲むかぐらいの違いです。
　ただ数字を〇で囲んだときと□のときって、本当に印象が違って。ここは見てからのお楽しみ。

　かなり大掛かりな改修なので、いつお見せできるかはわかりません。

　暫定版であれば、いますぐでも見せれるレベルには仕上げているので、

　アンケート実施まで一週間程度ではないでしょうか。

　かなりの量のデータですので、試験版を見せるまでも工数がかかります。

　自分を奮い立たせる意味でも、一週間で納期を切りたいですね。ちょっと厳しいかもですが。

XアプリおよびLINEのアプリ内ブラウザ対応

　とはいえ、高度化したスマホ機能は良い点ばかりではありませんでした。複雑化しているゆえ難しいことも。

　デバッグ作業ではたくさんメッセージを送って頂きました。
　当初苦労していた点は、あらかた片付きました。メニューなどはもう少し綺麗にします。

　ネックになっていたのは、1.3倍です。各プラットフォーム事業者は、それぞれのSNSのサービス内にユーザーを残すために、SNS上のリンクを踏むと、アプリ内のブラウザで開くんです。その際に、文字が気持ち大きくなっているのでは？と思います。言われてみれば、というレベルでしょう。私もいままで気にも留めてきませんでした。

　難敵で。
　いや、これ大変だったんです。
　どんなにやっても治らなくて。表示崩れが多発してました。
　
　致命的だと思ったのは、献金のページでした。メールフォームも同様なんですが、格子を多用したデザインです。四角いボックスが大量に並ぶ。文字数が画面外に飛び出れば、格子はぐちゃぐちゃになるわけです。フォームもぐちゃぐちゃになるし、それを力業で（見た目だけを）整えたら、ボタンの配置がズレてたりで、送信できてなかったりと、本末転倒になっていたのが前回の記事。

　なぜアプリ内ブラウザが1.3倍にされるかは分からないんですが、だいたいそういう仕様です。
　これが調べても表に出てなくてずっと検証していた感じ。

　このページを、XやLINEで開いても、いまは表示崩れがないはずです。
　（と、信じたい。）

　お問い合わせ

　個人献金のページ

　どんなにググっても、なんなら色んなAIに聞いてもわからなかった。
　解決方法は意外なところにあって、なんとGrokに聞いたらあっさり。Ｘのアプリ内ブラウザの仕様を教えて、なぜ表示が崩れるのか等。さすがＸのＡＩ、なぜかペラペラ教えてくれて、それがブレイクスルーとなり、ＳＮＳのアプリ内ブラウザ対応ができた、という感じです。

　ちなみに、ほとんどの文字の拡大縮小も効かず、ぐちゃぐちゃになる理由ですが、
　私の理解が誤っている可能性はあるものの、ようは基準点がない。画面幅の何をもって100％にしているとかがないので、通常の単位がほぼ無効化されているようで、単純に30％マシになっている。これを100に戻すための割り算とか、そういうの基準がないゆえ受け付けなくてで。理由は物差しとか単位がない世界線だから。
　
　やったことは、当該アプリ内の画面の範囲がどうであるかを一旦は読み込みに行かせて（測定して）、表示する際にそこから原点というか基準点を新たに作って表示するみたいなやり方で作ってくれたようです。やったのはＡＩですが。こんなにもアプリ内のブラウザでてこずる予定ではなかったのですが、なんとか無事に表示できています。

　デバッグ作業としては完了ですが、お手数でなければメールが実際に送信できるかチェックもお願いします。確認画面とかも新設しており、ちょっと自慢のページです。目立たない点ですが。

　プライバシーポリシーもリニューアルしています。なんでそんなとこから？と思うかもしれませんが、理由は練習というか訓練です。上手になってから、少しは勉強してから議事録とかのページにはいりたかったので。

　アクセス数が多くないページから入りました、影響が少ないし。
　どっかで楽だと思ってた、いきなり苦境に陥ったわけですが。

【予告】すっごい記事

　次に投稿する予定の記事は、「うぉ！」と驚いてもらえるものになると思います。

　いつか手を出したいと思っていたwebデザインですが、自分で身を置けるようになって生き生きとしています。

　HPのリニューアルにあたり、
　最初は、地方議員や国会議員のHPで勉強していました。
　別に点数があるわけではないので一番もへったくれもないのですが、自分の中では「全国一だ！」と思えるぐらいのクォリティーにしたい、と。

　議事録ページには、そういう気概で創意工夫をいれています。
　ただ、それは多分超えることができました、私自身の評価基準では。前例のないデザインで、使い勝手を含む機能面などのUIは最強。

　次は、数千万単位の予算が必要となる「自治体のHP」を勉強材料にしました。AIに食わせたわけではありません、私が目と脳で食ったのです。
　
　ここもね、ぶっちゃけ超えたと思ってます。
　ちなみに自治体のHPが数千万円単位というのはぼったくりではなく、単にページ数が多いからです。

例えば福祉関係のHPで、貴方が求める制度があり、クリックしたけど別のページに行ったとする、流石にイラっとするでしょう。問題になるんです。議会のHPも同じで大量に議事録があると、それの転記とそれぞれのリンク貼りが、手動作業がしんどすぎて（単純にマンパワーが必要）無理なんです。人件費の兼ね合いと言ってもいいでしょう。とはいえ自治体相手にはふっかけてくるのが世の常ですけども。

　私のblogの、過去１４年間の議事録も、デザイン入れて全部つくりなおすとなると１００万オーダーと言われて諦めてたんですよね。そういう理由で自治体のHPは凄く高い。高いがゆえに、機能面はかなり作りこまれてる。

　 勉強のために閲覧していた自治体のHPですが、機能面で超えてみせたい。ここは今後も要開発という感じ。ただ、ごっつはるレベルには来ていると思う。ある程度は読み込んだ。そして次の勉強相手を、（AIのように）私が食べて行くわけです、教材として。

　で、次にはメディア関係のHPとか、あとは映画とかの特集ページ。
　報道関係のドキュメンタリーとかのページがあるじゃないですか、
　人に物を伝えるという部分で行くと、やはりあのレベルかな、と。

　それでメディアの特集記事のデザインを勉強しました。

　だいたい、できました。

　まだ細部の煮詰めが必要ですが、一見して負けてないと思う。

　これもｂｌｏｇで出します。

　最初はもっと手軽に作っていたんですが、仮想敵というかライバルに置いてるサイトのレベルをあげていったので。なにごともこだわりをもつのは良いことだけど、やっているうちに自分でも方向が分からなくなってきてた。そろそろ完成させないと、いつまで経っても世に出せない。

　中身の誤字脱字チェックが終わってないこととかだから、そう長くはかからないと思う。

　なんのために作りこんだのか、なかば目的を見失いかけているけれど、後半は単にビックリさせたかったというのが大きい。ボトルシップを組み立ててるみたいな、もしくはプラモデルを作ってる、みたいな。（プラモデル作れないですが、気分は。）

　次の記事は、いままでの中でも最大規模の長文で、一見するとHPかわからないようなデザインになっていますが、コメント欄もありますので是非、感想もお願いします。

　予告をしておかないと、コメント欄があることにすら気づかないようなページになりました。
　ビックリさせることだけを考えて、私なりにメディアなどの発信に対抗する思いを、技術者として表現したものになります。

　まだお日にちを頂きますが、楽しみにしていてください。
　忘れられがちですが、私は理系です。物書きと思われがちですし否定するものではありませんが、技術者出身の政治家です。技術者としての、いま風の伝え方をこだわってみます。見た目のデザインだけではなく、インターフェースと使い勝手に力点を置いてみました。

　どこまでやりこむかは悩んでいますが、納得したら公開します。
　テーマは、闇クマさんの記者会見などに至るまでの伴走の手引書です。使用した要望書などの点数が多いため、格納するのにてこずっています。まぁ、とんでもない量なので。査読や構成に苦労しておりますが、だいたい完成は見えてきました。

一歩、前に出る勇気。
↓応援クリックお願いします。↓

新しいランキングボタン、ちょっとデカ過ぎだろうか。。。

もう少し短くしようかしら。すっきりさせたほうがいいのか、どうか。