これからのWeb制作に役立つ、69個の有益で大切なポイントのまとめ -69 Website Design Tips

Web制作のデザイン、ユーザエクスペリエンス、コンテンツ、制作・開発、そしてこれから必要もの、避けておきたいものをまとめた「69 Website Design Tips」を紹介します。

Web Design Guide -69 Website Design Tips

下記は各ポイントの要点を意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• デザイン
• ユーザエクスペリンス
• コンテンツ
• 制作・開発
• Web制作のこれからに必要なもの
• 避けておきたいもの

デザイン

1. ターゲットとなるビジターを調査するのが重要
2. カラーは2, 3色をベースに、多色が必要なら明度に変化をつける
3. ロゴは、デザインされた高品質なものを使う
4. コンテンツが魅力的でも読めないテキストでは意味が無い
5. 要素が減った時増えた時のことも考えてデザインする
6. 既製のデザインを使うのではなく、ターゲットに適したデザインをする
7. 構造化されたデザインにはグリッドが便利、汎用性の高い12カラムがお勧め
8. 重要な要素を目立たせる時は、必要のない要素を取り除いてシンプルにする
9. トレンドの使いすぎはよくないですが、10年前のデザインを使用するのはもっとよくないです
10. デザインはオリジナル性を大切にします、既製をそのまま使うと他のサイトでもそれを使っているかもしれません
11. デザインは必ず、さまざまなテストをしてください

ユーザエクスペリンス

12. 5秒以内に、ページの価値をビジターに明確に伝えてください
13. 多くのビジターがアクセスできるようレスポンシブ対応にすることは重要
14. ナビゲーションはビジターが探しているものを見つけることができる重要な要素
15. 次のコンテンツを見せるには、スクロールとクリックどちらも一長一短があります
16. ビジターの気が散らない・邪魔にならないようフローを設計
17. 多くの要素を詰め込みすぎると、ビジターの気を散らすだけ
18. ボタンはクリックしたくなるよう美しく魅力的にデザイン
19. フォントは読みやすいものを使用する
20. ビジターにはあらゆる人種・性別・年齢の人がいることを忘れずに
21. 空白スペースはコンテンツを理解することを助ける重要な要素
22. リンクのエラーは、ビジターをがっかりさせるだけでなく、検索エンジンにも影響を与えます
23. リンクのテキストは、遷移先が分かる情報を提供
24. 外部リンクは内容を正当に評価することを示します
25. フォームの入力項目は、必要最低限の数にするのがベスト
26. フォームはオートコンプリートが可能な状態に
27. フォーム送信後に受理メッセージを送るのは良いアイデア
28. フォームやメールアドレスなど、連絡手段を提供するのは重要

コンテンツ

29. 成功したWebサイトはデザインをシンプルにすることから始めています
30. サイトのトップページは、サイトの最も重要な情報を含んでいるだけであるべき
31. 一番重要なのは、サイトのコンテンツ
32. ビジターに伝わるメッセージを
33. 写真はオリジナルで美しいものを使う
34. ビジターの回線環境が良くなっているので、動画を使うのも効果的
35. 更新し、フレッシュな状態を保つ
36. ブログを使うのも効果的
37. ソーシャルメディアへの対応は非常に重要
38. 間違ったビジターにターゲットを定めない
39. テキストは誤字・脱字がないよう確認する
40. ファーストビューは最も重要なエリア
41. 特定のページだけでなく、すべてのページをランディングページとしてデザインする
42. フォーカスはビジターですが、SEOも大切。特にGoogleガイドラインに違反していないか常に確認する
43. サイトのトップページだけが重要ではありません、配下ページの方が重要なサイトはたくさんあります

制作・開発

44. ゼロから制作することで時間を浪費するのではなく、CMSを使うのは賢い判断
45. サイトは常に安全であることを保証する
46. テクニックは、ビジターにどんな利益があるかが重要
47. 自身の技術・知識を常に更新するようにする
48. 時には、新しいものを使って実験することも
49. 予算や時間などが理由で、外注を使うことも考える
50. コードはクリーンに、コメントを残すことは重要
51. Webページのパフォーマンスをアップし、ロード時間を速くする
52. 画像はフォントやCSSでできないか、圧縮できないか、スプライトを効果的に使っているか
53. ビジターの気を引くために特殊すぎる効果は注意
54. パララックスはシンプルなエフェクトが好まれる傾向
55. フッタはページの最下部にあるもの、コンテンツ量が少なくても最下部に配置されるスティッキーは効果的

Web制作のこれからに必要なもの

56. ビジターに最高の経験を与えるため、テストと更新を忘れないように
57. 異なる分野からも学ぶべきモノはたくさんあります
58. 業界のリーダーは数年前もリーダーだった訳ではない
59. 検索エンジンとソーシャルメディアは大切な戦略
60. ウェアラブルデバイスに備えておく

避けておきたいもの

61. Flash
62. コンテンツに重なるように表示されるポップアップ
63. 動画や音楽の自動再生
64. サービスやプロダクトを扱うサイトの広告
65. カルーセルとスライダー
66. 古いテクニック
67. 面白いGIFアニメーションは注目を得ます。それはコンテンツより大切なものですか？
68. 英語の大文字表記は目立ちますが、使いすぎないでください
69. テキストの下線は、リンクに使われるべき