ウェブサイトレイアウトの全プロセス: 完璧なウェブサイトレイアウトデザインを作成するための 20 ステップ

ニューヨークの広告代理店 B-Reel のディレクター Claudio Guglieri 氏が、Web サイトのレイアウトを設計するプロセスを理解できるように、この Web サイト設計トレーニング ガイドを作成しました。

ウェブサイトのレイアウト設計の話に入る前に、私が長年デザインの仕事で見てきた、特に「ウェブサイト設計トレーニング」で説明されているインターンや初心者に多い、よくある間違いをいくつか紹介したいと思います。

この記事では、完璧な Web サイト レイアウトを作成する手順について説明します。新しいプロジェクトを開始する前とプロジェクトの設計プロセス中に知っておくべきすべてのことを網羅することを目的としています。デジタル広告会社で働くすべての新人 Web デザイナーに適しています。

以下の原則は、設計の詳細だけでなく、最高の作業を行うための一般的なワークフローも提供します。これらのガイドラインに従えば、すぐにプロフェッショナルな Web サイト レイアウトを設計できるようになります。

01. まずは紙に自分の考えをまとめる

世界の都市のイラストシリーズ

これは明らかに重要ですが、デザイナーがこのステップを省略し、解決すべき問題についてよく考えずに Photoshop CS6 にすぐに飛びつくケースをよく見かけます。デザインの目的は問題を解決することですが、これらの問題はグラデーションや影の効果では解決できず、完璧なレイアウトと明確な構造が必要です。シェーディングを適用する前に、コンテンツ、レイアウト、機能について検討してください。

02. トップレベルのスケッチから始める

基本的なフレームワークをスケッチすると、UXの問題を解決し、レイアウト構造を整理するのに役立ちます。

プロジェクトのルックアンドフィールに取り組んでいる場合、最初に行うことは、すべての設計上の問題を解決するトップレベルのフレームワークを構築することです。フレームは、アクションとナビゲーションを容易にするコンテンツを囲む UI です。これには、ナビゲーションや、サイドバーやボトムバーなどのさまざまなコンポーネントが含まれます。

ここからデザインをスタートすれば、ホームページ以外の部分をデザインするときにレイアウトのイメージが明確になります。

03. PSDにグリッドを追加する

10pxのベースラインで描画された978グリッドの例

このステップは非常に簡単です。 Photoshop で何かのデザインを始める前に、適切なグリッドを作成する必要があります。このステップのロジックはよく知られています。これを行わないと、最終的なデザインが完璧にならないことは間違いありません。

グリッドは、レイアウトのさまざまな部分を構造化するのに役立ちます。また、特定の画面サイズに合わせて設計したり、間隔やその他の設計上の問題を考慮したテンプレートを作成したりするのに役立ち、

04. タイポグラフィスタイルを選択する

一般的な目安としては、Web サイトのレイアウトでは 2 つ以上のフォントを使用しないことが最善です。

さまざまなフォントと配色を理解することは、プロジェクト開発フェーズの一部です。ウェブサイトでは 2 つ以上のフォントを使用しないことをお勧めしますが、実際には、利用可能なカラーパレットによって異なります。全体的に、選択するフォントは、大量のテキストでも読みやすく、タイトルやアクションにマッチするものである必要があります。大きなフォントを使用して大胆に表現し、書体の使用において全体的な一貫性と鮮明さを保ちます。

05. テーマカラーを選択する

視覚疲労を避けるために、色のグラデーションとトーンを制限します。

使用するフォントセットを選択したら、UI、背景、テキストに使用する色の調査を開始する必要があります。色に関しては、一般的なユーザー インターフェイスを扱うときは、色とトーンをシンプルに保つことをお勧めします。

UI をその要素の機能に基づいて設計するときは、一貫性を維持することが重要です。 Facebook、Twitter、Quora、Vimeo などのサイトのレイアウトを考えてみましょう。 UI 以外では、コンポーネントの機能を妨げない限り、イラストやグラフィックの詳細に色を使用することに制限はありません。

06. レイアウトを分割する

ウェブサイトの構造がシンプルであればあるほど、ユーザーにとって閲覧しやすくなります。

ウェブサイトの各部分はそれぞれ独自の役割を果たす必要があります。ユーザーにとって、各パーツには独自の存在理由があり、対応する最終結果を得ることができます。レイアウトは、コンテンツを強調し、そのセクションで最も重要な情報を表示することに重点を置く必要があります。実際には、ページにそれほど多くの行動喚起ボタンは必要ないので、各コンテンツは「ここで何を達成できるか」という最終的な目的を導く必要があります。

シンプルな目標のために思いつく最もシンプルなレイアウトを考え、必要なコンポーネントを追加し始めます。結局、シンプルであることは簡単ではないということに気づいて、嬉しい驚きを感じるでしょう。

07. 自分が築き上げてきたものを再考する

検索ボタンは本当に必要でしょうか? ほとんどの場合、答えは「いいえ」です。

デザイナーとして、私たちはユーザーがインターネットをナビゲートする方法を構築し、単純なアクションを実行するために必要なステップ数や、Web サイトをどの程度複雑にするかを決定します。私たちは皆、デザイン パターンと規則に従います。なぜなら、それらは機能するからです。しかし、測定したり再考したりする時間が十分にないというだけの理由もあります。コンポーネント上の確立されたインタラクション パターンを再考し、改善できるかどうかを確認することが重要です。

08. 自分自身に挑戦する

私はすべてのデザイナーに、マンネリ化に固執せず、あらゆるプロジェクトで自分自身に挑戦することを奨励しています。すべてのプロジェクトに革新が必要なわけではないので、インタラクション デザイン関連のコンテンツを追加するかどうかを自分で決める必要があります。たとえば、自己課題には、新しいグリッド システムの使用、新しいコンポーネントの作成、さらにはブレンド モードの回避や特定の色の回避などの小さな課題が含まれる場合があります。

09. 細部に注意を払う

進行中のゲームプロジェクト: 詳細表示

これは決まり文句ですが、完成品では必ずしも使用されるわけではありません。プロジェクトのコンセプトに応じて、「焦点」も異なります。

ボタンの小さなグラデーションや背景ボックスの周りの微妙なストロークなど、小さなインタラクション、予期しないアニメーション、または美的タッチに焦点を当てます。しかし、全体的に見て、楽しんでいるなら、それは非常に重要であり、非常に自然なことです。

10. 各コンポーネントをデザインコンペのように扱う

各要素に注目してください。1＋1は2より大きいです

この理論は私のオリジナルのものではないことを認めなければなりません。私は以前、Fantasy Interactive からこの声明を聞いたことがありますが、その明確さと要点の把握に驚きました。各コンポーネントは、優れた性能を発揮するように個別に設計されています。デザイナーは、特定の領域を最も重要でない領域として扱い、十分な注意を払わなくなることがあります。

11. デザインの明瞭性を向上させる

ピクセルがぼやけるのを避けるには、ストローク効果と背景または背景色とのコントラストを正しく設定してください。

美的考慮はさておき、きれいで正しい構成を作成するために回避する必要がある一般的な問題がいくつかあります。デザインの明瞭さを向上させる際に留意すべき点は、グラデーション バンディング、ぼかしエッジ、フォント レンダリング オプション (一部のフォントは、フォント サイズに応じて特定のレンダリング モードで表示するのが最適です)、背景とブレンドするストローク効果などです。

上記はいくつかの基本的な考慮事項を示していますが、実際には注意が必要な問題は他にもたくさんあります。設計全体を検査してすべてが完璧であるかどうかを確認し、各コンポーネントを個別に分析して問題がないか確認してください。

12. PSDを整理する

Photoshop でデザインする場合（グリッドと組み合わせて）は、これが非常に重要です。プロジェクトの規模や関与するデザイナーの数に関係なく、ファイルをクリーンな状態に保つ必要があります。これにより、さまざまなパーツを簡単にエクスポートできるようになり、設計プロセスが高速化され、他の設計者と共有できるファイルでの作業が可能になります。

13. 最善のケースを想定して設計するが、最悪のケースにも備える

さまざまなデバイスやサイズでデザインがどのように機能するかを念頭に置いてください

デザイナーとしての私たちの仕事は、さまざまな制約のある問題を解決することです。 Web デザインのプロセスでは、概念的および技術的な問題やコンテンツ関連の問題など、さまざまな制約が発生します。

理想的な条件だけでなく、最悪の条件でも機能する Web サイトを作成する必要があります。たとえば、ユーザーがかなり小さな画面で Web サイトを閲覧している場合、Web サイトのコンテンツが断片化されて表示される場合があります。

しかし、デザイン作品を展示するという目的を考えると、個人的には最適な環境を整えることを強くお勧めします。そのため、ユーザーが最もよく使用する環境である最適なブラウザサイズでコンテンツを表示しながら、最適な量のコンテンツを表示したいと考えています。

14. デザインに夢中になり、愛は憎しみに変わる

デザインを勉強しているなら、これをやったことがあるはずです。デザインを完成させるたびに誇らしさを感じます。デザインは私の人生の一部になったのです。また、スクリーンショットを撮って他のデバイスと比較したり、デスクトップの背景に設定したり、印刷して壁に貼ったりもします。

そのプロセス全体を通して、私はある重大なポイントに達し、うんざりしてしまいました。欠点や間違いに気づき、変更を加え始めました。古いデザインが気に入らないというのは成熟の兆候であり、自分の問題点をようやく発見したことを意味します。

15. クライアントと会う前にコンセプトの設計に時間をかけすぎないようにする

インタラクティブなコンセプトを提供したり、外観や雰囲気をデザインしたりするときは、できるだけ早くクライアントと同期していることを確認する必要があります。最初のコンセプトが承認されたら、少しリラックスして設計を開始できます。

ただし、最初に提出したコンセプトがクライアントに好印象を与えなかった場合は、2 番目のコンセプト提案がクライアントの要件を満たすことができるように、さまざまなフィードバックを収集する必要があります。

16. 開発者と友達になる

ニューヨークの広告代理店 HUGE の Rafael Mumme 氏は、www.netmagazine.com/opinions/20-things-drive-web-developers-crazy で、デザイナーが開発者とより効果的に協力する方法についてアドバイスしています。

開発者はあなたと同じように創造的で、自分の仕事を愛しています。しかし、彼らは必ずしも最初からプロジェクトに関わるわけではなく、コンセプトデザインが確定した後にデザインに関わることがほとんどなので、クリエイティブな仕事は省かれてしまいます。このプロセスは間違っています。最高のアイデアのいくつかは開発チームから生まれます。あなたのコンセプトを共有すると、彼らがそれをより美しく、デザインしやすいものにしてくれることにきっと驚くでしょう。

17. デモンストレーション: 説明するときは、聴衆が 4 歳の子供だと想像してください。

作品を見せるということは、デザインすることと同じくらい重要です。間違ったプレゼンテーション方法を使用すると、優れたデザインが埋もれたり、排除されたりするおそれがあります。覚えておいてください。視聴者が最初にあなたのデザインを見たとき、彼らはあなたが念頭に置いていた重要なポイントをすべて理解するわけではありません。

18. 自分の創造性に自信を持ちなさい。しかし、その奴隷にならないように

自分のアイデアをいつ提案するか、あるいはチームや顧客がいつ反対するかを知ることには、ちょっとした転換点があります。デザイナーとして、自分のデザインを信じる必要があるだけでなく、他の人の意見を受け入れ、アイデアを素早く変更し、その後の調整を行う意欲も必要です。すべての道はローマに通じていることを忘れないでください。

19. 開発中の設計のフォローアップ

広告代理店で働いている場合、完了したプロジェクトが開発段階に入る一方で、新しいプロジェクトの設計に参加しなければならないことがよくあることを理解する必要があります。 PSD とスタイルシートを提出すればすべて終了だと一般に考えられていますが、これは間違いです。実際、すべては始まったばかりです。

デザインとインタラクションのコンセプトが完全に実装されているかどうかを本当に気にしている場合は、開発者の友人とリアルタイムでコミュニケーションを取り、最良の効果を達成するために支援を提供することができます。

20. 段階的に設計される作品

デザイン中のスタイルシートやコンポーネントを他の人と共有する

設計チームのメンバーとして、私たちは最終製品だけでなく、進行中の作業も見たいと思っています。場合によっては、何らかの理由で、プロジェクトの最良の部分が見落とされ、アーカイブ フォルダーに残ってしまうことがあります。プロジェクトが完了し、クライアント/プロデューサーの承認が得られたら、プロジェクトの改善作業を開始し、可能であれば、デザインで何が機能し、何が最終的に使用されなかったかを分析するケーススタディを作成します。これにより、貴重なフィードバックを収集しながらチームの知識を広げることができます。

Claudio Guglieri は現在、ニューヨークの国際デジタル広告代理店 B-Reel でアートディレクターとして働いています。の

以前はFantasy Interactiveでアートディレクターとして勤務し、Google、EA CNN、Nikelodeon、History Channel、Range Rover、Microsoftなどのクライアントのインタラクティブエクスペリエンスの主導と制作を担当していました。ご質問がある場合は、@claudioguglieri までお問い合わせください。

元のタイトル: ウェブサイトレイアウトの全プロセス: 完璧なウェブサイトレイアウトデザインを作成するための 20 のステップ

キーワード: ウェブサイト、レイアウト、フルパス、20 ステップ、作成、完璧、クラウディオ、ググ、ウェブマスター、ウェブサイトのプロモーション、収益化