見出し画像

UIデザイナーもコードを学んでデザイン領域を広げよう。インタラクション篇

株式会社つみきという会社で、デザイナーの仕事とエンジニアの仕事とディレクターの仕事を行ったり来たりしながらクライアントワークに携わっています。UIデザインするにあたってアプリ実装などのコードが書けて良かったと思う機会が多いので、そんな話を何回かに分けて書いてみます。

コードを学んでから、インタラクションを意識してデザインできるようになった

HTMLのようなマークアップ言語を除いて、僕が初めてコードを学んだのはFlashで使用されていたActionScriptでした。自分でデザインしたWebサイトを実装していく過程で気がついたのは、アプリケーションやWebサイトのフロント実装のコードはすべてインタラクションの連なりとして記述されているという点でした。インタラクションの連なりとは何かということをTwitterを例に説明します。例えばTwitterでツイートするまでの流れをインタラクションとして説明するとこのように表せます。

ユーザー:ナビゲーションバーにあるツイートボタンをタップ
アプリ:ツイート入力画面をモーダル表示
ユーザー:ソフトウェアキーボドで投稿内容を入力
アプリ:入力したテキストを入力エリアに表示

上記の一部をSwiftのコードで記述するとこんな感じになります。

// 1 ユーザー:ナビゲーションバーにあるツイートボタンをタップ
tweetButton.addTarget(self, action: #selector(onTweetButton(_:)), for: .touchUpInside)
func onTweetButton(_ sender: UIButton){
    // 2 アプリ:ツイート入力画面をモーダル表示
    let viewController = TweetViewController()
    self.present(viewController, animated: true, completion: nil)
}

単純に言ってしまえば、こうしたユーザーの行動とアプリからの応答を記述したコードがいくつも連なることで一つのアプリが実装されています。一方、PhotoshopやSketchなどのデザインツールを前にすると、一画面毎のUIやビジュアルの作り込みに意識を取られ、中々インタラクションの繋がりが見えてきません。このことに気づいてから、インタラクションをどのように組み立てるかが僕がデザインする時に重視するポイントになりました。

インタラクションに意識が向いてから、ユーザーの行動や文脈に沿ったデザインができるようになった

インタラクションにおけるユーザーの行動に意識が向きはじめると、ユーザーが行動する際の文脈にも意識が向くようになりました。再びTwitterを例にあげます。Twitterでは投稿しないでおいたツイートが残っていると、投稿画面に下書きを表示するためにボタンが表示されます。

ユーザーは過去に下書きを残していたことを覚えているとは限りません。新しいツイートを投稿する際に過去の下書きに自然と気づき、改めて投稿し直すのは文脈に沿った自然な行動の流れと言えるでしょう。単に下書き機能を設けるだけであればメニューに下書きボタンを追加するだけで済みます。しかしそれではユーザーの行動と文脈を無視した使われない機能が1つ増えるだけです。

画面にボタンを作ると、そこにユーザーの行動やきっかけが生まれます。ユーザーが実際に行動できるかどうかは、それまでの行動の流れやユーザーが置かれた文脈に依存します。そのため、ボタンを一つ増やすだけでも、どこにどのように設置するかはインタラクションをデザインする上でとても重要な決定になります。

だからデザイナーもコードを学ぼう

プログラミングを学ぶとなると、SwiftやJavascriptなどの言語やUIフレームワークの使い方を覚え、1からアプリケーションを作りあげなきゃいけないとい思い気が遠くなるかもしれません。しかしデザイン領域を広げることが目的であれば、必ずしも実際に製品としてリリース可能なアプリを作れるようになる必要はありません。
入門書やオンライン講座でサンプルアプリを一つ作ってみるだけでもデザインするときの視点が少し広がるんじゃないかなあと思います。

次回はマイクロインタラクションのデザインとコードについて書いてみようと思います。

----

Twitterでもマイクロインタラクションについて発信しています。マイクロインタラクションを活用したUIデザインやUI改善などお気軽にご相談ください。

Twitter (@shingo2000)

※この記事はWatedly Feedに投稿した記事の転載です。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

わーい。ありがとうございます!
56

鈴木慎吾 / TSUMIKI INC.

(株)つみき のデザイン責任者。UIを考えたりコードを書いたりします。 https://twitter.com/shingo2000https://www.behance.net/shingo2000https://tsumikiinc.com/

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
5つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。