海外住所入力フォームのHTMLレイアウトデザイン

通常は、
「郵便番号」「住所1」「住所2」と書いている

これがebayだと「Contry」「Address」「Additional Information」「City」「State/Province」「Region」「Postal Code」の順になる

同じ様に作りたい。

World postal code というサイトで調べられるのね。
https://worldpostalcode.com/

postal code入れたらcityを自動入力できるjavascriptのライブラリとかないのかね
と思ったら、幾つかありそう

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

アラートメッセージのフォントカラーを考える
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が一番参考になりそうな印象
とりあえずあまりノウハウがないので、作りながら修正していくパターンにしよう