アラートメッセージの色(フォントカラー)を考える

アラートメッセージのフォントカラーを考える
Bootstrapを見てみる

#dc3545

#e83e8c

うーむ、まあこれでいいんだけど。。。

### Adobeカラーホイール
adobeカラーホイールで、メインカラーの関連色(類似色、モノクロマティック、トライアド、補色、二色分割、二重分割補色)などから合いそうな色を探す。

カラーホイール使うと、プロっぽくなりますね(苦笑)

ピクセルディメンションと解像度

– ピクセルディメンションとは、縦横のピクセルサイズの事
– 解像度はdpi(dot per inch)で表す
– 一インチの中に幾つのドットを表示できるのかを表している

デバイスのインチ、画像サイズが同じでも、解像度が異なると、表示内容が異なる。

なるほど、デバイスの解像度を考えながら作っていくのね。

[Photoshop] スライスを理解する

スライスとは、コーディング用に分解して、一つ一つの画像にしていく。
まず、Photoshopで画像を用意する。

続いて、切り抜きツールからスライスツールを選択

ファイル -> 書き出し -> Web用に保存

保存

分割された画像が書き出される。
ほう、こういう事か。。ちょっと視界が拓けてきたかな。

1.ボタン画像の上に文字を乗せる方法を確かめたい。
2.PSDファイルをHTMLにする流れを確認したい。

PSDのレイヤーが異なるものは、レイヤーごとに画像書き出ししてるんかな。

[font-family]OSのシステムフォントとfont-familyの設定

-Windows 8.1以降
Yu Gothic
Yu Gothic UI
Segoe UI

-Mac OS EI caption以降/ iOS
Hiragino Sans
Sanfrancisco

-Android
Noto Sans CJK JP
Roboto

<style>
    	body {
            font-family: "Arial", "メイリオ";
        }
    </style>

<style>
    	body {
            font-family: sans-serif, "Helvetica Neue";
        }
    </style>

Helvetica Neue
-> mac のみ

ゴシック系

font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

なんで、font-familyで書体を複数設定しているか全然わからなかったけど、それぞれのOSで書式がないときに厳密に指定するためなのね。

何年Webやってんだ、って感じだが、やっと理解できた。

[UI・UX] 背景色とテキストカラーのコントラスト比の確認方法

https://lab.syncer.jp/Tool/Color-Contrast-Checker/というサイトで、背景色とテキストのコントラスト比を確認できる。

例えば、背景色が、#ffffff(white)で、テキストが#9A9A9Aだと、コントラスト比が2.81で、Web Content Accessibility Guidelines (WCAG) 2.0の基準4.5に満たないとのこです。

Web Content Accessibility Guidelines
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。

なうほど、こういうのがあるんやな。勉強になります。

[Design Guideline] 用語 : ポジネガ、DICカラー、アイソレーション

### ポジ表示、ネガ表示
-ネガは陰画、ポジは陽画
-実際の明暗とは逆になっている画像で、明るい所が黒く、暗い所が白い画像

元画像

photoshopで画像を開く

photoshop [command + i]

DICカラー
L DIC社が提供

アイソレーション
– 全体1に対して、余白0.5と言われている

変形(長体・平体・斜体・回転)、間隔の変更、書体の変更、色の変更、装飾(影・縁取り・立体表示)、アイソレーション範囲内での他要素の表示、視認性を低下させる背景の使用、文中での使用

用語知らないと、ビビりまくるな

[Design Guideline] Componentのvariationを増やしたい

とりあえずComponentにどんなものがあるか、ざっと一つ一つ見ていきます。

・Accordion
・Activity Timeline
・Alert
・App Launcher
・Avatar, Avatar Group
・Badges
・Brand Band
・Breadcrumbs
・(builder Header)
・Button Groups
・Button Icons
・Buttons
・Cards
・Carousel
・Chat
・Checkbox, Checkbox Button, Checkbox Button Group
・Checkbox Toggle
・Color Picker
・Combobox
・Counter
・Data Tables
・Datepickers, Datetime Picker
・Docked Composer
・Docked Form Footer
・Docked Utility Bar
・Drop Zone
・Dueling Picklist
・Dynamic Icons
・Dynamic Menu
・Expandable Section
・Expression
・Feeds
・File Selector, Files
・Form Element
・Global Header
・Global Navigation
・Icons
・Illustration
・Input
・List Builder
・Lookups
・Map
・Menu
・Modals
・Notifications
・Page Headers
・Panels
・Path
・Picklist
・Pills
・Popovers
・Progress bar
・Progress Indicator
・Progress Ring
・Prompt
・Publishers
・Radio Button Group, Radio Group
・Rich Text Editor
・Scoped Notifications
・Scoped Tabs
・Select
・Setup Assistant
・Slider
・Spinners
・Split View
・Summary Detail
・Tabs
・Textarea
・Tiles
・Timepicker
・Toast
・Tooltips
・Tree Grid
・Trees
・Trial Bar
・Vertical Navigation
・Vertical Tabs
・Visual Picker

ざっと見ていき、興味があったのは、loading spinner, toggle, search instance result, color picker, progressStep.jsあたり。触っておくか。
それと、デザインだからフォントもカバーしておかないと。
なんか自分でもよく分からないテンションになってきました。

[Design Guideline] 項目を考える

デザインガイドラインの項目を考えます。

・Overall
— Clarity, Efficiency, Consistency, Beauty

・Basic
— Component, Layout
— Header
— Bar, Styles, Colors, Back Button, Menu, Settings, Help Menu, Save, Status, In process Action, Alert, Utility, Search, Toggle
— Layout
— Columns, Style, Panels, Body, Horizontal tabs, Accordions, Navigation, Color Picker
— Modals
— Validation
— warning, alert, Confirmation modal, Error Icon, Error Alert

・Charts
— Bar chats, Dot Plot, Line Chart, Scatter Plot, Pie Chart, Tree map, Heat map, Matrix Chart, Metric, Flat Gauge, Polar Gauge, Rating Chart, Map, Funnel Chart, Color

・Data Entry
— text input, sizing, input help, date picker, lookup, Checkbox, radio, checkbox toggle, Label

・Displaying Data
— table, tree grid, title, interactive guide, Feed

・Empty State
— 404 message

・Iconography
— Design Principle, Accessibility, Informational Icons, Decorative Icons, Grid System, Key Line Shape, Object Icon

所感
– Localizationしたサービスを作りたい
– デフォルトでUser Feedbackを考えないと行けない
– Loading, toggle, SearchのInstance Resultなどは実装できる様になっておきたい。
– Error, Alertなどは最初にしっかり考えておかないといけないのね

なんだかんだで、ローカリゼーションしたサービスを作りたい。在日外国人向けとかからスタートしたいね。

Design Guidelineを作りたい

ざっくりとでもいいので、デザインガイドラインとコーディングガイドラインを作りたい
デザインガイドラインの目的は、デザインの品質向上と一貫性の担保
各社のデザインページをざっと見てみる。

Apple: Human Interface Guideline
https://developer.apple.com/design/resources/
L Sketch, PSD, XDで作成している

Microsoft: Fluent Design System, Inclusive Design
https://www.microsoft.com/design/fluent
https://www.microsoft.com/design/inclusive

Airbnb: design
https://airbnb.design

Ubuntu: design
https://design.ubuntu.com

wework: office design
https://www.wework.com/ideas/category/office-design-space

salesforce: design
https://www.lightningdesignsystem.com/guidelines/overview/

やるべきことはこの辺りか
– ターゲットユーザの整理
– デザインガイドラインに書いていく項目の洗い出し

パッと見たところだと、salesforceが一番参考になりそうな印象
とりあえずあまりノウハウがないので、作りながら修正していくパターンにしよう

ラジオボタンで分岐する銀行口座or郵貯口座登録のUIを実装しよう

販売管理システムで、請求書に振込先を表示させる為、口座登録の画面を作ります。

amazon seller accountの口座登録画面
-> 銀行口座のみの登録

どちらかというと、郵便貯金口座も表示できるようにしたい。
チェックボックスで銀行口座、郵便貯金口座を振り分けられるようなUIになるようWireframeを書きます。

### フロント実装
– チェックボックスで銀行口座を選択した場合、郵貯口座の入力ができないようにする
– 同様にチェックボックスで郵貯口座を選択した場合、銀行口座の入力ができないようにする
– 入力途中で口座区分を変更した場合は、document.getElementById(“*”).value = ”として、valueを空に変更する

<form>
          			<br>
					<div class="row col-md-12">
	          			<div class="form-check col-md-2">
						  <input class="form-check-input" type="radio" name="bank_type" id="bank" checked onClick="flg0(this.checked);">
						  <label class="form-check-label" for="bank">銀行口座</label>
						</div>
						<div class="form-check col-md-2">
						  <input class="form-check-input" type="radio" name="bank_type" id="jpbank" onClick="flg1(this.checked);">
						  <label class="form-check-label" for="jpbank">郵便貯金口座</label>
						</div>
					</div>

          			<br><br>

					<div class="form-group mb-0">
						<label for="title">金融機関</label>
						<input type="text" class="form-control col-md-4" name="bank_name" id="bank_name" placeholder="銀行名を入力してください">
					</div>
					<br>
					<div class="row col-md-12">
	          			<div class="form-check col-md-2">
						  <input class="form-check-input" type="radio" name="account_type" id="account_type" checked>
						  <label class="form-check-label" for="account_type">普通預金</label>
						</div>
						<div class="form-check col-md-2">
						  <input class="form-check-input" type="radio" name="account_type" id="account_type">
						  <label class="form-check-label" for="account_type">当座預金</label>
						</div>
					</div>
					<br>
					<div class="row">
						<div class="col-md-3">
							<label for="account_number">口座番号</label>
							<input type="text" id="account_number" class="form-control" placeholder="口座番号を入力してください">
						</div>
						<div class="col-md-3">
							<label for="account_holder">口座名義人(カナ)</label>
							<input type="text" id="account_holder" class="form-control" placeholder="口座名義人(カナ)を入力してください">
						</div>
					</div>
					<br><br>

					<div class="row">
						<div class="col-md-3">
							<label for="jp_name">記号(郵貯)</label>
							<input type="text" id="jp_name" class="form-control" name="jp_name" placeholder="見積日を入力してください" disabled="disabled">
						</div>
						<div class="col-md-3">
							<label for="jp_number">番号(郵貯)</label>
							<input type="text" class="form-control" id="jp_number" name="jp_number" placeholder="部署名を入力してください"  disabled="disabled">
						</div>
						<div class="col-md-3">
							<label for="jp_holder">口座名義カナ(郵貯)</label>
							<input type="text" class="form-control" id="jp_holder" name="jp_holder" placeholder="見積担当者の名前を入力してください"  disabled="disabled">
						</div>
					</div>
					<br><br><br>

					<div class="col text-center">
						<button class="btn" type="submit">更新</button>
					</div>
					
				</form>

<script>
		function flg0(ischecked){
			if(ischecked == true){
				document.getElementById("jp_name").value = '';
				document.getElementById("jp_number").value = '';
				document.getElementById("jp_holder").value = '';

				document.getElementById("jp_name").disabled = true;
				document.getElementById("jp_number").disabled = true;
				document.getElementById("jp_holder").disabled = true;

				document.getElementById("bank_name").disabled = false;
				document.getElementById("account_number").disabled = false;
				document.getElementById("account_holder").disabled = false;
			} else {
			}
		}
		function flg1(ischecked){
			if(ischecked == true){
				document.getElementById("jp_name").disabled = false;
				document.getElementById("jp_number").disabled = false;
				document.getElementById("jp_holder").disabled = false;

				document.getElementById("bank_name").value = '';
				document.getElementById("account_number").value = '';
				document.getElementById("account_holder").value = '';

				document.getElementById("bank_name").disabled = true;
				document.getElementById("account_number").disabled = true;
				document.getElementById("account_holder").disabled = true;
			} else {
			}
		}
	</script>

OK、 これをDjangoに実装します。