連載
縁の下のUIデザイン―少しの工夫で大きな改善！
- Twitterリスト
快適なUIデザインを実現するためには，普段は意識されないような小さな工夫がたくさんされています。本コラムではそれらにスポットライトを当て，なぜ必要で，どのような効果を発揮しているのか，筆者のクックパッドなどで培ったUIデザインの経験を交えて紹介します。
- 第20回 ボタンのデザインと使い分け
- 状態によるバリエーションとデザインのポイント
- 形状のバリエーションとデザインのポイント
- 同じアクションを異なるボタンで実現する事例
- ガイドライン上での考え方
- プライマリボタンとセカンダリボタン
- 複数のボタンを画面内で利用する場合の考え方
2020年10月23日［初出：WEB+DB PRESS Vol.118（2020年8月24日発売）］
- 第19回 上手に配色するためのコツとテクニック
- リアリティのある配色を考える
- 無彩色に一手間加えた表現
2020年8月21日［初出：WEB+DB PRESS Vol.117（2020年6月24日発売）］
- 第18回 エンジニアに意識してほしいこと
- 実装の認識合わせ
- デザイナーのこだわりとの付き合い
2020年6月23日［初出：WEB+DB PRESS Vol.116（2020年4月24日発売）］
- 第17回 長押しを使ったデザインの可能性
- 長押しが使われている身近な事例
- アプリやインターネットサービスでの利用
2020年4月22日［初出：WEB+DB PRESS Vol.115（2020年2月22日発売）］
- 第16回 入力フォームを1画面にする？ 分割する？
- 分割するかしないかの基準
- 分割しないときの工夫
- 分割する場合の2つの方法
2020年2月21日［初出：WEB+DB PRESS Vol.114（2019年12月23日発売）］
- 第15回 カードUIの向き不向き
- カードUIが効果的な場面
- テーブルをカードUIに置き換えるときの注意点
2019年10月23日［初出：WEB+DB PRESS Vol.112（2019年8月24日発売）］
- 第14回 今，iOS/Androidアプリのデザインガイドラインにどう向き合うか
- AndroidとiPhone，それぞれ別のUIを作るのか
- ガイドラインに従うべきか
2019年8月23日［初出：WEB+DB PRESS Vol.111（2019年6月24日発売）］
- 第13回 保存のデザインの使い分け―「自動保存」「行ごとに保存」「すべて保存」
- さまざまな保存のUI
- 一覧編集画面での実践事例
2019年6月24日［初出：WEB+DB PRESS Vol.110（2019年4月25日発売）］
- 第12回 中国のスマートフォンアプリの共通項―所変わればデザイン変わる
- 見た目の共通項
- 使い勝手の共通項
2019年4月22日［初出：WEB+DB PRESS Vol.109（2019年2月23日発売）］
- 第11回 異なるユーザー層へのデザイン ―出品者／購入者，初心者／上級者……
- 重なり合わないユーザー層
- 重なり合うユーザー層
- リテラシーの異なるユーザー層
2019年2月22日［初出：WEB+DB PRESS Vol.108（2018年12月22日発売）］
- 第10回 業務利用サービスのデザイン―多くの情報，専門用語をどう見やすく表示するか
- ウィンドウの幅を意識する
- 文字情報を工夫する
2018年12月17日［初出：WEB+DB PRESS Vol.107（2018年10月24日発売）］
- 第9回 受動的な体験のデザイン―「なんとなく眺める」を快適にするには
- 受動的な体験とは
- 受動的な体験をデザインするための工夫
2018年10月22日［初出：WEB+DB PRESS Vol.106（2018年8月24日発売）］
- 第8回 動きによる楽しさの演出―コンテンツの変化，操作へのフィードバック
- 変化があるコンテンツ
- アニメーション／トランジション
2018年8月23日［初出：WEB+DB PRESS Vol.105（2018年6月24日発売）］
- 第7回 「いいね！」の効果的な使い方―ボタン設計，複数リアクション，ブックマークとの違い
- ライトフィードバックの目的と設計
- 保存とライトフィードバックの違いを明確にする
- コンテンツ作者と読者の良い循環を作る
2018年6月22日［初出：WEB+DB PRESS Vol.104（2018年4月24日発売）］
- 第6回 「もっと見る」をちゃんとデザインする
- 「もっと見る」を使うシーン
- 「もっと見る」をどう配置するか
- 「画面遷移する」か「その場で開く」か
- 「もっと見る」か「カルーセル」か
2018年4月23日［初出：WEB+DB PRESS Vol.103（2018年2月24日発売）］
- 第5回 長くなりがちなコンテンツをどう見やすくするか
- 要素を追加する際に意識すること
- 長くなった場合の対応法
- まとめ
2018年2月22日［初出：WEB+DB PRESS Vol.102（2017年12月23日発売）］
- 第4回 待ち時間のデザイン
- 待ち時間を表す代表的な2つの表現
- 待ち時間をデザインするうえでの工夫
- 待ち時間が短いときにも考えられる配慮
2017年12月22日［初出：WEB+DB PRESS Vol.101（2017年10月24日発売）］
- 第3回 赤の使い方―色が与える直感的な印象を活かす
- 赤が与える基本的な印象
- 数字表現での赤
- 削除ボタンでの赤
- インジケータでの赤
2017年10月23日［初出：WEB+DB PRESS Vol.100（2017年8月24日発売）］
- 第2回 エラーと確認―スムーズな手続きを実現するには
- 効果的にエラーを伝えるには
- 状況に応じた確認手段を用いる
- ストレスのないスムーズな流れを意識する
2017年8月22日［初出：WEB+DB PRESS Vol.99（2017年6月24日発売）］
- 第1回 画像はどう置く？―位置，大きさ，揃え方
- 左側に置く？ 右側に置く？
- 画像をメインに使い感性に訴えかける
- 一覧をタップした先の情報量を意識した画面デザイン
2017年6月22日［初出：WEB+DB PRESS Vol.98（2017年4月22日発売）］
著者プロフィール
池田拓司（いけだたくじ）
デザイナー。多摩美術大学を卒業後，ニフティ株式会社，株式会社はてなを経て，2012年にクックパッド株式会社に入社。2013年デザイン部長，2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築，Webアプリケーションなどサービス全体の設計，ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し，Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業，およびサービス開発などに取り組んでいる。
Design & Life inc.：http://designandlife.co.jp/