アプリインターフェース設計の原則を実践する：Tim Corey のトーナメントトラッカー UI

UIデザインの開始

Timはユーザーインターフェースデザインのステップはアプリ開発の楽しい部分だと言います。なぜなら、それはアプリがどのように見えるかの概略を示してくれるからです。彼は、アーティストではないと自認しながらも、白板やリーガルパッドを使ってフォームをスケッチすると指摘しています。これらの図は完璧や比例が必要ではない――基本的なアイデアを示し、フォームに何が含まれるべきか、どのように機能すべきかを示すだけで十分です。

ここでのTimの主なポイントは、UIデザインのフェーズは計画のためのものであって、美しさを追求するものではないということです。 目標は、必要なフォームやページとそれぞれが何を含むべきかを特定することだと強調します。 このアプローチは明快さに重要で、デザインプロセスの間に開発者とデザイナーが一致しているのを助けます。

デザインをどこから始めるか

Timはよくある質問に答えます："どこから始めればいいの？" 彼は、どこから始めてもいいと説明します。 アプリのある部分について不安があるなら、確信のある部分から始めてください。 明確な部分を完了すると、不確かなセクションに対するアイデアも得られることが多いです。

また、勢いをつけるのも助けになります。いくつかのフォームを設計した後で、自信を持って続ける準備ができていると感じるでしょう。 この考え方を持ちながら、Timはトーナメントビューアーフォームから始めることを選択します。

この方法は、設計者と開発者がユーザーが1つの画面から別の画面へどのようにナビゲートするかに焦点を合わせることを奨励するため、優れたユーザーフローをサポートします。

最初にVisual Studioでデザインしない理由

TimはVisual StudioのWindowsフォームビルダー内で最初にデザインしてはいけないと説明します。 そうすると主に2つの問題が発生すると警告します：

1. デザインを計画する代わりにレイアウトやコントロールの調整に時間を浪費してしまう。

2. 仕事をやり直すのを避けたいがために、より良いオプションを逃したり、隠れた問題を残したりする可能性があるため、デザインプロセスを省略してしまう。

Timは、紙にデザインすることで消して新しいアイデアを試したり、素晴らしい解決策になるかもしれない"ばかげた"概念のテストができると述べます。 これはUIデザインにおける重要な原則で、アプリが最初の下書きでどのように見えるかではなく、何をすべきかに焦点を当て続けることを助けます。

トーナメントビューアーフォーム

Timは、彼の最初の粗いUIであるトーナメントビューアーフォームを明らかにします。 このフォームは、特定のトーナメントに関するすべての情報を表示します。

トーナメント作成フォーム

次にTimはトーナメント作成フォームに進み、彼はそれがトーナメントビューアーの後に必要であると考えています。

チーム作成フォーム

次にTimはチーム作成フォームを設計し、それには次のものが含まれます：

• チーム名

• チームメンバーの選択

• 新しいメンバーの追加

Timはフォーム間の一貫性の重要性を強調します。 彼はチーム名レイアウトがトーナメント名レイアウトと一致するべきだと言い、まとまりのあるデザインを作成します。

また、このフォームはリストから既存のチームメンバーを追加したり、フォーム内で新しいメンバーを直接作成したりできると説明します。 Timは深いナビゲーション層を避けるためにメンバー作成を同じフォーム内に保持することを好むと述べています（つまり、複数のフォームを開く）。

複数の層を追加することは混乱を招き、遅くなるからです。 そのため、彼はデザインをコンパクトでユーザーフレンドリーに保つことを選択します。 これにより、タスクを完了するのに必要な時間を短縮し、シンプルで直感的なアプリインターフェースをサポートします。

賞作成フォーム

Timの賞作成フォームはシンプルです。 それには次のものが含まれます：

• 順位番号

• 順位名

• 賞金額

• 賞金率

Timは最後の2つのフィールドは同時に使われるべきではないと注意しています（金額か割合のどちらか）。 彼はフォームが後にバリデーションロジックを必要とするが、デザインの目的ではレイアウトは単純だと言います。 これは、デザイン原則がいかに洗練された機能的なインターフェースを作るのに役立つかの良い例です。

トーナメントダッシュボードフォーム

最後にTimはトーナメントダッシュボードフォームについて議論し、それに完全には満足していないことを認めます。 彼は課題を説明します：Windowsフォームアプリケーションは通常、1つのメインフォームが開いたままであることが要求されます。 メインフォームが閉じると、アプリケーションが終了します。

これにより、ユーザーが複数のトーナメントを同時に開きたい場合にトーナメントトラッカーが問題になります。 Timは、もしトーナメントが存在しない場合には自動的にトーナメント作成フォームを開くことを最初に考えました。しかし、トーナメント作成フォームを閉じるとアプリケーションが終了してしまうことに気づきました。

そこでTimは常に開いている中央のダッシュボードフォームを設計します。 このダッシュボードはユーザーに次のことを可能にします：

• 既存のトーナメントを見る

• トーナメントを読み込む

• 新しいトーナメントを作成する

Timは、ダッシュボードは他のフォームが閉じられても開いたままであると説明します。 それはアプリの中央ナビゲーションポイントとなります。彼は"ばかげるほどシンプル"に見えるかもしれないと言いますが、それは機能し、後にデザイン要素やアニメーションを追加して視覚的な魅力を向上させるかもしれないと言います。

結論

Timはビデオを締めくくり、目標は必要なフォームを特定し、それぞれのフォームが何を表示すべきかを決定することだけだと強調します。 UIが設計されたら、次のステップはロジックの計画であり、彼はUI要素がデータモデルとバックエンドにどのように接続するかを計画します。

TimのUI設計プロセスは、アプリインターフェースの設計が計画、一貫性、明確さに関するものであり、早い段階で完璧なビジュアルを作成することではないことを示しています。 このアプローチは開発者とデザイナーが一致しており、最終的なアプリケーションがユーザーにとってナビゲートしやすく使いやすいことを保証します。