{"DesignSystem":{"homescreen":{"dshomesec1_content_title1":"PayPay","dshomesec1_content_title2":"App Style Guide","dshomesec1_content_descriptions":"PayPayアプリが提供する機能やサービスはこのスタイルガイドに基づいてデザインされています","dshomesec2_content_title":"Overview","dshomesec2_content_descriptions":[{"classname":"","descriptions":"PayPayアプリのスタイルについてここに定義します。"},{"classname":"","descriptions":"PayPayから提供されるすべてのプロダクトは、このスタイルガイドに基づいて設計されています。"},{"classname":"","descriptions":"一貫したルールでデザインをすることによって、PayPayのブランドイメージを醸成し、ユーザーの認知を高めます。"},{"classname":"","descriptions":"また、ユーザー操作の学習コストを下げ、快適なユーザーエクスペリエンスを提供することが可能です。"},{"classname":"mb-lg-5","descriptions":"スタイルガイドはGlobal RuleとComponentの2つの項目に分かれます。"}],"dshomesec3_content_title":"Design Philosophy","dshomesec3_content_descriptions":"PayPayのDesign PhilosophyはPayPay Designの根幹にあたるものであり、改変されることはありません。私たちは、4つのキーワードを掲げます。","dshomesec3_content_philosophy":[{"dshomesec3_philo_classname":"dshomesec3_philo1","dshomesec3_philo_img":"section2_icn_01.svg","dshomesec3_philo_title":"共感","dshomesec3_philo_descriptions":"ユーザーの生活に身近で共感性のあるデザインを提供します。"},{"dshomesec3_philo_classname":"dshomesec3_philo2","dshomesec3_philo_img":"section2_icn_02.svg","dshomesec3_philo_title":"シンプル","dshomesec3_philo_descriptions":"余分なものは取り除き、重要なものだけにユーザーが目を向けられるようにします。"},{"dshomesec3_philo_classname":"dshomesec3_philo3","dshomesec3_philo_img":"section2_icn_03.svg","dshomesec3_philo_title":"一貫性","dshomesec3_philo_descriptions":"PayPayアプリが提供するUIコンポーネントは、このガイドラインのコンポーネントに準拠しています。"},{"dshomesec3_philo_classname":"dshomesec3_philo4","dshomesec3_philo_img":"section2_icn_04.svg","dshomesec3_philo_title":"ハッピー","dshomesec3_philo_descriptions":"PayPayによってユーザーの日常をハッピーにできるような、楽しく、人間らしい、暖かみのあるデザインを提供することを目指します。"}],"dshomesec3_content_knowmore":"Know More...","dshomesec4_content_title":"Global Rule","dshomesec4_content_descriptions":[{"classname":"","descriptions":"Global RuleはPayPayアプリのスタイルガイドの上位概念であり、"},{"classname":"","descriptions":"Componentはこのコンセプトに沿ってデザインされています。"}],"dshomesec4_content_globrules":[{"name":"color","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_01.svg","icondesc":"COLOR"},{"name":"philosophy","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_02.svg","icondesc":"DESIGN PHILOSOPHY"},{"name":"icongraphy","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_03.svg","icondesc":"ICONOGRAPHY"},{"name":"illustration","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_04.svg","icondesc":"ILLUSTRATION"},{"name":"interaction","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_05.svg","icondesc":"INTERACTION"},{"name":"layout","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_06.svg","icondesc":"LAYOUT"},{"name":"photo","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_07.svg","icondesc":"PHOTO"},{"name":"shadow","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_08.svg","icondesc":"SHADOW"},{"name":"shape","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_09.svg","icondesc":"SHAPE"},{"name":"transition","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_10.svg","icondesc":"TRANSITION"},{"name":"typography","iconcls":"dshomesec4_cgr_icons","iconurl":"globrules_icn_11.svg","icondesc":"TYPOGRAPHY"}],"dshomesec5_content_title":"COMPONENT","dshomesec5_content_descriptions":[{"classname":"","descriptions":"Global Ruleに基づいてデザインされたUIパーツのガイドラインです。"},{"classname":"","descriptions":"PayPayアプリが提供するすべての画面は、ここに記載されるUIパーツを構成してデザイン・実装する必要があります。"},{"classname":"","descriptions":"パーツ単位でのルールに準拠することで、UIデザインの品質を一定に保ち、一貫したUXの提供が可能になります。"},{"classname":"","descriptions":"また、デザイン・開発における再利用性を高めます。"}],"dshomesec5_content_component":[{"name":"balloon","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_01.svg","icondesc":"Balloon"},{"name":"buttons","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_02.svg","icondesc":"Buttons"},{"name":"cards","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_03.svg","icondesc":"Cards"},{"name":"expand","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_04.svg","icondesc":"Expand"},{"name":"form","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_05.svg","icondesc":"Form"},{"name":"halfsheets","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_06.svg","icondesc":"half sheets"},{"name":"header","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_07.svg","icondesc":"Header"},{"name":"label","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_08.svg","icondesc":"Label"},{"name":"list","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_09.svg","icondesc":"List"},{"name":"pagecontrols","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_11.svg","icondesc":"Page Controls"},{"name":"selectioncontrols","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_11.svg","icondesc":"selection controls"},{"name":"slider","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_11.svg","icondesc":"slider"},{"name":"tab","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_11.svg","icondesc":"tab"},{"name":"toast","iconcls":"dshomesec5_comp_icons","iconurl":"components_icn_11.svg","icondesc":"toast"}]},"globalrules":{"color":{"title":"Color","title_principle":"Principle","principle_desc_1":"色は情報の優先度や必要なアクションを明確に示します。特定の色を固有のアクションやステータスにあてはめることで、サービス全体で一貫性を保ち、ユーザーの学習コストを軽減します","principle_desc_2":"提供するUIは必ずコンポーネントに定義された色を使用します。使用する色を統一することで、ブランドの個性を醸成します","principle_desc_3":"全てのコンテンツは可読性、視認性を十分担保し、あらゆる人が快適に閲覧できる配色を利用しなくてはいけません","title_definition_pattern":"Color Definition Pattern","definition_pattern_desc":"PayPayの色はBrand color、Global color、Extended colorの3種類に定義されます。","title_brand_color":"Brand Color","brand_color_desc_1":"Brand colorはPayPayのブランドそのものを表すカラーであり、ロゴに利用されるカラーです。","brand_color_desc_2":"PayPayロゴ以外の要素に利用することは推奨しません。","title_global_color_asset":"Global Color Assets","global_color_asset_desc_1":"Global color assetsは、PayPayそのものを表すカラーアセットです。","global_color_asset_desc_2":"Brand colorを中心とした4色の組み合わせ、または定義されたグラデーションで展開します。","global_color_asset_desc_3":"この色の組み合わせを利用することでユーザーはPayPayのブランドを認知します。","global_color_asset_desc_4":"PayPayブランド全体を表現する場合は単色4色の組み合わせを、Consumer Appを表現する場合はグラデーションカラーの利用を推奨します。","title_color_palette":"Color Palette","title_gradation_palette":"Gradation Palette","title_usage_example":"Usage Example","title_dont":"Don't","dont_desc_1":"Global Colorの配色でハレーションをおこすなどの","dont_desc_2":"ユーザーに不快感を与えるような使い方は禁止します","title_ext_color_asset":"Extended Color Assets","ext_color_asset_desc_1":"Extended color assetsは、Global colorを含むカラーアセットです。","ext_color_asset_desc_2":"UIコンポーネントや、イラストやアイコンなど、コンテンツにアクセントが必要な際に利用します。","ext_color_asset_desc_3":"PayPayのデザインフィロソフィーである\"Empathy\" \"Happy\"を表現する、楽しく、親しみやすく、安心感のある配色で展開します。","ext_color_asset_color_desc_1":"有彩色12色相を4階調、無彩色を8階調で展開します。","ext_color_asset_color_desc_2":"UIへの利用は01行、04行の利用を推奨します。","ext_color_asset_color_desc_3":"UIに04行の色を利用する場合は、コンテンツの背景色への利用を推奨します。","ext_color_asset_color_desc_4":"04行の色をテキストやアクションパーツに利用することは禁止します。","ext_color_asset_color_desc_5":"イラスト表現などでパレットにない階調の色の利用が必要な場合は、任意の色を利用することを許容します。","title_functional_color":"Functional Color","functional_color_desc_1":"Functional color assetsは役割を持つ色のアセットです。","functional_color_desc_2":"色の持つ役割に一貫性を保つことで、ユーザーの学習コストを軽減させ、快適なUXを提供します。","functional_color_desc_3":"色はExtended color assetsから引用します。","functional_color_dont":"Don't","functional_color_dont_desc":"以下の使い方はユーザーの誤操作を誘発するリスクがあるため禁止とします。","title_gradation_color":"Gradation Color","gradation_color_desc_1":"連携サービスのUIを構成するカラーやマーケティングツールには、Extended color assetsを元に構成したグラデーションカラーの利用が可能です。","gradation_color_desc_2":"ただし、Global colorで定義されているPayPay GradationをPayPayのメイン機能以外で利用することは禁止します。","gradation_color_desc_3":"グラデーションカラーを利用する場合は、定義されたルールに則ってください。","title_gradation_color_rule":"Gradation Color Rule","title_accessibility":"Accessibility","accessibility_desc_1":"主要なコンテンツに文字を表示するには、背景色と前景色はコントラスト比3:1以上を担保します。","accessibility_desc_2":"ただし、付随的なコンポーネント、テキストが装飾要素である場合は除きます。","accessibility_desc_3":"また、ロゴまたはブランド名の一部である文字には最低限のコントラストの要件はありません。","gcaUsageExample":[{"name":"Brand Logo","logo":"brand_logo.svg"},{"name":"UI Parts","logo":"ui_parts.svg"},{"name":"System Icon","logo":"system_icon.svg"},{"name":"UI Background","logo":"ui_background.svg"}],"extcsUsageExample":[{"name":"Illustration","logo":"ext_color_usage_example_1.svg"},{"name":"UI Parts","logo":"ext_color_usage_example_2.svg"}],"fcUsageExample":[{"name":"Success","logo":"usage_success.svg"},{"name":"Error","logo":"usage_error.svg"},{"name":"Pending","logo":"usage_pending.svg"},{"name":"Information","logo":"usage_info.svg"}],"graUsageExample":[{"name":"UI Background","logo":"Illustration_US4.png"},{"name":"Illustration Background","logo":"UI_Background_US4.svg"}],"dont_imgs":[{"name":"Function colorを定義された色以外で利用する","logo":"dont1.svg"},{"name":"アクションコンポーネント以外にアクションカラーを多用する","logo":"dont2.svg"}],"grdtn_rule":[{"name":"方向","discription":"グラデーションの方向は90度方向のみとします。色の指定位置は (1) 0%地点と (2) 100%地点のみとします。(1) と (2) に異なる色相の色を指定することは問題ありません。異なる色相を指定する場合は、色相の近いものを指定してください。色相が離れすぎている色の選択は禁止とします。"},{"name":"Top","discription":"グラデーションの上部（0%位置）には明度の高い色を指定します。Color Paletteで定義する色相の利用を推奨します。明度は90-100の間を推奨します。"},{"name":"Bottom","discription":"グラデーションの下部（100%位置）には　(1)　より明度、彩度の低い色を指定します。明度は80-100の間を推奨します。"}],"gradations_imgs":[{"name":"グラデーションに3色以上を指定する","logo":"usage_dont_01.svg"},{"name":"上部に濃い色、下部に明るい色を指定する","logo":"usage_dont_02.svg"},{"name":"指定する色の明度が80以下","logo":"usage_dont_03.svg"},{"name":"色を透過する","logo":"usage_dont_04.svg"},{"name":"色相の遠い色を組み合わせる","logo":"usage_dont_05.svg"},{"name":"連携サービスやミニアプリなど、PayPayの主要機能以外にPayPay Gradationを利用することは禁止します","logo":"usage_dont_06.png"}],"colorCode1":[{"name":"PayPay Red","hex":"#FF0033"},{"name":"Blue","hex":"#3895FF"},{"name":"Navy","hex":"#002970"},{"name":"White","hex":"#FFFFFF"}],"colorCode2":[[[{"name":"PayPay Red","hex":"#FF0033","color":"#FFFFFF"},{"name":"","hex":"#FA1919","color":"#FFFFFF"},{"name":"","hex":"#FC6600","color":"#FFFFFF"},{"name":"","hex":"#FFB900","color":"#FFFFFF"},{"name":"","hex":"#56D32A","color":"#FFFFFF"},{"name":"","hex":"#26BF7D","color":"#FFFFFF"}],[{"name":"","hex":"#FD5C5C","color":"#FFFFFF"},{"name":"","hex":"#FF954C","color":"#FFFFFF"},{"name":"","hex":"#FFC733","color":"#FFFFFF"},{"name":"","hex":"#79D957","color":"#FFFFFF"},{"name":"","hex":"#52CC97","color":"#FFFFFF"}],[{"name":"","hex":"#FFB2B2","color":"#323232"},{"name":"","hex":"#FFBA8B","color":"#323232"},{"name":"","hex":"#FFE39A","color":"#323232"},{"name":"","hex":"#BCF1A9","color":"#323232"},{"name":"","hex":"#A1E5C8","color":"#323232"}],[{"name":"","hex":"#FFE5E5","color":"#323232"},{"name":"","hex":"#FFF0E5","color":"#323232"},{"name":"","hex":"#FFF7E5","color":"#323232"},{"name":"","hex":"#E5F7DF","color":"#323232"},{"name":"","hex":"#DFF7ED","color":"#323232"}]],[[{"name":"","hex":"#00C2C2","color":"#FFFFFF"},{"name":"","hex":"#00B9F5","color":"#FFFFFF"},{"name":"","hex":"#3895FF","color":"#FFFFFF"},{"name":"","hex":"#002970","color":"#FFFFFF"},{"name":"","hex":"#7921A3","color":"#FFFFFF"},{"name":"","hex":"#F23099","color":"#FFFFFF"}],[{"name":"","hex":"#41D9D9","color":"#FFFFFF"},{"name":"","hex":"#33CDFF","color":"#FFFFFF"},{"name":"","hex":"#4DA0FF","color":"#FFFFFF"},{"name":"","hex":"#2455AA","color":"#FFFFFF"},{"name":"","hex":"#9047B2","color":"#FFFFFF"},{"name":"","hex":"#FF4CAD","color":"#FFFFFF"}],[{"name":"","hex":"#8AE7E7","color":"#323232"},{"name":"","hex":"#BAEEFF","color":"#323232"},{"name":"","hex":"#BADAFF","color":"#323232"},{"name":"","hex":"#BBCFF2","color":"#323232"},{"name":"","hex":"#D9B0EC","color":"#323232"},{"name":"","hex":"#FFB4DD","color":"#323232"}],[{"name":"","hex":"#DFF7F7","color":"#323232"},{"name":"","hex":"#E5F8FF","color":"#323232"},{"name":"","hex":"#E5F1FF","color":"#323232"},{"name":"","hex":"#DDEAFE","color":"#323232"},{"name":"","hex":"#F7E5FF","color":"#323232"},{"name":"","hex":"#FFE5F3","color":"#323232"}]]],"colorCode3":[[{"name":"","hex":"#242323","color":"white"},{"name":"","hex":"#606060","color":"white"},{"name":"","hex":"#909090","color":"white"},{"name":"","hex":"#BABABA","color":"black"},{"name":"","hex":"#DDDDDD","color":"black"},{"name":"","hex":"#EEEEEE","color":"black"}],[{"name":"","hex":"#F7F7F7","color":"black"},{"name":"","hex":"#FFFFFF","color":"black"}]],"colorCode4":[{"name":"Success","hex":"#20BF7A"},{"name":"Error/Alert","hex":"#FD5C5C"},{"name":"Caution/Pending","hex":"#FFB900"},{"name":"Action/Information","hex":"#3895FF"}],"gradationColorCode":[{"name":"PayPay Gradation","hex":["#FF0033","#FF3B62"]}]},"philosophy":{"philos_headers":"Design Philosophy","philos_sect1_title":"Principle","philos_sect1_description1":"PayPayのDesign PhilosophyはPayPay Designの根幹にあたるものであり、改変されることはありません。","philos_sect1_description2":"PayPayから提供するすべてのプロダクトにおいて、このDesign Philosophyを念頭にデザインを提供します。","philos_sect2_title":"Design Theme","philos_sect2_philosophylists":[{"title":"Empathy","dividers":true,"classname":"philos_sect2_philosophylists0","descriptions":[{"desc":"ユーザーの生活に寄り添い、共感されるデザインを提供します。"},{"desc":"水や空気のように日常に溶け込み、老若男女問わず、誰でも簡単に利用できるサービスでなくてはいけません。"},{"desc":"提供する側の一方通行ではなく、常にユーザーと対話ができるものを目指します。"},{"desc":"ユーザーがPayPayを使うことによって自身の生活をより便利に、豊かにすることに尽力し、ユーザーのどんなに小さな声にも耳を傾けます。"},{"desc":"安心感と信頼感は最も重要な要素です。"}]},{"title":"Simple","dividers":true,"classname":"philos_sect2_philosophylists1","descriptions":[{"desc":"余計なものを削ぎ落とし、ユーザーが重要なものにのみフォーカスできるようにします。"},{"desc":"ユーザーが達成するべきゴールを阻害するものはすべて排除し、ユーザーアクションが最短で完了するようにします。"}]},{"title":"Consistency","dividers":true,"classname":"philos_sect2_philosophylists2","descriptions":[{"desc":"すべてのUIは規則性、一貫性を保ちます。"},{"desc":"必要な学習コストは極力削減し、ユーザーが快適にサービスを使い続けられるようにします。"},{"desc":"アプリで提供するUIコンポーネントは、このガイドラインのコンポーネントに準拠します。"}]},{"title":"Happy","dividers":false,"classname":"philos_sect2_philosophylists3","descriptions":[{"desc":"ユーザーの日常がPayPayによってHappyになることを目指し、楽しく、人間らしく、温かみのあるデザインを提供します。"},{"desc":"決済アプリの垣根を超え、便利なツールの提供だけではなく、ユーザーの感情を動かせるようなデザインを心がけます。"},{"desc":"ビジュアルイメージは、決済/金融サービスのイメージに囚われず、楽しく、元気が良く、ワクワクする設計であるべきです。"}]}]},"illustration":{"title":"Illustration","title_principle":"Principle","principle_desc":[{"desc":"イラストは、コンテンツの内容をより明快に、直感的な理解を促す目的で利用します"},{"desc":"不快感、誤解を与えるイラスト表現は禁止とします"}],"title_usage":"Usage","title_usage_desc":[{"desc":"イラストは最大限効果的な方法で使用します。"}],"txt_convey_title":"直感的に伝える","txt_convey_desc":[{"desc":"テキストのみではなくイラストを利用することで、コンテンツの内容をより深く伝えることができます。"},{"desc":"また、キャンペーンなどの演出に装飾要素として利用することで、ユーザーの気持ちを盛り上げ心を動かすことができます。"}],"txt_convey_title_2":"直感的に伝える","txt_convey_desc_2":[{"desc":"説明図などのイラストでは、簡略化したシンプルなイラストを用い、ユーザーがイラストからすぐに情報を読み取れるようにします。"}],"txt_convey_desc_cnt_1":"サービスの利用手順の説明","txt_convey_desc_cnt_12":"文字だけでは説明しきれない部分をイラストでサポート","txt_expression_title":"表現","txt_expression_desc_1":"<u><a href='/app-styleguide/globalrule/philosophy' target='_blank'>Design Philosophy</a></u>","txt_expression_desc_2":"に準拠し、PayPayのブランドイメージを体現する表現を用います。","txt_expression_desc":[{"desc":"イラスト表現に用いるモチーフは極力簡略化しシンプルに構成する"},{"desc":"カラーは塗り表現のみを用い、<u><a href='/app-styleguide/globalrule/color' target='_blank'>Color</a></u>項目のカラーパレットの色を参考に構成する"},{"desc":"無機質すぎない親しみやすい表現を用いる"},{"desc":"指定がない場合は個人や特定の企業が判別できるような表現はしない"}],"txt_dont_title":"Don't","txt_dont_desc":[{"desc":"以下のような表現はいかなる場合でも禁止とします。"}],"usageIllustration":[{"desc_1":"カテゴリーを表すイラスト","desc_2":"カテゴリーを視覚的に説明することでユーザーの理解をサポートする","logo":"Illustration_usage_01.svg"},{"desc_1":"キャンペーンの装飾イラスト","desc_2":"当選情報の伝達とともに、装飾による演出でユーザーの気持ちを盛り上げる","logo":"Illustration_usage_02.svg"}],"donts":[{"desc":"線画や水彩風など、ガイドラインに沿わない表現","logo":"Illustration_usage_06.png"},{"desc":"公序良俗に反する表現","logo":"Illustration_usage_07.svg"},{"desc":"自社・他社ブランドを侵犯する表現や、PayPayのロゴを変形・変色してイラストに使用することはできません","logo":"Illustration_usage_08.svg"}],"illustration_design_sect3_holders":[{"name":"panel3","clsname":"illustration_design_sect3_pannel3","illustration_design_sect3pnel_images":"illustration_design_sect3pnel_img3.svg","illustration_design_sect3_images_tableholder":[{"name":"panel1","illustration_design_sect3_images_colo1_icons":"icon_01.svg","illustration_design_sect3_images_colo1_title":"Focal Point","illustration_design_sect3_images_colo2":"より強調したい部分、主題を表現している部分により強い色を使用します。対して補助的な部分にはトーンの低い色を使用し、イラストにメリハリをつけ主題を明確にします。"},{"name":"panel2","illustration_design_sect3_images_colo1_icons":"icon_02.svg","illustration_design_sect3_images_colo1_title":"Facial Expression","illustration_design_sect3_images_colo2":"人物を使用する場合は、必要な場合を除き、原則表情を描かないようにします。"}]}]},"interaction":{"title":"Interaction","title_principle":"Principle","principle_desc":[{"desc":"スマートフォンやタブレットなどのタッチスクリーンデバイスでは、より直感的な体験を提供する必要があります"},{"desc":"すべてのアクションコンポーネントはインタラクティブである必要があります"},{"desc":"視覚的にどのようなものであるか理解でき、必要なアクションをアフォードし、アクション後のフィードバックを明確にする必要があります"}],"title_usage":"Usage","title_usage_desc":[{"desc":"ユーザーが行う様々なタッチデバイス上での振る舞いをジェスチャーと呼びます。"},{"desc":"ジェスチャーには様々な種類があります。基本的にはデバイスの定義する標準のジェスチャーに準拠します。"},{"desc":"ただし標準的なジェスチャーであっても、複雑な挙動をするものはユーザーが見逃したり誤動作をしないためのサポートが必要です。"}],"title_feedback":"Feedback","title_feedback_desc":[{"desc":"アクションコンポーネントは、ユーザーアクション後に必ず結果を示すフィードバックを提示します。"},{"desc":"フィードバックを提示することで、ユーザーは自分の行った操作が成功したのか、結果はどうだったのかを知ることができます。"}],"title_touch_feedback":"Touch Feedback","title_touch_feedback_table":[{"name":"iOS","desc":"タッチフィードバックは通常時のコンポーネントの色から明度を5落とした色を指定し、テキストは通常時の色のまま70%透過を指定します。タッチフィードバックの色は各コンポーネントの項目を参照してください。"},{"name":"Android","desc":"OSのRipple効果に準拠します"}],"title_noticeofresults":"Notice of Results","noticeofresults_desc":[{"desc":"アクションのフィードバックと合わせて、アクションを行った結果をフィードバックすることを推奨します。"},{"desc":"結果を提示することで、ユーザーは自身のアクションの成功/失敗を知ることができます。"}],"txt_noticeofresults":"フィードバックを表示するコンポーネントは<u><a href='/app-styleguide/component/toast' target='_blank'>Toast</a></u>の項目を参照ください。","title_tap":"Tap","tap_desc":[{"desc":"コンポーネントをタッチする動作です。"},{"desc":"最も標準的なジェスチャーです。"}],"txt_tap_desc":[{"desc":"ボタンなどの標準的なコンポーネント以外にタップアクションを利用する場合は、"},{"desc":"ユーザーがタップ可能であることを理解できるよう、視覚的なサポートを必須とします。"},{"desc":"またコンテンツ全体のどの位置にいるのかを明示するために、サポートするコンポーネントを表示することを必須とします。"}],"txt_touch_guide":"タップを示すビジュアル要素を表示する","title_scroll":"Scroll","scroll_desc":[{"desc":"画面上に複数の連続するコンテンツが並ぶ場合、画面に収まりきらない情報を指で上下に動かし画面内に表示する動作です。"},{"desc":"ユーザーの指の動きにコンテンツが追従するようにします。"},{"desc":"また、ユーザーが画面を素早くスクロールした場合は、デバイス標準の慣性スクロールを有効にし、効率的に情報を表示できるようにします。"}],"txt_scroll_desc":"リストなど、情報量の多いコンテンツをスクロールしながら閲覧させる場合、画面上に表示されているものが、複数あるコンテンツの中の何なのか、またコンテンツ全体のどの位置にいるのかを明示するために、サポートするコンポーネントを表示することを必須とします。","title_flick":"Flick","flick_desc":[{"desc":"コンポーネントを指で軽く横に弾く動作です。"},{"desc":"画面上に多くの情報を配置するのが困難な場合、画面外、横位置にコンポーネントを並べ、横にフリックすることで画面外の情報を表示します。"}],"txt_flick_desc":"フリックで情報を表示することが可能だと示すために、サポートするコンポーネントを表示することを必須とします。","title_drag_slide_view":"Drag - Slide View","drag_slide_view_desc_1":"コンポーネントの一部を指で引っ張ることで隠れたコンポーネントを画面上に表示する動作です。","drag_slide_view_desc_2":"Dragで情報を表示することが可能だと示すために、サポートするコンポーネントを表示することを必須とします。","title_drag_drop":"Drag & Drop","drag_drop_desc":[{"desc":"コンポーネントの一部を引っ張り、移動させた後、指を離すことでアクションを実行する動作です。"},{"desc":"リストの並び替えなどに利用します。"}],"title_pinch":"Pinch-in/Pinch-out","pinch_desc":[{"desc":"画面の一部をつまみ、広げることで拡大する動作です。"},{"desc":"反対に縮小することも可能です。"},{"desc":"地図や画像などで縮尺を変更する際に利用します。"}],"txt_pinch_desc":"推奨しないジェスチャー","txt_pinch_content":[{"desc":"標準ジェスチャーであっても、ユーザーが使い慣れず、理解が難しいものは利用を推奨しません。"},{"desc":"長押し、ダブルタップ、3本指でのジェスチャーを取り入れる場合は、必ずユーザーの学習とアフォーダンスをサポートするUIを表示することを必須とします。"}],"scroll_desc_img":[{"desc":"スクロールバーを表示する","logo":"scrolGuide_img_1.svg"},{"desc":"表示中の項目のタイトルを画面上部に表示する","logo":"scrolGuide_img_2.svg"}],"flick_desc_img":[{"desc":"画面端に隠れたコンテンツを表示する","logo":"flick_img1.png"},{"desc":"Page controllを表示する","logo":"flick_img2.png"}],"drag_slide_desc":[{"desc":"ジェスチャーを促すコンポーネント","logo":"drag_02_img.png"}]},"icongraphy":{"igrphy_headers":"Iconography","igrphy_sect1_title":"Principle","igrphy_sect1_description":["アイコンを利用することで、コンテンツの直感的な理解を促します。","アイコンは単体でも機能する必要があります。テキストを利用しなくても一目で意味が理解できるものである必要があります。","無駄な装飾は排除し、シンプルかつフレンドリーな設計である必要があります。"],"igrphy_sect1_images":[{"name":"pannel1","icons":"igrphy_sect1_doimage.svg","desc":["シンプルな表現","無駄な装飾をすべて排除し、シンプルに表現"]},{"name":"pannel2","icons":"igrphy_sect1_dontimage.svg","desc":["複雑な表現","立体的な表現、手描きのような表現、有機的な形状は禁止とする"]}],"igrphy_sect2_title":"Usage","igrphy_sect2_subtitle":"Usage Example","igrphy_sect2_images_tableholder":[{"name":"no1","icons":"igrphy_sect2_no1.svg","igrphy_sect2_images_colo1_title1":"Home : ","igrphy_sect2_images_colo1_title2":"Service icon","igrphy_sect2_images_colo2":"機能やサービスを表す"},{"name":"no2","icons":"igrphy_sect2_no2.svg","igrphy_sect2_images_colo1_title1":"List : ","igrphy_sect2_images_colo1_title2":"System icon","igrphy_sect2_images_colo2":"メニューの内容を補足する"},{"name":"no3","icons":"igrphy_sect2_no3.svg","igrphy_sect2_images_colo1_title1":"Header : ","igrphy_sect2_images_colo1_title2":"System icon","igrphy_sect2_images_colo2":"アイコン単体で機能を表す"},{"name":"no4","icons":"igrphy_sect2_no4.svg","igrphy_sect2_images_colo1_title1":"Half sheet : ","igrphy_sect2_images_colo1_title2":"System icon + Status Mark","igrphy_sect2_images_colo2":"ハーフシートの内容を補足する"}],"igrphy_sect3_title":"Type","igrphy_sect3_subtitle":"アイコンのTypeによって、利用する色が異なります。","igrphy_sect3_holders":[{"name":"panel1","clsname":"igrphy_sect3_pannel1","igrphy_sect3pnel_title":"Service Icon","igrphy_sect3pnel_descriptions":["PayPayの機能やサービスを表すアイコンです。","基本の紺色の他に、サービスのイメージに近い1色をカラーパレットから選定し利用します。","色の選定についてはSpecを参照ください。"],"igrphy_sect3pnel_images":"igrphy_sect3pnel_img1.svg"},{"name":"panel2","clsname":"igrphy_sect3_pannel2","igrphy_sect3pnel_title":"System Icon","igrphy_sect3pnel_descriptions":["アプリの機能や操作などに利用されるアイコンを指します。","単色または紺色と青色の２色を使います。"],"igrphy_sect3pnel_images":"igrphy_sect3pnel_img2.svg"},{"name":"panel3","clsname":"igrphy_sect3_pannel3","igrphy_sect3pnel_title":"Status Mark","igrphy_sect3pnel_descriptions":["System IconにStatus Markを組み合わせることで、状態を表すことができます。","ハーフシートや操作の説明時に利用します。","組み合わせることで視認性が損なわれる場合は利用せず、視認性が十分に担保できるサイズで利用してください"],"igrphy_sect3pnel_images":"igrphy_sect3pnel_img3.svg","igrphy_sect3_images_tableholder":[{"name":"panel1","igrphy_sect3_images_colo1_icons":"igrphy_sect2_no1.svg","igrphy_sect3_images_colo1_title":"Success / 成功","igrphy_sect3_images_colo2":"アクションが完了し、処理が成功した際に表示します"},{"name":"panel2","igrphy_sect3_images_colo1_icons":"igrphy_sect2_no2.svg","igrphy_sect3_images_colo1_title":"Add New / 追加","igrphy_sect3_images_colo2":"追加アクションの確認、実行時に表示します"},{"name":"panel3","igrphy_sect3_images_colo1_icons":"igrphy_sect2_no3.svg","igrphy_sect3_images_colo1_title":"Invalid / 無効","igrphy_sect3_images_colo2":"無効アクションの確認、実行時に表示します"},{"name":"panel4","igrphy_sect3_images_colo1_icons":"igrphy_sect2_no4.svg","igrphy_sect3_images_colo1_title":"Delete / 削除","igrphy_sect3_images_colo2":"削除アクションの確認、実行時に表示します"},{"name":"panel5","igrphy_sect3_images_colo1_icons":"igrphy_sect2_no5.svg","igrphy_sect3_images_colo1_title":"Error / エラー","igrphy_sect3_images_colo2":"エラー時、アラート時に表示します"}]}],"igrphy_sect4_title":"Spec","igrphy_sect4_subtitle":"Status Mark","igrphy_sect4_images_tableholder":[{"name":"panel1","igrphy_sect4_images_colo1":"Icon Size","igrphy_sect4_images_colo2":"24px * 24px"},{"name":"panel2","igrphy_sect4_images_colo1":"Outline","igrphy_sect4_images_colo2":"3px"},{"name":"panel3","igrphy_sect4_images_colo1":"Shape","igrphy_sect4_images_colo2":"Round  1px / 2px"},{"name":"panel4","igrphy_sect4_images_colo1":"Template","igrphy_sect4_images_colo2":["テンプレートはAiデータで提供しています。テンプレートデータ内には、形状に沿ったガイドが設定してあります。作成するアイコンの形状に近いガイドを目安に作成をしてください。","テンプレートについてはTemplateの項目を参照ください。"]}],"igrphy_sect5_title":"Color","igrphy_sect5_subtitle":"Service Icon","igrphy_sect5_description":"以下のColor paletteから色を選択します。","igrphy_sect5_mccolortitle":"Main Color","igrphy_sect5_mccolordesc":"メインカラーとして共通で紺色を使用します","igrphy_sect5_accolortitle":"Accent Color","igrphy_sect5_accolordesc":"モチーフの一部にアクセントカラーを使用します。左記4色の中からサービスのイメージにあう色を利用します","igrphy_sect5_sysccolortitle":"System Icon","igrphy_sect5_aysccolordesc1":"以下のColor paletteから色を選択します。","igrphy_sect5_aysccolordesc2":"System Iconは左記2色の組み合わせ、または単色で利用します","igrphy_sect5_subtitle_dont":"Don't","igrphy_sect5_dont_des":"指定色以外の利用は禁止とする","igrphy_sect6_title":"Template","igrphy_sect6_description":["アイコンを制作する際は、テンプレート（Ai）での作業を推奨します。","テンプレートは実寸の2倍サイズで展開しています。","Aiファイルで作業した後、Sketch/Figmaで作業する際には1/2サイズに縮小してください。"],"igrphy_sect6_images_tableholder":[{"name":"panel1","igrphy_sect4_images_colo1_icons":"igrphy_sect6_no1.svg","igrphy_sect4_images_colo1":"Padding","igrphy_sect4_images_colo2":"アイコン作成エリアには周囲に2pxの余白を設けます。メインとなるアイコンのモチーフはPaddingエリアには配置しません"},{"name":"panel2","igrphy_sect4_images_colo1_icons":"igrphy_sect6_no2.svg","igrphy_sect4_images_colo1":"Icon area","igrphy_sect4_images_colo2":"Padding area内（20p*20px）のエリアにメインとなるアイコンのモチーフを配置します"}],"igrphy_sect7_title":"基本の形状","igrphy_sect7_description":["テンプレートデータ内には、いくつかの形状に沿ったガイドが設定してあります。","作成するアイコンの形状に近いガイドを目安に作成をしてください。"],"igrphy_sect8_title":"テンプレートのダウンロード","igrphy_sect9_title":"注意事項","igrphy_sect9_description":"作成サイズは実寸の2倍サイズで展開する必要があります。","igrphy_sect9_tableholder":[{"name":"panel1","col1":"","col2":"表示サイズ","col3":"作成サイズ"},{"name":"panel2","col1":"Icon size","col2":"24px*24px","col3":"48px*48px"},{"name":"panel3","col1":"Padding","col2":"2px","col3":"4px"},{"name":"panel4","col1":"Icon area","col2":"20px*20px","col3":"40px*40px"},{"name":"panel5","col1":"Outline","col2":"1.5px","col3":"3px"},{"name":"panel6","col1":"Round","col2":"1px/2px","col3":"2px/4px"}]},"layout":{"layout_headers":"Layout","layout_sect1_title":"Principle","layout_sect1_description":["画面内のコンポーネントの配置や余白を定義します。","異なるプラットフォーム、環境下でも、定義したルールに従って設計することで、すべての環境で一貫性を保ちます。"],"layout_sect2_title":"Usage","layout_sect2_subtitle":"Margin Rule","layout_sect2_description":"画面内で利用する余白は基本的に4の倍数のpx/dpを指定します。","layout_sect2_hints":"ただし、細かいパーツが複雑に組み合わさるコンポーネントなどは、例外を認めます。","layout_sect3_title":"Responsive Layout","layout_sect3_description":["特に、スマートフォンWeb/App、タブレット、デスクトップで共通で表示するWebコンテンツを作成する場合は、どのような環境で表示されてもユーザビリティを損ねないレイアウトを用意する必要があります。","次に定義する<a href='/app-styleguide/globalrule/layout' target='_blank'>ブレイクポイント</a>によって、 スマートフォン/デスクトップでのレイアウトを切り替えます。タブレットはスマートフォンの延長であると考え、<a href='/app-styleguide/globalrule/layout' target='_blank'>ブレイクポイント</a> は1点だけとします。"],"layout_sect4_title":"Margin","layout_sect4_description":"大きく2種類の余白を定義します。","layout_sect4_images_tableholder":[{"name":"panel1","icons":"layout_sect4_no1.svg","desc":"画面の端から要素の間の余白"},{"name":"panel2","icons":"layout_sect4_no2.svg","desc":"要素同士の余白"}],"layout_sect5_title":"画面の端から要素の間","layout_sect5_description":"画面の端からコンテンツの間に余白を設けることで、コンテンツの視認性を担保します。スマートフォンの環境では、余白は24px/16pxを利用します。 余白の使い分けの目安は以下の通りです。","layout_sect5_hint1":"入力フォームやアクションボタンがメインとなる画面","layout_sect5_hint2":"カードUIやリストがメインコンテンツとなる画面","layout_sect6_title":"環境別の指定","layout_sect6_description":"<div>タブレット、デスクトップの環境では、余白は40px/24pxを利用します。</div><div>余白の切り替えは <a href='/app-styleguide/globalrule/layout' target='_blank' > ブレイクポイント </a> によって行われます。</div>","layout_sect7_title":"要素同士の余白","layout_sect7_description":"複数のコンテンツが隣接する場合はコンテンツの間に十分な余白を設け、近接する情報のグルーピングを明確にします。複数のコンテンツが並ぶ場合は8px / 12px / 16pxの余白の利用を推奨します。","layout_sect7_hint":"余白と余白の間のコンポーネントは固定値ではなく、パーセンテージで定義します。余白は固定値として指定し、コンポーネントはデバイスのサイズによって可変とします。","layout_sect8_title":"About Safe Area","layout_sect8_description":["ノッチやカットアウト領域のあるデバイスでは、Safe Area外へのアクションコンポーネントの配置を禁止とします。","Safe Area外にはビジュアル要素のみの表示を推奨します。","Safe Area外にも背景色や装飾要素を表示することによって、画面を広く見せることができ、より快適な体験を提供することができます。"],"layout_sect8_images_tableholder":[{"name":"panel1","col1":"iOS","col2":"<div>iOS Deviceの場合、上部44px、下部34pxの間をSafe Areaとします</div><div><a href='https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout' target='_blank'>iOS Human Interface Guideline</a> を参照してください</div>"},{"name":"panel2","col1":"Android","col2":"<div>Android Deviceの場合、カットアウトエリアのサイズは機種に依存します </div><div>Support Display Cutout を参照してください</div>"}],"layout_sect8_hint":"セーフエリア内でのアクションコンポーネントの配置","layout_sect8_icons_tableholder":[{"name":"panel1","icons":"layout_sect8_doimage.svg","desc":"アクションコンポーネントはSafe Area内に配置する"},{"name":"panel2","icons":"layout_sect8_dontimage.svg","desc":"アクションコンポーネントをSafe Area外に配置する"}],"layout_sect9_title":"Layout Pattern","layout_sect9_description":"<div>画面のレイアウトに定形パターンを定義します。</div><div>サービスのコンセプトや機能によって使い分けをします。</div>","layout_sect9_images_tableholder":[{"name":"panel1","icons":"layout_sect9_no1.svg","text":"Normal","desc":"最も一般的なレイアウトです。基本的にはこのレイアウトを利用します。"},{"name":"panel2","icons":"layout_sect9_no2.svg","text":"Section","desc":"1画面に複数のセクションを表示する場合に利用します。セクションごとにまとめられたコンテンツを表示し、情報の区切りを明確にします。"},{"name":"panel3","icons":"layout_sect9_no3.svg","text":"Card","desc":"1画面に複数のセクションを表示する場合に利用します。セクションごとにまとめられたコンテンツを表示し、情報の区切りを明確にします。カード両端に余白を設けることで、Sectionよりも、カード自体がアクション可能なことを明示します。Cardレイアウトは画面端左右に16pxの余白を設けます。"},{"name":"panel4","icons":"layout_sect9_no4.svg","text":"Full screen","desc":"カメラやプロモーションなど、画面全体にコンテンツを配置する場合に利用します。ヘッダーエリアの背景は透過し、下に配置されるコンテンツが見えるようにします。ヘッダーエリアのテキストは十分に可読性を担保する処理が必要です。"},{"name":"panel5","icons":"layout_sect9_no5.svg","text":"Half color background","desc":"画面上部に重要な情報を表示する場合に利用します。画面上部にはアイキャッチとなるサービスや機能の特性を表す色を設定します。色の設定についてはFlavor Colorを参照してください。"}],"layout_sect10_title":"Aspect Ratios","layout_sect10_description":"画面に配置される画像やコンポーネントのアスペクト比を定義します。以下の比率を利用することを推奨します。","layout_sect10_subtitle":"Usage Example"},"photo":{"title":"Photo","title_principle":"Principle","principle_desc":[{"desc":"文字情報のみではなく写真を利用することで、コンテンツの内容をより深く伝えることができます。また、ユーザーが次のアクションに進むための方法を示すことが最も重要です。"},{"desc":"写真は演出的なものではなく、リアリティのある画像を用いる必要があります。PayPayに本当に価値を与えるものでなければなりません。"},{"desc":"最も重要なのは、情報が豊富で、明快で、わかりやすいことです。"}],"title_usage":"Usage","title_size":"Size","size_desc":[{"desc":"解像度の高いデバイスに対応するために、画像は常に表示サイズの3倍のサイズを用います。"},{"desc":"アプリに利用する画像リソースはできる限り圧縮し、アプリ本体の容量を削減するようにしてください。サーバーから参照する場合も同様です。"}],"title_ratio":"Ratio","ratio_desc":[{"desc":"写真を拡大縮小する場合は、元のアスペクト比を維持し、変形しないでください。"}],"title_dont":"Do/ Don't","dont_title":"Don't","dont_desc":[{"desc":"モチーフが明瞭","desc_1":"","logo":"dont_01.png"},{"desc":"モチーフが明瞭でない","desc_1":"ネガティブな印象を与える","logo":"dont_02.png"},{"desc":"モチーフが明瞭","desc_1":"","logo":"dont_03.png"},{"desc":"不明瞭またはピントがボケている","desc_1":"","logo":"dont_04.png"},{"desc":"著作権や権利等を侵害していない写真","desc_1":"","logo":"dont_05.png"},{"desc":"第三者の権利を侵害した写真を使わない","desc_1":"","logo":"dont_06.png"},{"desc":"内容に関係ない場合に他社のブランド名やロゴなどを入れない","desc_1":"","logo":"dont_07.png"},{"desc":"公序良俗に反するイメージ","desc_1":"","logo":"dont_08.png"}],"txt_dont_desc":"事実関係のない環境や対象を撮影したイメージを使わない","dont_desc_1":[{"desc":"密集したパターン","logo":"dont_10.png"},{"desc":"モアレ・ハレーションを起こす画像","logo":"dont_11.png"}]},"shape":{"title":"Shape","title_principle":"Principle","principle_desc":[{"desc":"Componentを構成する形状は、必ず一般的な形状を用い、表示される情報の可読性を阻害するような形状の利用は禁止とします。"},{"desc":"ガイドラインに沿った形状を繰り返し利用することで一貫性を保ち、PayPayブランドを醸成します。"}],"title_usage":"Usage","title_usage_desc":[{"desc":"コンポーネントの角は丸くし、肌触りの良さ、親しみやすさを表現します。"}],"title_spec":"Spec","title_spec_desc":"角丸は 8px / 20px に統一します。","spec_note1":"Card, Buttonなど","spec_note2":"Half Sheets"},"shadow":{"shadow_headers":"Shadow","shadow_sect1_title":"Principle","shadow_sect1_description":["影は画面内の階層を明示するために使用します。","影は情報の優先度や必要なアクションを明確に示します。強調すべき箇所に効果的に使用することを推奨します。"],"shadow_sect2_title":"Usage","shadow_sect2_subtitle1":"階層構造","shadow_sect2_description1":["画面内は複数の層の重なりで構成されます。より重要な情報を上位階層に表示します。階層構造を視覚的に明示することで、コンテンツの優先順位を明確にし、ユーザーは必要なアクションにたどり着きやすくなります。","各階層ごとに影を採用することで、表示階層を明確にします。画面内の光源/陰影は、方向、深さなどに一貫性を保ちます。"],"shadow_sect2_subtitle2":"光源","shadow_sect2_description2":"光源は必ず上部90°方向にあるものとし、それ以外からの光源の設定は禁止とします。","shadow_sect2_images_tableholder2":[{"name":"panel1","icons":"shadow_sect2_no1.svg","desc":"正しい光源（上部90°方向）"},{"name":"panel2","icons":"shadow_sect2_no2.svg","desc":"誤った光源（上部45°方向）"}],"shadow_sect2_subtitle3":"陰影","shadow_sect2_description3":"配置される階層によって異なる陰影を設定します。 <br/>物理法則に基づき、階層が最背面より高ければ高いほど、影は淡く、大きくなります。","shadow_sect2_images_tableholder3":[{"name":"no1","icons":"shadow_sect2_no1.svg","igrphy_sect2_images_hint":"Low-Shadow"},{"name":"no2","icons":"shadow_sect2_no2.svg","igrphy_sect2_images_hint":"Middle-Shadow"},{"name":"no3","icons":"shadow_sect2_no3.svg","igrphy_sect2_images_hint":"High-Shadow"},{"name":"no4","icons":"shadow_sect2_no4.svg","igrphy_sect2_images_hint":"-90° Low-Shadow"},{"name":"no5","icons":"shadow_sect2_no5.svg","igrphy_sect2_images_hint":"-90° Middle-Shadow "},{"name":"no6","icons":"shadow_sect2_no6.svg","igrphy_sect2_images_hint":"-90° High-Shadow "}],"shadow_sect3_title":"Type","shadow_sect3_images_tableholder":[{"name":"no1","icons":"shadow_sect2_no1.svg","igrphy_sect2_images_hint":"Low-Shadow"},{"name":"no2","icons":"shadow_sect2_no2.svg","igrphy_sect2_images_hint":"Middle-Shadow"},{"name":"no3","icons":"shadow_sect2_no3.svg","igrphy_sect2_images_hint":"High-Shadow"},{"name":"no4","icons":"shadow_sect2_no4.svg","igrphy_sect2_images_hint":"White background"},{"name":"no5","icons":"shadow_sect2_no5.svg","igrphy_sect2_images_hint":"Base"}],"shadow_sect3_subtitle1":"Low-Shadow","shadow_sect3_description1":"配置される階層によって異なる陰影を設定します。物理法則に基づき、階層が最背面より高ければ高いほど、影は淡く、大きくなります。","shadow_sect3_subtitle2":"Middle-Shadow","shadow_sect3_description2":"Low-shadow階層にあるコンテンツより優先的に見せるべきコンテンツ、またはアクションコンポーネントを表示します。重なるコンテンツの下層が複雑なコンテンツ（地図や図柄など）である場合は、情報をより認識しやすくなるようこの階層に表示します。","shadow_sect3_subtitle3":"High-Shadow","shadow_sect3_description3":"画面内で特に優先度の高い情報やアクションにのみ用います。画面内で多用することは禁止します。","shadow_sect3_subtitle4":"Don't","shadow_sect3_description4":"画面内で同階層に配置されているコンポーネントに別の深さのシャドウを指定することは禁止します。","shadow_sect3_images_tableholder4":[{"name":"panel1","icons":"shadow_sect3_no1.svg","desc":"シャドウの値が揃っている"},{"name":"panel2","icons":"shadow_sect3_no2.svg","desc":"シャドウの値が揃っていない"}],"shadow_sect3_subtitle5":"White Background","shadow_sect3_description5":"コンテンツを表示する最も下の階層です。原則白色のみの利用を推奨します。","shadow_sect3_subtitle6":"Base","shadow_sect3_description6":"この上には直接コンテンツを表示しません","shadow_sect4_title":"視認性担保のためのシャドウ表現","shadow_sect4_description":"写真や複雑なコンテンツの上にテキストやアイコンを配置する場合、配置するテキストやアイコンの視認性/可読性を十分に担保できるようにシャドウを用います。","shadow_sect4_images_tableholder":[{"name":"panel1","icons":"shadow_sect4_no1.svg","desc":"地図上にボタンを表示"},{"name":"panel2","icons":"shadow_sect4_no2.svg","desc":"カメラ機能にアクションコンポーネントを表示"}],"shadow_sect5_title":"Spec","shadow_sect5_card_holder":[{"name":"panel1","title":"Low Shadow","desc":["#000000","Alpha 0.08","X:0 Y:2","Blur 6px"]},{"name":"panel2","title":"Mid Shadow","desc":["#000000","Alpha 0.15","X:0 Y:6","Blur 15px"]},{"name":"panel3","title":"Mid Shadow","desc":["#000000","Alpha 0.3","X:0 Y:8","Blur 20px"]},{"name":"panel4","title":"Background","desc":["#FFFFFF"]},{"name":"panel5","title":"Base Color","desc":["#F7F7F7"]},{"name":"panel6","title":"視認性担保のためのシャドウ","desc":["90°","#000000 Alpha 0.5","#000000 Alpha 0"]}]},"transition":{"transition_headers":"Transition","transition_sect1_title":"Principle","transition_sect1_description":["ユーザーアクションによる画面の遷移時には、画面の移動アニメーションを必須とします","アニメーションを提示することによって、ユーザーは自身が現在どの画面を表示しているかを明確にします"],"transition_sect2_title":"Usage","transition_sect2_subtitle1":"Drill Down","transition_sect2_description1":["ユーザーアクションにより、下の階層へ移動する場合は左から右へのアニメーションを表示し、画面が切り替わったことを明示します。","下層から上層に戻る場合も同様に右から左へのアニメーションを表示します。"],"transition_sect2_subtitle2":"Slide UP","transition_sect2_description2":"現在の動作を一時中断して行う、一時的なタスクを表示する場合はSlide upで画面を表示します。","transition_sect2_description3":"下層への移動アクションにこのトランジションを利用することは禁止します。"},"typography":{"title":"Typography","title_principle":"Principle","principle_desc":[{"desc":"アプリ内では定義されたタイポグラフィ以外のものは利用しません。定義されたFont Familyを利用し、すべての画面において一貫性を保ちます"},{"desc":"視認性/可読性を担保し、どんな人が見ても内容を理解できるようにレイアウトする必要があります"},{"desc":"和文はシステムフォント、欧文はカスタムフォントを利用し、必要以上の装飾やカスタムフォントの利用はしません"},{"desc":"PayPayアプリはあらゆる言語をサポートする必要があります（2020年時点では日本語/英語をサポート）"}],"title_usage":"Usage","subtitle_font_families":"Font Families","title_usage_desc":[{"desc":"Font Familyはここに定義されたもののみを利用します。"}],"subtitle_weight":"Weight","subtitle_font_size":"Font Size","font_size_desc":[{"desc":"フォントサイズはHeading/Label/Bodyの3種類を定義します。"},{"desc":"すべてのコンポーネントはこの3種類から構成されます。"},{"desc":"各コンポーネントで使われるフォントについては、各ガイドラインを参照してください。"}],"subtitle_heading":"Heading (H)","heading_desc":[{"desc":"ヘッダーやタイトルに利用します。"},{"desc":"Head / TitlesのサイズはLabel/Paragraphのサイズより小さくすることはできません。"}],"subtitle_label":"Label (L)","label_desc":[{"desc":"中見出し、アクションコンポーネント、補足情報に利用します。"},{"desc":"9、10pxなどの小さいサイズでは、Boldの利用を推奨します。"},{"desc":"11px以下のサイズは主要なコンポーネントには利用しません。"}],"subtitle_body":"Body (B)","body_txt_desc":[{"desc":"ユーザーアクションによる入力情報、記事、コンテンツの説明文などに利用します。"},{"desc":"原則14pxの利用を推奨しますが、重要なコンポーネントについては、16pxを使用する必要があります。"}],"subtitle_line_height":"Line Height","line_height_desc":[{"desc":"Line heightを定義します。"},{"desc":"十分な行間を保つことで、テキストの可読性を担保します。"}],"line_height_txt_desc":"Font size *1.5 px/sp = line-height (vertically centered)","title_size_line":"Size Line-UP","size_line_desc":"前述の項目で定義したフォントのサイズLine-upです。","title_text_color":"Text Color","text_color_desc":[{"desc":"用途別のテキストカラーを定義します。"},{"desc":"カラーはカラーパレットから引用しています。"},{"desc":"下記に定義されたカラーを異なる用途で利用することは禁止します。"}],"subtitle_default_text":"Default text","subtitle_status":"Status","title_price_text":"Price Text","price_text_desc":[{"desc":"PayPayはサービスの特性から、UI上で価格＋円の組み合わせを多用します。"},{"desc":"価格は決済アプリにおいて最も重要な情報であり、十分な可読性を担保する必要があります。"},{"desc":"価格部分を読みやすくするよう「円」は価格のサイズより小さく表示する必要があります。"}],"text_desc":"ここでは価格と円の比率を定義します。","line_height_desc_1":[{"desc":"Example 1","logo":"typography_02.svg"},{"desc":"Example 2","logo":"typography_03.svg"}],"typography_sect9_tableholder":[{"name":"panel1","col1":"","col2":"iOS","col3":"Android","col4":"Web"},{"name":"panel2","col1":"Japanese","col2":"Hiragino Sans","col3":"Noto Sans CJK","col4":"Sans serif"},{"name":"panel3","col1":"English","col2":"Graphik","col3":"Graphik","col4":"Graphik"},{"name":"panel4","col1":"Number","col2":"Graphik","col3":"Graphik","col4":"Graphik"},{"name":"panel5","col1":"Number_Price","col2":"Graphik","col3":"Graphik","col4":"Graphik"},{"name":"panel6","col1":"Symbol","col2":"Graphik","col3":"Graphik","col4":"Graphik"}],"typography_sect98_tableholder":[{"name":"panel1","col1":"","col2":"Regular","col3":"Bold"},{"name":"panel2","col1":"Hiragino Sans","col2":"W3","col3":"W6"},{"name":"panel3","col1":"Noto Sans CJK","col2":"Medium","col3":"Bold"},{"name":"panel4","col1":"Graphik","col2":"Medium","col3":"Semibold"}],"typography_sect97_tableholder":[{"name":"panel1","col1":"Size","col2":"14 px / 16px / 18px / 20px"},{"name":"panel2","col1":"Weight","col2":"Bold"}],"typography_sect96_tableholder":[{"name":"panel1","col1":"Size","col2":"9px / 10px / 11 px / 12px / 14px / 16px"},{"name":"panel2","col1":"Weight","col2":"Regular/Bold"}],"typography_sect95_tableholder":[{"name":"panel1","col1":"Size","col2":"12px / 14px  / 16px"},{"name":"panel2","col1":"Weight","col2":"Regular"}],"size_jp_bold":[{"name":"panel1","col1":"typography_04.svg","col2":"typography_05.svg","col3":"typography_06.svg"},{"name":"panel2","col1":"typography_07.svg","col2":"typography_08.svg","col3":"typography_09.svg"},{"name":"panel3","col1":"typography_10.svg","col2":"typography_11.svg","col3":"typography_white.png"}],"size_en_bold":[{"name":"panel1","col1":"typography_12.svg","col2":"typography_13.svg","col3":"typography_14.svg"},{"name":"panel2","col1":"typography_15.svg","col2":"typography_16.svg","col3":"typography_17.svg"},{"name":"panel3","col1":"typography_18.svg","col2":"typography_19.svg","col3":"typography_white.png"}],"size_jp_regular":[{"name":"panel1","col1":"typography_20.svg","col2":"typography_21.svg","col3":"typography_22.svg"},{"name":"panel2","col1":"typography_23.svg","col2":"typography_white.png","col3":"typography_white.png"}],"size_en_regular":[{"name":"panel1","col1":"typography_24.svg","col2":"typography_25.svg","col3":"typography_26.svg"},{"name":"panel2","col1":"typography_27.svg","col2":"typography_white.png","col3":"typography_white.png"}],"text_subtitle1_desc1":[{"desc1":"TextBlack","desc2":"PayPay残高で支払い","iconcls":"colors_ac242323","iconcode":"#242323","iconclscolor":"ac242323","imgs":""},{"desc1":"Secondary","desc2":"","desc_1":"TextGray","iconcls":"colors_ac606060","iconcode":"#606060","iconclscolor":"ac606060","imgs":""},{"desc1":"SubtextGray","desc2":"PayPay残高で支払い","desc_1":"","iconcls":"colors_ac909090","iconcode":"#909090","iconclscolor":"ac909090","imgs":""},{"desc1":"Empty/Disabled","desc2":"ここにメモを記入","desc_1":"TextGray","iconcls":"colors_acBABABA","iconcode":"#BABABA","iconclscolor":"acBABABA","imgs":""},{"desc1":"TextNavy","desc2":"その他","desc_1":"","iconcls":"colors_ac002970","iconcode":"#002970","iconclscolor":"ac002970","img":""}],"text_subtitle2_desc1":[{"desc1":"ErrorTextRed","desc2":"残高が足りません","color":"#FD5C5C","iconcls":"colors_acFD5C5C","iconcode":"#FD5C5C","iconclscolor":"acFD5C5C"},{"desc1":"SuccessTextGreen","desc2":"完了","color":"#20BF7A","iconcls":"colors_ac20BF7A","iconcode":"#20BF7A","iconclscolor":"ac20BF7A"},{"desc1":"CautionTextYellow","desc2":"","color":"#FFB900","iconcls":"colors_acFFB900","iconcode":"#FFB900","iconclscolor":"acFFB900"},{"desc1":"LinkTextBlue","desc2":"詳細をみる","color":"#3895FF","iconcls":"colors_ac3895FF","iconcode":"#3895FF","iconclscolor":"ac3895FF"}],"typography_sect98_tableholder2":[{"name":"panel1","col1":"Size","col2":"Rule"},{"name":"panel2","col1":"24~","col2":"価格に対し「円」は1/2のサイズを用います","col21":"例：<br>価格が72pxのとき、「円」は36pxを用います"},{"name":"panel3","col1":"14 - 22","col2":"価格のサイズに関わらず「円」は12pxを用います"},{"name":"panel4","col1":"12","col2":"価格のサイズに関わらず「円」は11pxを用います"}]}},"components":{"balloon":{"balloon_headers":"Balloon","balloon_sect1_title":"Usage","balloon_sect1_description":["新機能のガイドなど、特定のコンポーネントに補足情報を示す際に使用します","ユーザーが気付きにくい情報を補足することで、機能やコンポーネントの理解が深まり、より良い体験をもたらします","Balloonはあくまで補足的な情報の提示のみに使用するものとし、主コンテンツの閲覧やアクションを妨げるような使い方はしません"],"balloon_sect2_title":"Usage Example","balloon_sect2_images":[{"name":"panel1","icons":"balloon_sect2_images1.svg","desc":"新機能の訴求"},{"name":"panel2","icons":"balloon_sect2_images2.svg","desc":"新着情報のお知らせ"}],"balloon_sect3_title":"Type","balloon_sect3_description":"Balloonのコンポーネントには2種類あり、用途によって使い分けをします。","balloon_sect3_images":[{"name":"panel1","icons":"balloon_sect3_images1.svg","desc":"Coach Balloon"},{"name":"panel2","icons":"balloon_sect3_images2.svg","desc":"Scroll Balloon"}],"balloon_sect3_tableholder":[{"name":"no1","icons":"balloon_sect3_no1.svg","balloon_sect3_col1":"Coach Balloon","balloon_sect3_col2":"新機能などの特定のComponentを強調、ガイドする場合に使用します。"},{"name":"no2","icons":"balloon_sect3_no2.svg","balloon_sect3_col1":"Scroll Balloon","balloon_sect3_col2":"画面外の特定のComponentをガイドする場合に使用します。Balloonをタップすると対象のComponentの位置まで自動でスクロールします。"}],"balloon_sect4_title":"Detail","balloon_sect4_description":"Coach Balloon","balloon_sect4_tableholder":[{"name":"no1","icons":"balloon_sect4_no1.svg","balloon_sect4_col1":"Icon (Option)","balloon_sect4_col2":"メッセージやガイドに合わせたアイコンを表示します。アイコンを付与することでよりユーザーの注目を集めることができます。","balloon_sect4_col2_images":"","balloon_sect4_col2_hints":""},{"name":"no2","icons":"balloon_sect4_no2.svg","balloon_sect4_col1":"Text  Label","balloon_sect4_col2":"Balloonが示す訴求メッセージやガイドテキストを表示します。ユーザーが瞬時に内容を理解できるよう、簡潔に、1行以内に収まる文字数を推奨します。","balloon_sect4_col2_images":"","balloon_sect4_col2_hints":""},{"name":"no3","icons":"balloon_sect4_no3.svg","balloon_sect4_col1":"Arrow","balloon_sect4_col2":"Balloonの示すComponentの位置に合わせてArrowを配置します。","balloon_sect4_col2_images":"balloon_sect4_icons.png","balloon_sect4_col2_hints":"Mouse hover on above image and scroll horizontally to view till end"}],"balloon_sect5_title":"Do / Don't","balloon_sect5_description":"Coach Balloonを使用する際は、訴求対象が明確になるようにしてください。","balloon_sect5_points1":"強調したいコンテンツが明確","balloon_sect5_points2":"同一画面に複数のバルーンを配置する。どのComponentが強調されているのか不明瞭","balloon_sect5_points3":"Balloonの視認性が悪い。Balloonに近しい背景色の上への配置","balloon_sect6_title":"Scroll Balloon","balloon_sect6_tableholder":[{"name":"no1","icons":"balloon_sect6_no1.svg","balloon_sect6_col1":"Text Label","balloon_sect6_col2":"Balloonが示す訴求メッセージやガイドテキストを表示します。ユーザーが瞬時に内容を理解できるよう、簡潔に、1行以内に収まる文字数を推奨します。"},{"name":"no2","icons":"balloon_sect6_no2.svg","balloon_sect6_col1":"Arrow Animation","balloon_sect6_col2":"画面下部を示すアイコンアニメーションを表示し、画面外に情報があることを示します。"}],"balloon_sect6_description":["Scroll BalloonにはPrimary ColorとSecondary Colorがあります。","強調するコンテンツの優先度によって使い分けます。","更新頻度の高いタイムラインコンテンツなど、新着情報を表示する場合は表示されているコンテンツを阻害しないよう、Secondary Colorの利用を推奨します。"],"balloon_sect6_rowers":[{"name":"no1","icons":"balloon_sect6_rowers1.svg","balloon_sect6_title":"Primary Color","balloon_sect6_subtitle":"画面外の新機能を訴求する場合など"},{"name":"no2","icons":"balloon_sect6_rowers2.svg","balloon_sect6_title":"Secondary Color","balloon_sect6_subtitle":"更新頻度の高いタイムラインコンテンツの新着件数の表示など"}],"balloon_sect7_title":"Do / Don't","balloon_sect7_description":"画面内の主コンテンツの閲覧、アクションの妨げになるような表示は禁止とします。","balloon_sect7_tableholder":[{"name":"panel1","icons":"balloon_sect7_no1.svg","balloon_sect7_col1":"テキストが短く簡潔に表示されている"},{"name":"panel2","icons":"balloon_sect7_no2.svg","balloon_sect7_col1":"テキストが改行されているなど、可読性が低い"}],"balloon_sect8_title":"Interaction","balloon_sect8_tableholder":[{"name":"panel1","balloon_sect8_col1":"Coach Balloon","balloon_sect8_col2":"特殊な場合を除き、Balloonをタップ、もしくは対象のComponentをタップするとBalloonは非表示となります。アクションを伴わないComponentを訴求する場合は表示回数を設定し、ユーザーアクションを伴わなくともBalloonが非表示になるようにします。表示回数3回ほどで自動非表示にすることを推奨します。"},{"name":"panel2","balloon_sect8_col1":"Scroll Balloon","balloon_sect8_col2":"<div>Balloonをタップ、もしくは画面をスクロールするとBalloonは非表示となります。アクション時にタップフィードバックを表示します。Specを参照してください。</div><div>参考：<u><a href='/app-styleguide/globalrule/interaction' target='_blank'>Interaction</a></u></div>"}],"balloon_sect9_title":"Spec","balloon_sect9_subtitle":"Coach Balloon","balloon_sect9_tableholder":[{"name":"panel1","balloon_sect9_col1":"Text Label","balloon_sect9_col2":["<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading / Label 14</a></u>","Text Align-Left","Default : #FFFFFF","Pressed( iOS ) :  #FFFFFF, Alpha 0.7"]},{"name":"panel2","balloon_sect9_col1":"Background","balloon_sect9_col2":["Default : #00B9F5","Pressed( iOS ) : #00AFE8","Shadow : <u><a href='/app-styleguide/globalrule/shadow' target='_blank'>Low-shadow</a></u>"]}],"balloon_sect10_subtitle":"Scroll Balloon","balloon_sect10_tableholder":[{"name":"panel1","balloon_sect10_col1":"Text Label","balloon_sect10_col2":["<b>Primary</b>","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading / Label 14</a></u>","Text Align-Left","Default : #FFFFFF","Pressed( iOS ) :  #FFFFFF, Alpha 0.7","<br/>","<b>Secondary</b>","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading / Label 14</a></u>","Text Align-Left","Default : #00B9F5","Pressed( iOS ) :  #00B9F5, Alpha 0.7"]},{"name":"panel2","balloon_sect10_col1":"Background","balloon_sect10_col2":["<b>Primary</b>","Default : #00B9F5","Pressed( iOS ) : #00AFE8","Shadow : <u><a href='/app-styleguide/globalrule/shadow' target='_blank'>Low-shadow</a></u>","<br/>","<b>Secondary</b>","Default :","Back ground : #FFFFFF","Pressed( iOS ) :","Back ground : #F2F2F2","Shadow : <u><a href='/app-styleguide/globalrule/shadow' target='_blank'>Low-shadow</a></u>"]}],"balloon_sect11_title":"画面下部からの距離","balloon_sect11_tableholder":[{"name":"panel1","balloon_sect11_col1":"ボトムタブがある場合","balloon_sect11_col2":"16px/dp"},{"name":"panel2","balloon_sect11_col1":"ボトムタブがない場合","balloon_sect11_col2":"40px/dp"}]},"card":{"card_headers":"Card","card_sect1_title":"Principle","card_sect1_description":["• 複雑な情報を整理しグルーピングして提示する際に使用します","• カードそのものがタップやスワイプアクションをアフォードします","• 情報整理やアクションをアフォードする以外の用途、装飾のためだけにカードUIを使用することはしません"],"card_sect2_title":"Usage","card_sect2_description":"Usage Example","card_sect2_images":[{"name":"panel1","icons":"card_sect2_images1.svg"},{"name":"panel2","icons":"card_sect2_images2.svg"}],"card_sect2_hint":"複雑な情報をグルーピング","card_sect3_title":"Detail","card_sect3_tableholder":[{"name":"no1","icons":"card_sect3_no1.svg","card_sect3_col1":"Contents Area","card_sect3_col2":"<div>Card内にコンテンツを表示する場合は、コンテンツの周囲に十分な余白を設け、可読性を担保します。カードはタップ、スワイプするインタラクションをアフォードしますが、よりアクションを明示的にするためにテキストリンクやアイコンの表示を推奨します。</div>"},{"name":"no2","icons":"card_sect3_no2.svg","card_sect3_col1":"Background","card_sect3_col2":"<div><a href='/app-styleguide/globalrule/shadow' target='_blank'>Shadow</a>の項目の階層構造、光源、陰影のガイドラインに準拠し、カードの背景にシャドウを表示します。</div>"}],"card_sect4_title":"Do / Don't","card_sect4_description":"","card_sect4_tableholder":[{"name":"panel1","icons":"card_sect4_no1.svg","card_sect4_col1":"コンテンツがコンテンツエリア外に表示されている"},{"name":"panel2","icons":"card_sect4_no2.svg","card_sect4_col1":"同階層上のカードに異なるシャドウを使用する"},{"name":"panel3","icons":"card_sect4_no3.svg","card_sect4_col1":"シャドウに色をつける"},{"name":"panel4","icons":"card_sect4_no4.svg","card_sect4_col1":"カードがページのグリッドに沿っていない"}],"card_sect5_title":"Interaction","card_sect5_tableholder":[{"name":"no1","card_sect5_col1":"Tap","card_sect5_col2":"<div>アクション時にタップフィードバックを表示します。</div><div>Specを参照してください。</div><div>参考：<a href='/app-styleguide/globalrule/interaction' target='_blank'>Interaction</a></div>"},{"name":"no2","card_sect5_col1":"Flip","card_sect5_col2":"横に並ぶカードをFlipで移動させるインタラクションを使用する場合、タップフィードバックは表示しません。"}],"card_sect6_title":"Spec","card_sect6_descriptions":"カード周辺、カード間の余白の値については、<a href='/app-styleguide/globalrule/layout' target='_blank'>Layout</a> の項目を参照してください。","card_sect6_tableholder":[{"name":"no1","card_sect6_col1":"Background","card_sect6_col2":"Default : #FFFFFF, <br/> Pressed( iOS ) : #F2F2F2"},{"name":"no2","card_sect6_col1":"Corner","card_sect6_col2":"40px/dp"},{"name":"no3","card_sect6_col1":"Shadow","card_sect6_col2":"40px/dp"}]},"form":{"form_headers":"Form","form_sect1_title":"Usage","form_sect1_description":["• ユーザーが任意のテキストを入力する際に使用します","• 入力するべき内容や入力可能な文字数など、ユーザーが入力に必要な情報をわかりやすく表示します","• ユーザーが現在の状態を直感的に認識できるよう、入力前・入力済み・エラーなど、状態ごとに視覚的な差をつけて明示します"],"form_sect1_subtitle":"Usage Example","form_sect2_title":"Type","form_sect2_images":[{"name":"panel1","icons":"form_sect2_images1.svg","desc":"入力エリアの高さ固定"},{"name":"panel2","icons":"form_sect2_images2.svg","desc":"入力エリアの高さ可変"}],"form_sect3_title":"Detail","form_sect3_tableholder":[{"name":"panel1","icons":"form_sect3_no1.svg","desc":" Title (Option)"},{"name":"panel2","icons":"form_sect3_no2.svg","desc":"Text Field"},{"name":"panel3","icons":"form_sect3_no3.svg","desc":"Message Area"},{"name":"panel4","icons":"form_sect3_no4.svg","desc":"Action Item"},{"name":"panel5","icons":"form_sect3_no5.svg","desc":"Text Counter (Option)"}],"form_sect5_title":"Title (Option)","form_sect5_description":"<div>入力するべき項目を表示します。</div><div>ユーザーが適切な回答を入力できるよう、簡潔なテキストを原則とします。</div>","form_sect5_icons":"Tform_sect3_no1.svg","form_sect6_title1":"Text Field","form_sect6_title2":"Message area","form_sect6_description":"<div>ユーザーが回答を入力するエリアです。</div><div>Text Fieldにフォーカスをあてるとキーボードが表示されます。</div><div>入力項目についての補足、または入力項目にエラーがある場合はMessage areaにメッセージを表示します</div>","form_sect6_icons1":"form_sect3_no2.svg","form_sect6_icons2":"form_sect3_no3.svg","form_sect7_title":"ステータス別の表示","form_sect7_tblholder":[{"name":"panel1","form_sect7_col1":"Empty","form_sect7_col2_hint":"<div>入力エリアがEmptyの場合は、何を入力するべきかを示す必要があります</div><div>Place holderを利用して、入力例や入力項目名を表示します</div><div>入力項目についての補足情報がある場合は、Message areaに表示します</div>","form_sect7_col2_image":"form_sect7_icons1.svg"},{"name":"panel2","form_sect7_col1":"Editing","form_sect7_col2_hint":"<div>ユーザーの入力した文字列が表示されます</div><div>アクティブな状態を表すために、入力エリアの下線部を青色 かつ 太線で表示します</div><div>入力エリアに1文字以上テキストが入力されている場合、Action itemの削除ボタンを表示します</div>","form_sect7_col2_image":"form_sect7_icons2.svg"},{"name":"panel3","form_sect7_col1":"Filled","form_sect7_col2_hint":"<div>入力済み かつ キーボードのフォーカスが外れている場合は入力エリアの下線部を青色で表示します</div>","form_sect7_col2_image":"form_sect7_icons3.svg"},{"name":"panel4","form_sect7_col1":"Error","form_sect7_col2_hint":"<div>ユーザーの入力に誤りがある場合は入力エリアをエラー色で表示し、入力値が不正であることを明示します</div><div>同時に、ユーザーがエラーの理由を理解できるよう、Message areaにエラーメッセージを表示します</div>","form_sect7_col2_image":"form_sect7_icons4.svg"},{"name":"panel5","form_sect7_col1":"Non-Editable","form_sect7_col2_hint":"<div>入力不可能なことを明示します</div><div>入力エリア下線部の色をグレーアウトし、操作が不可能だということを明示します</div><div>Place holderまたは入力値が表示されます</div>","form_sect7_col2_image":"form_sect7_icons5.svg"}],"form_sect8_title":"Action Item","form_sect8_icons":"form_sect3_no4.svg","form_sect8_desc":"入力項目に対してアクションをするアイテムです。","form_sect8_tblholder":[{"name":"panel1","form_sect8_col1":"削除 *必須","form_sect8_col2_hint":"<div>入力エリアに1文字以上テキストが表示されている場合、必須で表示します</div><div>タップすると、入力した文字列はすべて削除されます</div>","form_sect8_col2_desc":"form_sect8_icons1.svg"},{"name":"panel2","form_sect8_col1":"可視・不可視 *任意","form_sect8_col2_hint":"<div>入力内容を記号に置き換えた不可視状態と可視状態を切り替えることができます</div><div>パスワードなど機密性の高い項目を入力する際に使用します</div><div>可視・不可視の状態が認識できるよう、アイコンの表示も切り替えます</div><div>不可視状態をデフォルト表示とします</div><div>不可視状態で入力すると、入力した文字列は「●」に置き換えられて表示されます</div>","form_sect8_col2_desc":"form_sect8_icons2.svg","form_sect8_col2_tblchild":[{"icons":"form_sect8_child_icons1.svg","images":"form_sect8_child_images1.svg","hint":"不可視状態"},{"icons":"form_sect8_child_icons2.svg","images":"form_sect8_child_images2.svg","hint":"可視状態"}]}],"form_sect9_title":"Text Counter (Option)","form_sect9_icons":"form_sect3_no5.svg","form_sect9_desc":"<div>入力中の文字数と上限文字数を表示します。</div><div>入力と同時に文字数をリアルタイムで反映します。</div><div>入力文字数が上限を超えた場合、Message areaにエラーを表示します。</div>","form_sect9_tblholder":[{"images":"form_sect9_images1.svg","hint":"入力文字数が上限以内"},{"images":"form_sect9_images2.svg","hint":"入力文字数が上限以上"}],"form_sect10_title":"Interaction","form_sect10_tblholder":[{"images":"form_sect10_images1.svg","hint":"<div>Empty時にText Fieldをタップ</div><div>キーボードが表示され、TextFieldがEditable表示に切り替わる</div><div>キーボードの表示アニメーションは端末の仕様に準拠</div>"},{"images":"form_sect10_images2.svg","hint":"<div>入力エリアの高さ可変あり</div><div>長い文字列を入力する場合、Text Fieldが文量に合わせて</div><div>下に広がる</div>"}],"form_sect11_title":"Spec","form_sect11_image":"form_sect11_images.svg","form_sect11_tblholder":[{"form_sect11_col1":"Title (Option)","form_sect11_col2":"<div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 12 Regular</a></div><div>Text Align-Left</div><div>#606060</div>"},{"form_sect11_col1":"Text Field - Input Text","form_sect11_col2":"<div><b>Place holder</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 16 Regular</a></div><div>Text Align-Left</div><div>#BABABA</div><div><br/></div><div>Input</div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 16 Regular</a></div> <div>Text Align-Left</div><div>#242323</div>"},{"form_sect11_col1":"Text Field - Form bar","form_sect11_col2":"<div><b>Empty</b></div><div>1px/dp</div><div>#BABABA</div><div><br/></div><div><b>Filled</b></div><div>1px/dp</div><div>#3895FF</div><div><br/></div><div><b>Editing</b></div><div>2px/dp</div><div>#3895FF</div><div><br/></div><div><b>Error</b></div><div>1px/dp</div><div>#FD5C5C</div><div><br/></div><div><b>Non-Editable</b></div><div>1px/dp</div><div>#EEEEEE</div>"},{"form_sect11_col1":"Message area","form_sect11_col2":"<div><b>Normal</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 12 Regular</a></div><div>Text Align-Left</div><div>#606060</div><div><br/></div><div><b>Error</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 12 Regular</a></div><div>Text Align-Left</div><div>#FD5C5C</div>"},{"form_sect11_col1":"Action Item","form_sect11_col2":"<div><b>Icon size</b></div><div>24*24px/dp</div><div><b>アイコン間のSpacing</b></div><div>0px/dp</div>"},{"form_sect11_col1":"Text Counter (Option)","form_sect11_col2":"<div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 12 Regular</a></div><div>Text Align-Right</div><div>#606060</div>"}]},"header":{"header_heading":"Header","header_sect1_title":"Usage","header_sect1_desc":"<li>画面のタイトルやアクションアイテム、ナビゲーションアイテムを表示します</li><li>画面上に表示されるコンテンツの内容やこれから行うアクションの目的を簡潔にわかりやすく表示します</li><li>表示されている画面の階層を明らかにし、簡単に上位階層の画面へ移動できるようにします</li><li>HeaderはOSの表示仕様に準拠します</li>","header_sect2_title":"Usage Example","header_sect2_images":[{"name":"panel1","hint":"iOS","images":"header_sect2_images1.svg"},{"name":"panel2","hint":"Android","images":"header_sect2_images2.svg"}],"header_sect3_title":"Type","header_sect3_images":"header_sect3_images.svg","header_sect3_tblholder":[{"name":"panel1","icons":"grayicon1.svg","col1":"Regular","col2":"<div>白い背景のHeaderです。</div><div>設定画面など、コンテンツ要素が少なくユーザーアクションを簡潔に完了させたい画面に利用します。</div>"},{"name":"panel2","icons":"grayicon2.svg","col1":"Transparent","col2":"<div>透過背景のHeaderです。</div><div>コンテンツエリアはHeaderエリアまで拡張ができ、Headerの背景に任意の色を設定できます。</div><div>メイン機能など、コンテンツエリアを広く見せたい場合などに利用します。</div>"}],"header_sect4_title":"Transparent","header_sect4_images":"header_sect4_images.svg","header_sect4_desc":"<div>主要コンテンツやキャンペーンなど、コンテンツエリアを広く強調して見せたい場合は、下図のようにヘッダーエリアの背景色の領域を拡張します。</div> <div>背景色はグラデーションカラーを推奨します。</div>","header_sect5_title":"Detail","header_sect5_hint":"OSの表示仕様に準拠します","header_sect5_images":[{"name":"panel1","hint":"iOS","images":"header_sect5_images1.svg"},{"name":"panel2","hint":"Android","images":"header_sect5_images2.svg"}],"header_sect5_tblholder":[{"name":"panel1","icons":"redicon1.svg","col1":"Navigation Item"},{"name":"panel2","icons":"redicon2.svg","col1":"Title"},{"name":"panel3","icons":"redicon3.svg","col1":"Action Items/(Optional)"}],"header_sect6_title":"Navigation Item","header_sect6_hint":"<div>ナビゲーションアイテムは画面間の移動に使用します。</div><div>表示されている画面の階層を明らかにし、簡単に上位階層の画面へ移動できるようにします。</div>","header_sect6_images":[{"name":"panel1","hint":"<div>Back button</div><div>Drill downで表示された画面に表示</div><div>タップで上位階層の画面に戻る</div>","images":"header_sect6_images1.svg"},{"name":"panel2","hint":"<div>Close button</div><div>Slide UPで表示された画面に表示</div><div>タップで画面を閉じる</div>","images":"header_sect6_images2.svg"}],"header_sect7_title":"Title","header_sect7_hint":"タイトルには以下の内容を記載します。","header_sect7_points":"<div>•  画面名</div><div>•  機能名</div><div>•  アクション名</div>","header_sect7_desc":"タイトルは端末のOS仕様に準拠し、端末の幅によって表示テキスト数は異なります。簡潔でコンパクトなタイトルの表示を推奨します","header_sect8_title":"Do/ Don't","header_sect8_hint":"タイトルは簡潔に、1行で収まるようにします。","header_sect8_images":[{"name":"panel1","hint":"タイトルが1行に収まっている","images":"header_sect8_images1.svg"},{"name":"panel2","hint":"タイトルが省略されている","images":"header_sect8_images2.svg"}],"header_sect9_title":"Action Item(Optional)","header_sect9_1subtitle":"アイコン","header_sect9_1subdesc":"アクションアイコンを最大2つまで表示できます。表示するアイコンは画面内の機能に関連性のある機能である必要があります。","header_sect9_1subimage1":"header_sect9_1subimage1.svg","header_sect9_1subimage2":"header_sect9_1subimage2.svg","header_sect9_2subtitle":"テキストボタン","header_sect9_2subdesc":"<div>テキストボタンを表示できます。</div><div>表示するアイコンは画面内の機能に関連性のあるものである必要があります。</div><div>基本的にはアイコンボタンの利用を推奨します。</div><div>テキストボタンは、アイコンのみでは表現することが難しい場合、より強調するべき機能の場合に使用します。</div><div><br /></div><div>テキストボタンとタイトルテキストの間には十分な余白を設け、テキストの視認性/可読性を担保してください。</div><div>ボタンのラベルテキストは簡潔で短いテキストを使用します。2文字程度を推奨します。</div>","header_sect9_2subimage":"header_sect9_2subimage.svg","header_sect9_3subtitle":"編集コンテンツの保存ボタン","header_sect9_3subdesc":"<div>編集画面では、編集内容を保存する際に「保存」ボタンを表示します。</div><div>保存ボタンは編集状態によって表示を切り替えます</div>","header_sect9_3subimage":"header_sect9_3subimage.svg","header_sect9_3tblholder":[{"name":"panel1","icons":"blueicon1.svg","col1":"Active","col2":"変更された情報がある場合は「保存」ボタンを活性化し、ユーザーアクションを促します。"},{"name":"panel2","icons":"blueicon2.svg","col1":"Disable","col2":"編集内容に変更がない場合は「保存」ボタンは非活性にします。"}],"header_sect10_title":"Interaction","header_sect10_subtitle":"Scroll","header_sect10_hint1":"画面スクロール時は、ヘッダーは画面上部に固定表示されます。","header_sect10_images1":"header_sect10_images1.svg","header_sect10_hint2":"1st viewで表示される重要なコンテンツをスクロール時にも表示したい場合は、ヘッダーに表示することができます。","header_sect10_images2":"header_sect10_images2.svg","header_sect11_title":"Spec","header_sect11_images":[{"name":"panel1","hint":"iOS","images":"header_sect11_images1.svg"},{"name":"panel2","hint":"Android","images":"header_sect11_images2.svg"}],"header_sect12_title":"Items","header_sect12_tblholder":[{"header_sect12_col1":"Navigation Item","header_sect12_col2":"<div>24px*24px/dp</div>"},{"header_sect12_col1":"Title","header_sect12_col2":"<div><b>Regular</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading16</a></div><div>Text Align-Center</div><div>#242323</div><div><br /></div><div><b>Transparent</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading16</a></div><div>Text Align-Center</div><div>#FFFFFF / #242323</div><div>Title text colorはBackground colorとのコントラスト比を十分に担保してください。</div><div>テキストカラーはヘッダーの背景色に応じて上記2色のどちらかを使用してください。</div>"},{"header_sect12_col1":"Action Item","header_sect12_col2":"<div>24*24px/dp</div><div><b>Text- Active</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></div><div>Text Align-Center</div><div>#3895FF</div><div><br /></div><div>Text- non Active</div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></div><div>Text Align-Center</div><div>#BABABA</div>"},{"header_sect12_col1":"Background","header_sect12_col2":"<div><b>Regular</b></div><div>#FFFFFF</div><div><b>Transparent</b></div><div>---</div>"}]},"pagecontrols":{"pagecontrols_heading":"Page Controls","pagecontrols_sect1_title":"Usage","pagecontrols_sect1_desc":"<div><span>•</span><span>表示されている画面外に複数のコンテンツがあることをユーザーに伝え、フリックアクションを促します</span></div><div><span>•</span><span>複数あるコンテンツのうち、現在表示されているコンテンツがどの位置にあるかを正確に伝える必要があります</span></div><div><span>•</span><span>より便利な体験を提供するためのサポートコンポーネントであり、ページコントロールは主要なコンテンツを邪魔することはしません</span></div>","pagecontrols_sect2_title":"Usage Example","pagecontrols_sect2_images":"pagecontrols_sect2_images.svg","pagecontrols_sect2_desc":"フリックで表示可能なバナー画像の数をページコントロールで表します。","pagecontrols_sect3_title":"Don't","pagecontrols_sect3_images":[{"name":"panel1","icons":"pagecontrols_sect3_images1.svg","hint":"最大5個までを推奨とし、10個以上利用することは禁止します"},{"name":"panel2","icons":"pagecontrols_sect3_images2.svg","hint":"テキストコンテンツの可読性を阻害することは禁止します"}],"pagecontrols_sect4_title":"Spec","pagecontrols_sect4_images":"pagecontrols_sect4_images.svg","pagecontrols_sect4_tblholder":[{"pagecontrols_sect4_col1":"Selected","pagecontrols_sect4_col2":"<div>#000000</div><div>Alpha 0.5</div>"},{"pagecontrols_sect4_col1":"Unselected","pagecontrols_sect4_col2":"<div>#000000</div><div>Alpha 0.2</div>"}]},"buttons":{"title":"Buttons","title_usage":"Usage","usage_desc":[{"desc":"タップすることでアクションを実行することができます"},{"desc":"アクション可能であることや内包するアクション、ステータスを明示し、タップ後のインタラクションが想定できるようにします"},{"desc":"ボタンは画面内の他のコンテンツと視覚的に差別化し、目立つように配置する必要があります"}],"subtitle_usage_example":"Usage Example","title_type":"Type","type_desc":[{"desc":"状態によりいくつかの種類があり、用途によって使い分けをします"}],"subtitle_action_button":"Action Button","title_layout":"Layout","title_txtlabel":"Text Label","subtitle_layout":"画面内のボタンの優先順位","txtlabel_desc1":"テキストラベルには、ユーザーアクションをすぐに理解できる簡潔なテキストを使用します。","txtlabel_desc2":"アクションを明確に伝えるために、動詞での表示を推奨します。","background_title":"Background","background_desc1":"ボタンの役割や優先順位をアプリ内で統一し、ユーザーの学習コストを軽減するため、ボタンの色は定義された色以外を使用しません。","background_desc2":"例外として、黒などの濃い背景色または写真の上に配置する場合のみ、白枠・白テキストのボタンの使用を許容します。","icons_title":"Icon","icons_desc":"<div>ボタンが示す内容をより視覚的に伝えたい場合はアイコンをラベル内に含めます。</div><div>アイコンは字色と同色の使用を推奨します。</div><div>例外として、白い背景のボタンの場合は、文字色と異なる色のアイコンの利用を許容とします。</div><div>任意の色をアイコンに使用する場合は、背景色とアイコンの色の色差、コントラスト比を十分に担保してください。</div>","layout_desc":[{"desc":"画面内に複数のボタンを配置する場合、ボタンの優先順位を設定し、優先順位に沿ったTypeのボタンを配置します。"},{"desc":"ユーザーがアクションの選択に迷ってしまわないように、優先順位は明確である必要があります。"}],"subtitle_dont":"Do/ Don't","dont_desc":[{"desc":"画面内のボタンの優先順位が不明瞭になるような使い方は禁止とします。"}],"subtitle_horizontal_button":"Horizontal Button","horizontal_button_desc":[{"desc":"優先順位や機能が同等の情報を表示する場合は、アクションボタンを横並びに最大2つまで配置することを許容とします。"},{"desc":"3つ以上の選択肢を設ける場合は、ボタンを縦に並べる、または他のUIにしてください。"}],"horizontal_button_desc_1":"ボタンの背景色は、2つのボタンが異なるアクションであると容易に認識できるよう、色差のある2色の利用を推奨します。","horizontal_button_desc_2":"色は<u><a href='/app-styleguide/globalrule/color' target='_blank'>Color palette</a></u>の色を参考にしてください。","lauoyt_subtitle":"2つのボタンの背景色について","lauoyt_subtitle_desc":"色は<u><a href='/app-styleguide/globalrule/color' target='_blank'>Color palette</a></u>の色を参考に指定してください","subtitle_sticky_button":"Sticky Button","sticky_button_desc":[{"desc":"コンテンツ量が多く、縦に長い画面の最下部にアクションボタンを配置する場合、1st viewでボタンを認識できるように、画面下部にボタンを固定するSticky Buttonの使用を推奨します。"},{"desc":"表示コンテンツの上位階層にボタンを配置し、ボタンの周辺には十分な余白を担保します。"},{"desc":"Sticky Buttonの表示エリア外の領域をスクロール領域とします。"}],"subtitle_keyboard_button":"Keyboard Button","keyboard_button_desc":[{"desc":"ユーザーが入力アクションをする画面では、ボタンをキーボード上部に固定表示します。"},{"desc":"ボタンの上下左右には十分な余白を設け、隣接するコンテンツやキーボードとの誤タップを避けます。"}],"title_detail":"Detail","detail_dont":[{"desc":"簡潔で短く、すぐにアクションが理解できるテキストを設定してください。"},{"desc":"ボタンのテキストが途中で切れてしまうこと、2行になることは禁止します。"}],"title_interaction":"Interaction","interaction_desc":[{"desc":"アクション時にタップフィードバックを表示します。"},{"desc":"Specを参照してください。"}],"interaction_desc_1":"参考：<u><a href='/app-styleguide/globalrule/interaction' target='_blank'>Interaction</a></u>","title_spec":"Spec","subtitle_spacing":"Spacing","usage_example_desc":[{"desc":"入力要素の送信","logo":"buttons_01.svg"},{"desc":"選択肢の送信","logo":"buttons_02.svg"}],"buttons_design_sect3_holders":[{"name":"panel3","clsname":"buttons_design_sect3_pannel3","buttons_design_sect3_images_tableholder":[{"name":"panel1","buttons_sect3_colo1_icons":"buttons_03_1.svg","buttons_sect3_colo1_icons_title":"Action button Primary","buttons_design_sect3_images_colo2":"高優先度のアクションに利用します"},{"name":"panel2","buttons_sect3_colo1_icons":"buttons_03_2.svg","buttons_sect3_colo1_icons_title":"Action button Secondary","buttons_design_sect3_images_colo2":"中優先度のアクションに利用します"},{"name":"panel3","buttons_sect3_colo1_icons":"buttons_03_3.svg","buttons_sect3_colo1_icons_title":"Action button Tertiary","buttons_design_sect3_images_colo2":"低優先度のアクションに利用します"},{"name":"panel4","buttons_sect3_colo1_icons":"buttons_03_4.svg","buttons_sect3_colo1_icons_title":"Action button Alert","buttons_design_sect3_images_colo2":"ユーザーデータの削除など、誤ったアクションによりユーザーが不利益を被るであろうアクションに利用します"},{"name":"panel5","buttons_sect3_colo1_icons":"buttons_03_5.svg","buttons_sect3_colo1_icons_title":"Action button Disabled","buttons_design_sect3_images_colo2":"アクションが無効の状態に利用します"}]}],"buttons_design_sect4_holders":[{"name":"panel3","clsname":"buttons_design_sect3_pannel3","buttons_design_sect3_images_tableholder":[{"name":"panel1","buttons_sect3_colo1_icons":"buttons_03_1.svg","buttons_sect3_colo1_icons_title":"Text label","buttons_design_sect3_images_colo2_1":[{"desc":["Primary, Error, Disabled","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></u>","Text Align-Center","Default:#FFFFFF","Pressed(IOS):#FFFFFF,Alpha 0.7"]},{"desc":["Secondary, Tertiary","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></u>","Text Align-Center","Default:#3895FF","Pressed(IOS):#3895FF,Alpha 0.7"]}]},{"name":"panel2","buttons_sect3_colo1_icons":"buttons_03_2.svg","buttons_sect3_colo1_icons_title":"Background","buttons_design_sect3_images_colo2_1":[{"desc":["Primary","","Default:#3895FF","Pressed(IOS):#3286FF"]},{"desc":["Error","","Default:#FD5C5C","Pressed(IOS):#E35353"]},{"desc":["Disabled","","#EEEEEE"]},{"desc":["Secondary","","Default","Background:#FFFFFF","Stroke:#389FF,1px/dp,inside"]},{"desc":["","","Pressed(iOS)","Background:#F2F2F2","Stroke:#3286E5,1px/dp,inside"]},{"desc":["Tertiary","","Default:#FFFFFF","Pressed(iOS):#F2F2F2"]}]},{"name":"panel3","buttons_sect3_colo1_icons":"buttons_03_3.svg","buttons_sect3_colo1_icons_title":"Background Corner","buttons_design_sect3_images_colo2_1":[{"desc":["","","Round = 8px/dp"]}]},{"name":"panel4","buttons_sect3_colo1_icons":"buttons_03_4.svg","buttons_sect3_colo1_icons_title":"Icon Size","buttons_design_sect3_images_colo2_1":[{"desc":["","","20 * 20px/dp","Pressed(iOS):Alpha 0.7"]}]}]}],"dont_img_desc":[{"desc":"選択肢の優先順位が明確","logo":"buttons_05.svg"},{"desc":"選択肢の優先順位が不明瞭","logo":"buttons_06.svg"}],"buttons_sect97_tableholder":[{"name":"panel1","col1":"異なる2色を指定する場合","col2":"2つのボタンが異なるアクションであると容易に認識できるよう、色差のある2色の利用を推奨します。画面上で調和の取れた2色を選択してください。PayPayのPrimary Buleの利用は必須ではありません"},{"name":"panel2","col1":"同色の場合","col2":"2つのボタンが異なるアクションであると容易に認識できるよう、アイコンを表示することを推奨します"}],"buttons_details_sect2_images_tableholder":[{"name":"no1","icons":"buttons_10_01.svg","buttons_details_sect2_images_colo1_title1":"Text Label"},{"name":"no2","icons":"buttons_10_02.svg","buttons_details_sect2_images_colo1_title1":"Background"},{"name":"no3","icons":"buttons_10_03.svg","buttons_details_sect2_images_colo1_title1":"Icon"}],"dont_details":[{"desc_1":"アクションが明快で短く、テキストが1行に収まる","desc_2":"","logo":"buttons_12.svg"},{"desc_1":"テキストが長くアクションが不明瞭","desc_2":"途中で切れる、2行になる","logo":"buttons_13.svg"}],"dont_details_3":[{"desc":"アイコンの視認性が担保されている","logo":"buttons_15.svg"},{"desc":"アイコンの視認性が悪い","logo":"buttons_16.svg"},{"desc":"アイコンのみの表示","logo":"buttons_17.svg"},{"desc":"アイコンをつけることで情報の優先順位が不明瞭になる","logo":"buttons_18.svg"},{"desc":"ボタンステータスとアイコンの表す意味が合っていない","logo":"buttons_19.svg"}],"spacing_data":[{"logo":"buttons_21.svg"},{"logo":"buttons_22.svg"}],"sticky_button_data":[{"logo":"buttons_23.svg","desc":"Button 1つ"},{"logo":"buttons_24.svg","desc":"Button 2つ以上"}],"sticky_button_table":[{"name":"panel1","col1":"Background Color","col2":"#FFFFFF"},{"name":"panel2","col1":"Shadow","col2":"背景上部にShadowを付与 <br> Shadow : <u><a href='/app-styleguide/globalrule/shadow' target='_blank'>-90° Low-Shadow</a></u>"}]},"expand":{"title":"Expand","title_usage":"Usage","usage_desc":[{"desc":"情報量の多いコンテンツをコンパクトに表示する際に使用します"},{"desc":"エキスパンド内に情報を収めることで情報が整理され、下に続くコンテンツの可読性を高めます"},{"desc":"エキスパンドの利用は主コンテンツには使用せず、補足情報などの副次的な情報にのみ使用します"},{"desc":"タップすることで折りたたまれた情報を展開します"},{"desc":"展開された情報は再度タップすることで展開前の状態に戻すことが可能です"}],"subtitle_usage_example":"Usage Example","usage_example_desc":"情報量の多い副次的なコンテンツを折りたたんで表示","title_type":"Type","type_desc":[{"desc":"Expandのコンポーネントには3種類があり、用途によって使い分けをします。"}],"title_detail":"Detail","subtitle_card":"Card","card_desc":[{"desc":"情報量の多いコンテンツをグルーピングする際に利用します。"}],"subtitle_list":"List","list_desc":[{"desc":"リスト内の項目が多い場合、リストの一覧性を確保するために使用します。"},{"desc":"情報を大項目、小項目に分類できるコンテンツにのみ使用可能です。"}],"subtitle_article":"Article","article_desc":[{"desc":"記事などの長文コンテンツをコンパクトに表示する際に使用します。"},{"desc":"情報を折りたたむことで下に続くコンテンツやアクションコンポーネントの可読性を高めます"}],"title_interaction":"Interaction","interaction_desc":[{"desc":"Expand areaをタップして、展開前/展開後のUIを切り替えます。"},{"desc":"タップ時にはタップフィードバックを表示します。"},{"desc":"Specを参照してください。"}],"interaction_desc_1":"参考：<u><a href='/app-styleguide/globalrule/interaction' target='_blank'>Interaction</a></u>","interaction_desc_3":"展開時は展開されるコンテンツ部分、矢印アイコンにアニメーションを付与し、状態の変化をわかりやすくします。","title_spec":"Spec","expand_details_desc_1":"タップ領域を十分に確保します。","subtitle_spec_card":"Card","subtitle_expandlist":"Expand List","subtitle_expandarticle":"Expand Article","expand_details_sect9_images_tableholder":[{"name":"panel1","icons":"expand_num_01.svg","text":"展開前","desc":"タップで展開することを明示するため、下向きの矢印アイコンを表示します。Defaultの表示は閉じた状態を使用することを推奨します。展開後に表示される情報が想起可能なテキストラベルを表示します。"},{"name":"panel2","icons":"expand_num_02.svg","text":"展開後","desc":"展開前の状態に戻せることを明示するため、上向きの矢印アイコンを表示します。"}],"expand_list_details_tableholder":[{"name":"panel1","icons":"expand_num_03.svg","text":"展開前","desc":"大項目を表示します <br> タップで展開することを明示するため、下向きの矢印アイコンを表示します <br> Listの場合、ユーザーはExpandアクションを見逃す恐れがあります <br> 1つ目の項目のみ、展開後の状態で表示することを推奨します <br> ただし、展開後の小項目が1st view内に収まらないほど多い場合はアクションがより不明瞭になるため、展開後のUIをDefault表示します"},{"name":"panel2","icons":"expand_num_04.svg","text":"展開後","desc":"小項目を表示します <br> 展開前の状態に戻せることを明示するため、上向きの矢印アイコンを表示します"}],"expand_article_details_tableholder":[{"name":"panel1","icons":"expand_num_05.svg","text":"展開前","desc":"タップで展開することを明示するため、「続きを読む」などのテキストラベルを表示します <br> 記事本文のテキストと混同しないよう、本文より弱い色を指定します <br> 記事本文は、最終行の文字を…で省略します <br> 省略位置は端末の横幅に準拠します"},{"name":"panel2","icons":"expand_num_06.svg","text":"展開後","desc":"折りたたまれたコンテンツをすべて表示します <br> 展開前の状態に戻すアクションは付与しません <br> リロードすると展開前の状態に戻ります"}],"expand_spec_card_tableholder":[{"name":"panel1","icons":"","text":"Text Label","desc":"<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading / Label 14</a></u> <br> Text Align-Center <br> Default : #00B9F5 <br> Pressed( iOS ) :  #00B9F5, Alpha 0.7"},{"name":"panel2","icons":"","text":"Background","desc":"Default : <br> Background : #FFFFFF <br> Pressed( iOS ) : <br> Background : #F2F2F2"},{"name":"panel3","icons":"","text":"Icon","desc":"24px/dp"}],"expand_spec_expandlist_tableholder":[{"name":"panel1","icons":"","text":"Text Label","desc":"<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 16 Bold </a></u> <br> Text Align-Left <br> #242323"},{"name":"panel2","icons":"","text":"Icon","desc":"24px/dp"}],"expand_spec_expandarticle_tableholder":[{"name":"panel1","icons":"","text":"Text Label","desc":"<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Body 14 </a></u> <br> Text Align-Left <br> #BABABA"}]},"halfsheets":{"title":"Half Sheets","title_usage":"Usage","usage_desc":[{"desc":"ユーザー操作を一時中断させ、アクションを促す、またはエラーなどのお知らせを表示する際に使用します"},{"desc":"ハーフシートはあくまで副次的な情報を表示するものであり、ハーフシート上に主コンテンツを表示することは推奨しません（Mini-Appは除く）"},{"desc":"ハーフシート上には、表示された理由、ユーザーがとるべきアクションをわかりやすく表示します"}],"subtitle_usage_example":"Usage Example","title_type":"Type","title_detail":"Detail","title_interaction":"Interaction","interaction_desc":"ボタンアクション時にタップフィードバックを表示します。","interaction_desc_1":"Buttons","interaction_desc_2":"を参照してください。","interaction_desc_3":"参考：","interaction_desc_4":"Interaction","title_transitions":"Transitions","title_spec":"Spec","txt_button_desc":"ボタンを複数表示する場合は、優先順位を明確にし、ユーザーが次のアクションに迷わないように配慮してください。","half_sheets_sect11_holders":[{"desc":"入力要素の送信","logo":"halfsheet_01.svg"}],"half_sheets_sect12_holders":[{"name":"panel3","clsname":"half_sheets_sect_pannel","half_sheets_sect_images_tableholder":[{"name":"panel1","half_sheets_sect_images_colo1_icons":"buttons_03_1.svg","half_sheets_sect_images_colo1_title":"Regular","halfsheet_sect3_images_colo2":"高優先度のアクションに利用します"},{"name":"panel2","half_sheets_sect_images_colo1_icons":"buttons_03_2.svg","half_sheets_sect_images_colo1_title":"Date picker","halfsheet_sect3_images_colo2":"中優先度のアクションに利用します"},{"name":"panel3","half_sheets_sect_images_colo1_icons":"buttons_03_3.svg","half_sheets_sect_images_colo1_title":"Alternative","halfsheet_sect3_images_colo2":"低優先度のアクションに利用します"}]}],"half_sheets_sect13_holders":[{"name":"panel3","clsname":"half_sheets_sect_pannel","half_sheets_sect_images_tableholder":[{"name":"panel1","half_sheets_sect_images_colo1_icons":"num_01.svg","half_sheets_sect_images_colo1_title":"Image(Option)","halfsheet_sect3_images_colo2":[{"desc":"ハーフシートに表示されている内容をよりわかりやすく伝えるため、イメージを配置します"},{"desc":"<div><span>エラーアイコン</span></div>"},{"desc":"エラーやアラートを表示する場合は、共通のエラーアイコンや機能独自のエラーアイコンを表示します"},{"desc":"詳細は<u><a href='/app-styleguide/globalrule/icongraphy' target='_blank'>アイコンの項目</a></u>をご確認ください"}],"half_sheets_sect_images1":"halfsheet_03_01.svg","half_sheets_sect_images2":"halfsheet_03_02.svg"},{"name":"panel2","half_sheets_sect_images_colo1_icons":"num_02.svg","half_sheets_sect_images_colo1_title":"Title","halfsheet_sect3_images_colo2":[{"desc":"タイトルを表示します"},{"desc":"タイトルは内容を端的に理解できるよう、簡潔でコンパクトな一文を利用します"},{"desc":"文末に句点は使いません"}],"half_sheets_sect_images1":"","half_sheets_sect_images2":""},{"name":"panel3","half_sheets_sect_images_colo1_icons":"num_03.svg","half_sheets_sect_images_colo1_title":"Description(Option)","halfsheet_sect3_images_colo2":[{"desc":"タイトルでは伝えきれない補足情報を表示します"},{"desc":"文末に句点は使いません"}],"half_sheets_sect_images1":"","half_sheets_sect_images2":""},{"name":"panel4","half_sheets_sect_images_colo1_icons":"num_04.svg","half_sheets_sect_images_colo1_title":"Links(Option)","halfsheet_sect3_images_colo2":[{"desc":"リンクテキストを表示します"},{"desc":"主に、ユーザーの同意を得るための利用規約へのリンクやヘルプページへのリンクを表示する場合など"},{"desc":"補足的要素に利用し、主要アクションボタンとしての利用は禁止します"},{"desc":"リンクは3つまでの表示を推奨します"},{"desc":"表示パターンは後述します"}],"half_sheets_sect_images1":"","half_sheets_sect_images2":""},{"name":"panel5","half_sheets_sect_images_colo1_icons":"num_05.svg","half_sheets_sect_images_colo1_title":"Buttons","halfsheet_sect3_images_colo2":[{"desc":"アクションボタンを表示します"},{"desc":"ボタンは1〜3つまで表示が可能です"},{"desc":"ボタンを複数表示する場合は、優先順位を明確にし、ユーザーが次のアクションに迷わないように配慮してください"},{"desc":"ボタンの表示パターンは後述します"}],"half_sheets_sect_images1":"","half_sheets_sect_images2":""},{"name":"panel6","half_sheets_sect_images_colo1_icons":"num_06.svg","half_sheets_sect_images_colo1_title":"Half sheet background","halfsheet_sect3_images_colo2":[{"desc":"ハーフシートの背景です"},{"desc":"高さは表示コンテンツの内容によって変化します"}],"half_sheets_sect_images1":"","half_sheets_sect_images2":""},{"name":"panel7","half_sheets_sect_images_colo1_icons":"num_07.svg","half_sheets_sect_images_colo1_title":"Blur background","halfsheet_sect3_images_colo2":[{"desc":"ハーフシートの表示時は、黒の透過背景（オーバーレイ）を表示し、下層のコンテンツを認識できるようにします"},{"desc":"原則、このエリアをタップすると、ハーフシートを閉じます"},{"desc":"ただし、以下の場合は、このエリアをタップしてもハーフシートは閉じないようにします"},{"desc":"•  ハーフシート上の操作を追えずに閉じることで挙動や表示要素に不整合が起こる場合"},{"desc":"•  エラー時など、シートを閉じて再度同様の操作をしても結果が変わらない場合"}],"half_sheets_sect_images1":"","half_sheets_sect_images2":""}]}],"halfsheet_sect14_holders":[{"name":"panel3","clsname":"half_sheets_sect_pannel","half_sheets_sect_images_tableholder":[{"name":"panel1","half_sheets_sect_images_colo1_icons":"buttons_03_1.svg","half_sheets_sect_images_colo1_title":"Image (Option)","illustration_design_sect3_images_colo2_1":[{"desc":["","128px*64px"]}]},{"name":"panel2","half_sheets_sect_images_colo1_icons":"buttons_03_2.svg","half_sheets_sect_images_colo1_title":"Title","illustration_design_sect3_images_colo2_1":[{"desc":["<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Hading 16</a></u>","Text Align-Center","#242323"]}]},{"name":"panel3","half_sheets_sect_images_colo1_icons":"buttons_03_3.svg","half_sheets_sect_images_colo1_title":"Description(Option)","illustration_design_sect3_images_colo2_1":[{"desc":["<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Regular</a></u>","Text Align-Center","#242323"]}]},{"name":"panel4","half_sheets_sect_images_colo1_icons":"buttons_03_4.svg","half_sheets_sect_images_colo1_title":"Links(Option)","illustration_design_sect3_images_colo2_1":[{"desc":["<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Regular</a></u>","Text Align-Center","#3895FF"]}]},{"name":"panel5","half_sheets_sect_images_colo1_icons":"buttons_03_4.svg","half_sheets_sect_images_colo1_title":"Buttons","illustration_design_sect3_images_colo2_1":[{"desc":["<u><a href='/app-styleguide/component/buttons' target='_blank'>Buttons</a></u>"]}]},{"name":"panel6","half_sheets_sect_images_colo1_icons":"buttons_03_4.svg","half_sheets_sect_images_colo1_title":"Half sheet background","illustration_design_sect3_images_colo2_1":[{"desc":["","#FFFFFF","TOP Right & Left Round : 20px/dp"]}]},{"name":"panel7","half_sheets_sect_images_colo1_icons":"buttons_03_4.svg","half_sheets_sect_images_colo1_title":"Blur background","illustration_design_sect3_images_colo2_1":[{"desc":["","Alpha 0.6","#000000"]}]}]}],"halfsheet_sect15_holders":[{"desc1":"ボタンを1つ表示(推奨)","desc2":"<u><a href='/app-styleguide/component/buttons' target='_blank'>Primary Button</a></u>","logo":"halfsheet_04_01.svg"},{"desc1":"ボタンを2つ表示(推奨)","desc2":"Primary/Secondary","logo":"halfsheet_04_02.svg"},{"desc1":"ボタンを3つ表示","desc2":"Primary/Secondary/Tertiary","logo":"halfsheet_04_03.svg"}],"halfsheet_section_tableholder":[{"name":"panel1","col1":"表示","col2":"スライドアップで表示します"},{"name":"panel2","col1":"閉じる","col2":"スライドダウンで閉じます"}],"halfsheets_integration_data":[{"desc":"ボタンアクション時にタップフィードバックを表示します。"},{"desc":"<u><a href='/app-styleguide/component/buttons' target='_blank'>Buttons</a></u>を参照してください。"},{"desc":"参考: <u><a href='/app-styleguide/globalrule/interaction' target='_blank'>Interaction</a></u>"}]},"label":{"title":"Label","title_usage":"Usage","usage_desc":[{"desc":"コンテンツの補足情報やステータスを明示するために利用します"},{"desc":"画面内に複数のステータスラベルを利用する場合は、ステータスの差を明確に色分けして、視覚的に違いを認識できるようにします"}],"subtitle_usage_example":"Usage Example","title_type":"Type","subtitle_do_dont":"Do/ Don't","do_dont_desc":"タイトルは簡潔に、1行で収まるようにします。","subtitle_dont":"Don't","title_spec":"Spec","title_statuslabel":"Status Label","title_newlabel":"New Label","desc_statuslabel":"コンテンツ内で複数のステータスが存在する場合に、ステータスの違いを明示するために利用します。","newlabel_desc1":"新機能などユーザーにアピールしたい機能に利用します。","newlabel_desc2":"テキスト、色の変更はできません。","newlabel_desc3":"必要以上にユーザーの注意を惹きつけないよう、対象を1〜3回タップしたら消えるようにします。（回数は1回を推奨します）","label_data1":[{"desc":"複数あるステータスの表示","logo":"label_01.svg"},{"desc":"新しいコンテンツのPR","logo":"label_02.svg"}],"label_data2":[{"desc":"ラベル内にアクションアイテムを付与することは推奨しません","logo":"label_05.svg"},{"desc":"ラベル内でテキストを改行することは禁止とします","logo":"label_06.svg"}],"label_data3":[{"desc":"1画面内に複数のラベルを表示することは禁止します","logo":"label_08.svg"}],"label_data7":[{"name":"panel3","label_sect_images_tableholder":[{"name":"panel1","label_sect_images_colo1_icons":"num_01.svg","label_sect_images_colo1_title":"Status Label"},{"name":"panel2","label_sect_images_colo1_icons":"num_02.svg","label_sect_images_colo1_title":"New Label"}]}],"label_data5":[{"logo":"label_07.svg"}],"label_data4":[{"desc1":"ステータスを表す色は<u><a href='/app-styleguide/globalrule/color' target='_blank'>Color palette</a></u>の色の利用を推奨します。","desc2":"特に「完了」や「エラー」を表す場合は、Functional Colorのカラーパレットを参照してください。","logo":"label_04.svg"}],"label_data8":[{"name":"panel1","col1":"Regular","col2":"<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading / Label 12</a></u><br>Text Align-Center<br>#FFFFFF"},{"name":"panel2","col1":"Background color","col2":"<u><a href='/app-styleguide/globalrule/color' target='_blank'>Use Color palette</a></u>"}],"label_data9":[{"name":"panel1","col1":"","col2":"iOS/ Android"},{"name":"panel2","col1":"Regular","col2":"<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading / Label 12</a></u><br>Text Align-Center<br>#FFFFFF"},{"name":"panel3","col1":"Background color","col2":"#FFB900"}]},"toast":{"header":"Toast","sect1_title":"Principle","sect1_desc":[{"desc":"ユーザーアクションの結果をフィードバックするために利用します"},{"desc":"フィードバックを提示することで、ユーザーは自身のアクションの成功/失敗を知ることができます"},{"desc":"トーストで伝える内容は簡潔で明快な必要があります"}],"sect2_title":"Usage","sect2_subtitle":"Usage Example","sect3_title":"Animation","sect3_desc1":"トーストはユーザーに結果を伝えるためだけのものです。","sect3_desc2":"結果のフィードバックが完了した後は、他のコンテンツを阻害しないように、自動的に消す必要があります。","sect4_title":"禁止事項","toast_data1":[{"desc":"アクションアイテムを加えることは禁止します","logo":"toast_03.svg"},{"desc":"2行以上の文字を表示することは禁止します","logo":"toast_04.svg"}],"toast_data2":[{"desc":"","logo":"toast_05.svg"},{"desc":"Safe areaのあるデバイスではSafe area外にも背景色を表示します","logo":"toast_06.svg"}],"toast_data3":[{"toast_data3_tableholder":[{"name":"panel1","toast_data3_colo1_title":"Font","toast_data3_colo2":[{"desc":["<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading / Label/14</a></u>","Text Align-Left","#FFFFFF"]}]},{"name":"panel2","toast_data3_colo1_title":"Background","toast_data3_colo2":[{"desc":["","#3895FF"]}]},{"name":"panel1","toast_data3_colo1_title":"Animation","toast_data3_colo2":[{"desc":["","Slide up","Stay 1.5 seconds","Slide down"]}]}]}]},"tab":{"header":"Tab","sect1_title":"Usage","sect1_desc":[{"desc":"情報量の多い異なる情報群を一画面内に表示する際に利用します"},{"desc":"1st viewで情報郡のサマリーを示し、タップすることで表示を切り替えられるようにします"}],"sect2_title":"Usage Example","sect3_title":"Type","sect4_title":"Detail","sect5_title":"ファーストビューに入りきらない場合","sect5_desc1":"タブの数が多く、ファーストビューにタブをすべて表示することが難しい場合は、画面外へタブを表示することが可能です。","sect5_desc2":"タブは水平方向にスワイプが可能です。","sect5_desc3":"このUIを利用する場合、多くのユーザーはスワイプできることを認識できない場合があります。","sect5_desc4":"画面外へタブが続くことが想起できるよう、右端のタブを見切れるように配置するなど配慮してください。","sect6_title":"Interaction","sect6_desc1":"画面のスクロール時はタブは画面上部に固定し、スクロール操作中でもユーザーがいつでもタブのステータスの確認、切り替えができるようにします。","sect7_title":"Spec","sect7_subtitle":"Regular","sect8_title":"Vertical List Bookmark Tab","tab_data1":[{"tab_data1_tableholder":[{"name":"panel1","tab_data1_colo1_title":"Regular","tab_data1_colo1_icons":"buttons_03_1.svg","tab_data1_colo2":[{"desc":"標準のタブナビゲーションです。タブの切り替えでタブ下のコンテンツ表示を切り替えます。"}]},{"name":"panel2","tab_data1_colo1_title":"Anchor link","tab_data1_colo1_icons":"buttons_03_2.svg","tab_data1_colo2":[{"desc":"画面内を移動するタブナビゲーションです。タブの切替で同一画面内のコンテンツ位置まで自動スクロールします。"},{"desc":"スクロールとタブは連動しており、タブを切り替えなくても、画面内をスクロールしてコンテンツを表示すると、表示コンテンツのタブがアクティブの状態になります。"}]}]}],"tab_data2":[{"tab_data2_tableholder":[{"name":"panel1","tab_data2_colo1_title":"Selected","tab_data2_colo1_icons":"buttons_10_01.svg","tab_data2_colo2":[{"desc":"タブが選択されている状態です。"},{"desc":"画面が表示された際には左端のタブをデフォルトで選択されている状態を推奨します。"},{"desc":"選択状態のタブに利用する色はPayPay Blueの利用を推奨しますが、サービスカラーに合わせて、色を変更することが可能です。"},{"desc":"色を変更する場合、テキスト色は背景色と十分なコントラスト比を担保するようにしてください。"}]},{"name":"panel2","tab_data2_colo1_title":"Unselected","tab_data2_colo1_icons":"buttons_10_02.svg","tab_data2_colo2":[{"desc":"非選択状態のタブです。"},{"desc":"タップで選択状態に切り替え、タブ下にコンテンツを表示します。"}]}]}],"tab_data3":[{"tab_data3_tableholder":[{"name":"panel1","tab_data3_colo1_title":"Selected","tab_data3_colo1_icons":"buttons_10_01.svg","tab_data3_colo2":[{"desc":"タブが選択されている状態です。"},{"desc":"画面が表示された際には左端のタブをデフォルトで選択されている状態を推奨します。"},{"desc":"選択状態のタブに利用する色はPayPay Blueの利用を推奨しますが、サービスカラーに合わせて、色を変更することが可能です。"},{"desc":"色を変更する場合、テキスト色は背景色と十分なコントラスト比を担保するようにしてください。"}]},{"name":"panel2","tab_data3_colo1_title":"Unselected","tab_data3_colo1_icons":"buttons_10_02.svg","tab_data3_colo2":[{"desc":"非選択状態のタブです。"},{"desc":"タップで選択状態に切り替え、同時にコンテンツエリアは同一画面内のコンテンツ位置まで自動スクロールします。"}]}]}],"tab_data4":[{"tab_data4_tableholder":[{"name":"panel1","tab_data4_colo1_title":"Label","tab_data4_colo2":[{"desc":["Active","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></u>","Text Align-Center","#3895FF"]},{"desc":["Disabled","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></u>","Text Align-Center","#606060"]}]},{"name":"panel1","tab_data4_colo1_title":"Selected line","tab_data4_colo2":[{"desc":["","","2px","#3895FF"]}]},{"name":"panel2","tab_data4_colo1_title":"Background","tab_data4_colo2":[{"desc":["","","#FFFFFF","Shadow:  <u><a href='/app-styleguide/globalrule/shadow' target='_blank'>Low-shadow</a></u>"]}]}]}],"tab_data5":[{"tab_data5_tableholder":[{"name":"panel1","tab_data5_colo1_title":"Label","tab_data5_colo2":[{"desc":["Selected","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></u>","Text Align-Center","#FFFFFF"]},{"desc":["Unselected","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></u>","Text Align-Center","#606060"]}]},{"name":"panel1","tab_data5_colo1_title":"Label background","tab_data5_colo2":[{"desc":["Selected","","","","#3895FF"]}]},{"name":"panel2","tab_data5_colo1_title":"Background","tab_data5_colo2":[{"desc":["","","#F7F7F7"]}]}]}]},"selectionControls":{"header":"Selection Controls","sect1_title":"Usage","sect1_desc":[{"desc":"アイテムの選択時に利用します"},{"desc":"アイテムは、役割や現在の状態を瞬時に認識できる表示でなくてはいけません"},{"desc":"アイテム単体では利用せず、必ず選択肢を示すテキストを併記します"}],"sect1_subtitle":"Usage Example","sect2_title":"Type","sect3_title":"Detail","sect4_title":"Radio Button","sect5_title":"Checkbox","sect6_title":"Select Button","sect6_desc1":"Select, Button内にはアイコンを含めることが可能です。","sect6_desc2":"非選択時には色のついたアイコン、選択時には白色のアイコンを利用してください。","sect7_title":"Toggle Switch","sect7_desc1":"Select Button内にはアイコンを含めることが可能です。","sect7_desc2":"非選択時には色のついたアイコン、選択時には白色のアイコンを利用してください。","sect8_title":"Don't","sect9_title":"Spec","sect9_subtitle1":"Radio Button","sect9_subtitle2":"Checkbox","sect9_subtitle3":"Select Button","sect10_title":"Spacing","sect10_subtitle1":"Toggle Switch","selectnControlData1":[{"selectnControlData1_tableholder":[{"name":"panel1","selectnControlData1_colo1_title":"Radio Button","selectnControlData1_colo1_icons":"buttons_03_1.svg","selectnControlData1_colo2":[{"desc":"単一選択の場合に利用します"},{"desc":"ユーザーが選択できる項目は1つのみです"},{"desc":"選択中のものではない項目が選択されると、それまで選択されていた項目は非選択の状態になります"}]},{"name":"panel2","selectnControlData1_colo1_title":"CheckBox","selectnControlData1_colo1_icons":"buttons_03_2.svg","selectnControlData1_colo2":[{"desc":"複数選択が可能な場合に利用します"},{"desc":"Radio Buttonと異なり、ユーザーは同時に複数の項目を選択できます"},{"desc":"選択された項目を再度選択すると非選択状態になります"}]},{"name":"panel3","selectnControlData1_colo1_title":"Select Button","selectnControlData1_colo1_icons":"buttons_03_3.svg","selectnControlData1_colo2":[{"desc":"単一選択・複数選択どちらの場合でも利用可能です"},{"desc":"選択肢を横並びで利用したい場合、選択肢を目立たせたい場合に利用します"},{"desc":"アプリ内での選択UIにはこのTypeの利用を推奨します"}]},{"name":"panel4","selectnControlData1_colo1_title":"Toggle Switch","selectnControlData1_colo1_icons":"buttons_03_4.svg","selectnControlData1_colo2":[{"desc":"項目に対してON/OFFを切り替える場合に利用します"}]}]}],"selectnControlData2":[{"name":"panel1","col1":"非選択時 / Blank","icon":"button_blue_1.svg"},{"name":"panel2","col1":"選択時 / Selected","icon":"button_blue_2.svg"},{"name":"panel3","col1":"選択不可 / Disabled","icon":"button_blue_3.svg"},{"name":"panel4","col1":"編集不可・選択時 / Disabled - Selected","icon":"button_blue_4.svg"}],"selectnControlData3":[{"name":"panel1","col1":"非選択時 / Blank","icon":"button_blue_1.svg"},{"name":"panel2","col1":"選択時 / Selected","icon":"button_blue_2.svg"},{"name":"panel3","col1":"選択不可 / Disabled","icon":"button_blue_3.svg"},{"name":"panel4","col1":"編集不可・選択時 / Disabled - Selected","icon":"button_blue_4.svg"}],"selectnControlData4":[{"name":"panel1","col1":"非選択時 / Blank","icon":"button_blue_1.svg"},{"name":"panel2","col1":"選択時 / Selected","icon":"button_blue_2.svg"}],"selectnControlData5":[{"name":"panel1","col1":"非選択時 / Blank","icon":"button_blue_1.svg"},{"name":"panel2","col1":"選択時 / Selected","icon":"button_blue_2.svg"}],"selectnControlData6":[{"desc":"複数選択可能な項目にRadio Buttonを利用する","logo":"selectioncontrols_08.svg"},{"desc":"単一選択の項目にCheck boxを利用する","logo":"selectioncontrols_09.svg"}],"selectnControlData7":[{"selectnControlData7_tableholder":[{"name":"panel1","selectnControlData7_colo1_title":"Radio Button Icon","selectnControlData7_colo2":[{"desc":["","","24px*24px","Inculding the padding inside","of asset"]}]},{"name":"panel2","selectnControlData7_colo1_title":"Radio Button Color","selectnControlData7_colo2":[{"desc":["Blank","","Stroke","#BABABA","1px","Background","#FFFFF"]},{"desc":["Selected","","Stroke","#3895FF","Background","#FFFFF","Select","#3895FF"]},{"desc":["Disabled","","Stroke","#DDDDD","1px","Background","#EEEEEE"]},{"desc":["Disabled-Selected","","Stroke","#DDDDD","1px","Background","#EEEEEE","#BABABA"]}]},{"name":"panel1","selectnControlData7_colo1_title":"Label","selectnControlData7_colo2":[{"desc":["","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 16 Regular</a></u>","Text Align-Left","#242323"]}]}]}],"selectnControlData8":[{"selectnControlData7_tableholder":[{"name":"panel1","selectnControlData7_colo1_title":"Checkbox Icon","selectnControlData7_colo2":[{"desc":["","","24px*24px/do","Inculding the padding inside","of asset"]}]},{"name":"panel2","selectnControlData7_colo1_title":"Icon Color","selectnControlData7_colo2":[{"desc":["Blank","","Stroke","#BABABA","1px inside","Background","#FFFFF"]},{"desc":["Selected","","Background","#3895FF","Icon","#FFFFF","#FFFFFF"]},{"desc":["Disabled","","Stroke","#DDDDD","1px inside","Background","#EEEEEE"]},{"desc":["Disabled-Selected","","Background","#DDDDD","Icon","#BABABA"]}]},{"name":"panel1","selectnControlData7_colo1_title":"Label","selectnControlData7_colo2":[{"desc":["","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 16 Regular</a></u>","Text Align-Left","#242323"]}]}]}],"selectnControlData9":[{"selectnControlData7_tableholder":[{"name":"panel1","selectnControlData7_colo1_title":"Text Label","selectnControlData7_colo2":[{"desc":["Selected","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></u>","Text Align-Center","#FFFFF"]},{"desc":["Not Selected","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></u>","Text Align-Center","#909090"]}]},{"name":"panel2","selectnControlData7_colo1_title":"Icon","selectnControlData7_colo2":[{"desc":["","","20px*20px/dp"]}]},{"name":"panel1","selectnControlData7_colo1_title":"Background Height","selectnControlData7_colo2":[{"desc":["","","30px/dp"]}]},{"name":"panel1","selectnControlData7_colo1_title":"background Color","selectnControlData7_colo2":[{"desc":["Selected","","Default: #3895FF","Pressed(iOS): #3286E5"]},{"desc":["Not Selected","","Default: #FFFFFF","Pressed(iOS): #F2F2F2","Stroke: #BABABA,1px/dp","inside"]}]},{"name":"panel1","selectnControlData7_colo1_title":"Background Corner","selectnControlData7_colo2":[{"desc":["","","Round = 15px/dp"]}]}]}],"selectnControlData10":[{"selectnControlData7_tableholder":[{"name":"panel1","selectnControlData7_colo1_title":"Button Size","selectnControlData7_colo2":[{"desc":["","","H28*W48px/dp"]}]},{"name":"panel2","selectnControlData7_colo1_title":"Icon Color","selectnControlData7_colo2":[{"desc":["Selected","","#3895FF"]},{"desc":["Unselected","","#EEEEEE"]}]},{"name":"panel1","selectnControlData7_colo1_title":"Button Shadow","selectnControlData7_colo2":[{"desc":["","","#000000","Alpha 0.15","X:0 Y:5","Blur 6px"]}]},{"name":"panel1","selectnControlData7_colo1_title":"Title","selectnControlData7_colo2":[{"desc":["","<u><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 16 Regular</a></u>","Text Align-Left","#242323"]}]}]}]},"loadingAnimation":{"header":"Loading Animation","sect1_title":"Usage","sect1_desc":[{"desc":"読み込み処理を行っている際は、ループアニメーションを表示し、処理中であることをユーザーに知らせます"},{"desc":"アニメーションを配置することでユーザーの体感時間を減らし、スムーズな使い心地を提供します"}],"sect1_subtitle":"Usage Example","sect2_title":"Type","sect2_desc1":"Loading Dot Animation","sect2_desc2":"基本的にこのアニメーションを利用します","sect3_title":"Pull To Refresh","sect3_desc1":"画面のコンテンツを手動で更新する場合はOSデフォルトのPull To Refreshコンポーネントを利用します。","sect4_title":"Spec","sect4_desc1":"Loading Dot Animation","sect5_title":"Pull To Refresh","sect5_desc1":"OSごとのガイドラインに従います。","sect6_title":"Spacing","sect6_desc1":"以下を推奨します。","loadingAnimtnData1":[{"loadingAnimtnData1_tableholder":[{"name":"panel1","loadingAnimtnData1_colo1_title":"Animation","loadingAnimtnData1_colo2":[{"desc":["","150*15px/dp"]}]},{"name":"panel2","loadingAnimtnData1_colo1_title":"Title","loadingAnimtnData1_colo2":[{"desc":["<a href='/app-styleguide/globalrule/typography' target='_blank'>Label 16 bold</a>","Text Align-Center","","#242323"]}]},{"name":"panel3","loadingAnimtnData1_colo1_title":"Text(Option)","loadingAnimtnData1_colo2":[{"desc":["<a href='/app-styleguide/globalrule/typography' target='_blank'>Body 12</a>","Text Align-Center","","#606060"]}]},{"name":"panel4","loadingAnimtnData1_colo1_title":"Buttons","loadingAnimtnData1_colo2":[{"desc":["<a href='/app-styleguide/component/buttons' target='_blank'>Buttons</a>",""]}]}]}],"loadingAnimtnData2":[{"name":"panel3","clsname":"half_sheets_sect_pannel","animatn_col1":"Animation","animatn_col2":"48*48px/dp"}]},"list":{"list_heading":"List","list_sect1_title":"Usage","list_sect1_desc":"<div><span>•</span><span>複数ある情報を整理し、一覧性を高く表示する際に利用します</span></div><div><span>•</span><span>現在のステータスやアクション内容がある場合は簡潔に示します</span></div><div><span>•</span><span>リスト内の構成には規則性を設け、瞬時に内容を把握・比較できるように情報の整理をします</span></div><div><span>•</span><span>テキストやアイコンで何を示しているか簡潔に伝え、その詳細やアクション内容も同じく簡潔に表示します</span></div><div><span>•</span><span>リストの体裁はOS標準のUIに準拠します</span></div>","list_sect2_title":"Usage Example","list_sect2_images":"list_sect2_images.svg","list_sect3_title":"Type","list_sect3_images":[{"name":"panel1","title":"<div>Regular List</div><div>Single line</div>","images1":"pagecontrols_sect3_images1.svg","images2":"pagecontrols_sect3_images2.svg","hint1":"iOS","hint2":"Android"},{"name":"panel2","title":"<div>Regular List</div><div>Multi-line</div>","images1":"pagecontrols_sect3_images3.svg","images2":"pagecontrols_sect3_images4.svg","hint1":"iOS","hint2":"Android"},{"name":"panel3","title":"Action Component List","images1":"pagecontrols_sect3_images5.svg","images2":"pagecontrols_sect3_images6.svg","hint1":"iOS","hint2":"Android"},{"name":"panel4","title":"Edit List","images1":"pagecontrols_sect3_images7.svg","images2":"pagecontrols_sect3_images8.svg","hint1":"iOS","hint2":"Android"},{"name":"panel5","title":"Alternative List","images1":"pagecontrols_sect3_images9.svg","images2":"pagecontrols_sect3_images10.svg","hint1":"iOS","hint2":"Android"}],"list_sect4_title":"Detail","list_sect4_subtitle":"Regular List","list_sect4_images":"list_sect4_images.svg","list_sect4_tblholder":[{"name":"panel1","icons":"redicon1.svg","list_sect4_col1":"List Header","list_sect4_col2":[{"type":"text","content":"複数のリストをグルーピングし、大項目としてタイトルを付与する場合に利用します"}]},{"name":"panel2","icons":"redicon2.svg","list_sect4_col1":"List Sub Header (Option)","list_sect4_col2":[{"type":"icons","content":"redicon1.svg"},{"type":"text","content":"のリストヘッダーの中でさらに小項目に分類しタイトルを付与する場合に利用します"},{"type":"text","content":"大項目は必ず"},{"type":"icons","content":"redicon1.svg"},{"type":"text","content":"リストヘッダーとし、"},{"type":"icons","content":"redicon2.svg"},{"type":"text","content":"サブリストヘッダーを大項目として利用することはできません"}]},{"name":"panel3","icons":"redicon3.svg","list_sect4_col1":"Icon (Option)","list_sect4_col2":[{"type":"text","content":"テキストの内容を視覚的に示す場合、アイコンを配置します"}]},{"name":"panel4","icons":"redicon4.svg","list_sect4_col1":"Title","list_sect4_col2":[{"type":"text","content":"コンテンツを簡潔に短文で表示します"},{"type":"text","content":"1行以内に収まる文字数を推奨します"}]},{"name":"panel5","icons":"redicon5.svg","list_sect4_col1":"Description (Option)","list_sect4_col2":[{"type":"text","content":"Titleを説明する補足的なテキストを表示します"},{"type":"icons","content":"redicon4.svg"},{"type":"text","content":"Titleと同様に簡潔に短文で表示します"},{"type":"text","content":"1行以内に収まる文字数を推奨します"}]},{"name":"panel6","icons":"redicon6.svg","list_sect4_col1":"Action Item (Option)","list_sect4_col2":[{"type":"text","content":"コンテンツのステータスや、アクション可能なアイテムを右寄せで配置します"},{"type":"text","content":"テキストを表示する場合は5文字以内を推奨します"},{"type":"text","content":"TitleやDescriptionとの間に十分な余白を担保します"},{"type":"text","content":"iOS/Webの場合、タップして下層画面に遷移可能なリストには必ずアイコンを付与します"},{"type":"text","content":"Androidにはアイコンを付与しません"}]}],"list_sect5_title":"Action Component List","list_sect5_images":"list_sect5_images.svg","list_sect5_tblholder":[{"name":"panel1","icons":"skyblueicon1.svg","col1":"ボタンを配置"},{"name":"panel2","icons":"skyblueicon2.svg","col1":"トグルスイッチを配置"}],"list_sect6_title":"Edit List","list_sect6_images":"list_sect6_images.svg","list_sect6_tblholder":[{"name":"panel1","icons":"skyblueicon1.svg","col1":"未入力"},{"name":"panel2","icons":"skyblueicon2.svg","col1":"入力中"},{"name":"panel3","icons":"skyblueicon3.svg","col1":"入力済み・非選択時"},{"name":"panel4","icons":"skyblueicon4.svg","col1":"エラー"}],"list_sect7_title":"Interaction","list_sect7_subtitle":"Tap","list_sect7_desc":"<div>Expand areaをタップして、展開前/展開後のUIを切り替えます。</div><div>タップ時にはタップフィードバックを表示します。</div><div>Specを参照してください。</div>","list_sect7_hint":"参考：<a href='/app-styleguide/globalrule/interaction' target='_blank'>Interaction</a>","list_sect8_subtitle":"Scroll","list_sect8_desc":"<div>List Headerのあるリストの場合、スクロール時に画面のHeader直下にList Headerを固定します。</div><div>List Headerを固定することでスクロール中に表示されているリストの情報を明確に伝えることができます。</div>","list_sect8_images":"list_sect8_images.svg","list_sect9_title":"Specs","list_sect9_subtitle":"Cross-platform adaptation","list_sect9_desc":"<div>OSごとにListの各パーツの表示に差異があります。</div>","list_sect9_images":"list_sect9_images.svg","list_sect9_tblholder":[{"name":"panel1","icons":"","col1":"","col2":"iOS","col3":"Android"},{"name":"panel2","icons":"skyblueicon1.svg","col1":"Action Item","col2":"タップして下層画面に遷移可能なリストには必ずアイコンを付与します","col3":"遷移できる・できないにかかわらずアイコンを置かない"},{"name":"panel3","icons":"skyblueicon2.svg","col1":"Divider","col2":"罫線の左端に16pxのMarginを付与","col3":"罫線の端にMarginを付与しない"}],"list_sect10_icons":"redicon1.svg","list_sect10_subtitle":"List Header","list_sect10_images":"list_sect10_images.svg","list_sect10_tblholder":[{"name":"panel1","col1":" Font","col2":"<div><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading 16</a></div><div>Text Align-Left</div><div>#606060</div>"},{"name":"panel2","col1":"Background","col2":"#FFFFFF"},{"name":"panel3","col1":"Scroll","col2":"Shadow : <a href='/app-styleguide/globalrule/shadow' target='_blank'>Low-shadow</a>"}],"list_sect11_icons":"redicon2.svg","list_sect11_subtitle":"List Sub Header (Option)","list_sect11_images":"list_sect11_images.svg","list_sect11_tblholder":[{"name":"panel1","col1":" Font","col2":"<div><a href='/app-styleguide/globalrule/typography' target='_blank'>Heading 14</a></div><div>Text Align-Left</div><div>#909090</div>"},{"name":"panel2","col1":"Background","col2":"#FFFFFF"}],"list_sect12_icons":"redicon3.svg","list_sect12_subtitle":"Icon","list_sect12_images":"list_sect12_images.svg","list_sect12_tblholder":[{"name":"panel1","col1":" List Icon","col2":"<div>24*24px/dp</div><div>IconのSpecについては<a href='/app-styleguide/globalrule/icongraphy' target='_blank'>Iconography</a>の項目を参照</div><div>Iconを配置する場合はTitleが複数行の場合も水平方向に中央寄せする</div>"}],"list_sect13_icons1":"redicon4.svg","list_sect13_icons2":"redicon5.svg","list_sect13_icons3":"redicon6.svg","list_sect13_subtitle1":"Title","list_sect13_subtitle2":"Description","list_sect13_subtitle3":"Action Item","list_sect13_images":[{"name":"panel1","hint":"iOS","images":"list_sect13_images1.svg"},{"name":"panel2","hint":"Android","images":"list_sect13_images2.svg"}],"list_sect13_tblholder":[{"name":"panel1","col1":" Back ground","col2":"<div><b>Default :</b></div><div>Back ground : #FFFFFF</div><div><br/></div><div><b>Pressed( iOS ) :</b></div><div>Back ground : #F2F2F2</div>"},{"name":"panel2","col1":" Divider","col2":"<div><b>Default :</b></div><div>#EEEEEE</div><div>1px/dp</div><div><br/></div><div><b>Error - Edit List</b></div><div>#FD5C5C</div><div>1px/dp</div>"},{"name":"panel3","col1":" Title","col2":"<div><a href='/app-styleguide/globalrule/typography' target='_blank'>Body 16 Regular</a></div><div>Text Align-Left</div><div>#242323</div>"},{"name":"panel4","col1":" Description","col2":"<div><a href='/app-styleguide/globalrule/typography' target='_blank'>Body 16 Regular</a></div><div>Text Align-Left</div><div>#606060</div>"},{"name":"panel5","col1":"Action Item","col2":"<div><b>Icon</b></div><div>24*24px/dp</div><div><br/></div><div><b>Text-Label</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Body 14 Regular</a></div><div>Text Align-Right</div><div>#606060</div>"},{"name":"panel6","col1":"Action Item - Edit List","col2":"<div><b>Text-Empty</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Body 14 Regular</a></div><div>Text Align-Right</div><div>#BABABA</div><div><br/></div><div>Text-Filled</div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Body 14 Regular</a></div><div>Text Align-Right</div><div>#242323</div>"},{"name":"panel7","col1":"Error text - Edit List","col2":"<div><b>Text-Error</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Body 12 Regular</a></div><div>Text Align-Left</div><div>#FD5C5C</div>"},{"name":"panel8","col1":"Margin","col2":"<div>8px/dp</div>"}]},"slider":{"slider_heading":"Slider","slider_sect1_title":"Usage","slider_sect1_desc":"<div><span>•</span><span>選択可能な値の最小値と最大値の範囲から固定の値を選択、または範囲を選択できます</span></div><div><span>•</span><span>選択可能な範囲が可視化され、また選択時の状態も可視化されるため、相対的な値の認知が容易です</span></div><div><span>•</span><span>キーボードでの値の入力やボタンのタップカウントよりも直感的な操作が可能です</span></div>","slider_sect2_title":"Usage Example","slider_sect2_desc":"音量や価格の範囲の選択に利用します","slider_sect2_images":"slider_sect2_images.svg","slider_sect3_title":"Type","slider_sect3_subtitle":"Relative Slider","slider_sect3_desc":"<div>音量の調整など、特定の値を入力することが難しい場合に使用します。</div><div>バーの両端にアイコンを設置し、ユーザーはバー上の任意の位置を選択可能です。</div>","slider_sect3_images":"slider_sect3_images.svg","slider_sect4_subtitle":"Range Slider","slider_sect4_desc":"<div>期間や料金の範囲の指定など、特定の2点の値の範囲を選択する場合に利用します。</div><div>両脇に値の最小値と最大値を表示し、ユーザーはバー上の2点の値を変更することで範囲の選択が可能です。</div>","slider_sect4_images":"slider_sect4_images.svg","slider_sect5_subtitle":"Scale Slider","slider_sect5_desc":"<div>文字サイズの変更など、あらかじめ決められた値から選択する場合に利用します。</div><div>両端とバー上に選択可能なポイントを設定し、選択肢をテキストで表示します。ユーザーは設定されたポイントのみ選択可能です。</div><div>ポイントが設定されていない値は選択できません。</div>","slider_sect5_images":"slider_sect5_images.svg","slider_sect6_title":"Detail","slider_sect6_subtitle":"Relative Slider","slider_sect6_images":"slider_sect6_images.svg","slider_sect6_tblholder":[{"name":"panel1","icons":"redicon1.svg","col1":"Active Track","col2":"<div>ユーザーの選択した範囲を表します</div><div>最小値から選択した値までをアクティブな色で表すことで、バー内での値を相対的に認識できます</div>"},{"name":"panel2","icons":"redicon2.svg","col1":"Active Point","col2":"<div>バー上の未選択の値を表します</div>"},{"name":"panel3","icons":"redicon3.svg","col1":"Select Point","col2":"<div>ドラッグでコントロール可能な部分です</div><div>アクションと同時に選択状態を表します</div>"},{"name":"panel4","icons":"redicon4.svg","col1":"Track Value","col2":"<div>Sliderの役割りをアイコンで表現します</div><div>最小値と最大値の形状には差をつけ、役割りと状態を直感的に伝える必要があります</div>"}],"slider_sect7_subtitle":"Scale Slider","slider_sect7_images":"slider_sect7_images.svg","slider_sect7_tblholder":[{"name":"panel1","icons":"redicon1.svg","col1":"Active Track","col2":"<div>ユーザーの選択した範囲を表します。選択範囲をアクティブな色で表すことで、バー内での値を相対的に認識できます</div>"},{"name":"panel2","icons":"redicon2.svg","col1":"Inactive Track","col2":"<div>バー上の未選択の値を表します</div>"},{"name":"panel3","icons":"redicon3.svg","col1":"Active Point","col2":"<div>ドラッグでコントロール可能な部分です。アクションと同時に選択状態を表します</div>"},{"name":"panel4","icons":"redicon4.svg","col1":"Track Value","col2":"<div>左端に最小値、右端に最大値をテキストで表示します</div>"},{"name":"panel5","icons":"redicon5.svg","col1":"Input Value Balloon (Option)","col2":"<div>選択範囲中の最小値、最大値をテキストで表示します。表示は任意ですが、表示することでユーザーの利便性は向上します。挙動についてはInterctionの項目を参照してください</div>"}],"slider_sect8_subtitle":"Scale Slider","slider_sect8_images":"slider_sect8_images.svg","slider_sect8_tblholder":[{"name":"panel1","icons":"redicon1.svg","col1":"Sample Value (Option)","col2":"<div>値の示す状態を表示します。表示は任意ですが、表示することでユーザーは選択可能な値をより直感的に知ることができます。選択された値のSample Valueもアクティブ状態になります</div>"},{"name":"panel2","icons":"redicon2.svg","col1":"Inactive Point","col2":"<div>未選択のPointです。Scale Sliderの場合、Inactive Point以外は選択できません。バーをタップした場合、タップ位置がより近いInactive Pointが選択されます</div>"},{"name":"panel3","icons":"redicon3.svg","col1":"Active Point","col2":"<div>値が選択された状態です</div>"},{"name":"panel4","icons":"redicon4.svg","col1":"Track Value","col2":"<div>選択可能な値をテキストで表示します。簡潔に短文で表示します。2〜4文字以内のテキスト数を推奨します</div>"}],"slider_sect9_title":"Interaction","slider_sect9_subtitle":"Select Feedback","slider_sect9_desc":"<div>アニメーションを利用して、状態の変化をより明確に伝えます。</div><div>また、選択が完了したことをより直感に伝えるために、iOSではHaptic Feedbackを利用することを推奨します</div>","slider_sect9_images":[{"name":"panel1","icons":"slider_sect9_images1.svg","hint":"<div>選択時のActive Pointの移動</div><div>Active Pointは選択された値のPointまでスライドして移動します</div>"},{"name":"panel2","icons":"slider_sect9_images2.svg","hint":"<div>選択時のInput Value Balloonの拡大</div><div>操作中のActive PointのInput Value Balloonは拡大されます</div><div>拡大することで、操作中の値をより明示的にします</div><div>指を離し値が確定するとBalloonは元の大きさに戻ります</div>"}],"slider_sect10_subtitle":"Support Feedback","slider_sect10_desc":"<div>ユーザーの選択した状態を明確に示すために、選択時にフィードバックを追加することを推奨します。</div><div>以下はフィードバックの例です。</div>","slider_sect10_images":[{"name":"panel1","icons":"slider_sect10_images1.svg","hint":"<div>音量設定</div><div>選択した値のテスト音を鳴らし、選択した音量を確認することができます</div>"},{"name":"panel2","icons":"slider_sect10_images2.svg","hint":"<div>文字サイズ設定</div><div>スライダーの下部にサンプルUIを表示し、スライダーの選択した値と連動してUI上のテキストサイズの大きさを変化させ、実際のサイズを確認することができます</div>"},{"name":"panel2","icons":"slider_sect10_images3.svg","hint":"<div>価格の選択</div>"}],"slider_sect11_title":"Specs","slider_sect11_subtitle":"Relative Slider","slider_sect11_images":"slider_sect11_images.svg","slider_sect11_tblholder":[{"name":"panel1","col1":"Active Track","col2":"<div>Hight : 2px/dp</div><div>Corner Round : 2px</div><div>#3895FF</div>"},{"name":"panel2","col1":"Inactive Track","col2":"<div>Hight : 2px/dp</div><div>Corner Round : 2px</div><div>#EEEEEE</div>"},{"name":"panel3","col1":"Active Point","col2":"<div>12*12px/dp</div><div>タップエリアは35*35px/dp以上担保します</div>"},{"name":"panel4","col1":"Track Value","col2":"<div>24*24px/dp</div>"}],"slider_sect12_subtitle":"Scale Slider","slider_sect12_images":[{"name":"panel1","icons":"slider_sect12_images1.svg"},{"name":"panel2","icons":"slider_sect12_images2.svg"}],"slider_sect12_tblholder":[{"name":"panel1","col1":"Active Track","col2":"<div>Hight : 2px/dp</div><div>Corner Round : 2px</div><div>#3895FF</div>"},{"name":"panel2","col1":"Inactive Track","col2":"<div>Hight : 2px/dp</div><div>Corner Round : 2px</div><div>#EEEEEE</div>"},{"name":"panel2","col1":"Active Point","col2":"<div>12*12px/dp</div><div>タップエリアは35*35px/dp以上担保します</div>"},{"name":"panel3","col1":"Track Value (Text)","col2":"<div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Regular</a></div><div>Text Align-Center</div><div>#242323</div>"},{"name":"panel4","col1":"Input Value Balloon (Option)","col2":"<div><b>Back ground</b></div><div>#FFFFFF</div><div>Shadow: <a href='/app-styleguide/globalrule/shadow' target='_blank'>Low Shadow</a></div><div><br/></div><div><b>Normal</b></div><div>数字</div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 16 Body</a></div><div>Text Align-Center</div><div>#3895FF</div><div><br/></div><div>単位（漢字表記）</div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 12</a></div><div>Text Align-Center</div><div>#3895FF</div><div><br/></div><div><b>Selected</b></div><div>数字</div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 20 Bold</a></div><div>Text Align-Center</div><div>#3895FF</div><div><br/></div><div>単位（漢字表記）</div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 bold</a></div><div>Text Align-Center</div><div>#3895FF</div>"}],"slider_sect13_subtitle":"Scale Slider","slider_sect13_images":"slider_sect13_images.svg","slider_sect13_tblholder":[{"name":"panel1","col1":"Sample Value (Option)","col2":"<div><b>Default</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Regular</a></div><div>Text Align-Center</div><div>#606060</div><div><br/></div><div>Selected</div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 14 Bold</a></div><div>Text Align-Center</div><div>#3895FF</div><div>テキストサイズは用途によって変更可能です</div>"},{"name":"panel2","col1":"Inactive Point","col2":"<div>Hight : 2px/dp</div><div>Corner Round : 2px</div><div>#EEEEEE</div>"},{"name":"panel3","col1":"Inactive Point","col2":"<div>Default</div><div>12*12px/dp</div><div>タップエリアは35*35px/dp以上担保します</div><div></div><div>Selected</div><div>20*20px/dp</div><div>タップエリアは35*35px/dp以上担保します</div>"},{"name":"panel4","col1":"Track Value","col2":"<div><b>Default</b></div><div><a href='/app-styleguide/globalrule/typography' target='_blank'>Label 12 Regular</a></div><div>Text Align-Center</div><div>#909090</div>"}]}}}}