▶ ネイバー ビジネス プラットフォーム コーポレーションの特許一覧
特許7387577デザインキットを利用した業務提携のための方法、システム、および非一時的なコンピュータ読み取り可能な記録媒体
(19)【発行国】日本国特許庁(JP)
(12)【公報種別】特許公報(B2)
(11)【特許番号】
(24)【登録日】2023-11-17
(45)【発行日】2023-11-28
(54)【発明の名称】デザインキットを利用した業務提携のための方法、システム、および非一時的なコンピュータ読み取り可能な記録媒体
(51)【国際特許分類】
G06Q 50/10 20120101AFI20231120BHJP
【ＦＩ】
G06Q50/10
【請求項の数】
12
(21)【出願番号】P 2020197136
(22)【出願日】2020-11-27
(65)【公開番号】P2021182366
(43)【公開日】2021-11-25
【審査請求日】2020-11-27
(31)【優先権主張番号】10-2020-0059515
(32)【優先日】2020-05-19
(33)【優先権主張国・地域又は機関】KR
【新規性喪失の例外の表示】特許法第３０条第２項適用 ウェブサイトの掲載日 ２０１９年１２月２３日 ウェブサイトのアドレス ｈｔｔｐｓ：／／ｔｖ．ｎａｖｅｒ．ｃｏｍ／ｖ／１１５８６４２４ 公開者 韓 伯熙、鄭 ▲ご▼芸、金 聖鐵、金 相泰
【前置審査】
(73)【特許権者】
【識別番号】509288208
【氏名又は名称】ネイバー クラウド コーポレーション
【氏名又は名称原語表記】Ｎａｖｅｒ Ｃｌｏｕｄ Ｃｏｒｐｏｒａｔｉｏｎ
(74)【代理人】
【識別番号】100107766
【弁理士】
【氏名又は名称】伊東 忠重
(74)【代理人】
【識別番号】100070150
【弁理士】
【氏名又は名称】伊東 忠彦
(74)【代理人】
【識別番号】100135079
【弁理士】
【氏名又は名称】宮崎 修
(72)【発明者】
【氏名】韓 伯熙
(72)【発明者】
【氏名】鄭 ▲ご▼芸
(72)【発明者】
【氏名】金 聖鐵
(72)【発明者】
【氏名】金 相泰
【審査官】田上 隆一
(56)【参考文献】
【文献】特開２０２０－００４２３２（ＪＰ，Ａ）
【文献】特開２００５－２６６３５９（ＪＰ，Ａ）
【文献】特開２００２－２５８９０９（ＪＰ，Ａ）
【文献】特開２０１４－０４８８２５（ＪＰ，Ａ）
(58)【調査した分野】(Int.Cl.，ＤＢ名)
Ｇ０６Ｑ １０／００－９９／００
(57)【特許請求の範囲】
【請求項1】
コンピュータシステムが実行する方法であって、前記コンピュータシステムは、メモリに含まれたコンピュータ読み取り可能な命令を実行するように構成された少なくとも１つのプロセッサを含み、
前記方法は、
前記少なくとも１つのプロセッサにより、所定の複数のデバイスの画面構成に使用されるデザイン要素を状態表現とインタラクションが含まれたコンポーネントとしてコード化して提供する段階、
前記少なくとも１つのプロセッサにより、前記複数のデバイスのそれぞれの解像度にしたがってグリッド規則に基づいて前記コンポーネントが変化する反応型レイアウトとして、列（ｃｏｌｕｍｎ）単位の規則と行（ｒｏｗ）単位の規則を含むグリッドレイアウトを提供する段階、および
前記少なくとも１つのプロセッサにより、サービスしようとする画面の開発過程において、前記コンポーネントを前記列単位の規則と前記行単位の規則にしたがって前記グリッドレイアウトに配置して画面を構成する段階
を含み、
前記コンポーネントは、複数の状態を含み、
前記コード化して提供する段階は、
前記コンポーネントの状態別にインタラクションをコード化し、前記コンポーネントを前記コンポーネントとミラーリングされたソースコードと１つのセットにして提供する段階、および
前記デザイン要素のうちの１つのアイコンを、表現するオブジェクトによって大きさが調整可能なフォント形態のコンポーネントで構成する段階
を含み、
前記コンポーネントが選択される場合に、前記コンポーネントと、前記ソースコードとが１つのセットとして前記グリッドレイアウトに配置され、
前記構成する段階は、
画面の開発過程において、前記コンポーネントの状態によって前記コンポーネントに対する反応を認知できるように、インタラクションによって前記コンポーネントの状態を視覚化して示す段階
を含む、方法。
【請求項2】
前記コード化して提供する段階は、前記コンポーネントの選択時に、前記コンポーネントを前記コンポーネントのソースコードと１つのセットにして提供する段階
を含む、請求項１に記載の方法。
【請求項3】
前記コード化して提供する段階は、２つ以上のコンポーネントの組み合わせによって構成されたモジュールをコード化してモジュール単位で提供する段階
を含む、請求項１に記載の方法。
【請求項4】
前記コード化して提供する段階は、２つ以上のモジュールの組み合わせによって構成されたテンプレートをコード化してテンプレート単位で提供する段階
をさらに含む、請求項３に記載の方法。
【請求項5】
前記グリッドレイアウトを提供する段階は、少なくとも２つ以上に等分が可能な列単位と一定の高さを有する行単位からなる前記グリッドレイアウトを提供すること
を特徴とする、請求項１に記載の方法。
【請求項6】
前記方法は、前記コンポーネントを含むデザインキット（ｄｅｓｉｇｎ ｋｉｔ）を利用した画面開発過程において利用されるを特徴とする、請求項１～５のうちのいずれか一項に記載の方法。
【請求項7】
前記方法は、前記画面開発過程の前に、前記デザインキットを利用したデザインコンサルティング過程およびワイヤフレーム（ｗｉｒｅｆｒａｍｅ）過程において利用されるを特徴とする、請求項６に記載の方法。
【請求項8】
請求項１～７のうちのいずれか一項に記載の方法を前記コンピュータシステムに実行させる、コンピュータプログラム。
【請求項9】
請求項１～７のうちのいずれか一項に記載の方法をコンピュータに実行させるためのプログラムが記録されている、非一時的なコンピュータ読み取り可能な記録媒体。
【請求項10】
コンピュータシステムであって、メモリに含まれたコンピュータ読み取り可能な命令を実行するように実現される少なくとも１つのプロセッサ
を含み、
前記少なくとも１つのプロセッサは、
所定の複数のデバイスの画面構成に使用されるデザイン要素を状態表現とインタラクションが含まれたコンポーネントとしてコード化して提供するコンポーネント提供部、
前記複数のデバイスのそれぞれの解像度にしたがってグリッド規則に基づいて前記コンポーネントが変化する反応型レイアウトとして、列単位の規則と行単位の規則を含むグリッドレイアウトを提供するレイアウト提供部、および
前記コンポーネントを前記列単位の規則と前記行単位の規則にしたがって前記グリッドレイアウトに配置して画面を構成する画面構成部
を備え、
前記コンポーネントは、複数の状態を含み、
前記コンポーネント提供部は、
前記コンポーネントの状態別にインタラクションをコード化し、前記コンポーネントを前記コンポーネントとミラーリングされたソースコードと１つのセットにして提供し、
前記デザイン要素のうちの１つであるアイコンを、表現するオブジェクトによって大きさが調整可能なフォント形態のコンポーネントで構成し、
前記コンポーネントが選択される場合に、前記コンポーネントと、前記ソースコードとが１つのセットとして前記グリッドレイアウトに配置され、
前記画面構成部は、
画面の開発過程において、前記コンポーネントの状態によって前記コンポーネントに対する反応を認知できるように、インタラクションによって前記コンポーネントの状態を視覚化して示すこと
を特徴とする、コンピュータシステム。
【請求項11】
前記コンポーネント提供部は、２つ以上のコンポーネントの組み合わせによって構成されたモジュールをコード化してモジュール単位で提供し、
２つ以上のモジュールの組み合わせによって構成されたテンプレートをコード化してテンプレート単位で提供すること
を特徴とする、請求項１０に記載のコンピュータシステム。
【請求項12】
前記レイアウト提供部は、少なくとも２つ以上に等分が可能な列単位と一定の高さを有する行単位からなる前記グリッドレイアウトを提供すること
を特徴とする、請求項１０～１１のうちのいずれか一項に記載のコンピュータシステム。
【発明の詳細な説明】
【技術分野】
【0001】
以下の説明は、画面デザインに対する業務提携を支援する技術に関する。
【背景技術】
【0002】
現在、ウェブ上で使用されている言語であるＨＴＭＬ（Ｈｙｐｅｒ Ｔｅｘｔ Ｍａｒｋｕｐ Ｌａｎｇｕａｇｅ）は、特別なデータタイプが使用されておらず移植性に優れているため使用に便利である。ＨＴＭＬは、専門的なプログラミング知識のない一般の利用者でも簡単に生成して編集することができる。
【0003】
例えば、特許文献１（公開日２００２年５月２日）には、ＨＴＭＬコードを利用してウェブ上でホームページを製作する技術が開示されている。
【0004】
ＨＴＭＬは、単純な構造であり、フォーマットとレイアウトのための表現言語であってデータを記述するための言語ではないため、ハイパーテキスト（Ｈｙｐｅｒｔｅｘｔ）を簡単に作成することに適している反面、複雑かつ構造化された文書を作成するには限界があった。
【0005】
これを補うために、ＣＧＩ（Ｃｏｍｍｏｎ Ｇａｔｅｗａｙ Ｉｎｔｅｒｆａｃｅ）やＰＨＰ（Ｐｒｏｆｅｓｓｉｏｎａｌ ＨＴＭＬ Ｐｒｅｐｒｏｃｅｓｓｏｒ）、ＡＳＰ（Ａｃｔｉｖｅ Ｓｅｒｖｅｒ Ｐａｇｅ）、ＪＳＰ（Ｊａｖａ Ｓｅｒｖｅｒ Ｐａｇｅ）などの言語などがともに開発されている。
【0006】
しかし、１つの画面を生成するために多数の機能ブロックが複合的に構成されているため、コードの複雑度と相互干渉作用を増加させ、再使用性を低下させるという問題を抱えている。
【先行技術文献】
【特許文献】
【0007】
【文献】韓国公開特許第１０－２００２－００３１５０１号公報
【発明の概要】
【発明が解決しようとする課題】
【0008】
画面デザインに参加する企画者、デザイナ、開発者が各自で作業をしても、一貫性を維持することができる、業務提携方法およびシステムを提供する。
【課題を解決するための手段】
【0009】
コンピュータシステムが実行する方法であって、前記コンピュータシステムは、メモリに含まれたコンピュータ読み取り可能な命令を実行するように構成された少なくとも１つのプロセッサを含み、画面デザインの業務提携のためのサイトを提供し、前記方法は、前記少なくとも１つのプロセッサにより、画面構成に使用されるデザイン要素を状態表現とインタラクションが含まれたコンポーネントとしてコード化して提供する段階、および前記少なくとも１つのプロセッサにより、サービスしようとする画面の開発過程において前記コンポーネントを利用して画面を構成する段階を含む方法を提供する。
【0010】
一側面によると、前記提供する段階は、前記コンポーネントの状態別にインタラクションをコード化し、前記コンポーネントをソースコードとともに提供する段階を含んでよい。
【0011】
他の側面によると、前記提供する段階は、前記コンポーネントの状態別にインタラクションをコード化し、前記コンポーネントを前記コンポーネントとミラーリングされたソースコードと１つのセットにして提供する段階を含んでよい。
【0012】
また他の側面によると、前記提供する段階は、前記コンポーネントの選択時に、前記コンポーネントのソースコードをコピーして提供する段階を含んでよい。
【0013】
また他の側面によると、前記提供する段階は、前記デザイン要素うちの１つであるアイコンをフォント形態のコンポーネントとして構成する段階を含んでよい。
【0014】
また他の側面によると、前記提供する段階は、２つ以上のコンポーネントの組み合わせによって構成されたモジュールをコード化してモジュール単位で提供する段階を含んでよい。
【0015】
また他の側面によると、前記提供する段階は、２つ以上のモジュールの組み合わせによって構成されたテンプレートをコード化してテンプレート単位で提供する段階をさらに含んでよい。
【0016】
また他の側面によると、前記方法は、前記少なくとも１つのプロセッサにより、列（ｃｏｌｕｍｎ）単位の規則と行（ｒｏｗ）単位の規則を含むグリッドレイアウトを提供する段階をさらに含んでよい。
【0017】
また他の側面によると、前記構成する段階は、前記コンポーネントを前記列単位の規則と前記行単位の規則にしたがって前記グリッドレイアウトに配置して前記画面を構成してよい。
【0018】
また他の側面によると、前記グリッドレイアウトを提供する段階は、デバイスの解像度にしたがい、グリッド規則に基づいて前記コンポーネントが変化する反応型レイアウトを提供してよい。
【0019】
また他の側面によると、前記グリッドレイアウトを提供する段階は、少なくとも２つ以上に等分が可能な列単位と一定の高さを有する行単位からなる前記グリッドレイアウトを提供してよい。
【0020】
また他の側面によると、前記サイトは、前記コンポーネントを含むデザインキット（ｄｅｓｉｇｎ ｋｉｔ）を利用した画面開発過程を提供してよい。
【0021】
また他の側面によると、前記サイトは、前記画面開発過程の前に、前記デザインキットを利用したデザインコンサルティング過程およびワイヤフレーム（ｗｉｒｅｆｒａｍｅ）過程のうちの少なくとも１つを提供してよい。
【0022】
前記方法を前記コンピュータシステムに実行させるために非一時的なコンピュータ読み取り可能な記録媒体に記録される、コンピュータプログラムを提供する。
【0023】
前記方法をコンピュータに実行させるためのプログラムが記録されている、非一時的なコンピュータ読み取り可能な記録媒体を提供する。
【0024】
コンピュータシステムであって、メモリに含まれたコンピュータ読み取り可能な命令を実行するように実現される少なくとも１つのプロセッサを含み、前記少なくとも１つのプロセッサは、画面デザインの業務提携のためのサイトを提供するものとして、画面構成に使用されるデザイン要素を状態表現とインタラクションが含まれたコンポーネントとしてコード化して提供するコンポーネント提供部、列単位の規則と行単位の規則を含むグリッドレイアウトを提供するレイアウト提供部、および前記コンポーネントを前記列単位の規則と前記行単位の規則にしたがって前記グリッドレイアウトに配置して画面を構成する画面構成部を備える、コンピュータシステムを提供する。
【発明の効果】
【0025】
本発明の実施形態によると、繰り返されるデザイン要素をコンポーネント化し、これを利用して開発者が自らサービス設計に合わせて画面を構成することにより、一貫した反応（ｒｅｓｐｏｎｓｅ）とユーザエクスペリエンス（ＵＸ）、およびユーザインタフェース（ＵＩ）を維持することができる。
【図面の簡単な説明】
【0026】
【図1】本発明の一実施形態における、ネットワーク環境の例を示した図である。
【図2】本発明の一実施形態における、電子機器およびサーバの内部構成を説明するためのブロック図である。
【図3】本発明の一実施形態における、サーバのプロセッサが含むことのできる構成要素の例を示した図である。
【図4】本発明の一実施形態における、サーバが実行することのできる方法の例を示したフローチャートである。
【図5】本発明の一実施形態における、コンポーネントの状態別のタイプを説明するための図面である。
【図6】本発明の一実施形態における、コンポーネントの例を示した図である。
【図7】本発明の一実施形態における、コンポーネントの一例である入力（ｉｎｐｕｔ）の状態別のタイプを示した図である。
【図8】本発明の一実施形態における、コード化されたコンポーネントの例示を示した図である。
【図9】本発明の一実施形態における、コンポーネント集合であるモジュールの例を示した図である。
【図10】本発明の一実施形態における、モジュール集合であるテンプレートの例を示した図である。
【図11】本発明の一実施形態における、アイコンのフォント化を説明するための例示図である。
【図12】本発明の一実施形態における、アイコンタイプの例を示した図である。
【図13】本発明の一実施形態における、アイコンのコードコピーを活用する例を示した図である。
【図14】本発明の一実施形態における、画面構成のためのグリッドシステムのレイアウト例を示した図である。
【図15】本発明の一実施形態における、画面構成のためのグリッドシステムのレイアウト例を示した図である。
【図16】本発明の一実施形態における、画面構成のためのグリッドシステムのレイアウト例を示した図である。
【図17】本発明の一実施形態における、画面構成のためのグリッドシステムのレイアウト例を示した図である。
【発明を実施するための形態】
【0027】
以下、本発明の実施形態について、添付の図面を参照しながら詳しく説明する。
【0028】
本発明の実施形態は、画面デザインに対する業務提携を支援する技術に関する。
【0029】
本明細書で具体的に開示される事項を含む実施形態は、繰り返されるデザイン要素をコンポーネント化し、これを利用して開発者が自らサービス設計に合わせて画面を構成するように支援することができる。
【0030】
また、本明細書で具体的に開示される事項を含む実施形態は、デザインキット（ｄｅｓｉｇｎ ｋｉｔ）を利用することでプロジェクトごとに繰り返されるプロセスを減らし、開発時間を短縮させることができる。
【0031】
また、本明細書で具体的に開示される事項を含む実施形態は、直感的なコンポーネント（ｃｏｍｐｏｎｅｎｔ）設計により、迅速かつ容易なコミュニケーションを支援することができる。
【0032】
図１は、本発明の一実施形態における、ネットワーク環境の例を示した図である。図１のネットワーク環境は、複数の電子機器１１０、１２０、１３０、１４０、複数のサーバ１５０、１６０、およびネットワーク１７０を含む例を示している。このような図１は、発明の説明のための一例に過ぎず、電子機器の数やサーバの数が図１のように限定されることはない。
【0033】
複数の電子機器１１０、１２０、１３０、１４０は、コンピュータシステムによって実現される固定端末や移動端末であってよい。複数の電子機器１１０、１２０、１３０、１４０の例としては、スマートフォン、携帯電話、ナビゲーション、ＰＣ（ｐｅｒｓｏｎａｌ ｃｏｍｐｕｔｅｒ）、ノート型ＰＣ、デジタル放送用端末、ＰＤＡ（Ｐｅｒｓｏｎａｌ Ｄｉｇｉｔａｌ Ａｓｓｉｓｔａｎｔ）、ＰＭＰ（Ｐｏｒｔａｂｌｅ Ｍｕｌｔｉｍｅｄｉａ Ｐｌａｙｅｒ）、タブレット、ゲームコンソール、ウェアラブルデバイス、ＩｏＴ（ｉｎｔｅｒｎｅｔ ｏｆ ｔｈｉｎｇｓ）デバイス、ＶＲ（ｖｉｒｔｕａｌ ｒｅａｌｉｔｙ）デバイス、ＡＲ（ａｕｇｍｅｎｔｅｄ ｒｅａｌｉｔｙ）デバイスなどがある。一例として、図１では、電子機器１１０の例としてスマートフォンを示しているが、本発明の実施形態において、電子機器１１０は、実質的に無線または有線通信方式を利用し、ネットワーク１７０を介して他の電子機器１２０、１３０、１４０および／またはサーバ１５０、１６０と通信することのできる多様な物理的なコンピュータシステムのうちの１つを意味してよい。
【0034】
通信方式が限定されることはなく、ネットワーク１７０が含むことのできる通信網（一例として、移動通信網、有線インターネット、無線インターネット、放送網、衛星網など）を利用する通信方式だけではなく、機器間の近距離無線通信が含まれてもよい。例えば、ネットワーク１７０は、ＰＡＮ（ｐｅｒｓｏｎａｌ ａｒｅａ ｎｅｔｗｏｒｋ）、ＬＡＮ（ｌｏｃａｌ ａｒｅａ ｎｅｔｗｏｒｋ）、ＣＡＮ（ｃａｍｐｕｓ ａｒｅａ ｎｅｔｗｏｒｋ）、ＭＡＮ（ｍｅｔｒｏｐｏｌｉｔａｎ ａｒｅａ ｎｅｔｗｏｒｋ）、ＷＡＮ（ｗｉｄｅ ａｒｅａ ｎｅｔｗｏｒｋ）、ＢＢＮ（ｂｒｏａｄｂａｎｄ ｎｅｔｗｏｒｋ）、インターネットなどのネットワークのうちの１つ以上の任意のネットワークを含んでよい。さらに、ネットワーク１７０は、バスネットワーク、スターネットワーク、リングネットワーク、メッシュネットワーク、スター－バスネットワーク、ツリーまたは階層的ネットワークなどを含むネットワークトポロジのうちの任意の１つ以上を含んでもよいが、これらに限定されることはない。
【0035】
サーバ１５０、１６０それぞれは、複数の電子機器１１０、１２０、１３０、１４０とネットワーク１７０を介して通信して命令、コード、ファイル、コンテンツ、サービスなどを提供する１つ以上のコンピュータ装置によって実現されてよい。例えば、サーバ１５０は、ネットワーク１７０を介して接続した複数の電子機器１１０、１２０、１３０、１４０に第１サービスを提供するシステムであってよく、サーバ１６０も、ネットワーク１７０を介して接続した複数の電子機器１１０、１２０、１３０、１４０に第２サービスを提供するシステムであってよい。より具体的な例として、サーバ１５０は、複数の電子機器１１０、１２０、１３０、１４０においてインストールされて実行されるコンピュータプログラムであるアプリケーションを通じ、該当のアプリケーションが目的とするサービス（一例として、業務提携サービスなど）を第１サービスとして複数の電子機器１１０、１２０、１３０、１４０に提供してよい。他の例として、サーバ１６０は、上述したアプリケーションのインストールおよび実行のためのファイルを複数の電子機器１１０、１２０、１３０、１４０に配布するサービスを第２サービスとして提供してよい。
【0036】
図２は、本発明の一実施形態における、電子機器およびサーバの内部構成を説明するためのブロック図である。図２では、電子機器に対する例として電子機器１１０の内部構成およびサーバ１５０の内部構成について説明する。また、他の電子機器１２０、１３０、１４０やサーバ１６０も、上述した電子機器１１０またはサーバ１５０と同一または類似の内部構成を有してよい。
【0037】
電子機器１１０およびサーバ１５０は、メモリ２１１、２２１、プロセッサ２１２、２２２、通信モジュール２１３、２２３、および入力／出力インタフェース２１４、２２４を含んでよい。メモリ２１１、２２１は、非一時的なコンピュータ読み取り可能な記録媒体であって、ＲＡＭ（ｒａｎｄｏｍ ａｃｃｅｓｓ ｍｅｍｏｒｙ）、ＲＯＭ（ｒｅａｄ ｏｎｌｙ ｍｅｍｏｒｙ）、ディスクドライブ、ＳＳＤ（ｓｏｌｉｄ ｓｔａｔｅ ｄｒｉｖｅ）、フラッシュメモリ（ｆｌａｓｈ ｍｅｍｏｒｙ）などのような永続的大容量記録装置を含んでよい。ここで、ＲＯＭ、ＳＳＤ、フラッシュメモリ、ディスクドライブのような永続的大容量記録装置は、メモリ２１１、２２１とは区分される別の永続的記録装置として電子機器１１０やサーバ１５０に含まれてもよい。また、メモリ２１１、２２１には、オペレーティングシステムと、少なくとも１つのプログラムコード（一例として、電子機器１１０においてインストールされて実行されるブラウザや、特定のサービスの提供のために電子機器１１０にインストールされたアプリケーションなどのためのコード）が記録されてよい。このようなソフトウェア構成要素は、メモリ２１１、２２１とは別のコンピュータ読み取り可能な記録媒体からロードされてよい。このような別のコンピュータ読み取り可能な記録媒体は、フロッピー（登録商標）ドライブ、ディスク、テープ、ＤＶＤ／ＣＤ－ＲＯＭドライブ、メモリカードなどのコンピュータ読み取り可能な記録媒体を含んでよい。他の実施形態において、ソフトウェア構成要素は、コンピュータ読み取り可能な記録媒体ではない通信モジュール２１３、２２３を通じてメモリ２１１、２２１にロードされてもよい。例えば、少なくとも１つのプログラムは、開発者またはアプリケーションのインストールファイルを配布するファイル配布システム（一例として、上述したサーバ１６０）がネットワーク１７０を介して提供するファイルによってインストールされるコンピュータプログラム（一例として、上述したアプリケーション）に基づいてメモリ２１１、２２１にロードされてよい。
【0038】
プロセッサ２１２、２２２は、基本的な算術、ロジック、および入出力演算を実行することにより、コンピュータプログラムの命令を処理するように構成されてよい。命令は、メモリ２１１、２２１または通信モジュール２１３、２２３によって、プロセッサ２１２、２２２に提供されてよい。例えば、プロセッサ２１２、２２２は、メモリ２１１、２２１のような記録装置に記録されたプログラムコードにしたがって受信される命令を実行するように構成されてよい。
【0039】
通信モジュール２１３、２２３は、ネットワーク１７０を介して電子機器１１０とサーバ１５０とが互いに通信するための機能を提供してもよいし、電子機器１１０および／またはサーバ１５０が他の電子機器（一例として、電子機器１２０）または他のサーバ（一例として、サーバ１６０）と通信するための機能を提供してもよい。一例として、電子機器１１０のプロセッサ２１２がメモリ２１１のような記録装置に記録されたプログラムコードにしたがって生成した要求が、通信モジュール２１３の制御にしたがってネットワーク１７０を介してサーバ１５０に伝達されてよい。これとは逆に、サーバ１５０のプロセッサ２２２の制御にしたがって提供される制御信号や命令、コンテンツ、ファイルなどが、通信モジュール２２３とネットワーク１７０を経て電子機器１１０の通信モジュール２１３を通じて電子機器１１０に受信されてよい。例えば、通信モジュール２１３を通じて受信されたサーバ１５０の制御信号や命令、コンテンツ、ファイルなどは、プロセッサ２１２やメモリ２１１に伝達されてよく、コンテンツやファイルなどは、電子機器１１０がさらに含むことのできる記録媒体（上述した永続的記録装置）に記録されてよい。
【0040】
入力／出力インタフェース２１４は、入力／出力装置２１５とのインタフェースのための手段であってよい。例えば、入力装置は、キーボード、マウス、マイクロフォン、カメラなどの装置を、出力装置は、ディスプレイ、スピーカ、触覚フィードバックデバイスなどのような装置を含んでよい。他の例として、入力／出力インタフェース２１４は、タッチスクリーンのように入力と出力のための機能が１つに統合された装置とのインタフェースのための手段であってもよい。入力／出力装置２１５は、電子機器１１０と１つの装置で構成されてもよい。また、サーバ１５０の入力／出力インタフェース２２４は、サーバ１５０に接続するかサーバ１５０が含むことのできる入力または出力のための装置（図示せず）とのインタフェースのための手段であってよい。より具体的な例として、電子機器１１０のプロセッサ２１２がメモリ２１１にロードされたコンピュータプログラムの命令を処理するにあたり、サーバ１５０や電子機器１２０が提供するデータを利用して構成されるサービス画面やコンテンツが、入力／出力インタフェース２１４を通じてディスプレイに表示されてよい。
【0041】
また、他の実施形態において、電子機器１１０およびサーバ１５０は、図２の構成要素よりも多くの構成要素を含んでもよい。しかし、大部分の従来技術の構成要素を明確に図に示す必要はない。例えば、電子機器１１０は、上述した入力／出力装置２１５のうちの少なくとも一部を含むように実現されてもよいし、トランシーバ、ＧＰＳ（Ｇｌｏｂａｌ Ｐｏｓｉｔｉｏｎｉｎｇ Ｓｙｓｔｅｍ）モジュール、カメラ、各種センサ、データベースなどのような他の構成要素をさらに含んでもよい。より具体的な例として、電子機器１１０がスマートフォンである場合、一般的にスマートフォンが含んでいる加速度センサやジャイロセンサ、カメラモジュール、物理的な各種ボタン、タッチパネルを利用したボタン、入力／出力ポート、振動のための振動器などのような多様な構成要素が、電子機器１１０にさらに含まれるように実現されてよい。
【0042】
以下では、デザインキットを利用した業務提携のための方法およびシステムの具体的な実施形態について説明する。
【0043】
図３は、本発明の一実施形態における、サーバのプロセッサが含むことのできる構成要素の例を示したブロック図であり、図４は、本発明の一実施形態における、サーバが実行することのできる方法の例を示したフローチャートである。
【0044】
本実施形態に係るサーバ１５０は、業務提携サービスを提供するサービスプラットフォームの役割を担う。サーバ１５０には、コンピュータによって実現されたデザイン業務提携システムが構成されてよい。サーバ１５０は、クライアント（ｃｌｉｅｎｔ）である複数の電子機器１１０、１２０、１３０、１４０を対象とするものであって、電子機器１１０、１２０、１３０、１４０上にインストールされた専用アプリケーションやサーバ１５０と関連するウェブ／モバイルサイトへの接続によって画面デザインに対する業務提携サービスを提供してよい。特に、サーバ１５０は、デザインキットを利用することで画面デザインに対して一貫性のある作業を維持しながら、繰り返されるデザイン過程を省略することのできる新たなデザインプロセスを提供してよい。
【0045】
サーバ１５０のプロセッサ２２２は、図４に係るデザイン業務提携方法を実行するための構成要素として、図３に示すように、コンポーネント提供部３１０、レイアウト提供部３２０、および画面構成部３３０を含んでよい。実施形態によって、プロセッサ２２２の構成要素は、選択的にプロセッサ２２２に含まれても除外されてもよい。また、実施形態によって、プロセッサ２２２の構成要素は、プロセッサ２２２の機能の表現のために分離されても併合されてもよい。
【0046】
このようなプロセッサ２２２およびプロセッサ２２２の構成要素は、図４のデザイン業務提携方法が含む段階４１０～４３０を実行するようにサーバ１５０を制御してよい。例えば、プロセッサ２２２およびプロセッサ２２２の構成要素は、メモリ２２１が含むオペレーティングシステムのコードと、少なくとも１つのプログラムのコードとによる命令（ｉｎｓｔｒｕｃｔｉｏｎ）を実行するように実現されてよい。
【0047】
ここで、プロセッサ２２２の構成要素は、サーバ１５０に記録されたプログラムコードが提供する命令にしたがってプロセッサ２２２によって実行される互いに異なる機能（ｄｉｆｆｅｒｅｎｔ ｆｕｎｃｔｉｏｎｓ）の表現であってよい。例えば、サーバ１５０がデザイン要素のコンポーネントを提供するように上述した命令にしたがってサーバ１５０を制御するプロセッサ２２２の機能的表現として、コンポーネント提供部３１０が利用されてよい。
【0048】
プロセッサ２２２は、サーバ１５０の制御と関連する命令がロードされたメモリ２２１から必要な命令を読み取ってよい。この場合、前記読み取られた命令は、以下で説明する段階４１０～４３０をプロセッサ２２２が実行するように制御するための命令を含んでよい。以下で説明する段階４１０～４３０は、図４に示された順序とは異なるように実行されてもよく、段階４１０～４３０のうちの一部が省略されるか、追加の過程がさらに含まれてもよい。
【0049】
図４を参照すると、段階４１０で、コンポーネント提供部３１０は、画面構成に必要なデザイン要素をコンポーネント化して提供してよい。画面デザインに参加する企画者、デザイナ、開発者などのようにサービスを生成するすべての者（以下、「ユーザ」とする）は、デフォルトデザインの他にも、アクションに反応して変化する状態をすべて含んでデザインしなければならない。デザイン要素は１つや２つではないため、失敗によって抜け漏れが出たり、開発側の優先順位によって配布がなされないなどのような問題が生じていた。このような問題を解決するために、すべての反応が考慮されたコンポーネントをコード化して一貫した反応を維持することのできる業務提携が求められている。コンポーネント提供部３１０は、デザイン要素それぞれに対して状態表現とインタラクションが含まれたコンポーネントをコード化し、ソースコードとともに提供する。企画者、デザイナ、開発者がコードを用いてコミュニケーションすることのできる環境を提供することにより、ＵＸを勘案したインタラクションが適用されたＵＩと、ＵＩが作動する方法をコード化して提供し、該当のＵＩにミラーリングされたソースコードを１つのセットにして提供することにより、すべてのユーザがデザインとコードを同時に確認することができ、一貫性のある作業を支援することができる。
【0050】
段階４２０で、レイアウト提供部３２０は、モバイル、タブレット、デスクトップなどのような多様な機器の解像度に対応させるために反応型レイアウトを提供するために、反応型に必要な列単位の規則とコンポーネント整列のための行単位の規則を含むグリッドシステムのレイアウトを提供してよい。一例として、レイアウト提供部３２０は、反応型に必要な１２の列（ｃｏｌｕｍｎ）単位と、多様なコンポーネントを簡単に並べることのできる３２ピクセルの高さの行（ｒｏｗ）単位で構成されたグリッドシステムのレイアウトを提供する。列単位と行単位が含まれたレイアウトを利用する場合、開発者はもちろん、すべてのユーザがコンポーネントを配置することができ、これにより、構成された画面を自動で反応型として実現することができる。
【0051】
段階４３０で、画面構成部３３０は、ユーザ選択によるコンポーネントを行単位と列単位の規則に基づいてレイアウトに配置することによって画面を構成してよい。デザイナによるページデザインがなくても、事前に生成されたコンポーネントとレイアウトシステムを利用することにより、サービスしようとする画面を開発者が直接に構成することができる。本実施形態では、画面デザインで繰り返し使用されるデザインリソースをライブラリで構築して画面構成に適用してよい。画面構成部３３０は、コンポーネントを選択する場合、選択されたコンポーネントのソースコードをコピーし、コンポーネントとソースコードを１つのセットにしてレイアウトに配列することにより、一貫したリソースでサービス画面を構成することができる。一例として、アイコンをすべてフォントで埋め込み（ｅｍｂｅｄ）、ソースコードをコピーして画面を構成することにより、アイコンが変わる心配がなく、アイコンもフォントであるため、フォントの大きさを調節するようにアイコンの大きさを調節することができる。
【0052】
本実施形態に係るサーバ１５０は、予め生成されたコンポーネントとレイアウトシステムを利用してサービス画面を構成することができるデザインキットサイトを提供する。このようなデザインキットサイトを利用することにより、デザイナが介入する必要なく、開発者が直ぐにサービス画面を開発することができる。
【0053】
場合によっては、デザインキットの円滑な使用のために、ＵＸ／ＵＩコンサルティング（ｃｏｎｓｕｌｔｉｎｇ）を提供してよい。画面構成部３３０は、開発者がデザインキットを使用する前に、開発者の要求にしたがい、デザイナのページデザインとしてＵＸ／ＵＩコンサルティングを要求してよい。一例として、画面構成部３３０は、サードパーティ・ライブラリとして付加的なスクリプト、スタイルファイルロードを提供してよい。画面構成部３３０は、カスタムスクロール、インタラクティブなツリー構造、チャート機能、リサイジング機能、整列機能、時間選択機能、日付および時間選択機能、スライド画面切り替え機能、イメージプレビュー機能（ドラッグ・アンド・ドロップファイルアップロード）などを提供してよい。本実施形態では、開発者の画面構成の前に、デザイナがデザインキットを利用してＵＸ／ＵＩコンサルティングをして開発側にガイドする個別のプロセスが含まれてよい。
【0054】
他の場合には、企画者が、事前に生成されたデザインキットを利用してワイヤフレーム（ｗｉｒｅ ｆｒａｍｅ）を整理すれば、デザイナが企画者のワイヤフレームに対してＵＸ／ＵＩコンサルティングをし、必要な場合には追加でコンポーネントをデザインしてよく、後に、開発者は、事前に生成されたデザインキットとデザイナが新たに追加したコンポーネントを利用してサービス画面を生成してよい。
【0055】
デザインキットサイトを利用したデザインプロセスとして、（１）デザイナの介入なく、サービス設計に合わせて開発者が事前に生成されたデザインキット（コンポーネントとレイアウトシステム）を利用してサービス画面を直ぐに構成するプロセス、（２）サービス設計に対してデザイナがデザインキットを利用してＵＸ／ＵＩコンサルティングをした後、デザイナのコンサルティングに基づいて開発者がサービス画面を構成するプロセス、および（３）サービス設計に対して企画者が先にデザインキットを利用してワイヤフレームを整理すれば、これにデザイナが追加で必要なコンポーネントをデザインした後、開発者がデザインキットと追加されたコンポーネントを利用してサービス画面を構成するプロセスを提供してよい。
【0056】
デザインキットを利用したデザインプロセスには、デザインＱＡ（Ｑｕａｌｉｔｙ Ａｓｓｕｒａｎｃｅ、リリース前にテストおよび検収する段階）プロセスが含まれてよく、該当のプロセスにより、デザイナは、開発者が生成したサービス画面に対してコードで意見を与えることができる。
【0057】
以下では、デザインキットの実施形態について細かく説明する。
【0058】
デザインキットは、３種類の単位である、コンポーネント、モジュール、およびテンプレートで構成されてよい。コンポーネントとは、基本単位要素としてＵＩ（ｕｓｅｒ ｉｎｔｅｒｆａｃｅ）を構成するデザイン要素を意味し、すべてのコンポーネントはそれぞれのコンポーネントとしての機能を有する。このようなコンポーネントの組み合わせをモジュールと定義する。また、テンプレートとは、レイアウトが含まれたデザイン要素として、目的（例えば、検索など）によって少なくとも２つ以上のコンポーネントまたはモジュールを組み合わせて提供される単位を意味する。
【0059】
デザインキットのすべてのコンポーネントは、インタラクションによってコンポーネントの状態を視覚化して示すことにより、ユーザが取るべきアクションを誘導したり、コンポーネントの状態を直感的に察知できるように支援する。ユーザのアクションに即刻的に反応し、ユーザは明確な結果を確認することができ、統一されたインタラクションによってサービス全体に一貫性を提供することができる。
【0060】
一例として、コンポーネントは、４種類の状態別のタイプが存在する。図５を参照すると、コンポーネントの一例であるボタン５００は、ホバー（ｈｏｖｅｒ）状態、有効化（ｅｎａｂｌｅｄ）状態、フォーカス（ｆｏｃｕｓ）状態、無効化（ｄｉｓａｂｌｅｄ）状態を含んでよい。ホバー状態は、アクションが可能なコンポーネントにユーザがカーソルを合わせたときに表現される状態を意味し、有効化状態はアクションが可能なコンポーネントの状態を、フォーカス状態はユーザがコンポーネントをハイライトするかオプションを選択した状態を、無効化状態はアクションが不可能なコンポーネントの状態を意味する。
【0061】
すべてのコンポーネントには、このような４種類の状態表現が必須で製作されなければならず、ユーザは、コンポーネントの状態によって自身のアクションに対する反応を認知してよい。
【0062】
図６は、ボタン（ｂｕｔｔｏｎ）、入力（ｉｎｐｕｔ）、メニュー（ｍｅｎｕ）、ページネーション（ｐａｇｉｎａｔｉｏｎ）、チェックボックス（ｃｈｅｃｋ ｂｏｘ）、ラジオボタン（ｒａｄｉｏ ｂｕｔｔｏｎ）、ドロップダウン（ｄｒｏｐｄｏｗｎ）などのコンポーネントの例を示している。
【0063】
コンポーネントの一例として、入力は、ユーザがデータを入力するためのフィールドを意味する。他のコンポーネントとは異なり、図７に示すように、入力７００は、データによって補助説明（ｈｅｌｐｅｒ）、エラー（ｅｒｒｏｒ）、完了（ｓｕｃｃｅｓｓ）、必須入力（ｒｅｑｕｉｒｅｄ）などのケースが存在する。入力前には補助テキストによって理解を援助し、入力後には入力した値による結果を示す。これによってユーザはフィードバックを受けることができ、状況ごとにカラーを異なるように設定することで直感的な状況認知が可能となる。例えば、各状況のカラーとして、エラーはＲｅｄ、完了はＧｒｅｅｎ、必須入力はＢｌｕｅを適用してよい。
【0064】
このような入力は、多様な機能とコンポーネントと結合して使用してよい。入力ボックス前のタイトルの提供の可否によって２種類のタイプに分けられてよく、すべてのタイプは３種類の状態、すなわち、有効化状態、無効化状態、読み取り専用状態が提供される。
【0065】
プロセッサ２２２は、状態表現とインタラクションが含まれたコンポーネントをコード化して提供することにより、図８に示すように、基本的な入力タイプに該当するコンポーネント８０１と該当のコンポーネント８０１のソースコード８０２を１つのセットにして提供してよい。言い換えれば、入力コンポーネント８０１の１つに複数の状態が存在する場合、状態別にインタラクションをコード化し、該当のコンポーネント８０１をソースコード８０２が含まれたセット概念で提供してよい。ソースコード８０２が表示されたインタフェース画面では、コード全体を見るための「大きく表示」ボタン８１、およびコードをコピーするための「コピー」ボタン８２が含まれてよい。
【0066】
ソースコード８０２は、コンポーネント８０１とともに直接表示される方式の他にも、表示はせずにコンポーネント８０１の選択時に自動でコピーされる方式によって提供されてもよい。
【0067】
プロセッサ２２２は、２つ以上のコンポーネントの組み合わせによって構成されたモジュールもコード化して提供してよい、例えば、カレンダーコンポーネントが入力コンポーネントに含まれ、入力データとして日付選択が可能なモジュールを提供してよい。図９に示すように、プロセッサ２２２は、カレンダーコンポーネントと入力コンポーネントが結合された形態として、月単位のカレンダーが入力内に含まれ、日付選択が可能なモジュール９０１と該当のモジュール９０１のソースコード９０２を１つのセットにして提供してよい。このとき、プロセッサ２２２は、カレンダー内で年、月、日単位の選択が可能なリストを提供する機能、オプション値を追加することで設定期間を制限する機能などを追加でさらに含んでコード化してよい。カレンダーコンポーネントの他にも、タイトルがある入力コンポーネントを利用するときには、タイトルにドロップダウンコンポーネント、ツリーメニューコンポーネント、多様なレイヤタイプのコンポーネントなどを結合させてモジュール単位でコード化して提供してもよい。
【0068】
プロセッサ２２２は、２つ以上のモジュールの組み合わせによって構成されたテンプレートもコード化し、テンプレートと該当のテンプレートのソースコードを１つのセットにして提供してよい。図１０を参照すると、２つ以上のモジュールが結合されたテンプレート単位として、例えば、３つ以下の条件を入力する検索テンプレート１００１、５つ以上の条件を入力する検索テンプレート１００２などをそれぞれのソースコードとともに提供してよい。
【0069】
コンポーネントの他の例であるアイコンは、テキストフォント形態でコンポーネント化されてよい。図１１を参照すると、アイコン１１００は、円形と四角形を基準として一定の領域（例えば、正方形）のグリッド１１０１内で大きさを自由に変形してよく、どのようなオブジェクトを表現するかによって割合を調整することのできるフォント形態のコンポーネントで構成される。このとき、一定の勾配を使用してアイコンに統一性を付与してよく、例えば、０度、４５度、９０度を使用しながら左右を反転させて追加の応用を加えてよい。
【0070】
図１２を参照すると、アイコン１１００は、単にラインで形態を表現するラインアイコン、視覚的に明確に伝達することのできるソリッドアイコン、テーマに応じてカラーが変化するカラーアイコンなどに分けられてよい。
【0071】
プロセッサ２２２は、アイコンコンポーネントをコード化して提供してよく、アイコンも他のコンポーネントと同じように、アイコンコンポーネントと該当のアイコンのソースコードを１つのセットにして提供してよい。
【0072】
プロセッサ２２２は、アイコンを集めたライブラリを提供してよく、ユーザがライブラリ内でアイコンをクリックすれば、該当のアイコンのコードがコピーされて画面構成に直ぐに利用可能となる。プロセッサ２２２は、図１３に示すようにライブラリ内のアイコンリスト１３００を提供してよく、ユーザがアイコンリスト１３００内で特定のアイコン１３０１を選択する場合、コードコピーに関するお知らせ１３０２を表示してよい。アイコン１３０１の選択によってコードがコピーされることにより、文書への貼り付け、アイコン１３０１に対するコードクラスを直ぐに適用してよい。
【0073】
アイコンの他にも、イラストレーション（ｉｌｌｕｓｔｒａｔｉｏｎ）も共感要素として多く使用されるデザイン要素のうちの１つであるため、アイコンと同じようにコンポーネント化し、画面構成に利用可能なコンポーネントライブラリとして構築してよい。
【0074】
したがって、プロセッサ２２２は、画面構成において、コンポーネントはもちろん、使用頻度が高いコンポーネントグループをモジュール化して提供することができ、さらにレイアウトまで備えたテンプレート単位で提供することも可能である。
【0075】
プロセッサ２２２は、画面構成のためのグリッドシステムのレイアウトを提供してよい。一例として、プロセッサ２２２は、デザインキットに対する専用レイアウトとして、ブートストラップ（ｂｏｏｔｓｔｒａｐ）基盤の１２グリッドシステムを使用してよい。モバイル、タブレット、デスクトップなどの多様な機器の解像度に対応させるために反応型レイアウトを適用してよく、各機器に適した画面構成を示すために動的に変化するレイアウトを提供してよい。
【0076】
レイアウト設計の目的は、解像度が異なっても同じ経験をユーザに提供しようとすることにあり、このためには、機器ごとに異なる構造の画面を設計するのではなく、解像度が下がるときにはグリッド規則に合うようにコンポーネントの変化が可能なレイアウトを提供する。解像度によるコンポーネントの変化により、機器ごとに異なる構造で設計する必要がない。
【0077】
一例として、図１４を参照すると、プロセッサ２２２は、１２個の列単位からなるレイアウトを提供しているが、このとき、列単位を１２個のグリッドに設定した理由は、効率的なレイアウトを構成することができるためである。１２は１、２、３、４、６、１２で割ることができるため画面を多様に構成することができ、例えば、６個ずつのグリッドに２等分してそれぞれイメージとテキストで構成してよく、４等分する場合には３個ずつのグリッドに分けてそれぞれ異なるコンテンツを示してよい。
【0078】
さらに、プロセッサ２２２は、コンポーネントを効率的に配置するための行単位の規則を含むレイアウトを提供してよい。ボタン、入力、データテーブル、リストなどのすべてのコンポーネントを３２ピクセルの高さの行に入るように設計されたレイアウトを利用してよく、これにより、多様なコンポーネントを行内に容易に整列することができ、行単位に積み重ねて配置することができる。３２ピクセルの高さを有する行単位の規則と１２グリッドからなる列単位の規則を利用することにより、開発者はデザインガイドがなくてもコンポーネントを配置することができ、これにより、構成された画面を自動で反応型として実現することができる。
【0079】
図１５は、画面構成のための全体ページの構造例を示したものであり、ページの構成をクラス単位で示している。
【0080】
図１５を参照すると、ａｐｐ（１５１０）は、ページの開始点を意味する。
【0081】
ｃｏｎｔｅｎｔ－ｗｒａｐ（１５２０）は、本文全体領域であって、例えば、タブレットサイズに対応させるために最小幅が９６０ピクセルに規定されてよい。
【0082】
ｆｌｅｘｉｂｌｅ－ｌｎｂ（１５３０）は、ＬＮＢ（ｌｅｆｔ ｎａｖｉｇａｔｉｏｎ ｂａｒ）領域であって、基本幅は２５０～５００ピクセルまで拡張可能であり、閉じた場合は４０ピクセルの幅を有する。
【0083】
ｆｌｅｘｉｂｌｅ－ｃｏｎｔｅｎｔ（１５４０）は、ｆｌｅｘｉｂｌｅ－ｌｎｂ（１５３０）を除いた本文領域であって、ｈｅａｄｅｒ－ｔｏｐ－ｗｒａｐ（１５５０）、ｃｏｎｔｅｎｔ－ｈｅａｄｅｒ（１５６０）、ｃｏｎｔｅｎｔ－ｂｏｄｙ（１５７０）で構成され、ｆｌｅｘｉｂｌｅ－ｌｎｂ（１５３０）の幅の変化によって幅値が流動的に変更される。
【0084】
ｈｅａｄｅｒ－ｔｏｐ－ｗｒａｐ（１５５０）は、ＧＮＢ（ｇｌｏｂａｌ ｎａｖｉｇａｔｉｏｎ ｂａｒ）領域に活用される空間であって、右側整列を基本として規定する。
【0085】
ｃｏｎｔｅｎｔ－ｈｅａｄｅｒ（１５６０）は、ページのタイトル領域であって、実際にタイトルが適用される領域は８０ピクセルの高さを有し、下端に余白が含まれてよい。
【0086】
ｃｏｎｔｅｎｔ－ｂｏｄｙ（１５７０）は、すべてのコンポーネントが実際に適用される空間であって、例えば、８６０ピクセルの最小幅を有し、左右３０ピクセルと下端６０ピクセルの余白を有してよく、該当の領域内部で大部分のコンポーネントは１２グリッドシステムに準ずる。
【0087】
図１６は、ページのフォームの構造例を示したものであって、これはｃｏｎｔｅｎｔ－ｂｏｄｙ（１５７０）の内部に適用される。
【0088】
図１６を参照すると、ｆｏｒｍ－ａｒｅａ（１６１０）は、フォームの開始点であって、ｆｏｒｍ－ｇｒｏｕｐｒｏｗ（単一行）（１６３０）が他の構造に含まれるときには省略される場合がある。
【0089】
ｆｏｒｍ－ｗｒａｐ（１６２０）は、フォーム領域の区分単位であって、内部にｆｏｒｍ－ｇｒｏｕｐｒｏｗ（１６３０）を含む。ｆｏｒｍ－ｗｒａｐ（１６２０）とｆｏｒｍ－ｗｒａｐ（１６２０）の間には上下２０ピクセル間隔と区分線が発生する。
【0090】
ｆｏｒｍ－ｇｒｏｕｐｒｏｗ（１６３０）は、１つの行を定義する部分であって、３２ピクセルの高さと１３ピクセルの下端余白を有する。ｆｏｒｍ－ｇｒｏｕｐ内部では、１２グリッドシステムによってコンポーネントを配置してよい。左側ラベル領域は２つの列を、右側コンポーネント領域は６個または１０個の列を基本として規定する。
【0091】
ｆｏｒｍ－ｂｏｔｔｏｍ（１６４０）は、フォームの最下端に配置され、主にボタンが並べられる領域である。上端２０ピクセルと下端６０ピクセルの余白を有する。
【0092】
フォームレイアウトは、ｃｏｎｔｅｎｔ－ｂｏｄｙ（１５７０）を構成する基本的なレイアウトであって、一例として、図１７に示したように、１つの行はラベル領域（ｆｏｒｍ－ｌａｂｅｌ）（１７０１）とコンポーネント領域（ｒｏｗ）（１７０２）とで構成される。
【0093】
ラベル領域１７０１は２つの列、コンポーネント領域１７０２は６個または１０個の列として規定される。６個の列で構成されるコンポーネント領域１７０２は行単位コンポーネント（例えば、入力、ドロップダウンなど）に使用し、１０個の列で構成されるコンポーネント領域１７０２は面単位コンポーネント（例えば、テキスト領域、テーブルなど）に使用する。
【0094】
プロセッサ２２２は分割フォームレイアウトを提供してよいが、これは、フォーム領域を一定の割合で分割するときに使用してよく、１２グリッドシステムによって一定の個数のグリッド単位で適用する場合には同じ割合で等分してよい。
【0095】
プロセッサ２２２は、タイトル領域が含まれたフォームレイアウトを提供してよいが、これは、下位要素によってグルーピングするときに使用してよい。タイトル領域は、ｆｏｒｍ－ｗｒａｐ（１６２０）内部にｔｉｔｌｅ－ｗｒａｐクラスで適用されてよく、３２ピクセルの高さを有し、区分線を基準に上端１０ピクセルと下端２０ピクセルの余白を有する。
【0096】
プロセッサ２２２は、必須入力事項が含まれたフォームレイアウトを提供してよく、上述したタイトル領域と類似の構造を有するために１２グリッドシステム構造で適用する。
【0097】
上述したフォームレイアウトタイプは、コンポーネントを１２グリッドシステムとして配置するため、固定的な横幅領域を表現するには困難がある。各列の固定値および流動的に変化する列に対する定義が可能なフォームテーブルを適用してよく、このようなフォームテーブルは、テーブル構造が基本的なフォーム形態で構成される。
【0098】
上述では１２グリッドシステムが適用されたレイアウトについて説明しているが、これに限定されてはならず、サービス対象機器やデザイン画面構成によってレイアウト構造、グリッド規則などはいくらでも変更可能である。
【0099】
このように、本発明の実施形態によると、繰り返されるデザイン要素をコンポーネント化し、これを利用して開発者が自らサービス設計に合わせて画面を構成することによって一貫した反応を維持することができる。また、繰り返されるデザイン過程を省略することによって効率的なデザインプロセスを提供することができ、直感的なコンポーネントの設計によって迅速かつ容易なコミュニケーションを支援することができる。
【0100】
上述した装置は、ハードウェア構成要素、ソフトウェア構成要素、および／またはハードウェア構成要素とソフトウェア構成要素との組み合わせによって実現されてよい。例えば、実施形態で説明された装置および構成要素は、プロセッサ、コントローラ、ＡＬＵ（ａｒｉｔｈｍｅｔｉｃ ｌｏｇｉｃ ｕｎｉｔ）、デジタル信号プロセッサ、マイクロコンピュータ、ＦＰＧＡ（ｆｉｅｌｄ ｐｒｏｇｒａｍｍａｂｌｅ ｇａｔｅ ａｒｒａｙ）、ＰＬＵ（ｐｒｏｇｒａｍｍａｂｌｅ ｌｏｇｉｃ ｕｎｉｔ）、マイクロプロセッサ、または命令を実行して応答することができる様々な装置のように、１つ以上の汎用コンピュータまたは特殊目的コンピュータを利用して実現されてよい。処理装置は、オペレーティングシステム（ＯＳ）およびＯＳ上で実行される１つ以上のソフトウェアアプリケーションを実行してよい。また、処理装置は、ソフトウェアの実行に応答し、データにアクセスし、データを記録、操作、処理、および生成してもよい。理解の便宜のために、１つの処理装置が使用されるとして説明される場合もあるが、当業者は、処理装置が複数個の処理要素および／または複数種類の処理要素を含んでもよいことが理解できるであろう。例えば、処理装置は、複数個のプロセッサまたは１つのプロセッサおよび１つのコントローラを含んでよい。また、並列プロセッサのような、他の処理構成も可能である。
【0101】
ソフトウェアは、コンピュータプログラム、コード、命令、またはこれらのうちの１つ以上の組み合わせを含んでもよく、思うままに動作するように処理装置を構成したり、独立的または集合的に処理装置に命令したりしてよい。ソフトウェアおよび／またはデータは、処理装置に基づいて解釈されたり、処理装置に命令またはデータを提供したりするために、いかなる種類の機械、コンポーネント、物理装置、コンピュータ記録媒体または装置に具現化されてよい。ソフトウェアは、ネットワークによって接続されたコンピュータシステム上に分散され、分散された状態で記録されても実行されてもよい。ソフトウェアおよびデータは、１つ以上のコンピュータ読み取り可能な記録媒体に記録されてよい。
【0102】
実施形態に係る方法は、多様なコンピュータ手段によって実行可能なプログラム命令の形態で実現されてコンピュータ読み取り可能な媒体に記録されてよい。ここで、媒体は、コンピュータ実行可能なプログラムを継続して記録するものであっても、実行またはダウンロードのために一時記録するものであってもよい。また、媒体は、単一または複数のハードウェアが結合した形態の多様な記録手段または格納手段であってよく、あるコンピュータシステムに直接接続する媒体に限定されることはなく、ネットワーク上に分散して存在するものであってもよい。媒体の例は、ハードディスク、フロッピー（登録商標）ディスク、および磁気テープのような磁気媒体、ＣＤ－ＲＯＭおよびＤＶＤのような光媒体、フロプティカルディスク（ｆｌｏｐｔｉｃａｌ ｄｉｓｋ）のような光磁気媒体、およびＲＯＭ、ＲＡＭ、フラッシュメモリなどを含み、プログラム命令が記録されるように構成されたものであってよい。また、媒体の他の例として、アプリケーションを配布するアプリケーションストアやその他の多様なソフトウェアを供給または配布するサイト、サーバなどで管理する記録媒体または格納媒体が挙げられる。
【0103】
以上のように、実施形態を、限定された実施形態および図面に基づいて説明したが、当業者であれば、上述した記載から多様な修正および変形が可能であろう。例えば、説明された技術が、説明された方法とは異なる順序で実行されたり、かつ／あるいは、説明されたシステム、構造、装置、回路などの構成要素が、説明された方法とは異なる形態で結合されたりまたは組み合わされたり、他の構成要素または均等物によって対置されたり置換されたとしても、適切な結果を達成することができる。
【0104】
したがって、異なる実施形態であっても、特許請求の範囲と均等なものであれば、添付される特許請求の範囲に属する。
【符号の説明】
【0105】
２２２：プロセッサ
３１０：コンポーネント提供部
３２０：レイアウト提供部
３３０：画面構成部
３１０：コンポーネント提供部
３２０：レイアウト提供部
３３０：画面構成部
【図1】
【図2】
【図3】
【図4】
【図5】
【図6】
【図7】
【図8】
【図9】
【図10】
【図11】
【図12】
【図13】
【図14】
【図15】
【図16】
【図17】