WWDC2025でiOS26が発表され、OS全体のデザインが Liquid Glass という新たなコンセプトで刷新されることが明らかになりました。

オッと思ったのが、Safari のUIが紹介された時。以下が新しいSafariです。ステータスバーはほぼ透過して主張が弱くなり、画面最下部には表示中サイトのドメインが表示されています。

(Apple公式iOS26のページから)

広々としてますね。Apple は Liquid Glass というデザインを「コンテンツに一段と集中できるように」することを目的として開発したようでした。

コンテンツに没入できるブラウザUIが抱えるジレンマ

開発中のブラウザアプリでは「コンテンツへの集中」を重視しています。過去にも幾つか投稿しました。

• 10年ぶりの新アプリに向けたブラウザ考察 -スクリーンは誰のものか-
• 10年ぶりの新アプリに向けたブラウザ考察 -Adネットワークに占拠されたユーザのスクリーンを取り戻す-

ブラウザUIは極力排除し、フルスクリーンでコンテンツが見れるべきであると。

それはまぁそうなのですが、実はUIを無くすと「他のサイトに移動できないよね？」「戻ったり進んだりは？」など、ブラウザが備えるべきUIをどうするか問題にぶち当たることになります。

戻るなどの操作はジェスチャーで回避できますが、全部が全部ジェスチャーというわけにはいきません。ブラウジングの基本操作とかぶってしまう可能性を考えれば、ジェスチャーの操作もそれほど多用できるものではないのです。

(と言いつつ多数のジェスチャーを定義できるようになってはいるのですがw)

ブラウザ開発でコンテンツを重視しようとすると、「便利にする→UIがいる→コンテンツを阻害する」というループというかジレンマは不可避ですね。ブラウザアプリの宿命なのかも…と、作っては壊しを繰り返して行き着いた先で、開発中のブラウザでは一つの解を見出していました。

それが以下の画面。

(画面最下部にツールバー。iPhoneミラーツールのBezelでキャプチャ)

iOS26のSafariと少し似てませんか？😁

元より既存のタブ型UIでは限界があると感じていました。なので、フローティング＆ブラーで存在感を無くしつつ、ブラウジング中には極力表示されず、それでいて使いたい時には表示されるようなブラウザUI実装に舵を切っていたんですね。

これがいみじくも、今回発表された新しい Safari に似ていなくもない形だっだと…。Appleはもう何年も前から Liquid Glass のデザインに着地していた筈ですが、Apple と近しいことを考えていたのかも知れないと思うと普通に嬉しいですよね😊

で、このUI、ちゃんと動きます。現状こんな感じ。

(ブラー効果の程度も設定できる。存在感は極少に。積極的に消えてくれて、使いたい時にまた現れる)

発案は昨年。実装を始めたのが年始頃。形になって TestFlight で先月から配信して、意外に使い易いかもねー良いですねー、なんて話をしていたのでした。ユーザは現在4人だけなのですけどね😅 (サーバ担当の@t0shiya、iOSアプリは@hitonomichiさん, ロゴ関係でメタ・グラマーの@kasydmkさん、そしてPdMである僕の4人)

メンバー全員が、今回の WWDC2025 動画を見て思わず笑ってしまったのでした。

そんな新しいブラウザUIを僕らは バーデッキ と呼んです。

バーデッキのご紹介

バー(Bar)が並ぶところ、という意味でバーデッキ(BarDeck)です。

現Safariを含め多くのブラウザアプリで邪魔に感じてたのは、ツールバーだけではありません。ステータスバーもアドレスバーも同様。コンテンツをめいいっぱい楽しもうとすると不要に思える「バー」が多いのです。必要なものではあるけど画面に居座って欲しくないのですよね。

(以前の投稿で言及した、ブラウザUIの画面占有率の考察画像。画面全体の20%を占めている)

それらのバーを一箇所に集約し、必要なタイミングで切り替えられるようにしてみたというわけです。こんな感じで動きます。

(見易さのためにDark系ブラーに変更した(これも設定から変更できる)。左右スワイプでバーを切り替える)

常にツールボタンが見えて欲しいわけじゃないし、時間やバッテリーのステータスもいつも見えてなくて別に良い。URLだってそうです。なので、手元でスッスッと左右スワイプして、見たいもの使いたいものを切り替えられたら便利かなと。表示領域を共有するので画面も無駄に占有しなくなります。

実際にUI検証した評価は、画面占有率を最小化しつつ必要十分なブラウザUIも提供するという二律背反な要件を両立させるちょうど良い着地点かなぁ…という感じ。なので、これを基本路線としました。

面白いのは、このバーデッキというUIをブラウザUI(バー)の入れ物だと捉えると、色んなアイディアが湧いてきたこと。元はと言えばタブがフローティングになっただけですのにね。

• 「ツールバーを何個も並べれても良いのでは？」
• 「ならばツールバーに色んな便利ボタンがあっても良いのでは？」
• 「ステータスバー・ツールバー・アドレスバー以外のバーも考えられるのでは？」

などなど。そうして生まれたのはこんな設定画面です。

(ツールバーが2つあっても良い。ツールバーが複数置けるなら色んなブラウズ支援ボタンがあっても良い)

実際に動き出すと、発想がさらに広がるもんですね。発散するとも言いますが。

まぁこんな感じで、作っては壊し、ハマれば、そこに新たなアイディアが生まれてまたやることが増えていく…を繰り返すのでいつまで経っても完成しないというわけです(笑)

iOS26 の Liquid Glass というデザインとそれに伴う基本UIの刷新をうけ、ご紹介したこのUIもまた調整余地が生まれる可能性もあります。本アプリが iOS26 以前にリリースされる筈もありませんし。やはり永遠のベータなのかも知れません😅

ということで、今回は開発中ブラウザアプリの個性的なUIバーデッキについてのご紹介でした。まだまだ気になることもありながら常用できるかも？🤔な状態になってきた気もしてまして、TestFlight の配信範囲を徐々に広げていけると良いなーなんてこともボチボチ考えています。

気がつけば2025年も半分が過ぎようとしています。ここ最近は「静的Web」事業の強化を掲げて、さまざまな新しい取り組みを進めてきました。

• 静的化サービスのesparをリブランディングしました
• 6月開催の「この街のクリエイター博覧会2025」に出展します
• オンラインマニュアルの全面刷新
  • espar vault オンラインマニュアル
  • espar form オンラインマニュアル

これに加えて、各サービスの専用サイトの立ち上げも進めていました。この度、PHPレスな静的ページ向けフォーム実装ツールである espar form の公式サイトがオープンしましたのでご紹介いたします。

(問い合わせフォームにはもちろん espar form を採用。全ページでCMSやPHPは使っていません)

これまでは、弊社サイト内の一部で簡単にサービスをご紹介する程度でした。

が、espa form をなぜ作ったのか、どんな機能があるのか、今後の開発計画やJavaScriptで実現する仕組みや技術情報など、広く深く発信していくためには専用サイトが必要だと感じていたのです。

そこでパートナーの@koronpoさんにゼロベースで LP+α って感じの構成でデザイン面を含めて制作して頂きました。

2025年らしく、実装に際しては

• 独自ビルドシステム開発
• サーバ転送プログラム開発
• 既存コンテンツからの変換や文章作成

などで Agent AI を使ってます。画像には Midjourney。

AI にすべてを丸投げするのではなく、手間のかかるタスクをAIが解釈しやすい粒度に分解して依頼する形で活用しました。サイト制作分野におけるAI活用のポイントも掴むことができたと感じています。

(カテゴライズして特徴や機能を網羅的に紹介。開発ロードマップも掲載)

今回、サイト作りを通じて自社製品を見つめる機会にもなり、思った以上に「機能豊富なツールに仕上がってるなぁ」とか「名だたる企業様に使って頂いているなぁ」等々の気づきが得られました。

(導入事例ページを作り込んで、改めて社内でビックリするという…😅)

espar form は、Webサイト制作に関わる事業者の皆さまに、制作スピードの向上やフォーム品質の向上、メール運用の手間からの解放など、他のツールにはない多くのメリットをご提供できるものと自負しています。

(PHPやサーバ周りのエンジニアが不在でも高機能なメールフォームを作れるのが大きな特徴)

短時間ではご紹介しきれない特徴や機能がありますので、ご興味をお持ち頂けましたらサイトをご覧下さい。オンラインマニュアルには、実装イメージ等の細かい記載もありますので併せてどうぞ。

ということで espar form サイトのご紹介でした。今後とも「静的Web」ブランドの espar と、フォーム実装ツールの espar form をどうぞよろしくお願いいたします。

タイミング良く(?)、来たる2025年6月6,7日に開催される「この街のクリエイター博覧会2025」で espar form を展示させて頂く予定です。詳しく聞いてみたいという方がいらっしゃればよろしければお越し下さい。

来たる6月6,7日の2日にわたって開催されるこの街のクリエイター博覧会2025に出展いたします。

(メビックさん主催。毎年開催だが、今年は関西万博に合わせてスペシャルバージョンとのこと)

Web業界を含むいわゆる大阪のクリエイター達、法人/個人で合計約200組が、自社の事業やサービスを発信します。会場は堺筋本町のマイドーム大阪で、2フロアを借り切るそうなので結構な規模ですね。

その中で幅1.5m程度の小ブースを出させて貰うことになりました。ブースは、会場3階のC-55です。最近の展示会は出展者ごとに専用PRページも作らせて貰えるそうです。便利な時代になりましたね😳

(ブースはよくあるコの字ではなく背面パネルだけのシンプルなもの。連結せず1区画だけなので、かなりコンパクト)

会期中は、先日リブランディグしたての「静的Web」ブランドの espar から、問い合わせフォームの実装ツール espar form をご紹介予定です。Web関係者の方に向けて、問い合わせフォームにPHP使って苦労するのやめませんか？もっと楽しませんか？ というメッセージをお伝えしたいと思います。

また、せっかくですので同じ espar ブランドのCMS静的化サービス espar vault も軽くご紹介しようかなと。ただ、後述の通り、製品を売り込むようなビジネスビジネスしたブースにはしない予定です。

ブースは決して大きくないし、いかにも展示会っぽい普通のブースは余り面白くありません。ちなみに2017年にインテックス大阪で出展した時は、以下の写真のような感じでした。

(とりあえず置けるものを手当たり次第に置いている感じだった)

まぁ、ベーシックにやるとこうなりますよね😅

同じことをしても面白くなく、極小ブースでいかに目立つかを工夫しようかと考えを練りまして。おおよそIT企業らしくない、余り過去に例をみない(当社比)ことをやってみることにしました。

ブースをキャンバスに見立て、サービスの世界観で彩ってみようと。

(generated by Midjourney v7)

弊社 espar ブランドは、Web制作や運用の苦労からの「解放」を目指してます。サイト構築や運用でそんなに苦しまなくても良いですよ、静的Webの技術で楽になれるんですよと。コンテンツの制作だけに専念できたほうが幸せですよね、と。

その世界観を表現してみることにしました。さて、どうなるでしょうか☺️

ってなわけで、出展のお知らせでした。6/6,7 の2日間の開催で、場所はマイドーム大阪。僕は espar ブランドのプロダクトマネージャーとして終日ブースにいる予定ですので、よろしければ3階C-55まで遊びに来てやって下さい🙇‍♂️

CMSを静的化する事業 espar を始めて7年が経ちました。

派生サービスの espar form や espar archive も生まれ、静的Webのフィードテイラーさん という見方をして頂くようにもなりました。お世話になっているお客様や関係者の皆様に御礼申し上げます🙇‍♂️

さて、気がつけば弊社の事業は「業務用iOS」と「静的Web」の二本立てとなりまして、特にここ数年は前者の業務用iOS分野にリソースを割いてきました。本年、2025年は後者の「静的Web」をもっと広める活動やサービスの機能拡充など、「静的Web」事業にリソースを割く予定にしています。

そこでこれを機に「静的Web」事業のサービスをリブランディングすることにしました。今これだけの静的Web関連サービスがあるのですが、

(esparブランドの既存製品)

ロゴを刷新し、一部のサービスの呼称を変更します。

(メタ・グラマーさんにご協力頂いた。「すぐに導入できる」という特徴をスピード感ある雰囲気で表現)

espar という名称を「静的Web技術のブランド」として格上げし、静的Webに関するいろんなサービスをぶら下げる格好にします。

これに伴い、元々「espar」と呼んでいた大元のCMS静的化サービスを、今後は espar vault (エスパーボルト) と呼ぶこととさせて頂きます。関係者の皆様におかれましては、機能や価格等に変化はありませんのでご安心下さい。espar form や espar archive の呼称はそのままでロゴが変わるのみです。

今後、徐々に営業資料、紹介画面、契約書面、マニュアル、公式サイト上の表記…等々を変えていく予定です。

リブランディングの理由

espar を、静的Webの技術ブランドとして位置付ける理由は2つありました。

1. 派生で生まれたサービス「espar form」を単独で採用頂くことが増えた
2. 他にも「静的Web」の切り口で作りたいサービスがある

サービス構造を少し整理したかったのですね。加えて、「静的Web」のメリットをもっと啓蒙したいという思いも強くなり、事業開始時に作った造語 espar をそのまま中心に据えることにしました。

espar から espar vault へ

「静的Web」事業の基点だったCMS静的化サービスは、「espar」ブランドの「espar vault」というサービスに位置付けられることになります。

vault とは英語で「金庫」や「貯蔵庫」を意味する言葉。大事なものを中に入れて守る役割を担うものを vault と呼び、セキュリティ関連の機能やサービスに用語として使われることが結構あります。

(パスワード管理ソフト1Passwordでは暗号化されたパスワード保存箇所を vault と呼ぶ)

弊社サービスを導入頂くと、CMSを静的化して、弊社公開サーバにホスティングして、全アクセスの矢面に立つ…という構図になるので、中に入って頂いて守る、まさに vault という役回りなんですよね。

(DNSを変えるのでCMSサーバには原則アクセスが届かなくなり、インターネットの世界から隠蔽される)

また日本語圏的発想ですが、 vault の発音はカタカナ英語的には「ボルト」と表記され、bolt という英単語を連想させます。bolt は「雷」を意味する言葉で、スピードや速さをイメージさせますね。静的化はサイト応答速度にも寄与するので、この意味も込められると解釈した次第です。

ということで、リブランディングについてのお知らせでした。

今後は、CMS静的化サービスの「espar vault」、フォーム実装ツールの「espar form」、サイトアーカイブサービスの「espar archive」、この3つで静的Web事業を展開してまいります。

静的Webに関してやりたいことは沢山あって、また何か他の espar なんとか…が生まれるかも知れません。ご期待ください。今後とも弊社の静的Web事業をよろしくお願い申し上げます🙇‍♂️

弊社公式サイトのプレスリリースの通りなのですが、新しいサービスを始めます。

espar archive と言いまして、Webサイトを、ある日の状態そのまま丸ごと保存してしまうサービスです。いわゆるアーカイブですね。サイト全体を対象としたWeb魚拓サービスと言えるかも知れません。

なぜ始めるのか

弊社では約5年前に、espar というWebサイト静的化のサービスを始めました。

当初ほどには「静的化」というキーワードは盛り上がっていませんが、実は上場企業や公共機関など、サイトの高負荷とセキュリティに課題を抱える企業様や組織で多数導入して頂いています。

 
(昨年は伊藤園様、ナトコ様など上場企業様も数社。キャンペーンやプレス発表等があってもビクともしない)

espar は現行サイトを「静的化」することを前提としていますが、ときおり変わったご相談を頂くことがありました。それは、

『サイトを閉鎖するので、サイトの状態を残すのに使えませんか？CMSは止めます』

というもの。

せっかく作ったコンテンツなので残したいが、ブラウザでいつでも見れる状態で残せないか？ということですね。DBやファイルのバックアップデータを残したい…というのとは異なります。

静的化技術があると、実はこれが容易だったりします。html化するわけですから、それをホスティングすれば、サイトとしてそのまま残ります。ただ、同一ドメインでは駄目で、別ドメイン(別ホスト名)でホスティングする必要はありますが。

Webサイトのアーカイブ事業は既に色々ある

国内ですと国立国会図書館が、インターネット資料収集保存事業という事業をやっています。

(主に国や地方自治体、大学、NPOなど公的組織のサイトをアーカイブしている。民間サイトも幾つかある)

あと有名どころでは Internet Archiver という古くからあるアーカイブサイトもありますね。こちらは、ご存知の方も多いかも知れません。

前者は公的サイトが主な対象で民間サイトは国会図書館の選定によります。後者はサイト保有者が意図した日のアーカイブが難しいという特徴があります。

espar archive は、同じアーカイブ事業ですが、サイト保有者意向でアーカイブできる商用サービスという位置づけを狙ったものとなります。

espar archive の紹介

espar archive では、コア技術として弊社独自開発の静的化エンジン (espar crawler) を使って、対象サイトのクローンを作り、別ドメイン(別ホスト名)でホスティングします。ページをhtml化するだけでなく、画像やcss/jsをはじめ、PDFや動画などあらゆるファイルを全部残します。

(公開されているWebサイトであればCMSやインフラの種別によらず適用可能)

日付名がついた右側のURLで、いつでもアーカイブした日のサイトの状態を振り返ることができます。

サイトを丸ごと残しますので、ある階層以下の差分を見比べることも容易です。以下は、弊社で運用しているiOS関連サイトエンタープライズiOS研究所の、2023/1/1の状態と今を比較する例です。

https://20230101.www.micss.biz/blog/ (2023年1月1日の状態)

https://www.micss.biz/blog/ (今の状態)

前者をブラウザで開けば、2023年1月1日時点のサイトを振り返ることができるわけです。ドメイン名が異なるため https 対応には別途サーバ証明書が必要になりますが、espar archive 側で証明書も取得・設置してしまいます。

なお、著作権の関係から、対象サイトの保有者であるか、その委託を受けたことが明らかな方のお申込みのみの受け付けとなります。(ドメイン設定や指定のファイル設置によりサイト所有確認を実施)

espar archive は、以下のような用途を想定しているのですが、

• リニューアル前の状態をそのまま残しておきたい
• 記念日のサイトの状態をそのまま残しておきたい
• エビデンスとして定期的にサイトの状態を記録していきたい
• 閉鎖した後もサイトが存在した証拠をしばらく残しておきたい

他にもWebサイトをアーカイブすることが役に立つシーンもあるかも知れません。

「アーカイブ」と「バックアップ」は同一視されることが多く、「バックアップ」があれば「アーカイブ」は不要という考え方もなくはありません。実際、Webサイトのバックアップをとるサービスは色々ありますし、レンタルサーバにもその機能が標準で備わっている場合もありますね。

しかし、データだけの「バックアップ」では、いざ過去の状態を確認するとなると手間暇が意外にかかるものです。それに、現行サイトと過去状態を併存させることはできません。現サイトが過去に戻るに過ぎません。

弊社では、いつでも過去の状態がそのままブラウザ閲覧できることに価値があると考え、サービス化するに至りました。

ということで、Webサイトのアーカイブサービス espar archive のご紹介でした。もし、特定日時のサイトの状態を永続的に残したいというシチュエーションがありましたらこちらよりご連絡頂けたら幸いです。