Skip to main content

ユーザーエクスペリエンスの改善 (ガイド付きプロジェクト Light)

ステップ 4: ユーザーエクスペリエンスを改善する

アプリケーションのデザインとユーザーのエクスペリエンスについて考えてみましょう。改善できるところはどこですか?

ボタンを見ると、テキストが余計だということに気付くかもしれません。背景色がライトの状態を示しているので、ライトが現在オンかオフかは明らかにわかります。 

ユーザーにボタンのテキストを表示する必要があるでしょうか?

画面上のボタンの位置はユーザーエクスペリエンス (UX) に影響を及ぼすでしょうか? また、画面全体がタップ可能であれば、アプリケーションがさらに使いやすくなると思いませんか?

ボタンからテキストを削除し、ボタンを画面全体に広げるのが良いかもしれません。この方法なら、ユーザーが画面のどこをタップしてもライトをオンまたはオフにできます。高品質なアプリケーションを作成するには、細部にまで気を配り、直観的でシンプルかつ強力な UI を作成するように努める必要があります。この例では、ユーザーは画面上のどこかをタップすれば背景色を変更できるとある程度予想できるでしょう。

始めに、ボタンのサイズを画面全体に広がるように変更する必要があります。 

1.Interface Builder でボタンを選択します。

2.ボタンの左上と右下の角をドラッグして、ボタンが白いビュー全体を占めるように拡大します。

ボタン項目が UI 画面全体のサイズに拡大されています。

3.ボタンのタイトルテキストを削除します。

ボタンのタップ可能な領域は期待どおりに機能しますが、キャンバス上には白いビューのみが存在しているように見えます。

4.updateUI() 内のボタンのタイトルを変更するコード行を削除します。

func updateUI() {
    if lightOn {
       view.backgroundColor = .white
    } else {
       view.backgroundColor = .black
    }
}

この変更後のデザインでは、アプリケーションの使用中にボタンのプロパティを変更する必要がありません。この変更により、プロジェクトの最初に作成したアウトレットは不要になりました。 

開発者はコードをできるだけクリーンにしておく必要がありますから、ボタンと IBOutlet の間の接続を削除します。

1.Interface Builder でボタンを選択します。

2.[Connections (接続)] インスペクターを開きます。

このインスペクターには、特定のオブジェクトに接続されているすべてのイベントとアウトレットが表示されます。 

3.ボタンは buttonPressed: アクションと lightButton アウトレットに接続されています。

4.アウトレットの横にある [X] をクリックして、この接続を削除します。

lightButton 変数は [Referencing Outlets (参照アウトレット)] セクションにあります。

lightButton とストーリーボード上のボタンの間の接続を削除したので、@IBOutlet の横の円は塗りつぶされなくなりました。

白抜きの円は、アウトレットへの接続がないことを示します。

これで、lightButton の宣言を安全に削除できます。

1.アプリケーションをビルドして実行し、デザインの改良をテストします。

画面上の任意の場所をタップまたはクリックして背景色を変更できるようになっています。

2.if-else ステートメントの両方の行が同じアクション (backgroundColor の設定) を行っているので、代わりに 3 項演算子を使用して updateUI() メソッドをすっきりさせます。

func updateUI() {
view.backgroundColor = lightOn ? .white : .black
}

3.もう一度アプリケーションをビルドして実行し、3 項演算子が意図したとおりに動作することを確認します。

3 項演算子のしくみを復習するには、「Swift の基礎」の「フローの制御について」単元を参照してください。

必要であればソリューションのチェック

こちらが Light プロジェクトの全ファイルです。自分が設定したストーリーボードと比較してみてください。

プロジェクトのまとめ

フラッシュライトのように画面をオン/オフにするアプリケーションの作成に成功しました。また、アプリケーションのデザインをシンプルにして、UX を改善するためにボタンタイトルを削除し、タップ可能な領域を画面全体に広げました。Swift の知識が限られていても、手順を追ってコード行を記述し、ドキュメントを参照してこのプロジェクトを完了しました。

Xcode の操作や Interface Builder の使用は難しかったですか? もしそうであれば、Xcode と Interface Builder について詳しく説明している前の単元を復習することをお勧めします。

学習の継続

ここでは、iOS アプリケーション開発を簡単に紹介しました。Xcode と Interface Builder について、また、アプリケーション作成に使用する環境について学習し、「Swift の基礎」モジュールの基本的な Swift の概念についても学習しました。初めてのアプリケーションも作成しましたね。

次にすべきことは何でしょうか? 次のようにして学習を続けることができます。

動画やドキュメントなどのその他のリソースについては、「Apple Developer (Apple 開発者)」を参照してください。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップ ログイン
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる
今はしない