ULTRIZE

— Case Study / PROJECT 09

RayOne Galaxy

小沢眼科内科病院の、多焦点眼内レンズ RayOne Galaxy の紹介ページを設計・実装しました。 紺の夜空に、金の粒でできた銀河が回るページです。

背景の銀河は、紹介ページの冒頭と同じコードで動いています。

CLIENT
小沢眼科内科病院(茨城県水戸市)
PROJECT
多焦点眼内レンズ RayOne Galaxy 紹介ページの設計・実装
CREDIT
Design — いちさんDirection · Information Design · Copy · Motion · Code — Special Oni-san / ULTRIZE
YEAR
2026
SITE
kozawa-ganka.or.jp/lp/galaxy/(外部サイト・新規タブで開く)
紹介ページのファーストビュー。黒に近い紺の地に、金の粒でできた渦巻きの銀河と、英字の題字
kozawa-ganka.or.jp/lp/galaxy/ — ファーストビュー
§ 01 CLIENT

レンズの紹介ページを1枚ふやす

小沢眼科内科病院は、茨城県水戸市にある眼科と内科の病院です。白内障の手術で使う多焦点眼内レンズの一部には、レンズごとの紹介ページがあります。

そこに RayOne Galaxy のページを加えたい、というご依頼でした。

§ 02 READER

文字の濃さは、測って決める

読むのは、白内障の手術を考えている方とご家族、それに患者さんへ説明する院のスタッフです。

白内障があると、薄い色や細い線が見分けにくくなることがあります。そこで文字の濃さは、背景との比(コントラスト比)を測って決めました。

グラフは画像にせずコードで組み、スマートフォンでも目盛りの数字が小さくなりすぎないようにしました。

デザインのいちさんも、ディレクションの Special Oni-san も、視能訓練士です。検査室で見てきた見えにくさを、文字の大きさと濃さの決めごとに反映しています。

§ 03 DESIGN

冒頭は夜空で引きこみ、本文は正確に書く

デザインはいちさんです。製品の名前と、メーカーの資料にある宇宙の絵をもとに、紺と金の夜空を作りました。

冒頭は夜空の絵で引きこみ、本文では必要なことを順番に正確に書いています。

金の銀河が派手に見えないよう、色の鮮やかさを抑え、回る速さも遅くしました。

§ 04 STRUCTURE

共通の説明は、総合ページにまかせる

多焦点眼内レンズ全体の説明や、レンズどうしの比べ方は、院の総合ページに載せています。このページは、総合ページからリンクでつながる1枚です。

このページに載せるのは、このレンズだけの説明・院で測った術後のデータ・費用・自由診療の説明の4つです。レンズが増えても、共通の説明は総合ページの1か所を直せば済みます。

国内で承認されていない医療機器を扱うページには、医療広告のルールで書くべきことが決まっています。入手の経路・国内の承認品の有無・諸外国における安全性などの情報・救済制度の対象にならないことの4つです。

この4つは注意書きの小さな文字にせず、目次から飛べる本文の一章にしました。ほかのレンズと優劣を比べる書き方もしていません。

院の総合ページ多焦点眼内レンズ

  • 全体の説明
  • レンズどうしの比べ方
  • 共通の注意
共通の説明は総合ページに、レンズごとの説明は各レンズのページに載せる。
§ 05 MOTION

銀河は、内側ほど速く回す

冒頭の銀河は、2本の腕を持つ渦です。内側ほど速く外側ほどゆっくり回るので、星が流れて見えます。

ときどき、星の1つが光ります。カーソルの動きに合わせて、銀河も少しだけ動かしました。

読み進めると、暮らしの場面の写真が、軌道の上に1つずつ出てきます。術後のデータの図は、画面に入ってから目盛りと点が順に出る作りにしました。

夜の光のにじみを示す図だけは光らせず、暗い状態から少しずつ明るくするだけにしました。見え方を大げさに見せないためです。動きを減らす設定の方には、止まった完成形を表示します。

スマートフォンで目次を開いたところ。紺の板に、章と図の名前が並ぶ

目次

スマートフォンで最後の章を開いたところ。紺の地に、金の粒で描いた GALAXY の文字

最後の章

スマートフォンで見たところ
§ 06 DETAIL

説明に使う場面から、細部を決める

このページは、院のスタッフが患者さんに画面を見せて説明する場面も想定して作りました。下の6つは、その場面から決めた細部です。

ハンバーガー
3本の線を、30個の粒で描いています。開くと粒が動いて×の形になり、閉じると線に戻ります。
目次
章のほかに、図の1枚ずつへも飛べます。説明の途中で、見せたい図をすぐに開くためです。
×のまわり
開くと、×のまわりを5つの星が、それぞれ違う速さと向きで回ります。閉じるボタンは別に置かず、ハンバーガー自身が×になって閉じる役を兼ねます。
上の帯
冒頭の銀河の動きが終わってから出ます。先にスクロールした人には、すぐに出します。
一覧への入口
どこにいても、多焦点眼内レンズの一覧へ戻れます。金の丸の中の矢印は紺です。白では金との比が2.83:1で、図形の基準の3:1に届かなかったからです。
改行
1〜2文字だけが次の行に落ちる所がないか、画面の幅を変えて機械で数えています。
PCで目次を開いたところ。右から紺の板が出て、章と図の名前が並ぶ。×のまわりに金の軌道が重なる
目次(PC)— 章と図の名前が並ぶ
粒のハンバーガー(実寸の2倍)。押すと×に、もう一度押すと3本線に戻ります。カーソルを載せると、粒がばらけます。
§ 07 PLAY

最後の GALAXY の文字は、指でさわれる

ページの最後では、数千の金の粒が集まって GALAXY の文字になります。カーソルや指を近づけると粒がよけ、離すとまた文字に戻ります。

説明を読み終えたあと、最後にもう一度レンズの名前を見せる場所です。ハンバーガーの粒も、同じ考え方の計算で動かしています。

下の箱の中で、試してみてください。

紹介ページの最後の章と同じ計算で、粒の GALAXY を動かしています。
§ 08 SELF-CHECK

答えは出さず、診察で聞くことを返す

ご相談の章に置く、1分で終わるセルフチェックを準備しています。いまは院の方に見ていただいている段階で、まだ公開していません。

質問は6つで、ふだんの見る距離・光の場面・眼鏡との付き合い方を聞きます。当てはまるものを選ぶと、結果が2つのまとまりで出ます。そのひとつが、診察で聞いてみるとよいことです。

点数や順位は出しません。瞳孔の大きさや目の状態は、検査をしないと分からないからです。結果は、診察で何を話すかを整えて来ていただくために使います。

距離は「50〜70cm」のように、数字と身近な物で書きました。「遠く」という言葉が指す距離は、人によって大きく違うからです。

選び方の組み合わせは63通りあります。そのすべての結果を書き出して、公開前に院の方が読めるようにしています。

組み合わせ 63通り

セルフチェックの組み立て(準備中)。6つの項目から選ぶと、結果が2つのまとまりで出る。
§ 09 OPERATION

直す前と後を並べて、選んでもらう

確認用のページでは、直した所に緑の印、決めていただきたい所に赤の印を付けました。修正前と修正後は、ボタンひとつで切り替わります。

好みが分かれる所は、話し合いで決めるより先に、並べて選んでいただきます。この確認のしかたは、ULTRIZEのほかの案件でも使っている型です。

確認用のページの印(見本)。緑は今回直した所で、赤は決めていただきたい所です。右下のボタンで、修正前と修正後や、印の表示を切り替えます。

Design — いちさん(視能訓練士 × デザイナー)

Direction · Information Design · Copy · Motion · Code — Special Oni-san / ULTRIZE

説明に時間がかかる医療の話ほど、ページの組み立てが助けになります。 レンズや治療を紹介するページのご相談も、どうぞ。

お問い合わせへ
WORKS へ戻る