> ## Documentation Index
> Fetch the complete documentation index at: https://help.finerd.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# ホームをカスタマイズする

> finerdのホームに表示するウィジェットの選び方、合計や増減の意味、データの絞り込み方、並べ替え方をWeb、Android、iOS別に説明します。

export const Video = ({id, title, aspect}) => <div className="fh-video not-prose" style={aspect ? {
  aspectRatio: aspect
} : undefined}>
    <iframe src={`https://www.youtube-nocookie.com/embed/${id}?rel=0`} title={title} loading="lazy" referrerPolicy="strict-origin-when-cross-origin" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />
  </div>;

export const VideoIntro = ({id, title, aspect, children}) => <div className="fh-video-intro not-prose">
    <div className="fh-video-frame" style={aspect ? {
  aspectRatio: aspect
} : undefined}>
      <iframe src={`https://www.youtube.com/embed/${id}`} title={title} loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />
    </div>
    <div className="fh-video-text prose dark:prose-invert">{children}</div>
  </div>;

**ホーム**は、finerdで最初に表示されるページです。残高、今月の支出、最近の取引、予算などのウィジェットでできています。表示するウィジェット、それぞれに含めるデータ、並び順は自分で選べます。

ホームのカスタマイズはWeb、Android、iOSで無料です。**繰り返し**と**ライフプラン**のウィジェットにはProが必要です。レイアウトはアプリごと、スペースごとに保存され、自分だけのものです。Webで変更しても、スマホのレイアウトや、スペースのほかのメンバーのホームは変わりません。

<h2 id="widgets">
  追加できるウィジェット
</h2>

| ウィジェット | 表示される内容 | 対応 |
| - | - | - |
| **支出** | 今月の支出。全体と、カテゴリ別またはお店別。 | Web、Android、iOS |
| **収入** | 今月の収入。全体と、カテゴリ別またはお店別。 | Web、Android、iOS |
| **残高** | 口座の合計残高と、残高の大きい上位3口座。 | Web、Android、iOS |
| **取引**（**直近5件の取引**） | ウィジェットのフィルタに合う最新の取引5件。 | Web、Android、iOS |
| **繰り返し** | 今後の[定期支払い](/ja/recurring/track-recurring-payments)。Proが必要です。 | Web、Android、iOS |
| **予算** | 今月の[予算](/ja/budget/create-budget)。計画額のうち使った金額。個人スペースのみ。 | Web、Android、iOS |
| **純資産** | [純資産](/ja/reports/net-worth)と月ごとのグラフ。個人スペースのみ。 | Web、Android、iOS |
| **貸し借り** | [自分が借りている金額、または貸している金額](/ja/debts/track-debts)。 | Web、iOS |
| **ライフプラン** | [ライフプラン](/ja/financial-plan)のシナリオの進み具合。個人スペースのみ、Proが必要です。 | Web、iOS |

Androidのウィジェット一覧では、**今月の支出**、**今月の収入**と表示されます。iOSでは、**繰り返し**は**繰り返しカレンダー**です。

新しいスペースには、最初から**残高**、**直近5件の取引**、**今月の支出**と、個人スペースでは**純資産**が表示されます。iOSでは**予算**も追加されます。

一部のカードは、ウィジェットの上に自動で表示されます。これらは追加、移動、削除ができず、表示する内容がなくなると消えます。

* **確認待ちの取引**には、**未確認**になっている取引の件数と、その最初の1件が表示されます。選択すると確認を始められます。[確認が必要な取引を探す](/ja/transactions/review-imported-transactions#needs-review)をご覧ください。
* **承認待ちの貸し借りリクエスト**（WebとiOS）には、誰かから送られてきて承認を待っている[共有の貸し借り](/ja/debts/settle-up-with-people)が表示されます。
* **受信箱**（iOS）には未読の[受信箱](/ja/contact-us#inbox)のメッセージが、**実行中の処理**（iOS）には進行中の取り込みが表示されます。

Androidでは、これらのカードが1か所に順番に表示されます。受信箱のメッセージ、アプリのアップデート、Google Walletの支払い、**確認待ちの取引**です。

<h2 id="configure-widgets">
  ウィジェットを追加する
</h2>

ウィジェットの種類を選び、データを設定して保存します。設定できる項目は、ウィジェットの種類によって異なります。

<Tabs>
  <Tab title="Web">
    <Frame caption="Webでウィジェットを追加する。">
      <Video id="coGhAh11mSY" title="Webでウィジェットを追加する" />
    </Frame>

    1. **ホーム**の下部にある**ウィジェットを追加**を選択するか、右上の<strong>⋮</strong>メニューを開いて**ウィジェットを追加**を選択します。
    2. **支出**、**収入**、**残高**、**取引**など、ウィジェットの種類を選びます。
    3. 表示するデータを設定します。たとえば**支出**では、**グループ化**で**カテゴリ**または**お店**を選べるほか、**データフィルタ**でお店、タグ、カテゴリを指定できます。
    4. **保存**を選択すると、ウィジェットが追加されます。

    <Frame caption="ホームのメニュー。ウィジェットの追加や並べ替えができます。">
      <img src="https://mintcdn.com/finerdai/OIprfxtJ6cc-sLYD/images/getting-started/dashboard/web-dashboard-menu.png?fit=max&auto=format&n=OIprfxtJ6cc-sLYD&q=85&s=d516a70b7ab02523187daf1722b1f307" alt="Add widgetとReorderのメニュー。" width="320" data-path="images/getting-started/dashboard/web-dashboard-menu.png" />
    </Frame>

    <Frame caption="支出の設定の例。サンプルデータと表示されたプレビューには、デモ用のデータが使われています。">
      <img src="https://mintcdn.com/finerdai/OIprfxtJ6cc-sLYD/images/getting-started/dashboard/web-widget-settings.png?fit=max&auto=format&n=OIprfxtJ6cc-sLYD&q=85&s=0e6435dbd9509062b7da89a9d38f8f0b" alt="Expensesウィジェットの設定。Group by、Data filters、Save。" width="1280" height="720" data-path="images/getting-started/dashboard/web-widget-settings.png" />
    </Frame>
  </Tab>

  <Tab title="Android">
    1. **ホーム**のいちばん下までスクロールし、**ウィジェットを追加**をタップします。
    2. ウィジェットの種類を選びます。**予算**と**繰り返し**はすぐに追加されます。
    3. ほかの種類では、必要に応じて名前を入力し、**データフィルタ**を追加します。
    4. **保存**をタップします。
  </Tab>

  <Tab title="iOS">
    <VideoIntro id="1uBGFthJ3_Y" title="iOSでウィジェットを追加する">
      1. **ホーム**のいちばん下までスクロールし、**ウィジェットを追加**をタップします。
      2. **ウィジェットの種類**で、表示する情報（**支出**など）を選びます。
      3. **支出**では、**グループ化**で**カテゴリ**または**お店**を選びます。必要に応じて、**データフィルタ**で**お店**、**タグ**、**カテゴリ**を追加します。
      4. **保存**をタップします。
    </VideoIntro>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 240px), 1fr))", gap: "20px", alignItems: "start" }}>
      <Frame caption="ウィジェットの種類を選びます。">
        <img src="https://mintcdn.com/finerdai/OIprfxtJ6cc-sLYD/images/getting-started/dashboard/ios-widget-types.png?fit=max&auto=format&n=OIprfxtJ6cc-sLYD&q=85&s=a4508d8abb515bf541ac9c734496efb1" alt="ウィジェットの種類を選ぶ画面。" width="400" data-path="images/getting-started/dashboard/ios-widget-types.png" />
      </Frame>

      <Frame caption="グループ化とフィルタを設定します。">
        <img src="https://mintcdn.com/finerdai/OIprfxtJ6cc-sLYD/images/getting-started/dashboard/ios-widget-settings.png?fit=max&auto=format&n=OIprfxtJ6cc-sLYD&q=85&s=273926b7cc8cc4d3e231463d9a46ca63" alt="グループ化とフィルタの設定画面。" width="400" data-path="images/getting-started/dashboard/ios-widget-settings.png" />
      </Frame>
    </div>

    **ウィジェットを追加**は、スペースに取引があると表示されます。
  </Tab>
</Tabs>

ウィジェットの名前は、その設定で変更できます。**Pro**バッジが付いたウィジェットを選ぶと、代わりにサブスクリプションの案内が開きます。

<h2 id="metrics">
  数字の意味
</h2>

* **支出**と**収入**は、今月（暦月）の金額を集計します。合計の横の矢印とパーセンテージは、前の期間との比較です。内訳には金額の大きい上位3つのカテゴリまたはお店が表示され、残りは<strong>その他のカテゴリ（5）</strong>のようにまとめられます。
* WebとiOSの**残高**は、銀行口座と現金口座の現在の残高を合計します。すべて同じ通貨ならその通貨で、そうでなければスペースの基本通貨に換算して合計します。Androidでは、投資、特典、ローン、資産の口座も含めて、基本通貨で合計します。このウィジェットには増減の表示はありません。
* **純資産**には、最新の月の純資産とその変化、選んだ期間の月ごとのグラフが表示されます。
* **予算**には、今月の予算の計画額のうち、使った金額が表示されます。
* **貸し借り**には、自分が借りている合計額または貸している合計額と、金額の大きい貸し借りが表示されます。
* **繰り返し**には、今後の支払いが表示されます。Webでは、カレンダーに支払い済み、残り、期限切れの合計も表示されます。

WebとiOSでは、一部のウィジェットに複数のサイズがあります。合計だけの概要、リスト、グラフです。ウィジェットの編集中に、Webでは矢印で、iOSではスワイプでプレビューを切り替えます。**サンプルデータ**と表示されたプレビューには、スペースに自分のデータがたまるまで、見本のデータが使われます。

<h2 id="filters">
  ウィジェットのデータを絞り込む
</h2>

ウィジェットの設定にある**データフィルタ**で、集計の対象を選びます。どのフィルタでも、選んだ項目を含めることも除外することもできます。たとえば**除外するカテゴリ**に「家賃」を指定すると、**支出**から家賃が除かれます。

| ウィジェット | データフィルタ | その他の設定 |
| - | - | - |
| 支出、収入 | お店、タグ、カテゴリ | **グループ化**は**カテゴリ**または**お店**（Web、iOS） |
| 取引 | お店、口座、タグ、カテゴリ、ステータス | **口座間振替**は**表示**または**非表示**（Web、iOS） |
| 残高 | 口座 | **グループ化**は**口座**または**種類**（Web、iOS） |
| 純資産 | 口座 | **期間**（グラフの期間） |
| 貸し借り | 口座（Web、iOS） | **種類**は**借りている**または**貸している分** |
| 繰り返し | お店（Web、iOS） | **カレンダーの期間**（Web） |
| ライフプラン | — | **シナリオ**（Web、iOS） |

たとえば、**ステータス**を**未確認**にした**取引**ウィジェットには、まだ確認が必要な最新の取引が表示されます。ウィジェットからレポートや一覧全体を開くと、同じフィルタが適用されます。

Androidでは、**予算**と**繰り返し**に設定はありません。**編集**をタップすると、予算または定期支払いのカレンダーが開きます。

<h2 id="order">
  ウィジェットを編集・並べ替え・削除する
</h2>

<Tabs>
  <Tab title="Web">
    <strong>ウィジェットを編集・削除する。</strong>ウィジェットにポインタを合わせると、ヘッダーに全体を開くアイコンと<strong>⋮</strong>ボタンが表示されます。<strong>⋮</strong>を選択し、**編集**または**削除**を選択します。削除するときは確認が求められます。全体を開くアイコンを選択すると、レポートや一覧全体が開きます。

    <Frame caption="ウィジェットにポインタを合わせると、⋮メニューが表示されます。">
      <img src="https://mintcdn.com/finerdai/VKs44KzasmsahKpA/images/getting-started/dashboard/web-widget-menu.png?fit=max&auto=format&n=VKs44KzasmsahKpA&q=85&s=1ea81274ce6f772974cf8ceab6e75ecd" alt="Expenses this monthウィジェット。開くアイコンと、EditとDeleteが表示された⋮メニュー。" width="330" data-path="images/getting-started/dashboard/web-widget-menu.png" />
    </Frame>

    <strong>並び順を変更する。</strong>

    1. **ホーム**の右上にある<strong>⋮</strong>メニューを開き、**並べ替え**を選択します。
    2. ウィジェットを同じ列の中で、またはもう一方の列へドラッグします。概要サイズのウィジェットには右端にもハンドルがあり、ドラッグすると幅を半分または全幅に変更できます。
    3. **完了**を選択して保存します。保存せずに終了するには、<strong>✕</strong>を選択してから**破棄**を選択します。

    <Frame caption="並べ替えモード。組み込みのカードは上部に固定されたままです。">
      <img src="https://mintcdn.com/finerdai/VKs44KzasmsahKpA/images/getting-started/dashboard/web-reorder.png?fit=max&auto=format&n=VKs44KzasmsahKpA&q=85&s=e7ebe0cc8db6fbde2ea2333e84252621" alt="並べ替えモードのDashboard。閉じるボタン、Done、薄く表示されたTransactions to reviewカード。" width="400" data-path="images/getting-started/dashboard/web-reorder.png" />
    </Frame>
  </Tab>

  <Tab title="Android">
    ウィジェットのタイトルを長押しします。メニューには**編集**、**並べ替え**、**削除**があります。

    * **編集**をタップすると、ウィジェットの設定が開きます。
    * **削除**をタップすると、確認なしですぐにウィジェットが削除されます。
    * **並べ替え**をタップすると、ウィジェットの一覧が開きます。ハンドルをドラッグして並べ替え、**保存**をタップします。保存せずに終了するには、前の画面に戻ります。
  </Tab>

  <Tab title="iOS">
    ウィジェットを長押しします。メニューには**ウィジェットを編集**、**並べ替え**、**削除**があります。

    * **ウィジェットを編集**をタップすると、ウィジェットの設定が開きます。
    * **削除**をタップすると、確認なしですぐにウィジェットが削除されます。
    * **並べ替え**をタップすると、ウィジェットが揺れ始めます。ドラッグして位置を変えるか、ゴミ箱アイコンでウィジェットを削除し、右下の**完了**をタップします。

    <Frame caption="ウィジェットを長押しすると、編集、並べ替え、削除ができます。">
      <img src="https://mintcdn.com/finerdai/VKs44KzasmsahKpA/images/getting-started/dashboard/ios-widget-menu.png?fit=max&auto=format&n=VKs44KzasmsahKpA&q=85&s=459aed763008c38fc49c93d74cdf04d3" alt="ホームのウィジェットに重なったiOSのコンテキストメニュー。Edit widget、Reorder、Delete。" width="360" data-path="images/getting-started/dashboard/ios-widget-menu.png" />
    </Frame>
  </Tab>
</Tabs>

ウィジェットは設定画面からも削除できます。設定画面で<strong>⋮</strong>を開き、**削除**を選択します。削除したウィジェットは**ウィジェットを追加**からもう一度追加できますが、設定は最初からやり直しになります。

<h2 id="related-articles">
  関連記事
</h2>

ウィジェットには、finerdのほかの機能のデータが表示されます。詳しくは次の記事をご覧ください。

* [純資産を把握する](/ja/reports/net-worth)
* [収入・支出・キャッシュフローを分析する](/ja/reports/income-expenses-cash-flow)
* [予算を作成して管理する](/ja/budget/create-budget)
* [定期支払いを管理する](/ja/recurring/track-recurring-payments)
* [確認が必要な取引を探す](/ja/transactions/review-imported-transactions#needs-review)
* [ライフプラン](/ja/financial-plan)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.