【AppSheetで出退勤管理・第3回】出勤・退勤はワンタップ！現場が絶対に迷わないタイムカード画面の作り方

前回（第2回）は、不正打刻を100%防止するために、スマホの内部時計やGPSから『NOW()』『HERE()』関数を使って、日時と現在地を強制的に自動取得する裏側の仕組みを構築しました。

裏側のデータ連携はこれで完璧ですが、今のままだとアプリの画面が少し無骨で、文字も小さく、現場のスタッフが「出勤」なのか「退勤」なのかをいちいち選ばなければいけない状態です。

結論から言うと、アプリの「UX（ユーザー体験）」を極限までシンプルにカスタマイズし、目の前に「出勤」「退勤」の大きなボタンを独立して配置することで、現場のスタッフが『スマホを開いてワンタップするだけ』で打刻が完了するタイムカード画面が作れます。ただし、多機能にしすぎて画面を複雑にすると、現場から一瞬でボイコット（利用拒否）される深刻な落とし穴があります。

連載第3回となる今回は、機械操作が苦手なスタッフでも1秒で打刻できる「現場ファースト」のタイムカード画面の作り方を、ステップ・バイ・ステップで詳しく解説します。

現場の導入成功を左右する「UI（画面デザイン）」の重要性

どんなに裏側のシステムが優秀で、正確なデータが取れるアプリであっても、現場のスタッフが「使いにくい」「どこを押せばいいか分からない」と感じてしまったら、そのDX（業務効率化）は失敗に終わります。特に、出退勤管理アプリにおいて意識すべきUI（ユーザーインターフェース）の鉄則は以下の3点です。

• 「1画面・1アクション」を徹底する：アプリを開いた瞬間に、次に押すべきボタンが視覚的に分からなければなりません。
• 手入力を1文字もさせない：スマートフォンでの文字入力は、現場にとって最も面倒な作業です。すべて「タップ（選択）」だけで完結させます。
• ボタンを押しやすく大きくする：屋外の現場や移動中、あるいは手袋をはめている状態でも、押し間違えないサイズ感が必要です。

今回は、AppSheetの「UX」➔「Views」という機能を使って、自動生成された画面を「タイムカード専用」の洗練されたデザインへと生まれ変わらせていきます。

【実践】「出勤」「退勤」ボタンをドーンと大きく表示させる設定手順

それでは、PCでシークレットウィンドウを開き、Google Workspaceアカウントでエディタを開いてください。まずは、打刻のメインとなる「ボタン」を大きく表示する設定を行います。

View（画面）の設定を開く

• 開発画面の左端にあるナビゲーションメニューから、[Views]（スマートフォンの形をしたアイコン）をクリックします。

• 画面中央に、現在作成されている画面の一覧（「出退勤打刻マスター」など）が表示されます。その画面名をクリックして設定を展開します。

画面の表示形式を「Card」に変更する

• 画面の左上（PRIMARY NAVIGATION と書かれているすぐ下）にある 三 シート1 をクリックします。

• クリックすると、いま中央に見えている「View Options（Page styleなど）」の画面がガラッと切り替わります。
• [View type] という、画面の見た目を選ぶアイコンが並んでいる場所を探します。初期状態では「Deck」や「Table」になっている場合があります。
• その中から、画像や大きなテキストを四角いパネル状に配置できる 「Card」（カード形式）を選択します。

レイアウトを「Large」または「Large Action」にする

• [View type] のすぐ下にある [Layout] という項目を確認します。
• 複数の並び方の選択肢の中から、ボタンや文字を最も大きく引き立たせる 「Large」を選択します。
• これにより、スマートフォンのプレビュー画面上で、文字が小さかったリストが、押しやすい「大きな四角いブロック（カード）」へと変化します。

【実践】無駄な入力をゼロに！フォーム画面のカスタマイズ

次に、スタッフが「＋（追加）」ボタンを押したときに立ち上がる、データ入力画面（フォーム）を極限までシンプルにします。前回、日時と位置情報は自動取得にしたので、この画面に余計な項目が出ないように隠す設定をします。

入力フォーム（Form View）の自動調整

• [Views] の一覧をさらに下にスクロールしていくと、システムが自動生成した 「（シート名）_Form」 という名前のビュー（入力画面用の設定）があります。これをクリックします。

• [Column order]（列の並び順）という項目を探します。初期状態では自動ですべての列が表示されています。
• [Column order]のMAnualをクリックしこの画面に「現場のスタッフにだけ見せたい、選ばせたい項目」だけを明示的に追加していきます。
• リスト（打刻ID、社員名など）の中から、画面から消したい（不要な）項目にだけチェックを入れます。
• □ 打刻ID ➔ クリックしてチェックを外す（空欄にする）
• □ 社員名 ➔ クリックしてチェックを外す（空欄にする）
• ☑ 日時 ➔ チェックを入れる
• □ 打刻タイプ ➔ クリックしてチェックを外す（空欄にする）
• ☑ 位置情報 ➔ チェックを入れる

（※画面に「打刻ID」「日時」「位置情報」の3つだけがチェックされた状態にします）

• Remove（削除）ボタンを押す
• 3つにチェックが入ったら、画面上部にある ⓧ Removeというボタンをクリックします。

この操作をすると、チェックを入れた3つの項目が画面から消え、残したかった「社員名」と「打刻タイプ」だけが綺麗に残ります！

その状態になったら、仕上げに画面右上にある青い「Save（セーブ）」ボタンを押して保存してください。

【実践】スタッフに配る「正しい共有リンク」の取得・操作手順

アプリの画面が完成したら、次はそのアプリを現場のスタッフに配る（共有する）ためのURLを取得しましょう。AppSheetにはいくつかのURLが存在しますが、スタッフに配るべきURLは「たった1つ」だけです。間違ったURLを配ると「開発画面が開いてしまう」「権限エラーで見られない」といったトラブルになるため、以下の手順で正確に取得してください。

どのリンクを配るのが正解？

AppSheetには主に3つのリンクがありますが、実務でPC打刻・スマホ打刻のどちらにも共通して使える万能なリンクは 「Browser Link（ブラウザリンク）」 です。これさえ配っておけば、スタッフはPCでもスマホでも、ブラウザを開くだけで即座にタイムカード画面にアクセスできます。

左のメニューから「Data」の画面に切り替える

画面のいちばん左端にある、アイコンが縦に並んだ黒い（または薄グレーの）メニューを見てください。 現在、上から3番目の「スマートフォンの形（Views）」が青くなっています。その1つ上にある、上から2番目の「データベース（円柱が3つ重なったような形）の [Data] アイコン」 をクリックします。

「打刻ID」の「SHOW?」のチェックを外す

画面が切り替わり、項目（打刻ID、社員名など）が縦に並んだ画面（Columns）に戻ります。

1. 「打刻ID」 の行を探します。
2. 右側へスクロールしていくと、SHOW? と書かれたチェックボックスがあるので、クリックしてチェックを外してオフ（白枠）にします。 (※これで現場の画面から「打刻ID」という文字ごと完全に消え去ります！)

「INITIAL VALUE」に数式を入れる

打刻IDを画面から隠す代わりに、裏側で自動で番号を振るおまじないをかけます。

• そのまま「打刻ID」の行をさらに右へスクロールし、INITIAL VALUE の入力欄（または鉛筆マーク）をクリックします。
• 数式を入れるポップアップが開くので、すべて半角大文字で UNIQUEID() と入力して、右下の [Save] を押して閉じます。

最後にアプリ全体を保存する

画面の右上にある、今はグレーになっている SAVE（またはセーブ） ボタンが青色に変わりますので、クリックしてアプリを保存します。

この保存が終わると、右側のスマホ画面から「打刻ID」の欄もパッと消え、本当に「社員名」と「打刻タイプ」の2つだけが並ぶ究極にシンプルな画面になります！

それでは、エディタ画面からBrowser Linkをコピーする手順を進めます。

取得のステップ

• 「Share（共有）」ボタンをクリックする 開発画面の右最上部（青い「Save」ボタンの左隣あたり）にある、[人の形にプラスマークがついたアイコン]（または [Share] ボタン）をクリックします。

• [Share links]メニューを展開する 共有用のポップアップ画面が開きます。画面内にある [Share links]をクリックして展開します。

• 「Open in browser」のリンクをコピーする 画面が切り替わり、以下の3種類のURLが縦に並んで表示されます。

• Install on mobile：スマホ専用アプリとしてインストールさせるためのリンクです。
• Open in browser ➔ この項目の右側にある「コピーアイコン（四角が重なった青いマーク）」をクリックします。
• View/copy or edit：【注意！】これはアプリの設定を変更するための「開発・編集用リンク」です。現場のスタッフには絶対に配らないでください。

社内チャットやメールでスタッフに共有する コピーしたURL（https://www.appsheet.com/start/... で始まる長いURLです）を、LINE WORKS、Slack、Google Chatなどの社内ツールやメールでスタッフ全員に一斉送信します。共有を許可していない場合は開けないのでご注意ください。

💡 【PC運用の人への裏ワザ指示】 オフィス勤務のスタッフには、「このURLをGoogle Chromeで開き、ブラウザのブックマーク（お気に入り）に登録するか、デスクトップにショートカットを作成しておいてください」と指示しておくと、毎朝ワンクリックでタイムカードが開くようになり便利です。

【実務の落とし穴】複雑な画面はボイコットの元！機能の「引き算の美学」

ここで、実務導入を成功させるためのG Cafe流の重要なアドバイスです。

アプリを内製していると、つい楽しくなってしまい、「ついでに今日の体温を入れる欄を作ろう」「今日の業務予定をフリーテキストで書かせる欄も追加しよう」と、どんどん欲張って項目を増やしてしまいがちです。

しかし、この「親切心の足し算」こそが、現場での定着を妨げる最大の落とし穴になります。

朝の忙しい出勤時に、スマホで文字入力を求められると、現場のスタッフは「面倒くさい」「前の紙の出勤簿の方が楽だった」と感じ、やがて打刻漏れが常態化するようになります。 ノーコード開発で最も重要なのは、機能を増やすことではなく、現場が毎日ノンストレスで使えるように徹底的に削ぎ落とす「引き算の美学」です。出退勤アプリの初期バージョンは、「タップ2回で終わる」というシンプルさを頑なに守り抜いてください。

【もっと学びたい人へ】編集部おすすめのAppSheet参考書

「WEB記事だけでなく、手元に体系的な本を置いて、AppSheetの応用技をもっと深く学びたい！」という社内開発者の方に向けて、G Cafe編集部が実務で本当に役に立ったおすすめの参考書をご紹介します。

📖 手を動かして学ぶ Google AppSheet ノーコード開発入門

【おすすめポイント】
実務に直結するタスク管理などのアプリ開発を通じて、即戦力のテクニックが手を動かしながら身につきます！

次回の予告：第4回「プラン混在・共有の真実編」へ

お疲れ様でした！連載第3回の今回は、現場のスタッフが迷わず1秒で打刻できるようにするための「画面カスタマイズ（UI・UX最適化）」を徹底的に行いました。

今回の重要ポイントをおさらいしましょう。

1. 画面タイプを『Card』にすることで、押しやすく視認性の高いボタン配置にした
2. フォーム画面から自動取得の項目（日時・位置情報）を非表示にし、スタッフの手間を極限まで削った
3. 社内定着のコツは「引き算」。余計な入力項目は増やさないのが実務の鉄則

これで、誰でも簡単に使える最高の『出退勤管理システム』が完成しました！

いよいよ次回は、この完成したアプリを社内のメンバーへ配る「共有ステップ」に入ります。しかし、ここで皆さんが一番気になっている疑問が浮上します。 「うちの会社、Business Starterの人と、Standardの人が混ざっているんだけど…そのままタダで使えるの？」「アルバイトの個人Gmail（gmail.com）に共有したらお金がかかるの？」という疑問です。

次回の第4回は、「【AppSheetで出退勤管理・第4回】徹底検証：Starterで作った打刻アプリはStandardの人や個人Gmailの人でも使える？」をお届けします。プラン混在組織が知っておくべき共有の真実と、追加課金を防ぐための境界線を詳しく解説します。次回も必見です！