はじめに
引き続き、フロントエンジニアとして、意図したUI設計ができるようにデザイン部分の基礎を学んで行きます。
最後、デザインの基礎知識についてまとめます。
この記事のinfoは筆者の考えや感想を書いております。
ミニマルデザイン
ポイントは以下。
- どこを押せるかをわかるようにする
- 余白を最大限にいかすことによって、コンテンツを目立たせる
- シンプルとの違いを理解する*
*シンプルとは、余計な解釈を生まないデザイン、ミニマルとは余計な装飾や要素を剥ぎ取ったデザイン。
違いはこのサイトがわかりやすかった。
「シンプル」と「ミニマル」の違いって何？｜2022年3月1～2週のウエブル週報
デザインガイドライン
デザインガイドラインの目的は、デザインを定義することで、「再利用性が高まること」、「一貫性を保持できること」、デバイスを跨いでも「統一された世界観を醸成できること」。
プロトタイプを作るまで
出典：Webデザインにおけるプロトタイプとは？ワイヤーフレームとの違いや作成方法を紹介
「ワイヤーフレームやモックアップとの違い」の章の説明がわかりやすい。
ワイヤーフレーム
基本的な骨組みで構成した設計図。
手書きでもよい。
モック
リンクや動きが確認できるもの。
プロトタイプ
実際にコーディングされたもの。
以下が確認できる。
- 見え方
- 動き方
- 操作の仕方
- 印象
- 考慮漏れ
マルチデバイスデザイン
どのデバイスでも同等の機能があること。
同じUIでなくてもいい。
デバイスの無意識の使い分け
PC：じっくり作業用
スマホ：場所を問わず使用できる
テレビ：大人数で見る
上記を踏まえた上で、インタラクションを検討するのが良さそう。
例えば、こんな感じかな？
カレンダーアプリの場合だと、、、
PC: 月表示をメインに、詳細な予定入力フォームを横に配置
スマホ: 日表示をメインに、タップやスワイプで素早く予定を追加・編集
テレビ: 週表示をメインに、家族全員の予定を色分けして大きく表示
（テレビで見ることあんまりなさそうだが。）
まとめ
思った以上にシンプルにまとめてしまったので、(4)は短くなってしまいました。
次は、実際のデザインを見ながら「なぜこうなっているのかな」と考えられる、そして、自身でデザインを意図して検討できるようなことをやっていきたいと思います。