Upgrade to Pro — share decks privately, control downloads, hide ads and more …

愛される管理画面の作り方

 愛される管理画面の作り方

Sharing Issues Online #1 (Nov 6, 2020) 登壇資料
#sharing_Issues
https://smartcamp.connpass.com/event/191413/

Akira Kuratani

November 06, 2020
Tweet

More Decks by Akira Kuratani

Other Decks in Technology

Transcript

  1. ɹɹɹ
    גࣜձࣾνʔϜεϐϦοτ
    Ѫ͞ΕΔ؅ཧը໘ͷ࡞Γํ
    How to make the admin screen
    Sharing Issues Online #1

    View Slide

  2. ɹɹɹ
    ɹɹɹ
    ࣗݾ঺հ
    About me

    View Slide

  3. ɹɹɹ
    ࣗݾ঺հ
    Akira Kuratani / ૔୩ জ
    ɹɹɹ@a_kuratani
    ɹɹɹTeamSpirit Inc.
    ɹɹɹService Development Div.
    ɹɹɹTSF Engineering Team / Director
    ɹɹɹPodcast(migration.fm)

    View Slide

  4. ɹɹɹ
    ɹɹɹ
    ձࣾ঺հ
    Our company

    View Slide

  5. ɹɹɹ
    ձࣾ঺հ
    すべての⼈を、創造する⼈に。
    株式会社チームスピリット は、勤怠管理・経費精算・⼯数管理など従業員が⽇々
    利⽤するアプリケーションをひとつのシステムにまとめ、出社から退社までの活
    動を⼀元的に記録することで働き⽅を⾒える化し、創造的な時間を増やすことで
    ⽣産性向上を実現するサービス「TeamSpirit」を提供しています。
    ミッション
    個を強く。チームを強く。
    ビジョン
    Mission
    Vision
    1996年11⽉
    埼⽟県北本市に有限会社デジタルコースト(資本⾦3,000千円)
    を設⽴
    2008年4⽉ デジタルコースト株式会社へ組織変更
    2010年6⽉ 株式会社セールスフォース・ドットコムとAppExchangeパート
    ナー契約を締結
    2010年11⽉
    株式会社セールスフォース・ドットコムとOEMパートナー契約を
    締結
    2010年12⽉ 本店所在地を東京都千代⽥区麹町⼆丁⽬4番地へ移転
    2011年10⽉ 株式会社セールスフォース・ドットコムと資本提携
    2012年4⽉
    働き⽅改⾰プラットフォーム「TeamSpirit」のサービス提供を開

    2012年9⽉ 商号を株式会社チームスピリットへ変更
    2013年12⽉ 本店所在地を東京都中央区⼋重洲⼆丁⽬8番8号へ本店を移転
    2013年12⽉ プロジェクト原価管理システム「TeamSpirit Leaders」のサー
    ビス提供を開始
    2014年10⽉ 本店所在地を東京都中央区京橋⼆丁⽬5番18号へ本店を移転
    2016年5⽉
    salesforce.com, inc.より「Salesforce Gold ISV Partner」に認

    2017年11⽉ シンガポール⼦会社、TeamSpirit Singapore Pte. Ltd.を設⽴
    2018年3⽉
    salesforce.com, inc.より「AppExchange Premier Partner」に
    認定
    2018年8⽉ 東京証券取引所マザーズ市場に上場
    2019年5⽉ セールスフォース・ドットコムより⽇本で唯⼀のAppExchange
    Premier Partnerに認定
    株式会社チームスピリット
    TeamSpirit Inc.
    〒104-0031 東京都中央区京橋⼆丁⽬5番18号 京橋創⽣館4階
    設⽴︓1996年11⽉13⽇
    代表取締役︓荻島 浩司
    沿⾰

    View Slide

  6. ɹɹɹ
    MISSION
    ͢΂ͯͷਓΛ૑଄͢Δਓʹ
    ୭Ͱ΋Ͱ͖Δ܁Γฦ͠ͷ࡞ۀ͸AI΍ϩϘοτʹ೚ͤɺ
    ͢΂ͯͷਓ͕ʮ૑଄తͳ׆ಈʯʹूதͰ͖Δ؀ڥΛఏڙ͍ͨ͠ͱ͍͏૝͍͔ΒఆΊ·ͨ͠ɻ
    ͢΂ͯͷਓ͕૑଄ੑΛൃش͠ɺਓͷ਺͚ͩੈքΛม͍͑ͯ͘ɻ
    ͜Ε͕ɺࣄۀͷ໨తͰ͋Γࢲͨͪͷʮଘࡏҙٛʯͩͱࢥ͍ͬͯ·͢ɻ

    View Slide

  7. ɹɹɹ
    ɹɹɹ
    ࣄۀ঺հ
    Our Service

    View Slide

  8. ɹɹɹ
    ༷ʑͳػೳ͕࿈ܞͯ̍͠αʔϏεʹ౷߹ʂ
    「TeamSpirit」シリーズは、業務遂⾏に必要なさまざま
    な事務作業を⼀体で処理できるクラウドシステム。これ
    までの作業の⼿間や時間を圧倒的に短縮し、働く⼈それ
    ぞれが本来の仕事に集中できる余裕を創出することで、
    充実した仕事ができる環境を整えます。
    勤怠管理
    就業管理
    経費精算
    カレンダー
    ⼯数管理
    電⼦稟議
    SNS
    ダッシュボード
    マイナンバー管理
    社員情報管理
    シフト管理
    プロジェクト
    原価管理
    なんと ⽉額 600円/1⼈
    (50ライセンス、30,000円から)
    →料⾦表を⾒る
    P.5
    マイナンバーエンジン
    TeamSpirit Leaders
    TeamSpirit HR
    ※オプション製品

    View Slide

  9. ɹɹɹ
    ձࣾ঺հ
    導⼊実績 Award
    1350社 26万ID突破︕
    0
    200
    400
    600
    800
    1,000
    1,200
    1,400
    1,600
    0
    50,000
    100,000
    150,000
    200,000
    250,000
    300,000
    FY12
    FY13
    FY14
    FY15
    FY16
    FY17
    FY18
    FY19
    FY20Q
    3
    契約ライセンス数/社数の推移
    株式会社セールスフォース・ドットコム
    「AppExchange Partner of the Year 2019」受賞

    View Slide

  10. ɹɹɹ
    ओͳػೳɿۈଵɾबۀ؅ཧ
    モバイル
    出社打刻
    勤務表で出退社情報や残業を確認
    休暇情報の確認も
    勤怠に関する各種申請も
    打刻時間がリアルタイムにグラフ化
    多様な打刻⽅法
    PC
    ICカード
    ※オプション
    休暇の残⽇数は︖
    スマートドア
    ※オプション

    View Slide

  11. ɹɹɹ
    ओͳػೳɿܦඅਫ਼ࢉ
    出張・交際費などの事前申請
    TBコーポレートソリューションズが提供する
    出張⼿配サービス JʼsNAVI Jr. から⼿配可能(オ
    プション)
    Ekitanと連携した経路検索が可能。
    交通費などの精算も簡単
    仕訳出⼒データの作成
    様々な給与計算ソフトと連携可能。

    View Slide

  12. ɹɹɹ
    ओͳػೳɿ޻਺؅ཧ
    スライダーによる⼯数⼊⼒
    ⼯数の⾒える化(ダッシュボード)
    勤怠打刻による
    実労働時間
    ⼯数⼊⼒による
    作業時間の合計
    ⼊⼒された⼯数情報は⽉ごとに合計が⾒える他、
    レポート・ダッシュボードを使い、さまざまな切り⼝でグラフィカル
    に⾒える化。

    View Slide

  13. ɹɹɹ
    Salesforce ͱ͸ʁ
    ސ٬؅ཧʢCRMʣʗӦۀࢧԉʢSFAʣΛத৺ͱͨ͠Ϋϥ΢υΞϓϦέʔγϣϯ੡඼
    ओͳ੡඼
    Sales Cloud
    Marketing Cloud
    Experience Cloud
    Salesforce Platform
    ސ٬৘ใ؅ཧʹج͍ͮͨϦʔυ֫ಘʙ঎ஊʙड஫ͱ͍ͬͨ
    ӦۀϓϩηεΛࢧԉ͢ΔӦۀࢧԉπʔϧ
    Ϧʔυ֫ಘ΍ސ٬φʔνϟϦϯάΛ໨తͱͨ͠
    ϚʔέςΟϯάΦʔτϝʔγϣϯπʔϧ
    ސ٬΍୅ཧళͳͲͷύʔτφʔΛର৅ͱͨ͠
    ΧελϚʔαϙʔτίϛϡχέʔγϣϯπʔϧ
    ϊʔίʔυʗϓϩίʔυͰΞϓϦΛ։ൃͰ͖ΔϓϥοτϑΥʔϜ
    ։ൃͨ͠ΞϓϦ͸ϏδωεΞϓϦϚʔέοτͰൢചͰ͖Δ

    View Slide

  14. ɹɹɹ
    ɹɹɹ
    Ѫ͞ΕΔ؅ཧը໘ͷ࡞Γํ
    How to make the admin screen

    View Slide

  15. ɹɹɹ
    ɹɹɹ
    ؅ཧը໘͸։ൃ޻਺͕
    ͔͔ΔΘΓʹར༻ऀ͕গͳ͍
    The admin screen takes a lot of man-hours to develop,
    but not many people use it.

    View Slide

  16. ɹɹɹ
    ɹɹɹ
    WHY
    ͳͥѪ͞ΕΔ؅ཧը໘͕ඞཁͳͷ͔ʁ
    Why do admin screen need to be loved?

    View Slide

  17. ɹɹɹ
    ɹɹɹ
    WHYɹͳͥѪ͞ΕΔ؅ཧը໘͕ඞཁͳͷ͔ʁ
    ಋೖͷਪਐ෦໳͸؅ཧ෦໳ͷ͜ͱ͕ଟ͍
    ؅ཧ෦໳͸؅ཧը໘ΛΑ͘ར༻͢Δ
    ؅ཧը໘ͷ࢖͍উख͸ಋೖਪਐͷಈػʹͳΔ
    ୲౰ऀҾ͖ܧ͕͗೉͍͠ͱղ໿ʹͭͳ͕Δ

    View Slide

  18. ɹɹɹ
    ɹɹɹ
    WHAT
    ͲΜͳ؅ཧը໘͕Ѫ͞ΕΔͷ͔ʁ
    What kind of admin screen will be loved?

    View Slide

  19. ɹɹɹ
    ɹɹɹ
    WHATɹͲΜͳ؅ཧը໘͕Ѫ͞ΕΔͷ͔ʁ
    ෆॆ଍ ॆ଍
    ຬ଍
    ෆຬ
    ຬ଍ײ
    ॆ଍ঢ়گ
    ङ໺Ϟσϧ
    Kano Model
    ෼͔Γ΍͘͢
    ࢖͍উख͕ྑ͍
    ັྗత඼࣭
    ۀ຿ػೳ͕
    ἧ͍ͬͯΔ
    Ұݩత඼࣭
    ෆ۩߹͕ͳ͘
    ҆ఆͯ͠ར༻Ͱ͖Δ
    ౰ͨΓલ඼࣭

    View Slide

  20. ɹɹɹ
    ɹɹɹ
    PROBLEM
    ؅ཧը໘๊͕͑Δ໰୊ͱ͸ʁ
    What kind of admin screen will be loved?

    View Slide

  21. ɹɹɹ
    ɹɹɹ
    PROBLEMɹ؅ཧը໘๊͕͑Δ໰୊
    ᶃ ػೳ΍ઃఆ͕ଟ͘ɺ୳͖͠Εͳ͍
    ᶄ ػೳ΍ઃఆ͕ͦΕͧΕ೉ղͰ͋Δ
    ᶅ ෳ਺ͷػೳ΍ઃఆ͕ؔ࿈͍ͯ͠Δ

    View Slide

  22. ɹɹɹ
    ɹɹɹ
    1st PROBLEM
    ػೳ΍ઃఆ͕ଟ͘ɺ୳͖͠Εͳ͍
    Too many features and settings to find

    View Slide

  23. ɹɹɹ
    ɹɹɹ
    1st ػೳ΍ઃఆ͕ଟ͘ɺ୳͖͠Εͳ͍

    View Slide

  24. ɹɹɹ
    ɹɹɹ
    1st ػೳ΍ઃఆ͕ଟ͘ɺ୳͖͠Εͳ͍

    View Slide

  25. ɹɹɹ
    ɹɹɹ
    1st SOLUTION
    ؅ཧϝχϡʔʹݕࡧػೳΛ͚ͭΔ
    Add a search function to the admin menu

    View Slide

  26. ɹɹɹ
    ɹɹɹ
    1st ػೳ΍ઃఆ͕ଟ͘ɺ୳͖͠Εͳ͍
    ؅ཧϝχϡʔʹݕࡧػೳΛ͚ͭΔ

    View Slide

  27. ɹɹɹ
    ɹɹɹ
    2nd PROBLEM
    ػೳ΍ઃఆͷͦΕͧΕ͕೉ղͰ͋Δ
    Each of the features and settings are difficult to understand

    View Slide

  28. ɹɹɹ
    ɹɹɹ
    2nd ػೳ΍ઃఆͷͦΕͧΕ͕೉ղͰ͋Δ
    ઃఆ߲໨໊͚ͩͰ͸ཧղͰ͖ͳ͍

    View Slide

  29. ɹɹɹ
    ɹɹɹ
    2st SOLUTION
    ӡ༻؍఺ͷઆ໌Λॆ࣮ͤ͞Δ
    Enhance the explanation of the operational viewpoint

    View Slide

  30. ɹɹɹ
    ɹɹɹ
    2nd ػೳ΍ઃఆͷͦΕͧΕ͕೉ղͰ͋Δ
    ϔϧϓϖʔδ΁ͷϦϯΫ
    ϙοϓΞοϓͰઆ໌දࣔ
    ஫ҙࣄ߲Λදࣔ
    ӡ༻؍఺ͷઆ໌Λॆ࣮ͤ͞Δ

    View Slide

  31. ɹɹɹ
    ɹɹɹ
    3rd PROBLEM
    ෳ਺ͷػೳ΍ઃఆ͕ؔ࿈͍ͯ͠Δ
    Multiple functions and settings are related

    View Slide

  32. ɹɹɹ
    ɹɹɹ
    3rd ෳ਺ͷػೳ΍ઃఆ͕ؔ࿈͍ͯ͠Δ
    ؅ཧϝχϡʔ
    ઃఆ̍
    ػೳ̗
    ઃఆ̎
    ػೳ̖
    ΍Γ͍ͨ͜ͱͱ؅ཧϝχϡʔ͕ରԠ͠ͳ͍
    Ͳͷػೳ͕ؔ࿈͢Δʁ
    Ͳͷઃఆ͕ؔ࿈͢Δʁ
    Ͳͷॱ൪Ͱ࣮ࢪ͢Δʁ

    View Slide

  33. ɹɹɹ
    ɹɹɹ
    3st SOLUTION
    ΍Γ͍ͨ͜ͱ͔ΒḷΕΔ
    I can learn how to do it from what I want to do

    View Slide

  34. ɹɹɹ
    ɹɹɹ
    3rd ෳ਺ͷػೳ΍ઃఆ͕ؔ࿈͍ͯ͠Δ
    ΍Γ͍ͨ͜ͱ͔ΒḷΕΔ
    ؅ཧϝχϡʔ
    ઃఆ̍
    ػೳ̗
    ઃఆ̎
    ػೳ̖
    ΍Γ͍ͨ͜ͱ
    ɾ̛̖̦
    ɾϔϧϓ
    ɾΨΠυ
    ɾϚχϡΞϧɹͳͲ

    View Slide

  35. ɹɹɹ
    ɹɹɹ
    3rd ෳ਺ͷػೳ΍ઃఆ͕ؔ࿈͍ͯ͠Δ
    ΍Γ͍ͨ͜ͱ͔ΒḷΕΔ

    View Slide

  36. ɹɹɹ
    ɹɹɹ
    Ѫ͞ΕΔ؅ཧը໘ͷ࡞Γํ
    How to make the admin screen
    ·ͱΊ

    View Slide

  37. ɹɹɹ
    ·ͱΊ
    ͳͥɺ؅ཧը໘͸Ѫ͞ΕΔඞཁ͕͋Δͷ͔ʁ
    ؅ཧը໘๊͕͑Δ໰୊ͱѪ͞ΕΔͨΊʹඞཁͳ͜ͱ
    ʢಋೖ࣌ʣ
    ɹɾಋೖਪਐऀʢ؅ཧ෦໳ʣ͕ࣾ಺ఏҊ͢ΔͨΊͷϞνϕʔγϣϯʹͳΔ
    ʢӡ༻࣌ʣ
    ɹɾ؅ཧ෦໳୲౰ऀ͕ҟಈɾୀ৬ͳͲͰมΘͬͨͱ͖ʹղ໿ཧ༝ʹͳΔ
    ػೳ΍ઃఆ͕ଟ͘ɺ୳͖͠Εͳ͍
    ػೳ΍ઃఆ͕ͦΕͧΕ೉ղͰ͋Δ
    ෳ਺ͷػೳ΍ઃఆ͕ؔ࿈ͯ͠Δɹ
    ؅ཧϝχϡʔʹݕࡧػೳΛ͚ͭΔ
    ӡ༻؍఺ͷઆ໌Λॆ࣮ͤ͞Δɹɹ
    ΍Γ͍ͨ͜ͱ͔ΒḷΕΔɹɹɹɹ

    View Slide

  38. ɹɹɹ
    ະདྷͷ͸ͳ͠
    A I S A S
    Attention
    ஫໨
    Interest
    ڵຯɾؔ৺
    Search
    ݕࡧ
    Action
    ར༻
    Share
    ڞ༗
    ࣄྫൃද
    ίϛϡχςΟ
    ֶशαʔϏε
    FAQ
    ϝʔϧϚΨδϯ
    ׆༻ࣄྫू
    ͓͢͢Ί
    ػೳ঺հ
    ΨΠυɾ
    ϚχϡΞϧ
    ͍͔ʹ׆༻ͯ͠΋Β͏͔ʁ
    AISASϞσϧ
    ໰߹ͤ

    View Slide

  39. ɹɹɹ
    ͓٬༷ࣗ਎ؾ෇͍͍ͯͳ͍Ձ஋ͷ૑଄ʹͩ͜ΘΔ
    ● ϓϩμΫτϚωʔδϟʔ
    ● ΤϯδχΞϦϯάϚωʔδϟʔ
    ● ։ൃΤϯδχΞ
    WE’RE
    HIRING
    ● QAΤϯδχΞ
    ● ςΫχΧϧαϙʔτΤϯδχΞ
    ະདྷΛҰॹʹ૑଄͢Δϝϯόʔืूத

    View Slide

  40. ɹɹɹ
    @a_kuratani
    ืूʹڵຯ͋ΔํDM͍ͩ͘͞
    ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide

  41. ɹɹɹ
    https://www.teamspirit.com/

    View Slide