web-dev-qa-db-ja.com

複数列の記事

私はたまたま出会った この記事 ポール・ルイス。最初に気付いたのは、複数列のレイアウトです。

Screen snippet

記事やブログで使い過ぎのテンプレートの使用をやめさせようとしているのは素晴らしいことですが、それについては適切ではありません。たぶん、他の記事がどのように構造化されているのかによるのかもしれませんが、それはさまざまなもののグリッドのように見え、どこを見ればよいのかよくわかりません。

これをもっと使いやすくするにはどうすればよいですか?デフォルトでユーザーを曲の最初に引き寄せるにはどうすればよいでしょうか?それとも、このレイアウトが他の可能性と同じように機能しないのですか?

雑誌などの印刷記事と比べると、このように平らな四角い列のグループが表示されないだけなので、これは100%正しくないと思いますか?例えば。雑誌では、最初の列が他の列よりも高い場合があります。

3
Adam Lynch

非常に長いテキスト行は読みにくく、1つの行を終了して次の行に移動したい場合、間違いを犯しがちです。複数列フォーマットはこの問題の処理に役立ちますが、複数列レイアウトはすべての状況に適しているわけではありません

複数列の記事各列の下部を表示するためにスクロールする必要がない場合にうまく機能します。新聞を考えてみてください。ウェブサイトでは、ユーザーはページの一番下までスクロールして1列目を読み終え、次に上にスクロールして2列目を読み続け、次にページを下にスクロールして2列目を読み終える必要があります。

大画面で設計している場合、デザイナーはこの問題を抱えていない可能性がありますが、大多数のユーザーはそうではありません。

デジタルデバイスの記事で複数の列がうまく機能するのは、ページを変更して読み続けるの場合のみです。これは、iPad用のエコノミストアプリが標準の列レイアウトを維持するために行うことであり、うまく機能します。

enter image description here

5
JohnGB

インターネットユーザーは、1つの(テキスト)列レイアウトに非常に慣れています。ターゲットグループ(Web開発者など)によっては、この規則を破って個性を強調することができます。

主にデスクトップコンピューターで使用されるWebの場合、はい、このレイアウトは他の可能性と同様に機能することはありません。タブレットコンピューターの方がエクスペリエンスが優れている場合があります。しかし、ページを垂直方向にスクロールしないようにデザインするなど、1つまたは2つのステップに進む必要があると思います。

複数列レイアウトの使いやすさを向上させるオプションは次のとおりです。

  • 見出しの番号付け(最強)
  • ドロップキャップの使用
  • 行のインデントを使用



個人的に、私は常に複数の(テキスト)列よりも大きなフォントサイズを好みます。

1
John

たぶんポール・ルイスは彼のブログを新聞のように見せてもっと制度化したいと思っている。もしそうなら、彼は使用されたドロップキャップインデントされた行を持ち、記事を開始する(サブ)タイトルを持たないはずです。

これらの要素は読書に役立ちます。それが今日の新聞で今でも使用されている理由です。それらは読みやすさよりも美学と論理についての問題です。

enter image description here

また、彼は誰もが非常に巨大な画面を持っていると思うかもしれません、そして彼は一方向にスクロールすることができるときになぜ彼が私たちを上下にスクロールさせているのか、なぜ列の高さが反応しないのか私には本当にわからないので圧縮されたコンテンツに夢中です。

0
Gildas Frémont

行の長さの読みやすさ は、読みやすさを最適化するために、各行に1行あたり50〜60文字(または最大75文字)が必要であることを示しています。

左の段落は1行あたり最大100文字、右の段落は1行あたり最大50〜60文字です。読みやすい方が正しいと思います。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

メディアに1カラム、テキストに1カラムを使用する2カラムデザインのサイトがたくさんあります。テキストの読みやすさとスペースの利用効率を高める。

mockup

bmmlソースをダウンロード

重要なのは、情報を伝えるために複数列のレイアウトを非常に効果的に使用できることです。あなたはあなたの請求書に合うデザインを見つける必要があるだけです。前述の例のように、3列のレイアウトはテキストを読みやすくしますが、画面全体に広がるため、コンテンツを利用するのが少し難しくなります。 ユーザーの目をデザイン/視覚的な手掛かりでガイドし、コンテンツを使いやすくします。

あなたが言及した例で指摘できる問題の1つは、テキストのエンクロージャがなく、共通の背景が列の間のスペースをジャンプさせるです。 「SAME HYMN SHEET、DIFFERENT PAUL」の段落を見てください。これは別の色の背景にあるため、読んでいる間、私の領域は領域内に固定されます。


サイドバーの提案でこの質問に気づきました: オンラインの段落の理想的な列幅

答えは経験則のいくつかの素晴らしい要約を与えます:

Thumbの一般的なルールこれらを一粒の塩と一緒に考えてください。これらは単なるガイドラインです。それらを自由に壊してください。繰り返しますが、これらはあなたが採用する必要がある「すべてに1つのルール」ではありません。正しい方向へのプッシュ/ヒントです。

  • 1行あたり12ワード
  • タイプサイズに関係なく39文字(アルファベットと半角)
  • ポイントサイズに2を掛けてパイカ(ポイント×2)として解釈する
  • 約50〜60文字、最大75文字(スペースを含む)—これは通常、タイポグラフィで友人から借りたガイドラインです

ロバート・ブリングハーストによる「活版印刷スタイルの要素」は、以下のより具体的な測定値に言及しています

  • 45〜75文字の行の長さ(メジャー)。具体的には、スペースを含めて66です。単一の列
  • 40〜50文字。複数列
  • 85〜90文字。不連続なテキスト。寛大な指導
  • 40文字(最小);正当化される
  • 12から15文字。限界ノート;英語

読みやすさの変数:

  • フォントサイズ
    • 大きい=試してみたが、(一部の)人々はそれを不快に感じている。幸せな「中型」を目指そう
    • 中/標準=幅が広い
    • 小さい=小さい幅
  • 行の高さ
    • 大きい(1.9以上)=ラインをスキャンしやすく、ラインが長いほど許容範囲が広くなります
    • 通常=短い線
    • 小さい=非常に短い線
  • コンテンツの長さ
    • 大きなブロブ=長い行+大きな行の高さ
    • 短いメッセージ=短い行+適切な行の高さ
0
rk.