(19)【発行国】日本国特許庁(JP)
(12)【公報種別】公開特許公報(A)
(11)【公開番号】P2022013425
(43)【公開日】2022-01-18
(54)【発明の名称】コンピュータプログラム
(51)【国際特許分類】
G06F 3/0485 20220101AFI20220111BHJP
G06F 3/04886 20220101ALI20220111BHJP
G06F 3/0481 20220101ALI20220111BHJP
G09G 5/14 20060101ALI20220111BHJP
G09G 5/34 20060101ALI20220111BHJP
G09G 5/22 20060101ALI20220111BHJP
G09G 5/36 20060101ALI20220111BHJP
G09G 5/10 20060101ALI20220111BHJP
【FI】
G06F3/0485
G06F3/0488 160
G06F3/0481
G09G5/14 A
G09G5/34 Z
G09G5/22 630G
G09G5/36 520G
G09G5/10 Z
【審査請求】未請求
【請求項の数】6
【出願形態】OL
(21)【出願番号】P 2020115967
(22)【出願日】2020-07-03
(71)【出願人】
【識別番号】000155469
【氏名又は名称】株式会社野村総合研究所
(74)【代理人】
【識別番号】100076428
【弁理士】
【氏名又は名称】大塚 康徳
(74)【代理人】
【識別番号】100115071
【弁理士】
【氏名又は名称】大塚 康弘
(74)【代理人】
【識別番号】100112508
【弁理士】
【氏名又は名称】高柳 司郎
(74)【代理人】
【識別番号】100116894
【弁理士】
【氏名又は名称】木村 秀二
(74)【代理人】
【識別番号】100130409
【弁理士】
【氏名又は名称】下山 治
(74)【代理人】
【識別番号】100134175
【弁理士】
【氏名又は名称】永川 行光
(74)【代理人】
【識別番号】100199277
【弁理士】
【氏名又は名称】西守 有人
(72)【発明者】
【氏名】太田 賢吾
(72)【発明者】
【氏名】横田 山都
【テーマコード(参考)】
5C182
5E555
【Fターム(参考)】
5C182AA02
5C182AA03
5C182AB02
5C182AB08
5C182AC02
5C182AC03
5C182AC13
5C182AC43
5C182BA01
5C182BA03
5C182BA06
5C182BA65
5C182BA66
5C182CA11
5C182CA32
5C182CA55
5C182CB03
5C182CB47
5C182CB56
5C182CC02
5C182CC14
5C182CC15
5C182CC16
5C182CC17
5C182CC21
5C182CC22
5E555AA26
5E555BA02
5E555BA05
5E555BA06
5E555BA14
5E555BB02
5E555BB05
5E555BB06
5E555BB14
5E555BC04
5E555BC08
5E555CA12
5E555CB12
5E555CB44
5E555CB45
5E555CC26
5E555DB04
5E555DB18
5E555DB41
5E555DB53
5E555DC03
5E555DC04
5E555DC09
5E555DC10
5E555DC27
5E555DC30
5E555DC35
5E555DC53
5E555DC62
5E555DC63
5E555DC84
5E555DD06
5E555EA11
5E555EA16
5E555FA00
(57)【要約】
【課題】ユーザに情報を提供し、ユーザと対話するためのより直観的で利便性の高いユーザインタフェースを実現する。
【解決手段】コンピュータプログラムは、ディスプレイを備える端末に、隣接する第1表示領域と第2表示領域とを含む画面をディスプレイに表示させる機能を実現させるコンピュータプログラムであって、第1表示領域はオブジェクトを含み、第2表示領域は表示内容を第1表示領域の方へスクロール可能に構成され、コンピュータプログラムは、第2表示領域の表示内容のスクロール量に応じて、オブジェクトの表示態様を変える機能をさらに端末に実現させる。
【選択図】
図3
【特許請求の範囲】
【請求項1】
ディスプレイを備える端末に、隣接する第1表示領域と第2表示領域とを含む画面を前記ディスプレイに表示させる機能を実現させるコンピュータプログラムであって、
前記第1表示領域はオブジェクトを含み、
前記第2表示領域は表示内容を前記第1表示領域の方へスクロール可能に構成され、
前記コンピュータプログラムは、
前記第2表示領域の表示内容のスクロール量に応じて、前記オブジェクトの表示態様を変える機能をさらに前記端末に実現させるコンピュータプログラム。
【請求項2】
前記オブジェクトの表示態様の変更に合わせて、前記第1表示領域における、前記第2表示領域の表示内容に対応するテキストの表示を開始する機能をさらに前記端末に実現させる請求項1に記載のコンピュータプログラム。
【請求項3】
前記テキストの表示が開始されると前記オブジェクトが小さくなる請求項2に記載のコンピュータプログラム。
【請求項4】
前記第1表示領域は別のオブジェクトを含み、当該別のオブジェクトの表示態様は前記第2表示領域の表示内容のスクロール量に依らない請求項1から3のいずれか一項に記載のコンピュータプログラム。
【請求項5】
前記第1表示領域は、前記第2表示領域の表示内容の続きの表示内容を表示する第1状態と、前記第2表示領域の表示内容の続きの表示内容を前記第1状態よりも淡く表示する第2状態と、前記第2表示領域の表示内容の続きの表示内容が表示されない第3状態と、をとることができ、
前記コンピュータプログラムは、
前記第2表示領域の表示内容のスクロール量に応じて、前記第1表示領域がどの状態をとるかを決定する機能をさらに前記端末に実現させる請求項1に記載のコンピュータプログラム。
【請求項6】
前記第1表示領域が前記第2状態にある場合、前記第2表示領域の表示内容のスクロール量に応じて、前記第1表示領域の表示の濃淡を変える機能をさらに前記端末に実現させる請求項5に記載のコンピュータプログラム。
【発明の詳細な説明】
【技術分野】
【0001】
本発明は、コンピュータプログラムに関する。
【背景技術】
【0002】
情報を提供するためのユーザインタフェースが知られている(例えば、特許文献1参照)。
【先行技術文献】
【特許文献】
【0003】
【発明の概要】
【発明が解決しようとする課題】
【0004】
ユーザに情報を提供し、ユーザと対話するためのより直観的で利便性の高いユーザインタフェースが望まれている。
【0005】
本発明はこうした課題に鑑みてなされたものであり、その目的は、ユーザに情報を提供し、ユーザと対話するためのより直観的で利便性の高いユーザインタフェースを実現できる技術の提供にある。
【課題を解決するための手段】
【0006】
本発明のある態様は、コンピュータプログラムに関する。このコンピュータプログラムは、ディスプレイを備える端末に、隣接する第1表示領域と第2表示領域とを含む画面をディスプレイに表示させる機能を実現させるコンピュータプログラムであって、第1表示領域はオブジェクトを含み、第2表示領域は表示内容を第1表示領域の方へスクロール可能に構成され、コンピュータプログラムは、第2表示領域の表示内容のスクロール量に応じて、オブジェクトの表示態様を変える機能をさらに端末に実現させる。
【0007】
なお、以上の構成要素の任意の組み合わせや、本発明の構成要素や表現を装置、方法、システム、コンピュータプログラムを格納した記録媒体などの間で相互に置換したものもまた、本発明の態様として有効である。
【発明の効果】
【0008】
本発明によれば、ユーザに情報を提供し、ユーザと対話するためのより直観的で利便性の高いユーザインタフェースを実現できる。
【図面の簡単な説明】
【0009】
【
図1】実施の形態に係るアプリケーションプログラムがインストールされる携帯端末の模式図である。
【
図2】
図1の携帯端末のハードウエア構成図である。
【
図3】携帯端末のディスプレイに表示される第1状態の情報表示画面の代表画面図である。
【
図4】携帯端末のディスプレイに表示される第2状態の情報表示画面の代表画面図である。
【
図5】携帯端末のディスプレイに表示される第3状態の情報表示画面の代表画面図である。
【
図6】携帯端末のディスプレイに表示される第1状態の詳細情報表示画面の代表画面図である。
【
図7】携帯端末のディスプレイに表示される第2状態の詳細情報表示画面の代表画面図である。
【
図8】携帯端末のディスプレイに表示される第3状態の詳細情報表示画面の代表画面図である。
【
図9】携帯端末のディスプレイに表示される第4状態の詳細情報表示画面の代表画面図である。
【
図10】携帯端末のディスプレイに表示される第5状態の詳細情報表示画面の代表画面図である。
【
図11】携帯端末のディスプレイに表示される第6状態の詳細情報表示画面の代表画面図である。
【
図12】携帯端末のディスプレイに表示される第4状態の情報表示画面の代表画面図である。
【
図13】携帯端末のディスプレイに表示されるお気に入り表示画面の代表画面図である。
【
図14】携帯端末のディスプレイに表示される第5状態の情報表示画面の代表画面図である。
【発明を実施するための形態】
【0010】
以下、各図面に示される同一または同等の構成要素、部材、処理には、同一の符号を付するものとし、適宜重複した説明は省略する。また、各図面において説明上重要ではない部材の一部は省略して表示する。
【0011】
図1は、実施の形態に係るアプリケーションプログラムがインストールされる携帯端末10の模式図である。携帯端末10は例えばスマートフォンやタブレット型端末であり、ディスプレイ18などの情報を表示する手段と、タッチパネルなどのユーザから入力を受け付ける手段と、を有する。
【0012】
携帯端末10のユーザは、ダウンロードサイトからインターネットなどのネットワークを介して実施の形態に係るアプリケーションプログラム(以下、単にアプリと称す)を携帯端末10にダウンロードし、インストールする。あるいはまた、アプリは携帯端末10にプリインストールされていてもよい。アプリが携帯端末10により実行されることにより、携帯端末10は表示制御に係る各種機能を実現する。以下、携帯端末10(のCPU(Central Processing Unit)等の処理ユニット)がアプリを実行することにより実現する機能を携帯端末10の機能として説明する。それらの機能は実際はアプリが携帯端末10に実現させる機能である。
【0013】
他の実施の形態ではアプリをインストールする代わりに、ブラウザが用いられる。他の実施の形態に係るコンピュータプログラムは、サーバから携帯端末10のウェブブラウザにネットワークを介して送信され、そのウェブブラウザによって実行される、HTML(Hypertext markup language)などのプログラミング言語により記述されたコンピュータプログラムである。このコンピュータプログラムは、本明細書で説明するアプリと同等の表示制御機能を有する。
【0014】
他の実施の形態では携帯端末の代わりに、デスクトップPCなどの据え置き型の端末が用いられる。他の実施の形態に係るコンピュータプログラムは据え置き型の端末にインストールされるか当該端末のブラウザによって実行される。
【0015】
図2は、
図1の携帯端末10のハードウエア構成図である。携帯端末10は、メモリ12と、プロセッサ14と、通信インタフェース16と、ディスプレイ18と、入力インタフェース20と、を含む。これらの要素はそれぞれバス22に接続され、バス22を介して互いに通信する。
【0016】
メモリ12は、データやプログラムを記憶するための記憶領域である。データやプログラムは、メモリ12に恒久的に記憶されてもよいし、一時的に記憶されてもよい。特にメモリ12はアプリを記憶する。プロセッサ14は、メモリ12に記憶されているプログラム、特にアプリを実行することにより、携帯端末10における各種機能を実現する。通信インタフェース16は、携帯端末10の外部との間でデータの送受信を行うためのインタフェースである。例えば、通信インタフェース16は、携帯電話の無線通信網にアクセスするためのインタフェースや、無線LAN(Local Area Network)にアクセスするためのインタフェース等を含む。また、通信インタフェース16は、例えば、USB(Universal Serial Bus)等の有線ネットワークのインタフェースを含んでいてもよい。ディスプレイ18は、各種情報を表示するためのデバイスであり、例えば、液晶ディスプレイや有機EL(Electroluminescence)ディスプレイなどである。入力インタフェース20は、ユーザからの入力を受け付けるためのデバイスである。入力インタフェース20は、例えば、ディスプレイ18上に設けられたタッチパネルや、各種入力キー等を含む。
【0017】
(第1の表示制御例)
以下、アプリによる第1の表示制御例を、
図3~
図5を参照して説明する。
図3は、携帯端末10のディスプレイ18に表示される第1状態の情報表示画面100の代表画面図である。情報表示画面100は、トップバー領域102と、情報表示領域104と、表示切替領域106と、を有する。トップバー領域102と情報表示領域104とは隣接しており、情報表示領域104と表示切替領域106とは隣接している。情報表示領域104には任意の情報が表示され、当該情報表示領域104は表示内容をトップバー領域102の方へスクロール可能に構成される。本例では情報表示領域104は表示内容を上下方向にスクロール可能に構成される。情報表示領域104は表示内容の少なくとも一部を他の方向、例えば左右方向にもスクロール可能に構成されてもよい。情報表示領域104には様々な情報が表示されるが、特に表示される情報のタイトルを表すテキスト(または文字列)118を含む。
図3の第1状態では、トップバー領域102と情報表示領域104との境界に線はなく、あたかもそれらが一続きであるかのように表示されている。
【0018】
トップバー領域102は、第1メニューオブジェクト108と、検索オブジェクト110と、を有する。第1メニューオブジェクト108は略角丸長方形状であり、中に「menu」の文字列とメニューを表す記号とを含む。検索オブジェクト110は一般的な虫眼鏡形状のオブジェクトである。第1メニューオブジェクト108がタップされると、アプリは、メニュー画面に遷移させるか、またはメニューを示すポップアップを表示させる。
【0019】
表示切替領域106は、探すオブジェクト112と、気になるオブジェクト114と、チケットオブジェクト116と、を有する。これらのオブジェクトはそれぞれ、タップされると、情報表示領域104の表示内容をそのタップされたオブジェクトに対応する表示内容に変えるまたは遷移させる。
【0020】
アプリが
図3に示される第1状態の情報表示画面100の情報表示領域104に対する上向きのスクロール操作を受け付けると、アプリは情報表示領域104の表示内容を上向きにスクロールさせて情報表示画面100を第2状態(
図4を参照して後述する)とする。アプリがそこからさらに上向きのスクロール操作を受け付けると、アプリは情報表示領域104の表示内容をさらに上向きにスクロールさせて情報表示画面100を第3状態(
図5を参照して後述する)とする。
【0021】
情報表示画面100を第1状態から第2状態を経て第3状態へと変化させるスクロール操作は、一続きのスクロール操作であってもよいし、スクロールしていったん指を離し、またスクロールするといった離散的なスクロール操作の集合であってもよい。いずれにせよ、情報表示画面100は、スクロール量に応じてその状態を変化させる。
【0022】
情報表示画面100の状態の変化は可逆的である。すなわち、アプリが第3状態の情報表示画面100の情報表示領域104に対する下向きのスクロール操作を受け付けると、アプリは情報表示領域104の表示内容を下向きにスクロールさせて情報表示画面100を第2状態とする。アプリがそこからさらに下向きのスクロール操作を受け付けると、アプリは情報表示領域104の表示内容をさらに下向きにスクロールさせて情報表示画面100を第1状態とする。
【0023】
スクロール量はスクロール位置と言ってもよく、情報表示領域104よりも大きなページを情報表示領域104にスクロール可能に表示させるときの、デフォルト表示位置(初期表示位置であってもよい)と現在の表示位置との差に対応する。スクロール量は、スクロールバーがある場合はそのバーの位置に対応する。本例ではデフォルト表示位置をページの先頭すなわち最上部とし、
図3の第1状態の情報表示画面100の情報表示領域104がスクロール量=0、すなわちデフォルト表示位置に対応するものとする。
図3の情報表示領域104に対して下向きにスクロール操作を行っても表示内容のスクロールは発生しない。
【0024】
図4は、携帯端末10のディスプレイ18に表示される第2状態の情報表示画面100の代表画面図である。第2状態の情報表示画面100では、トップバー領域102の第1メニューオブジェクト108および検索オブジェクト110の表示態様は第1状態と変わらないが、トップバー領域102と情報表示領域104との境界を示す直線120が表示される。直線120の表示は、スクロール量が第1しきい値を超えると開始される。第2状態の情報表示画面100ではスクロールの結果、テキスト118の約上半分がトップバー領域102の下に入って見えなくなっている。
【0025】
図5は、携帯端末10のディスプレイ18に表示される第3状態の情報表示画面100の代表画面図である。第3状態の情報表示画面100では、トップバー領域102と情報表示領域104との境界を示す直線120の表示は第2状態から維持されるが、トップバー領域102のメニューオブジェクトの表示態様が変わる。トップバー領域102のうち第1メニューオブジェクト108が表示されていた位置には、第1メニューオブジェクト108の代わりに新たに第2メニューオブジェクト122が表示される。言い換えると、第1メニューオブジェクト108が第2メニューオブジェクト122に変化する。第2メニューオブジェクト122は第1メニューオブジェクト108に対応し、第2メニューオブジェクト122がタップされたときの動作は第1メニューオブジェクト108がタップされたときの動作と同じである。第2メニューオブジェクト122は略円形状であり、中に第1メニューオブジェクト108のものと同じメニューを表す記号を含む。第2メニューオブジェクト122は第1メニューオブジェクト108よりも小さい。
【0026】
第3状態の情報表示画面100のトップバー領域102には、第1状態の情報表示画面100の情報表示領域104に表示されていたテキスト118と同じテキスト124が表示される。テキスト124は、第2メニューオブジェクト122と検索オブジェクト110との間に配置される。第1状態の情報表示画面100の情報表示領域104に表示されていたテキスト118は情報表示領域104に表示される情報のタイトルを表すので、テキスト124も第3状態の情報表示画面100の情報表示領域104の表示内容に対応する。
【0027】
第3状態の情報表示画面100のトップバー領域102における検索オブジェクト110の表示態様は第2状態と変わらない。したがって、検索オブジェクト110の表示態様は第1状態、第2状態、第3状態を通じて同じであり、情報表示領域104の表示内容のスクロール量に依らない。
【0028】
トップバー領域102のメニューオブジェクトの表示態様の変更、すなわち第1メニューオブジェクト108から第2メニューオブジェクト122への変化は、スクロール量が第2しきい値を超えると開始される。第2しきい値は第1しきい値よりも大きい。アプリは、このメニューオブジェクトの表示態様の変更に合わせて、トップバー領域102におけるテキスト124の表示を開始する。具体的には、テキスト124の表示は、スクロール量が上記と同じ第2しきい値を超えると開始される。
【0029】
第2しきい値は、情報表示領域104に表示されていたテキスト118の全体がトップバー領域102の下に入って丁度見えなくなるスクロール量に対応するよう設定される。言い換えると、スクロール量が第2しきい値を下回ると、トップバー領域102におけるテキスト124の表示が止み、情報表示領域104におけるテキスト118の一部の表示が開始される。これにより、上向きにスクロールしていってタイトルが見えなくなるとすぐに、同じタイトルがトップバー領域102に表示され固定されるという視覚効果が実現される。この際、タイトルの表示が開始されるのと実質的に同時にメニューオブジェクトが小さくなるので、タイトルをトップバー領域102に表示するためのより広いスペースを確保することができる。逆に第1状態や第2状態ではタイトルを情報表示領域104で確認できるから、トップバー領域102においてはタイトルを表示する代わりにメニューオブジェクトを大きく表示することで、メニューオブジェクトへのタップを受け付け易くする。これにより、ユーザ利便性が向上する。
【0030】
(第2の表示制御例)
以下、アプリによる第2の表示制御例を、
図6~
図11を参照して説明する。
図6は、携帯端末10のディスプレイ18に表示される第1状態の詳細情報表示画面126の代表画面図である。詳細情報表示画面126は、トップバー領域128と、詳細情報表示領域130と、状況表示領域129と、を有する。トップバー領域128と詳細情報表示領域130とは隣接しており、詳細情報表示領域130と状況表示領域129とは隣接している。詳細情報表示領域130には任意の情報が表示され、当該詳細情報表示領域130は表示内容をトップバー領域128の方へスクロール可能に構成される。一例では、詳細情報表示領域130には、
図3の情報表示画面100に表示される情報項目のうちのひとつについての詳細な情報が表示される。
【0031】
本例では詳細情報表示領域130は表示内容を上下方向にスクロール可能に構成される。詳細情報表示領域130は表示内容の少なくとも一部を他の方向、例えば左右方向にもスクロール可能に構成されてもよい。詳細情報表示領域130には様々な情報が表示されるが、特に表示される情報のタイトルを表すテキスト(または文字列)132と、静止画や動画などの画像134の下部分134bと、を含む。
図6の第1状態では、トップバー領域128と詳細情報表示領域130との境界に線はなく、あたかもそれらが一続きであるかのように表示されている。
【0032】
トップバー領域128は、戻るオブジェクト136と、ハートオブジェクト138と、バーコードオブジェクト140と、を有する。
図6に示される第1状態のトップバー領域128は、上記3つのオブジェクト以外の部分において、詳細情報表示領域130の表示内容の続きの表示内容をデフォルトの濃さで表示する。本例では、詳細情報表示領域130の上部に画像134の下部分134bが表示されているので、トップバー領域128には詳細情報表示領域130に表示されている下部分134bの続きの画像である上部分134aが、詳細情報表示領域130における下部分134bの濃さと同じ濃さで表示される。その結果、画像134はトップバー領域128と詳細情報表示領域130とにまたがるひとつの画像として表示される。第1状態の画像134の濃さを1(最も薄い)から10(最も濃い=デフォルトの濃さ)の10段階で表現すると10となる。
【0033】
戻るオブジェクト136、ハートオブジェクト138、バーコードオブジェクト140はいずれも赤、青、緑、黄、黒などの色を有する背景に対して模様(矢印、ハート等)を白色または無色で描いた略円形状のオブジェクトである。戻るオブジェクト136がタップされると、アプリは、
図3の情報表示画面100に遷移させる。ハートオブジェクト138がタップされると、アプリは、詳細情報表示領域130に表示されているイベント等の内容をユーザのお気に入りに登録する。バーコードオブジェクト140がタップされると、
図6の第1状態の詳細情報表示画面126へのリンク(URL)を含む二次元バーコードがディスプレイ18に表示される。
【0034】
アプリが
図6に示される第1状態の詳細情報表示画面126の詳細情報表示領域130に対する上向きのスクロール操作を受け付けると、アプリは詳細情報表示領域130の表示内容を上向きにスクロールさせて詳細情報表示画面126を第2状態(
図7を参照して後述する)とする。アプリがそこからさらに上向きのスクロール操作を受け付けると、アプリは詳細情報表示領域130の表示内容をさらに上向きにスクロールさせて詳細情報表示画面126を第3状態(
図8を参照して後述する)、第4状態(
図9を参照して後述する)、第5状態(
図10を参照して後述する)と変化させ、第6状態(
図11を参照して後述する)に至らしめる。
【0035】
詳細情報表示画面126を第1状態から第2状態~第5状態を経て第6状態へと変化させるスクロール操作は、一続きのスクロール操作であってもよいし、スクロールしていったん指を離し、またスクロールするといった離散的なスクロール操作の集合であってもよい。いずれにせよ、詳細情報表示画面126は、スクロール量に応じてその状態を変化させる。スクロール量は第1の表示制御例で説明したスクロール量に準じる。
【0036】
詳細情報表示画面126の状態の変化は可逆的である。すなわち、アプリが第6状態の詳細情報表示画面126の詳細情報表示領域130に対する下向きのスクロール操作を受け付けると、アプリは詳細情報表示領域130の表示内容を下向きにスクロールさせて詳細情報表示画面126を第5状態とする。アプリがそこからさらに下向きのスクロール操作を受け付けると、アプリは詳細情報表示領域130の表示内容をさらに下向きにスクロールさせて詳細情報表示画面126を第4状態、第3状態、第2状態と変化させ、最終的に第1状態とする。
【0037】
図7は、携帯端末10のディスプレイ18に表示される第2状態の詳細情報表示画面126の代表画面図である。第2状態の詳細情報表示画面126では、トップバー領域128の戻るオブジェクト136、ハートオブジェクト138およびバーコードオブジェクト140の表示態様は第1状態と変わらないが、画像134の濃さが第1状態から変化する。
図7に示される第2状態の画像134は、
図6に示される第1状態の画像134よりも淡く表示される。本例では、第2状態の画像134の濃さは上記の0段階で表現すると6となる。第2状態では、トップバー領域128と詳細情報表示領域130との境界に線はなく、あたかもそれらが一続きであるかのように表示されている。
【0038】
図7に示される第2状態のトップバー領域128は、3つのオブジェクト以外の部分において、詳細情報表示領域130の表示内容の続きの表示内容を表示する。トップバー領域128には詳細情報表示領域130に表示されている下部分134bの続きの画像である上部分134aが、詳細情報表示領域130における下部分134bの濃さと同じ濃さで表示される。その結果、画像134はトップバー領域128と詳細情報表示領域130とにまたがるひとつの画像として表示される。第2状態の画像134は第1状態の画像134よりも淡く表示されるので、第2状態のトップバー領域128は、詳細情報表示領域130の表示内容の続きの表示内容を第1状態よりも淡く表示していると言える。
【0039】
図8は、携帯端末10のディスプレイ18に表示される第3状態の詳細情報表示画面126の代表画面図である。第3状態の詳細情報表示画面126では、トップバー領域128の戻るオブジェクト136、ハートオブジェクト138およびバーコードオブジェクト140の表示態様は第2状態と変わらないが、画像134の濃さが第2状態から変化する。
図8に示される第3状態の画像134は、
図7に示される第2状態の画像134よりも淡く表示される。本例では、第3状態の画像134の濃さは上記の0段階で表現すると2となる。第3状態では、トップバー領域128と詳細情報表示領域130との境界に線はなく、あたかもそれらが一続きであるかのように表示されている。
【0040】
図8に示される第3状態のトップバー領域128は、3つのオブジェクト以外の部分において、詳細情報表示領域130の表示内容の続きの表示内容を表示する。トップバー領域128には詳細情報表示領域130に表示されている下部分134bの続きの画像である上部分134aが、詳細情報表示領域130における下部分134bの濃さと同じ濃さで表示される。その結果、画像134はトップバー領域128と詳細情報表示領域130とにまたがるひとつの画像として表示される。第3状態の画像134は第2状態の画像134よりも淡く表示されるので、第3状態のトップバー領域128は、詳細情報表示領域130の表示内容の続きの表示内容を第2状態よりも淡く表示していると言える。
【0041】
図9は、携帯端末10のディスプレイ18に表示される第4状態の詳細情報表示画面126の代表画面図である。第4状態の詳細情報表示画面126では、トップバー領域128の戻るオブジェクト136、ハートオブジェクト138およびバーコードオブジェクト140の表示態様は第3状態と変わらないが、画像134の表示が止み、代わりにトップバー領域128と詳細情報表示領域130との境界を示す直線142が表示される。
【0042】
第1状態、第2状態、第3状態のトップバー領域128の透過率は100%に設定される。したがって、トップバー領域128に詳細情報表示領域130の表示内容の続きの表示内容が表示される。第4状態のトップバー領域128の透過率は0%に設定される。したがって、トップバー領域128に詳細情報表示領域130の表示内容の続きの表示内容は表示されない。
【0043】
画像134の表示が止むタイミングと、直線142の表示が開始されるタイミングと、は実質的に一致する。さらに、画像134の表示が丁度止んだときの画像134の下側の境界線134c(
図8参照)は直線142と実質的に重なる。すなわち、上方向のスクロールに伴って画像134が徐々に淡くなっていき、消えたところで画像134の下側の境界線134cのみが残って直線142となるような視覚効果が実現される。
【0044】
画像134の下側の境界線134cの位置がトップバー領域128と詳細情報表示領域130との境界の位置と一致するときのスクロール量が第3しきい値として設定される。画像134の濃さは、スクロール量[0、第3しきい値)の範囲で定義されるスクロール量の単調減少関数で表現されてもよい。この単調減少関数は線形であってもよいし非線形であってもよい。スクロール量が0から第3しきい値に向けて変化するにつれて、画像134の濃さは10から徐々に減少し、スクロール量が第3しきい値になると画像134が表示されなくなる。直線142の表示は、スクロール量が第3しきい値を超えると開始される。これらを併せることで上記の視覚効果が実現される。
【0045】
なお、他の実施の形態では、画像134の表示が止むスクロール量のしきい値と、直線142の表示が開始されるスクロール量のしきい値と、は異なっていてもよい。この場合、画像134の表示の停止と直線142の表示の開始とが異なるタイミングで生じる。また、画像134の表示が丁度止んだときの画像134の下側の境界線134cの位置は、トップバー領域128と詳細情報表示領域130との境界の位置に一致しなくてもよい。
【0046】
図10は、携帯端末10のディスプレイ18に表示される第5状態の詳細情報表示画面126の代表画面図である。第5状態の詳細情報表示画面126では、トップバー領域128の戻るオブジェクト136、ハートオブジェクト138およびバーコードオブジェクト140の表示態様は第4状態と変わらず、直線142の表示も維持される。第5状態の詳細情報表示画面126ではスクロールの結果、テキスト132の約上半分がトップバー領域128の下に入って見えなくなっている。
【0047】
図11は、携帯端末10のディスプレイ18に表示される第6状態の詳細情報表示画面126の代表画面図である。第6状態の詳細情報表示画面126では、トップバー領域128と詳細情報表示領域130との境界を示す直線142の表示は第5状態から維持されるが、トップバー領域128のオブジェクトの表示態様が変わる。戻るオブジェクト136、ハートオブジェクト138、バーコードオブジェクト140はそれぞれ色が反転して反転戻るオブジェクト136’、反転ハートオブジェクト138’、反転バーコードオブジェクト140’になる。反転戻るオブジェクト136’について、色が反転すると背景が白色または無色となり、模様(矢印、ハート等)が有色となる。したがって、
図11の例では反転戻るオブジェクト136’の背景がトップバー領域128の色と同じになり、オブジェクトの境界が消失している。これにより、オブジェクトの模様(矢印、ハート等)が浮き出るように表示される。反転ハートオブジェクト138’、反転バーコードオブジェクト140’についても同様である。反転戻るオブジェクト136’、反転ハートオブジェクト138’、反転バーコードオブジェクト140’がタップされたときの動作は、対応する戻るオブジェクト136、ハートオブジェクト138、バーコードオブジェクト140がタップされたときの動作とそれぞれ同じである。
なお、本例では反転されたオブジェクトの背景の色とトップバー領域128の色とが同じ場合を説明したが、これに限られず、反転されたオブジェクトの背景の色とトップバー領域128の色とは異なっていてもよい。この場合、反転されたオブジェクトの境界が見えるようになる。また、反転前のオブジェクトの背景の色とトップバー領域128の色とを同じとすることで、色の反転によりオブジェクトの境界が出現するような視覚効果を実現してもよい。あるいはまた、色の反転に限らず、スクロール量に応じてオブジェクトの色を段階的または連続的に変更してもよい。
【0048】
第6状態の詳細情報表示画面126のトップバー領域128には、第1状態の詳細情報表示画面126の詳細情報表示領域130に表示されていたテキスト132と同じテキスト144が表示される。テキスト144は、反転戻るオブジェクト136’と反転ハートオブジェクト138’との間に配置される。第1状態の詳細情報表示画面126の詳細情報表示領域130に表示されていたテキスト132は詳細情報表示領域130に表示される情報のタイトルを表すので、テキスト144も第6状態の詳細情報表示画面126の詳細情報表示領域130の表示内容に対応する。
【0049】
トップバー領域128の3つのオブジェクトの表示態様の変更すなわちオブジェクトの色の反転は、スクロール量が第4しきい値を超えると開始される。第4しきい値は第3しきい値よりも大きい。アプリは、3つのオブジェクトの表示態様の変更に合わせて、トップバー領域128におけるテキスト144の表示を開始する。具体的には、テキスト144の表示は、スクロール量が上記と同じ第4しきい値を超えると開始される。
【0050】
第4しきい値は、詳細情報表示領域130に表示されていたテキスト132の全体がトップバー領域128の下に入って丁度見えなくなるスクロール量に対応するよう設定される。言い換えると、スクロール量が第4しきい値を下回ると、トップバー領域128におけるテキスト144の表示が止み、詳細情報表示領域130におけるテキスト132の一部の表示が開始される。これにより、第1の表示制御例と同様の作用効果が奏される。
【0051】
(第3の表示制御例)
以下、アプリによる第3の表示制御例を、
図3、
図5および
図12~
図14を参照して説明する。
アプリが
図3に示される第1状態の情報表示画面100において上向きのスクロール操作を受け付けると、情報表示領域104の表示内容を上向きにスクロールさせて情報表示画面100を第2状態を経て第3状態とすることは第1の表示制御例と同様である。アプリが
図5に示される第3状態の情報表示画面100に対するさらなる上向きのスクロール操作を受け付けると、アプリは情報表示領域104の表示内容をさらに上向きにスクロールさせて情報表示画面100を第4状態とする。
図12は、携帯端末10のディスプレイ18に表示される第4状態の情報表示画面100の代表画面図である。
【0052】
図12に示される第4状態の情報表示画面100において、アプリが気になるオブジェクト114へのタップを受け付けると、アプリはタップされた気になるオブジェクト114に対応するお気に入り表示画面146に表示を遷移させる。
図13は、携帯端末10のディスプレイ18に表示されるお気に入り表示画面146の代表画面図である。
【0053】
図13に示されるお気に入り表示画面146において、アプリが探すオブジェクト112へのタップを受け付けると、アプリはタップされた探すオブジェクト112に対応する情報表示画面100に表示を遷移させる。このとき、まずはお気に入り表示画面146に遷移する直前の第4状態の情報表示画面100が表示される。その後、何らユーザから入力を受けることなく自動的に、デフォルト表示位置に向けて情報表示領域104の表示内容をスクロールさせる。本例では、
図12に示される第4状態の情報表示画面100から自動的に下向きのスクロールが進行する。
【0054】
アプリは第4状態の情報表示領域104の表示内容を下向きに自動的にスクロールさせて情報表示画面100を第5状態とする。
図14は、携帯端末10のディスプレイ18に表示される第5状態の情報表示画面100の代表画面図である。アプリは第5状態の情報表示領域104の表示内容をさらに下向きに自動的にスクロールさせて情報表示画面100を
図5の第3状態に戻す。続けてアプリは第3状態の情報表示領域104の表示内容をさらに下向きに自動的にスクロールさせて情報表示画面100を
図3の第1状態に戻す。以上の遷移をまとめると、
図3→(上向きスクロール操作)→
図5→(上向きスクロール操作)→
図12→(気になるオブジェクトタップ)→
図13→(探すオブジェクトタップ)→
図12→(自動スクロール)→
図14→(自動スクロール)→
図5→(自動スクロール)→
図3となる。
【0055】
上述の実施の形態において、保持部の例は、ハードディスクや半導体メモリである。また、本明細書の記載に基づき、各部を、図示しないCPUや、インストールされたアプリケーションプログラムのモジュールや、システムプログラムのモジュールや、ハードディスクから読み出したデータの内容を一時的に記憶する半導体メモリなどにより実現できることは本明細書に触れた当業者には理解される。
【0056】
本実施の形態に係るアプリによると、スクロール量に応じてトップバー領域内のオブジェクトの表示態様が変更される。したがって、変化に富んだ斬新なユーザインタフェースを提供することができる。
【0057】
また、本実施の形態に係るアプリでは、表示される情報のタイトルがスクロールアウトすると、トップバー領域における当該タイトルの表示が開始される。したがって、トップバー領域および(詳細)情報表示領域の両方にタイトルが表示される状況を回避することができる。タイトルは一画面にひとつ表示されていれば十分であるから、本アプリはより洗練された見やすいユーザインタフェースを提供できる。
【0058】
以上、実施の形態に係るアプリについて説明した。この実施の形態は例示であり、各構成要素や各処理の組み合わせにいろいろな変形例が可能なこと、またそうした変形例も本発明の範囲にあることは当業者に理解される。
【0059】
実施の形態では、スクロール量に応じてオブジェクトの大きさ(第1の表示制御例)または色(第2の表示制御例)を変える場合を説明したが、これに限られず、スクロール量に応じてオブジェクトの表示態様を変えるものであればよく、例えばオブジェクトの濃さを変えてもよいし、シャープネスを変えてもよいし、オブジェクトをアニメーション化する・しないを切り替えてもよい。
【符号の説明】
【0060】
10 携帯端末、 18 ディスプレイ、 100 情報表示画面、 126 詳細情報表示画面。