大規模なWebサイトのデザインをどのように監査およびレビューする必要がありますか？
私は、以前にデザインした大規模なWebサイトにスタイルと動作の修正を加えることを任されています。
これはDrupal分散型組織のサイトであり、サイトの作成以来、あらゆる種類の欠陥が生じています。間隔、色の使用、フォントのレンダリング、一貫性のないユーザーパターンなどはすべてこの一部です私に依頼されている設計監査。
このウェブサイトの編集は、すでに巨大なリストの1つのタスクです。知りたい：
- このWebサイトを集中的かつ方法論的に検討するにはどうすればよいですか。
- 他に何かヒントはありますか？
ありがとうございました。
コンテンツ監査ドキュメントを作成
これを行うと、コンテンツ監査ドキュメントを作成しますが、これは この記事で説明 と類似しています。私はデータベースをいじくり回しましたが、通常はExcelに固執します。
各ページは一意に識別され、URL、タイトル、説明などのいくつかの属性（これらは列です）がありました。
いくつかの重要な属性を定義します
属性は重要であり、文書化しようとしている概念の代表である必要があります。たとえば、私はかつてテクニカルサポートサイトを監査し、私のコラムの1つは「ブラウザの画像を持っていますか？」と呼ばれ、各ページには「Y」または「N」のいずれかがありました。最後に、ブラウザーウィンドウのすべてのスクリーンショットがどこにあるかを簡単に確認でき、それらすべてを更新するタスクを委任する必要がある場合は、その列で並べ替えてリストを簡単に作成しました。
創造的で、意味があり実用的な列見出しを考え出す必要があります。 「色偏差」（Y/N）
音楽を入れて監査してください！
次に、各ページにアクセスして、そのページに定義した属性があるかどうかをマークする必要があります。
進むにつれ、前のページの値を入力し直す必要があるので、ほとんどの場合、より多くの属性を構成します。
さまざまなレベルで作業することで時間を節約できることがわかります。ページレベルではなく、サブディレクトリレベル。
あなたが探している特定の事柄に応じて、ある種のクローラーを使用して、ジョブの少なくとも一部を自動化することをお勧めします。個人的には、DeepCrawl.comというツールを好みます。これは、サイト全体のすべてのリンクをたどり（独自のURLをアップロードするか、XMLサイトマップファイルまたはGoogleアナリティクスに接続してより良い結果を得ることができます）、「薄いコンテンツのページ」、「タイトルが重複するページ」などのレポートを作成します、「インデックスに登録できないページ」。
ただし、Deepcrawlが検索する対象をカスタマイズできることの1つは、たとえば、本文に「Icecream」という単語が含まれるすべてのページのリストが必要な場合や、Googleアナリティクススクリプトがないすべてのページをリストする場合です。 「スクリーミングフロッグ」は、これらのカスタムアクションを実行できる別のクローラーですが、それ以外の場合は、Deepcrawlをお勧めします。
あなたの仕事の多くはロボットが拾えないものを探すことを伴うと私は理解していますが、うまくいけばこのヒントはいくつかの助けになるでしょう。
幸運を！
大規模で複雑なサイトの再設計に体系的にアプローチするには：
サイトマップから開始します。サイトを階層セクション、コンテンツタイプ、カテゴリなどに分割します。サイトナビゲーションはこれに役立ちますが、もっと考えてみてください高いレベル。一般的なカテゴリには次のものがあります。通常のコンテンツページ。ハブ/リダイレクトページ。製品の説明ページ。ポリシーページ。ショッピングカートの流れ;などサイトのさまざまな使用例をすべて考えてください。
各ページまたはページタイプの「モジュール」のタイプを識別します。たとえば、すべての通常のコンテンツページには、ページヘッダー、アラートセクション、メインコンテンツセクション、コンテンツサブセクションなどの基本要素があります。
すべての一般的な要素とモジュールの新しい「設計標準」ガイドを作成します。たとえば、すべてのH1要素（つまり、ページタイトル）は、標準のフォントファミリー、サイズ、色、太さなど。すべてのH2、H3、H4 ...と、ラジオボタンやフォームフィールドなどの他の一般的なhtml要素についても同様です。ほとんどのデザイン標準スタイルガイドには、「プライマリ」ボタン、「セカンダリ」ボタンなどの事前定義されたスタイルと、ホバー状態、アクティブ状態、無効状態などがあります。
最初に最も一般的、頻繁に使用される、または最も優先度の高いページのモックアップ/デザインを作成します。これはプロジェクト管理のベストプラクティスであり、配達を追跡し、顧客を満足させます。
モックアップとスタイルガイドを顧客と共有します。設計の方向性についてフィードバックを受け取り、「バイイン」します。これにより、将来の頭痛が大幅に軽減されます。設計の方向性を承認して承認したら、ステップ7に進みます。
新しいスタイルガイドの標準をWebサイトの残りの部分に適用します。「ワンオフ」と特別なページを個別に処理し、元の標準に忠実に従ってくださいできるだけ。
その他のヒント：
ヒント＃1特定のページで問題が発生した場合は、次のことを試してください。
- 既存のページをワイヤーフレーム化する
- このページで本当に必要な部分/モジュールを決定します
- 必要な部分/モジュールのみを使用して新しいワイヤーフレームを作成します
- 2番目の新しいワイヤーフレームを作成する-代替アプローチ
- 解決策を選択し、これが最良の解決策であると考える理由に関するいくつかのメモを文書化します。
ヒント＃2Twitter Bootstrapのドキュメントを確認し、基本的に新しいCSSスタイルを顧客に推奨していることを理解するガイド： 
