使いやすいサイトを作るためにできそうなことをメモ。
##もろもろ
・ボタンを少なくする
・フレンドリーフォワーディング
・404画面をいい感じにする
・ページネーションの「前へ」「次へ」ボタンとページ数の数字はどちらか片方だけを使う方が好き。
・外部リンクは、アイコンで別タブで表示することを明示した上でtarget="_blank"をつけるとやさしくて使いやすい
・ヘッダーのロゴをリンクにする
・背景クリックでポップアップを閉じる
・複数のサービスのアカウントでログインできる仕様の場合、前回何でログインしたかを表記する
・設定変更画面では「更新」ボタンがあったほうが安心。
・処理に時間のかかる部分にはローディングアニメーション等を入れる
・クリックできる要素は、それがわかるようにする。押しやすい大きさを確保する
・ページャーは「1 2 3 4 ... 6」とかにして、「...」の部分も1つのボタンにすると良い感じ
・アイコンがリンクになっている場合文字を添える or ツールチップを使う
##フォーム
・フォームの入力値には、pattern属性とjsの正規表現で入力制限をつけると親切
参考：pattern、type属性のおさらい
・郵便番号から住所を自動で入力
ajaxzip3
・入力された電話番号や郵便番号にハイフンが含まれていた場合、エラーを出すのではなく裏側でハイフンを取って保存する
・メールアドレスに大文字が含まれていた場合にも、裏側で小文字に変換する
・住所登録フォームを1つにまとめる
→「郵便番号上3桁、下4桁、都道府県、市区町村、番地」みたいに別れていると使いにくい
・入力した時に褒めてくれる
→「良いメールアドレスですね」など
・入力が終わっていない時に「不正な形式です」的なエラーが出るとムカつく
##好きなアニメーション
アニメーションは基本好きじゃないけど、以下のアニメーションはありだと思う。
・ヘッダーの幅がスクロールで狭くなる
https://startbootstrap.com/previews/freelancer/
・スムーズスクロール
https://codepen.io/manabox/pen/NVdePj
・無限スクロール、はてなブックマークのやつが良い感じ
https://b.hatena.ne.jp/nyshk97/bookmark
10件ごとにページネーションが出てくるけど、無限スクロールにもなっている。
単純な無限スクロールだと、どこで一区切りつけるかの判断が難しくなってしまう。
・記事を読み進めるとサイドバーが暗くなる
https://ja.nuxtjs.org/guide/