トラブってしまいました。もともと動作していたページですし、「簡単にできる」とナメていたのかもしれません。いい勉強になりました。
”お問い合わせ”のメールフォームを、超・高機能化しようとしています。いまは動作しているはずですが、各ブラウザでのテストをお願いします。
良い報告から。数日内、少なくとも一週間以内に「おぉ！」というblog記事を出します。それなりに期待して頂いて問題ありません。
この記事で紹介するページ（部分的なリニューアル）も、かなり高機能化されているので、それなりに驚いて頂けるのではないかと思います。
トラブルの内容は、（本稿で試験要請ののちに）詳述しますが、送信ボタンがズレていました。結論的には送信ができない状態が一時的にありました。ごめんなさい。いま、各プラットフォームはアプリ内のブラウザをもっており、XであったりFBであったりLINEであったり、通常のスマホ画面とは少し違う表示なのです。少しフォントが大きくなるというか。それを修正しようとしていたところ、ボタンを押すクリックの位置がズレて送信できていなかった（違う画面にジャンプしていた）というもの。
ゴテゴテさせただけかもしれませんが、装飾を加えて行くと起きうるトラブルのようです。
そのため各ブラウザからの動作確認をお願いするものです。簡単に考えてはダメだなって学習しました。
不定期発信にはなりますが、チャンネル登録をお願いします。
デザインで、理系を描く。
政治の世界は、どうしても文系ばかりの業界です。
私は珍しく理系ということもあり、人手が足りないときは「ちょっと重要な資料」にもアクセスが許されてきました。
理由は誰も分からないからで、ちなみに私も分からないのですけども（なぜなら機械系）、とりあえず仕様書とか読むのは速いし動作確認などは得意でした。
今回、お見せするのは「お問い合わせ」のメールフォームです。
こだわったのは背景で、ここはスマホからというよりはPCばかりの機能かもしれません。
”ぼかし”を相当に強く入れていて、マウスをゆっくり操作した際の高級感が違うように設計しています。スマホの動作も、どことなく緩やかだと思います。画面の上端部や下端部で、さらに押し込もうとすると本当に少しだけバネのように弾力性を持たせたり。
背景は、設計用の製図用紙をイメージしています。基準点をいれたり等。
けれど、それを強く打ち出すと「単なる格子模様」になってしまうわけです。
読者も、たぶん誰もアクセスしたことがないであろう”プライバシーポリシー”もリニューアルしているのですが、最初に作ったプライバシーポリシーの背景は（製図のイメージに近づけようとして）うまく行っておりませんでした。比較用にいまは残しています。
生成りの紙を、つまり実物の紙のようなものをモニター上に表現したいと思っていたわけですが、ここは何回も壁打ちしました。
いまも完璧ではないかもしれませんが、少しだけイメージには近づいてきました。目に見えないぐらいの細い細線を交互に入れて行く手法で、それで（目の錯覚で）フォントが少しにじむようになっており、わざわざインターネット上で”ちょっとだけ手書きっぽい”雰囲気を出しています。
このあたりは、ちょっとしたこだわりです。
言われてみないと分からないぐらいの、凄く細かい部分に力をいれました。
※ 細線は、ちなみに巨大なモニターで凄い拡大しないと、本当に見えないと思います。分からないほうが正常で、見えないように設計しています。
【リニューアル】プライバシーポリシー
さらに、こだわりの製図用紙
で、メールフォームですが、この背景（製図用紙）をさらにブラッシュアップ。
プライバシーポリシーも、実は背景がスクロールに対してゆっくり動くようにしているのですが、これは紙が、気持ち浮いて見えるようにすることで、XY平面ではなく、Z軸を感じてもらえないかなって思ったからです。デジタル化の時代ですが、私たち議員は、やはり重要な局面では紙を使います。紙だって、いい部分はあるんですよ、回線が接続できなくても充電が尽きても機能する（決定事項を保存する）わけですから。
メールフォームのほうはですね、線の濃さを少し上げて、そして”ぼかし”をいれています。スマホ画面では上手く表現できていないかもしれない、余白が小さいから。ちょっとだけピントがあわない雰囲気を出すことで、さらに生成りの紙が浮いて見えるように。また、PC版のみですが、四隅に図枠をいれており、凄く小さなヒゲみたいなのをつけていて、このヒゲの動く速度も地味に違うんです。ヒゲの存在は、でかいモニターで目を凝らさないと見えないと思う。
そういう、物凄い細部にこだわることで、完成度というものは一気に上がるもので。
blog記事もですが、サイドカラムもゴテゴテと色をつけてきたわけですが、このあたりのページは公式なものだから（プライバシーポリシーやメールフォームです）色も統一して、紙と、イメージカラーの青のみ。藍色に近い青にしています。
なんだろ、実はずっとやりたかった。
自分で書いてるし、大事にしているHPだし、ここにはみんながいる。
いま立場上、あまり更新しづらい状況にはあるのですが、大切に思ってる。
で、業務上、いろんなサイトを見るし、webデザイナーの知人たちも、場合によっては経営者もいるわけです。私のやりたいことは、工数ばかりかかってしまい、ちょっと言えないような単価（お友達価格でも、です。）でした。
この、ものすごくこだわった背景画像ですが、ボケをかけまくって（そのぶん線を太くして）見えにくいのですが、光の筋を反射のように入れて（見えないと思う）じわっと背景に揺らぎを与えておりまして、そのうえで背景なので「目立たせない」という、目立たないために力をいれまくるという仕様です。もはや趣味です。
そりゃ素人ですから、プロから見れば、「まだまだ」でしょうが、表現したいことは伝えられたつもり。
自画自賛のようですが、国会議員も含め、議員HPのメールフォームとしては抜群の出来栄えだとは思っています。
綺麗なデザインはたくさんあるんですけどね、実際に政治家がデザインして行くので、こう業務上痒い所に手が届くというか。
機能については折り紙つきだと思う。
なぜなら私が作ったからです。めっちゃ苦労してきたので、そのぶんの課題を全部解決しようとして作ったので。
本当は全部完成してから見せたかったけど、デザインとか苦しみまくって。
こりゃ、いつになるか分からんと思って、先に一部機能だけお見せする次第です。
新型メールフォームの動作確認
まず、旧型をご覧ください。個人献金のページを作ったのが約１２年前（１１年と７カ月？）なのですが、このメールフォームも同時期だと思います。干支が一周経過しております。デザインは、（それなりに前のことですが）全体的にリニューアルして頂いたこともあるんです。サーバー移転とかもありました。ただ、まぁ、古いっす。
下記は、見て頂くだけで結構です。旧バージョンの動作確認は不要ですが、まず、現状を見て頂きたい。
【旧バージョン】お問い合わせフォーム
弊害というほどではないのですが、どういう問題（というか課題）があったのかと言えば、読者からのご意見やご要望、もしくは稀にメディアからの取材、一斉に届くわけです。恥ずかしいことに迷惑メール対策も組み立てておりませんでしたから、謎のメールも多数受信しており、埋もれているというのが現状でした。とりあえずは確実に読もう！とはしていますが、取りこぼしはありました。
で、迷惑メール対策はいれました！
正直に言えば、AIです。AIでコーディングしてもらいました。
デザインのセンスというか、方向性はもちろん私がやっています。絵画とかではありませんが、この「表現」も私です。blogなどのテキストでの表現（作品）とは異なりますが、（webデザイナーとしては素人ですが）これでも国立理系の、技術職の議員です。
かつてはSSLも早期に導入したり、当時は高額だったのですけどね。セキュリティ対策も先行していたわけですが、手付かずになっておりました。今回、相当に強固になっています。
外注すると、やはりそれなりの金額になってしまいますし、手をこまねいていた部分です。
このあたりはＡＩは強力ですね、やるべきことは知識としては持っていたのですが、実際に手を動かすとなると私にはできない領域でした。
もっと簡単に、一瞬でできると思っていたんですが、流石プロがいる業界です。
デザインにまで手を出すと収拾がつかなくなりました。
もともとモノ作りは大好きですし、新しい工具を手に入れたようなもので、ガリガリと作って行きました。
今回は、要件ごとに異なるフォームを選択できるようにし、さらに「確認画面」と「自動送信メール」もつけています。
軽く動作確認をしているのが受付番号の機能で、そんなに重要なものではないにせよ、相当な業務効率改善になるのでは？と期待しています。
また、小さなことではありますが、「メッセージ本文」が大きくなります。あまりでかいとデザイン的にはださくなるのですが、小さいと書きにくい。これはPCのみならず、スマホでも対応させたのですが、入力欄を選択すると「枠がでかくなる」のです。これも、前からやりたかったんだよ。
下記は、動きます。なんなら、このページ内だけでも機能をもたせてます。
このタブは画像ではなく、いわゆるhtmlです。スマホからもＰＣからも、仮にタブレットであれ、どんな画面サイズでも自動的に追随して、「ちゃんと文字が読める」ようにしており、各機能が動作します。
レスポンシブと言って、どのサイトでも対応していることです。うちのサイトも一応は対応してました。
そもそも、このblogはガラケー時代から運営してますから。スマホ対応とかでえらい苦労した（機種依存の絵文字の化けとか。）記憶があります。すっごい初期に対応したので、すっごい古かったわけですが。
ただ、こういうリンクを単に画像で作るのではなく（画像だとスマホからは小さすぎる）、ブロック単位でｈｔｍｌで作りたいなって。
レスポンシブのブロックは、いっつも使うものならデザインしてもらったほうがいいのだけど、結局は決めきれなくてズルズル来てました。
プログラムが書けるわけではないので、いままではやれなかったということです。
【アプリ内ブラウザの罠】痛恨のミス、送信できない。
無事に個人献金のページは、本来のURLに反映できました。一つ前の記事は、リダイレクト（自動でジャンプ）するように設定しています。
ただ、後半の方はそもそも送信できていません。大変申し訳ない。
もっと楽かと思ったのですが、えらいトラブルも出ました。Xのアプリ内ブラウザへの対応で失敗。PCもスマホも無事に動いていたのです、かなり綺麗にできていました。受付票をイメージした綺麗なデザインです。
自分なりに出来映えがよかったもので、そうなると欲も出てくるというか、どうしてもプラットフォーム側のアプリ内ブラウザも使いたいと思い（線が崩れていた）あれやらこれやら触っていたのですが、普通には修正が効かず。ちょっと特殊なんです。
各プラットフォームは、SNS内にユーザーを留めようとしてアプリ内ブラウザで完結させようとする。ここが非常にハードルが高い。コーディングをしてくれているAIは、拡大や縮小で乗り切ってくれていたのですが、なんとボタンの位置がずれており、送信ボタンを押した際にはgoogleのプライバシーポリシーにジャンプしていたという不具合。
「どうせならここまでやるぞ！」と、アプリ内ブラウザ対応を優先するがあまり、触っていてズレたということのようです。20か30pxずれており、送信ボタン直下の、（ボットを判定するリキャプチャで）表示が義務づけられていたgoogleのプライバシーポリシーが、ちょうどそこにいた、というもの。だから送信ボタンを押すと、なぜかGoogleのプライバシーポリシーにジャンプしていた、と。なんでやねん！と。
ショックでした。
申し訳ないし、それに、なんとなく自分が嫌だった。
「デザインだけだし」とナメていたわけです。機能そのものは１２年も稼働してきたわけで。そこに慢心があった。昔、あれほどメールフォームで苦労したのに。大変だって分かってたはずなのに。
慢心した自分が嫌だった。理系の癖に。
それでGoogleのリキャプチャは削除。
いまは、クラウドフレアに入れ替えてます。
簡易的な検証ツールをAIに作ってもらい、クロームとエッジ、あとはミニノート（タブレット）、スマホもandroidとアイフォン、さらにXとFBとLINEのアプリ内ブラウザも仮想でタッチして送信テストを行うようにし、自動送信メールの受信をgmail側で確認するところまでやってもらうようにしました。
（私も何度もタッチしました。ちなみにXだけで50回ぐらいアプリ内ブラウザを、投稿してはタッチを繰り返していました。）
それで、一定の手応えもあり、「たぶん大丈夫だ」というとこには来ているのですが、それでも最後は人が試験したほうがいい。手を抜いてしまって、慢心して失敗したので。特にそう思ってます。
自分では何度もやりました。どうか、様々なブラウザで、「ミスがないか」をチェックして欲しい。
誤字脱字チェックも（AI任せにせず）自分では徹底的にやりましたが、なにぶん文字数も多い。もしも誤りがあれば、ここでしっかり修正したい。
【リニューアルデザイン】個人献金のお願い
もし返信メールが来ていない方は、こちらもお願いします。
テストなので（本当に献金も可能ではありますが）、その際はその他の欄に「テスト」と書いてください。多分もう大丈夫だとは思うけど、意外に手こずってしまった。
PCからの方は、是非、ブラウザを大きくしたり小さくしたり画面幅も切り換えてみてください。格子（ボックス）を多用したデザインにこだわった理由でもありますが、どういう風に拡大縮小しても”きちんと表示できる”のです。目の前で一瞬で切り替わるパズルのようなもので、いまさらレスポンシブ対応なんて珍しくない当たり前の技術なんですが、丁寧さだけを磨きまくっています。
ここにもこだわりがあり、紙を重視する（web空間での）設計思想がありつつも、八百万の考え方といいますか、紙が生きているように、少し生物的に動くようにこだわりました。web空間で、デジタル化の対極とも言える紙を表現し、かつ無機物に魂が宿るような表現。我々、紙を大切にしているのです、書類を。
無駄なこだわりです。残念ながらここはPCだけなのですが、何をネットで表現したいかという、私なりのこだわりです。
テストして欲しい内容
特にスマホから、です。
もちろんＰＣもですが、スマホは対応しきれない気がする。
以下が正しい状態の画面ですが、皆様の端末では表示崩れなどはないでしょうか。
コメント欄、またはメールフォームにて教えてください。
分かる方は、ブラウザも教えて頂けると幸いです。PCからもお願いします。（OSもお願いします。）
（右上のメニューボタンは、画面を動かしたときに浮いて出るものです。）
また、「①確認画面」は、いままでつけていなかった機能です。どうせなら！と思っていれました。古いブラウザだと動作状況が分からない。
新しいものは、直近のiPhoneとかは検証ツールで確認しましたが、全部がわかるわけじゃない。
追加した「②受付票」も動作するか、どうか。
いま用件ごとに振り番をふっていて、01がご意見ご要望、02が議員間のやりとり、そして05まで取材や講演依頼などにしています。受付票の冒頭は01～06で、用件ごとに変わる仕組み。他は西暦ベースの日付、そして日付内における順番を示しています。仕組みとしてはシンプルですが、これを自動で画像（htmlですが。）にして表示して、印鑑を斜めにして押すというところに無駄なこだわりを発揮したので自信がありません。
そう、こういう余計なことをするからクリック位置が不安定になったりするわけです。
余計なことはやらなきゃいいんだよ、分かってる。
けどね、やりたかったんだよ、ずっと。
見せたかったの、みんなに。
こういうHPにしたい、と。
特に知りたいこと。①だけでも大丈夫です。
ただ、②は私ではチェックがしきれない部分なので、できれば②までお願いしたい。
① 実際に1通送ってみる（いちばん大事）
・ご用件を1つ選んで最後まで送って欲しい。
・送信後の画面に受付番号が出たか。
・控えのメールが届いたか、何分くらいで届いたか。
・控えの件名と本文の受付番号が、画面の番号と同じか。
② 控えのメールがどこに入ったか（受信側の振り分けの確認）
・Gmail なら「メイン／プロモーション／迷惑メール」のどれか。
・キャリアメール（docomo・au・SoftBank）、iCloud、Yahoo!メール、会社のメールなど、どのメールで受け取ったか。
・本文の字下げがくずれていないか、文字化けしていないか。
③ 開いたアプリや端末
・X・LINE・Facebook のリンクから開いて、そのまま送れたか。3つともアプリの中の小さなブラウザで開くので、表示がくずれやすい所です。
・文字を大きくする設定のスマホや、画面を横にしたときに表示がくずれないか。
④ 途中の操作
・ご用件を途中で切り替えても、書いた名前などが消えないか。
・「書き直す」で戻ったとき、書いた内容が残っているか。
・Enter で次の欄に進むか。
・Cloudflare の確認の欄で止まってしまわないか。
⑤ 分かりにくい所
・迷った欄、意味の取りにくい言葉、「ここは要らない」と感じた所。
受付番号：
使った端末：（例 iPhone／Android／パソコン）
開いた場所：（例 X のリンク／LINE／Safari／Chrome）
控えのメール：（届いた・届かない／何分後／メイン・迷惑メールなど）
気づいたこと：
これを、メールフォーム、もしくはコメント欄で教えて欲しいです。
いまのURLはテストページであり、”行ける！”となれば、実際のメールフォームと置き換え、実運用に入ります。
本稿が最終試験です。
少しずつ、リニューアルしたい。
滅多に見ないであろう、プライバシーポリシーを更新。
なんで？と思うかもしれませんが、これは練習なんです。理由は、あんま見られないから。
お問い合わせと個人献金のページは、実際にもう古くて相当に気になっていたというのと、メール周りはやっぱり大変なんです。
トラブルがつきものというか。フォームもたくさん出るし、エラーもある。腰を据えてやりたかった。
動作がなく、単に表示するページなら、それこそデザインだけでやれる。
一番アクセスされるページ（例えばblogの記事の部分、つまりここ）とか、トップページは最後になると思う。やっぱ、上手くなってから作りたいもの。
それにね、（支援者ではない一見さんの）外部から見られるのは、やはり、このあたりだから。
ある意味での顔にあたる部分なので。メールフォームは相当に念を入れたい。ま、そんなには使わないんだけどね。
トップページだけ綺麗で、そしてメールフォームが古いままというのは、なんだろう、手抜きみたいで想像すると、すっごい嫌だった。
順次やっていく予定です。
完成は、いつになるんだろう。ゆっくり、ゆっくりやっていくので。
少しだけ、予告
数日内と約束したいのだけど、ちょっとまだかかるかもしれない。
どうしても作りたいページがあって、ある意味では（コードが書けるようになって）楽しんでいたのだけど、本当に力を入れている記事がある。
かなり楽しみにしてもらっていいと思う。
余裕をもって一週間以内、と予告したい。
本当はそっちからアップしたくて、驚かせたかったのだけども。
トラブったので、こちらから先に。
自己満足かもしれないが、どうしても書きたいことがある。
blogの記事で出します。
実はね、最初にこれから作ってた、というもの。
モノ作りが好きな人って、延々と鏡面加工するみたいなのを楽しめるわけですが、最後に人に見せたくなる性分なんです。
正直、メールフォームでここまで躓くとは思っていなかった。
一度、きちんと作っておいて、そこから他のとこに手を出していきたいな。
やりたかったんだ、本当はコーディングを。
勉強しようかなって思った時期もあるんだけど、流石に時間がとれなくて。
その間にも、いろんな真新しいものが出てくるし、ぶっちゃけ寂しかった。だからＡＩには感謝してる。凄い道具だなって。
たぶん普通のwebデザインとは違うから、インターフェースとかの参考例も少ないし。
大きな声では言えないが、国会議員のHPとかもそんなにガチガチのお問い合わせフォームとかはもってなくて、結構、最先端だと思う。今回お示ししているのは私がずっと作りたかったもの。
だいぶ時間を見てもらわないといけないけども、
ちょっとずつリニューアル。
半年ぐらいはかかるかもしれない。
メール送信ボタンの件では、大変にご迷惑をおかけしました。
「試作・改」のデバッグ作業、どうぞご協力をよろしくお願いいたします。
blog記事の本体とかを触ることも出てくるだろうから、その際は（今回のようにテストページを）事前にお知らせします。
あー、早く本番のURLに反映したいなぁ。
「しゃあない、ちょっとだけ協力してやるか」と思った方は、拡散をお願いします。
個人献金のお願い～全力で活動、気持ちよく使い切りました。もうすぐ資金ショートします。
コメント （頂いたご意見は、他ＳＮＳに比較し最優先で目を通しております。）
お