私は最高のデザインを求めることよりも、使いやすくて結構カッコいいデザインを高速で作ることに興味があります。
またアパレルブランドのサイトなど「魅せる」を目的としたサイトではなく、ブログやサービス紹介、アプリなど「伝える」「使う」を目的としたサイトを作ることを目的として書いていきます。(魅せるサイトでシステムフォント固定とかあり得ないと思います）
記事は随時更新する予定で、当面はデザイン的なこととユーザビリティ的なことを同じ記事の中に書いていきますが、分量が多くなったら分割するかもしれません。
必要なこと
アイコンや画像の雰囲気を統一する
サイト内のアイコンや画像の雰囲気が統一されていると、まとまりが生まれます。
この点、イラストレーターなどで画像が作れる人は強いです。（私は作れません）
また画像やアイコンの色にまとまりを持たせることも重要です。
フリー素材等を使うにしても、雰囲気や色には気を配りましょう。
ホバー時のエフェクト
リンクをホバーした時に何も変化が無いと、シンプルに使いにくいです。
ちょっと透過度をあげるとか、浮かせるとか、そのくらいの工夫が必要です。
transition: 0.3s ease-out;などで、エフェクトがかかるスピードも合わせて指定すると良いでしょう。
ブラウザ標準のフォーム要素を変更
チェックボックス、ラジオボタン、ファイル選択など、ブラウザ標準のものはダサすぎます。
labelと擬似要素、javascriptやjqueryなどを使ってカスタマイズするべきです。
ヘッダーのロゴをリンクにする
ヘッダーのロゴがホーム画面へのリンクになっていないと使いづらいです。
背景クリックでポップアップを閉じる
ポップアップ、モーダル、ドロワーメニューなどの背景のグレーになっている部分をクリックして閉じることができると使いやすいです。
住所入力フォームは1つにまとめる
郵便番号上3桁、下4桁、都道府県、市区町村、番地のように細かく分けると使いづらいと思います。
郵便番号、それ以下。くらいに思い切って分けてしまっていいんじゃないでしょうか。
またデザインとは違いますが、郵便番号から住所を自動で判別するようにすると便利です。
不要なこと
大部分のアニメーション
アニメーションは、一部の例外を除いてユーザビリティを下げると考えています。
特にスクロールに伴うアニメーション（フェードインやパララックスなど）は個人的に嫌いです。
スクロールのスピードくらい自由にさせてほしいです。
webフォント
ユーザーにとって一番見慣れているフォントはシステムフォントです。webフォントを使うにしても、見出しなど一部だけでOKです。
（異論が多そうですが、フォントってちゃんと選ぼうとするとやばいくらい奥が深いので。。webデザインの特徴は、フォントに関して80点の選択肢が始めから与えられていることです。）
複雑なレイアウト
レイアウトを複雑にすると、やってる感は出るかもしれませんが、労力の割にはリターンが少ないです。
noteとかサルワカとか、シンプルなレイアウトでもすごくいけてます。
色をたくさん使う、色の選定に時間をかける
メインカラーを1色決めたら、あとは配色ツールを使って色を決めましょう。プロに任せるのが一番です。
できると良いけど大変なこと
画像の自作
文章より画像の方がわかりやすく伝えられる場面ってたくさんあるわけで、そういった時に画像を差し込むことができるのがwebの特徴の1つなんですけが、なかなか難しいですよね。
個人的な好み
好きなもの
シングルカラム
コンテンツに集中できるので好きです。
好きじゃないもの
ハンバーガーメニュー
情報量が多い場合は使わざるを得ない部分がありますが、あんまり使いやすくないUIだと思っています。
タップするまで内容が見えないわけで。
押してほしいボタンは、ナビゲーションなどで常時表示させた方が良いと思っている派。
目次
記事の目次って無くても良いような。
見出しと太字部分を流し読みすることに慣れているので。
早く本題に入ってくれって思います。
記事が長い場合には有用ですが、そもそも記事をもっと完結にできないか考えたいところ。
気をつけたいこと
固定ヘッダー
高さがあるヘッダーを固定してしまうとジャマになってしまいます。
楽に実装するためのTIPS
グラフのような、データによって高さが変わる要素のことを考える
その他
ニコニコした顔のマークはかわいい