見出し画像

個人的に実践しているWebデザインガイドライン⑦ その他重要事項編

TAK / Web Creator.

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# モバイル対応

モバイルフレンドリー対応を考慮する。

高画素密度ディスプレイ（Retina）対応を考慮する。

回線速度や通信量を意識する。サイズの重い画像や動画などの乱用は避ける。ギガ泥棒なWebサイトは直帰率が高くなることを意識する。

Android 4系は対応していないCSSやCSS関連のバグが多い。

ラジオボタンやテキストリンクはスマホではタップしにくいので、どのデバイスでも操作しやすいデザインを心がける。

まだまだ画面幅320pxのスマホは現役であることを意識する。

# CSS関連

角丸やシャドウなどをCSSで実装するかどうかはデザインの段階で決めておく。

コーディング依頼時には画像とCSSのどちらで表現するかをわかりやすいようにしておく。

レガシーブラウザでは実装できないCSSを使う場合はプログレッシブ・エンハンスメント設計を考慮する。

Adobeのデザインツールで生成されるCSSは信用してはいけない。

# アクセシビリティ対応

マウスホイールやフリック操作はできない場合もあるので依存しない設計をする。

高齢者や色覚障害の方を想定し、色に依存したデザインは避ける。

# その他

キービジュアルの背景などに動画を取り込む際は動画のサイズに注意する。重すぎる動画の使用は厳禁。

---

ユーザーの承諾なしに勝手にBGMを流すWebサイトはユーザビリティが最悪。基本的にBGMは流さず、BGMを流したいときはユーザーに流していいのか選択肢を用意する。

---

デバイスやブラウザの流行りは必ず意識する。iOSのセーフエリアはちゃんと意識しているか、ダークモードは考慮しているかなど。

---

変化の大きいグラデーションはダサくなりがち。グラデーション形状も工夫する。

グラデーションのギャラリーサイトを参考にするのも手。

---

BootstrapなどのCSSフレームワークを使うデザインの場合は、フレームワーク臭を出さないように心がける。

---

デザインの段階でもSEOを意識する。例えばボタンの「続きはこちら」といったテキストはSEO的にもアクセシビリティ的にも非推奨。

SEOやWebマーケティングに知見のあるデザイナーの作るWebデザインは強い。

---

社名・商品・サービスの名称は必ず公式表記で記載する。

---

デザインを作った後は自分のデザインを客観視するためにも誰かにフィードバックしてもらう。または1日経った後にデザインを冷静に観察する。

---

何も思い浮かばなくても、とりあえず体を動かす。

---

適度な休憩で脳を休める。人間の集中力は45分がいいところ。

---

尊敬するWebデザイナーを見つける。その人から影響を受ける。

---

デザインは1pxでもこだわる。妥協しない。

---

嫉妬はエネルギー。コンプレックスはモチベーション。

---

自分が作ったデザインは大切にする。

# デザインセンスは「経験値」

センスの正体は経験値。生まれ持った才能ではなく後天的に身につくもの。

センスを持ってる人は良い物事に触れる機会が多く、人よりも多く良い体験をしている。逆にセンスが無い人は単純に体験の量が少ない。

著名なデザイナーが毎日インプットを行っている理由は経験値を増やすため。

良質な体験はポジティブな体験だけでなく、ネガティブな体験も含まれる。デザインで失敗したり、デザインチェックで悪い評価をつけられることも後々何が良いか・悪いかを判断する上で大切な材料になる。

センスを身につけたいなら、なんでもやってみて良いも悪いも多くの体験を積むことがマストじゃないかって僕は思ってる。

ただ、ゲームの経験値とは違い、デザインのセンスは筋トレ同様に保守コストが掛かり放っておくと枯渇してしまう。

デザイナーは常に勉強しなければならない。

# おわりに

ここまで色々書いてきたけれど、色々デザインやってみて、それぞれオリジナルのデザインガイドラインを作るのがいいと思う。

ここまで書いてきたことは絶対ではないけど、僕は間違ってはいないと思う。

デザインは楽しむことが大切。

僕はデザイナーとしてはまだぺーぺーですが、毎日楽しんでます。

おわり

愛と平和