Zenn
Closed17

ポートフォリオでのデザイン関連の学習

なかじなかじ

参考にした本

①なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉 | 筒井 美希 |本 | 通販 | Amazon
②UXデザインの法則 ―最高のプロダクトとサービスを支える心理学 | Jon Yablonski, 相島 雅樹, 磯谷 拓也, 反中 望, 松村 草也 |本 | 通販 | Amazon（関連サイト： Fitts’s Law | Laws of UX）
③Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集 | 久保田 涼子 |本 | 通販 | Amazon
④ノンデザイナーズ・デザインブック [第4版] | Robin Williams, 米谷 テツヤ, 小原 司, 吉川 典秀, 米谷 テツヤ, 小原 司 |本 | 通販 | Amazon

  • 見出し横の番号です
なかじなかじ

改善予定の箇所

元のデザイン

投稿詳細画面 TOPページ
投稿一覧画面（カード） 新規投稿
地図モーダル 検索
  • 新規投稿は投稿詳細画面と流れを揃えた方がわかりやすいかも？

追加で設定したい内容

対応済み

  • 検索欄は検索リセット（現状は「一覧表示」）を検索欄と横並びにする
  • カラーテーマの変更
  • フォントの設定
  • 文字が縦になっている箇所の改善：検索のリセット、ヘッダーのプルダウン

なんとなくワードテーマ

  • 1人外食、晩餐会、あたたかみ、女性的、おしゃれ、美味しそう
なかじなかじ

情報の関連性（①p.26）

  • 情報の階層構造を捉える。そうすることで、並びやサイズ感などデザインする際のベースがわかる。

自分のアプリの場合

情報の種類

投稿詳細画面・新規投稿画面（（）はないけど追加予定・追加した方がいいかも）

  • 共通
    • お店のジャンル
    • 店の名前
    • 住所
    • おすすめポイント
    • レーティング
    • タグ
    • 写真
    • 使った金額
    • （投稿日時）
  • 投稿詳細のみ
    • （ユーザーのアバター）
    • ユーザー名
    • （本人の投稿に限り）編集・削除ボタン

何を重要視？

  • 縦列での情報表示になるので上から順に重要なものを並べる
  • 上位におきたいもの（この順番で並べるとおすすめ度まで最初のページ遷移で目に留まる）
    • ジャンル（パッと料理のイメージが湧きやすい）
    • お店の名前（横にいいねボタン）
    • タグ（個数制限する？）
    • おすすめ度
  • 中間層
  • おすすめ文（おすすめ文読んで場所を見る）
  • 写真（デフォルトの写真は表示しない）
  • 地図・住所（エリアわかったほうがいいかとも思ったけど、地図にせよカード一覧にせよなんとなくの場所はわかるので優先順位は高くなくても良さげ）
  • 最下層
    • 使った金額
    • 投稿したユーザー
なかじなかじ

ダイジ度天秤（①p.45）

詳細画面で関連する箇所

高い ダイジ度 低い
大きい サイズ 小さい
目が行きやすい場所 位置 ふつうor目立たない場所
強い 強さ 弱い
目立つ 色 目立たない

一覧画面（カード）で関連する箇所

高い ダイジ度 低い
大きい サイズ 小さい
多い 分量 少ない
目が行きやすい場所 位置 ふつうor目立たない場所
強い 強さ 弱い
絶対入れる 要素 入らなければ削る
なかじなかじ

タッチターゲット（②pp32）

  • フィッツの法則
  • 第一に、タッチターゲットには十分な大きさが必要。視認でき、正確に選択できるだけのサイズ。
  • 第二に、タッチターゲット同士に十分な間隔が必要

各企業のタッチターゲット推奨最小サイズ

企業/組織 サイズ
ヒュマーンインターフェースガイドライン（Apple） 44*44px
マテリアルデザインガイドライン（Google） 48*48px
ウェブコンテンツアクセシビリティガイドライン（WCAG） 44*44 CSS px
Nielsen Norman Group 1*1cm
  • 上記はあくまでも最小の大きさであるため、可能であればこれよりも大きくする意識を持つ

要素間の間隔

  • MITのTouchラボが行った研究によると、成人の指の腹の大きさは平均10~14mm、指先は平均8~10mm
  • Googleのマテリアルデザインガイドラインでは、8dp以上の余白を開けることとしているらしい

自分のアプリの場合

  • フォームのデフォルトタグのサイズと間隔を調整
なかじなかじ

マジカルナンバー7（②p59）

自分のアプリで考えるなら

  • タグの個数を制限する→対応済み
    • ちょっと今回の内容とは外れるかもしれないが、むやみやたらに数が多いよりか、数を絞って言い得ているタグの方が情報としての価値は高まると仮定した
なかじなかじ

美的ユーザビリティ効果（②p84）

  • 見た目が美しいと実際に使用機能は問わず使いやすいと感じる
なかじなかじ

色の持つイメージ（③p22）

飲食・食事関連

  • 赤
  • 黄色
  • 橙
  • 緑

載ってたサイト

配色選ぶ系

カラーの変換ツール

気になったサイトのカラーやフォントを抽出してくれる

色覚異常の人にはどう見えるか

気になった配色

なかじなかじ

ロイヤリティーフリーの写真サイト

バランスよくいい感じそう

食べ物メインだけどイラストが多く合わないかも？

色味がおしゃれ

アイコンにするものおしゃれ？

導入したもの

なかじなかじ

使えそうなテーマいろいろ

カラーの変換ツール

ナチュラルで優しいデザイン（③p33）

カラーコード

フォント

食べ物が美味しそうに見えるデザイン（③p56）

カラーコード

なかじなかじ

カラーについて（③pp62-63）

色の比率

  • ベースカラー（背景など）：70%
  • メインカラー（サイズの方向性を決める、分割しても良い）：25%
  • アクセントカラー（ワンポイントなど目立たせたい色）：5%

決めた方

  • メインカラーを決める：文字色、背景色ともに使えるようにする
  • ベースカラー：白かメインカラーの明度を上げた色
  • アクセントカラー：メインカラーの補色か対照色を選ぶと良い
なかじなかじ

トップページ

フリーレイアウト（③p135）

  • PC版のトップページの参考に。動きつけるのは難しそうだけど幾何学模様は可愛い
  • BAKE INC.

液体シェイプ（③p172-173）

使用するツール

  • Blobs – Figma
    • Figmaでランダムでポコポコデザイン作ってくれる。Figjamで操作できるので他の色味との相性とか考えられるのが良い
    • metime_meals – FigJam

その他ツール

なかじなかじ

ロイヤリティフリーのイラスト関連

良さげなサイト

アイコンで良さそう

食べる人系

食べ物系

なかじなかじ

文字列の揃え方を統一する（④p42）

  • 右揃え、左揃え、中央揃えのいずれかに統一した方が良さそう
  • 中央揃えでテキストも幅を広げるのが良いかな
なかじなかじ

似たような雰囲気でも反復になる(④p67)

  • トップページに使えそうな構図
  • 全く同じようでなくても雰囲気が同じなら統一感ある
このスクラップは2024/09/14にクローズされました
ログインするとコメントできます