Web UIの実装で考えていることと気をつけたいこと
https://gyazo.com/a1b0ce535a168b2d3a8ae89ae40e46f1
https://gyazo.com/5510d4e88c34b7dc94f91817952946e7
メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります
自己紹介
yamanoku.icon @ yamanoku
大山奥人, おおやまみちのく a.k.a やまのく
得意領域
9/30で一軒家に住んで1年経ちます🏠
LT初心者です！よろしくおねがいします！
内容はデザインに関連していること
https://gyazo.com/637b771c3b001503607062161b24d48b
8月中旬より参画
副業の業務内容
環境
というわけで
副業でUI実装をして自分なりに考えてることを発表します あらゆる人に、価値、届けたいよね？
≒ 逃げることは出来ない
Web UIについての話です
なんらかのボタンUIを実装する時
https://gyazo.com/74969d0f4c95aeda9243587c59c2c592
考慮しないといけないこと（一例）
リンクとしてのボタン？何かを動かすためのボタン？送信するボタン？
<button> の場合
typeの指定をする
何もないとsubmit（送信）と自動的に決まってしまう
disabledのときどうすうか
onClickの挙動
Firefoxだとkeydown指定の場合スペースキー操作で2回挙動してしまうバグが…！ スタイルを消すために必要なこと
apperance: none;
border, background-color, margin, padding
リンクの場合
<button>じゃないと判断できるものは何か？
href属性は存在しているか
リンクとしてフォーカスできない！
共通点としてのボタン
フォーカスアウトラインの制御
押されたとき（active）の見た目・状態
テキスト情報は含まれているか
アイコンの場合、aria-labelで何者かを証明してあげる
<span class="icon-search" aria-label="Search"></span>
見た目だけでは気づかない
単体のものも画面に当てはめてみた時、違ったりすることもある
コンポーネントの名前設計
~Buttonなら<button>
~Linkなら<a>
実際に使ってみないとわからないこともある
挙動の最低限の保証をする
これは何をするものなのか？が説明できるようにしてある
言葉を起点にしてあげる
考えすぎ？
考慮することに越したことはない
気づけていないことのも多いのでは？と思っておく
ただどこまでが必要なのかついては話し合えると良し
UI、コンポーネントというものに向き合って気づいたこと
その数値には何の意味があるか
containerとかwrapperみたいな最大幅について
yamanoku.iconは最大幅については文字数のために考えてみる https://gyazo.com/1788d144ef067cfd9bf291227dc35010
文章を読ませる上での１つのフレームワークに使える
例：結果が返ってきたら数秒後に消えるインタラクション
システムとつなぐためのものがUIである
見えないところの何と何をつながるのか？
yamanoku.iconが実装時に参考にしているもの
誰でもが使えるUIを実装をするためのチュートリアル
良い体験を提供できるように我々の戦いは続く
まだまだ道半ば
すべてうまく出来たことはない
間違っていることに気づけたら正していく
我々は何のためにものをつくっているか？
正しさ同士で戦い合わない
知識がある・声が大きい人が勝つことが正解ではない
お互い妥協点を見つけながらより良くしていく
Thank you for listening !
https://gyazo.com/4c1d0df4903765cc351797c10f903ba1