そして今日は、よく考え抜かれたタイポグラフィとは何か 、ページ上の要素を適切に整理する方法についてお話します 。
03.うまくデザインされたタイポグラフィ
サイトの実際のテキストはデザイナーによって作成されませんが、コンテンツの全体的な品質と同じ重要な役割を果たします。 デザイナーは、テキストを読みやすく、注意を引くために一生懸命働く必要があります。 テキストを読みやすく、目に優しいものにする方法はたくさんあります。 すべきこととすべきでないことのルールと規範を列挙する際に、合理的なタイポグラフィが実際に機能するサイトの例をいくつか示します。
うまく設計されたタイポグラフィの例
The Netsetterの大きくて美しい見出し
見出しは 、ウェブデザイン、特にブログデザインで非常に重要です。 Webデザインの最近の傾向は、見出しで大きく太字のスタイルを使用することです。 この傾向は多くの肯定的な結果をもたらします。使いやすさの観点から重要なブロックが強調表示されるだけでなく、スペースが作成され、ページ構造が決定されます。 次のNetsetterの例は、これを素晴らしく説明しています。ここでは、ヘッダーの周りに多くのスペースが作成されていることを確認できます。もちろん、非常に読みやすくなっています。
本文の先頭と退任
Viget Webサイトは、Webデザインでタイポグラフィがどれほど重要かを示す非常に美しい例です。 以下の例（ポートフォリオから引用）は、より大きなフォントを使用して空き領域を作成する方法を示しています。 ここで使用されている薄くて壊れやすいフォントを使用しても、ページのこの領域にどれだけのスペースが作成されているかを確認できます。 実際、このフォント書体は非常にエレガントで、素晴らしい選択です。 ここであなたの目を引くもう一つのことは、行の高さへの注意です（リーディング）。 行間隔がデフォルトに比べて増加し、より多くの空きスペースが作成され、テキストが読みやすくなりました。 次の作業でこのトリックを使用できます。
Web Design Ledger-ムードフォント
試行錯誤によって適切なフォントを見つけることも、さまざまなムードに基づいてフォントを選択することもできます。これらのフォントはページデザインに役立ちます。 たとえば、レトロなデザインでありながら無頓着なWeb Design Ledgerリソースは、開放感と現代感を生み出します。そのため、同様の感情を呼び起こすフォントを選択することが、サイトの成功の鍵になります。 デザイナーのヘンリージョーンズは、人気のあるジョージアセリフのトランジショナルフォントを見出しに選択しました。 このサイトの現代的なサウンドは、ヘッダーのフォントとは根本的に異なる別のフォントによって与えられます。ページのメインコンテンツは、非常に滑らかで開かれたアウトラインを持つサンセリフヘッドセットであるHelveticaフォントで印刷されます。 この例でのヘッドセットの選択は非常に合理的であり、実際、サイト全体の雰囲気を整えるのに役立ちました。
Webデザインのタイポグラフィ要件の短いリスト
いくつかの例を見ると、Webデザインで適切なタイポグラフィを定義するのが簡単になります（上記を参照）。 しかし、なぜこれらの例はとても良いのですか、そしてあなたの次のウェブサイトの活版印刷で何を探すべきですか？
- テキストは読み取り可能ですか？
あなたの見出しに大きく大胆なスタイルを与えることを恐れないでください。 - 戻り止めについて考えたことがありますか？
適切に放電すると、テキストの読みやすさが大幅に向上します。 - フォントは気分に合っていますか？
フォントがデザインのアイデアを補完することを確認してください。
ここでさらに千のヒントを与えることができますが、私は自分をこの分野の専門家とは考えていません。良いタイポグラフィの効果に感謝することを学びました。 このテーマについてさらに学び、さらに良い例を参照したい場合は、Smashing Magazineの関連記事を読むことを強くお勧めします。
04.要素の構成
デザイン活動は多くの人にとって魅力的なようです。クリエイティブな要素があり、もちろんここで退屈しないでください。 今、私は「組織」という言葉は創造的で楽しいものではないことを知っていますが、良い組織化の習慣を身につければ、一見するとすべてが退屈になりません。 Webページの要素の編成は、サイトのタイプと特定の要素がそのコンテンツにとってどのように重要であるかに応じて、常にさまざまな方法で行われます。
コンテンツ要素の配置はケースごとに異なるという事実にもかかわらず、このタスクを大幅に促進するのに役立ついくつかのトリックがあります。 最初に、この設計の目的を決定する必要があります。 たとえば、売り上げを増やすために設計されたWebサイトを作成し、情報を入力するか、サブスクリプションサービスまたはリンクのカタログなどを作成します。
商用ウェブサイトのデザイン：37シグナル
人気のあるサイト37のシグナルを見ると、その製品が何らかの理由で非常によく売れていることがわかります。 サイトの作成者は可能な限りのことをすべて行ったため、彼らが販売しているものを確認し、購入の決定を下すことができました。 販売を目的としたサイトに必要なものはすべてあります。
サンプル画像は、サイトがショッピングに理想的な4つの重要な特徴を持っていることを示しています。 最初の詳細が注目を集めます。短い要約と太字で入力された大きな見出しで非常に暗いブロックを作成しました。 次に、購入者の興味をそそり、各製品の利点の一部を素敵なイラストでリストします。 次の詳細は購入への欲求であり、引用と入場によってサポートされています。「私たちの顧客には何か言いたいことがある」シリーズのビデオもいくつか提供されています。 そして最後の特徴はダイナミズムです。 37Signalsの Webサイトにはさまざまな動的コンポーネントがあります。かなり長いページをスクロールして、下にいくつかの動的要素があることを確認してください。
コンテンツ向けのデザイン（ブログ）：Well Medicated
ブログのデザインを作成することは、まったく異なる話です。 製品についてユーザーを説得し、説得する時間を無駄にする必要はありません。「製品」はすでに見えており、コンテンツは製品です。 ユーザーがあなたの投稿を閲覧したり読んだり、あなたやあなたのブログに書いたりするのを便利にします。
コンテンツは、ブログにある主要なものまたは主要なものの1つでなければなりません。 この例では、かわいいピンクの太字のタイトルがコンテンツに直接注目を集めています。 プレビュー用の適切なサイズの画像とテキストの2/3段落があり、その後に「続きを読む」リンクがあります。 記録がいつ誰によって行われたかについての標準情報もあります。 私にとって、これは私が品質と呼んでいる「コンテンツのためのデザイン」の最良の例の1つです。 興味のあるすべてのものに注意を引くことができます。ここでは、ユーザーがブログの投稿を追跡するのに役立つ素敵な大きな購読アイコンに焦点を当てています。 さらに、これは間違いなくサブスクライバーの数を増やすため、この手法は2つのレベルで機能します。 ユーザーにブログの他のセクションを表示するのは非常に簡単です。このため、「最近の投稿」タブやサイドメニューの人気トピックの表示から、ドロップダウンメニューやシンプルで効果的なリストの整理まで、すべて使用できます。 これは簡単ですが、特にブログでは非常に効果的です。 ブログは通常、個人的な問題を扱っているため、訪問者にさまざまな方法であなたに連絡する機会を与えることは非常に役立ち、人々があなたをよりよく知り、再びあなたのブログにアクセスすることを奨励します。
コンテンツを整理するためのヒント
もちろん、すべてを異なった方法で行い、標準を破らなければならないことが起こります。 しかし、透明な構造と合理化されたデザインを作成するために従うことができるいくつかの簡単なヒントがあります。
- 設計の目的は何ですか？
上記で示したように、設計の目的を決定します。 - ガイドのグリッドを使用した設計
グリッドを使用すると、利用可能なスペースを最大限に絞ることができます。 - 要素の配置を体験する
サイト訪問者にとどまる、サイトを使用するのは簡単ですか？ - 不要なアイテムを削除する
関係ないものはすべて削除するか、削除する必要があります。 - 注意バランス
いくつかのものは、単に他のものに焦点を合わせるように設計されるべきです。
次の記事を読んでください：「Webデザインの品質とは：例と推奨事項。 第3部」では、デザインで色と背景を最適に使用する方法と、デザインにひねりを加える方法を学びます。