中央揃えのテキストの大きな段落をどのように処理しますか?


11

私は自分のために非常にシンプルなポートフォリオWebサイトで作業しており、使用しているテンプレートはすべてのテキストに対して中央揃えになっています。私は自分自身について少し言い訳をしており、これが中央揃えのテキストを処理する最良の方法であるかどうかはわかりません。読むのがちょっとぎこちない。私はただ物事を想像していますか、これを行うより良い方法はありますか?

中央揃えのテキストがたくさん!

編集1:私のウェブサイトはこの無料のテンプレートに基づいており、中央揃えのテキストのいくつかの大きなセクションもあります。テキストを左揃えにしたいのですが、他のウェブサイトの見た目とうまく合うかどうかわかりません。

編集2:

だから私は色を反転させたので、それは白地に黒のテキストです。これは今のような感じで、sens-serifフォントも付いています。その白い背景にリンクがどのように見えるかも含めました-少し暗くする必要があるかもしれません:

白地に黒

編集3:

さて、箇条書きの私の試みで、正当化されたままにしました。私はすぐにそれを整理するつもりです。フォントサイズを正しく設定する必要がありますが、あなたはアイデアを理解しています。

左揃え!


英語を話すことを指摘する必要があるのはなぜですか?他の国では、1つ以上の外国語を話す場合、CVにメモを記入します。
imrek 2015年

1
@DrunkenMasterあなたは、ステイシーが英語圏の国にいると想定しています。:)
スコット

私は11の公用語がある国に住んでおり、英語を母国語で話すことができることは、私の競争の中であまり一般的ではありません。

@スコット彼女の場所を確認してください、それは南アフリカを言います。とにかく、テキストの中央揃えだけが問題ではありません。黒い背景に薄い白い文字、特にセリフフォントは非常に読みにくいです。小さな文字のリバーステキストが必要な場合は、読みやすいサンセリフフォントを使用します。すべての良いタイポグラフィは、ほぼ2015年における必須です後にそれ以外の場合は、素敵なウェブフォントの多くは、あなたがあなたのバイオ、より個人的なタッチを与えるために、使用することができますがあります
imrek

@DrunkenMasterあなたは答えで見つけた問題について言及することは絶対に歓迎です-これに関しては(おそらくあなたが言うことができるように)私は完全な初心者であり、私が得ることができるすべての助けが必要です。

回答:


10

中央揃えの段落テキストは、ほとんどの場合、適切な選択ではありません。人間の理解力は、特定の方法でテキストを表示するように忠実に訓練されており、段落テキストを中央揃えにすると、読者にテキスト全体の視覚的なパスを維持するように非常に懸命に作業するよう依頼します。

これは、短い1つまたは2つの文の段落を見ても、それほど感じられることはありません。しかし、テキストが多ければ多いほど悪くなります。

ここにテキストの配置に関する記事があります

また、UX.SEには関連する質問があります。左揃えのテキストは、中央揃えのテキストよりも一般的に望ましいですか?

左揃えがオプションではない場合(なぜそうなるかわからない)、デザインを再考する必要があるかもしれません。

(補足:Webでのリバースタイプも、読者にとって非常に困難です。)

あなたがそのテンプレートを使うことに夢中になっているなら。すべての領域で段落テキストを左揃えにし、左側から想像上の位置を使用してそれらをすべて揃えることをお勧めします。たとえば、コンテンツ領域を定義し、その領域内で左揃えにします。

ここに画像の説明を入力してください

物事ははるかに簡単に「読み」ます...

ここに画像の説明を入力してください


私が選択したテンプレートにはいくつか問題があるようです!それはあなたが無料で手に入れるものだと思います。

テンプレートは完全に設定されていると思いますが、あきらめて別のものを見つける前に、適切に試してみたいと思います。

ハイコントラスト、リバースタイプは、テキストの配置よりもユーザーをそらすために多くのことを行います。
スコット

機会があったら、それを白地に黒のテキストに切り替えることを既に解決しました。

そして、私はちょうど色を切り替えました。編集を参照してください。

5

テキストが2段落または3段落少ない場合、テキストに問題はありません。中央揃えは、少量のテキストには適していますが、テキストが多すぎると読みやすさの問題になります。

この観点から、左揃えは中央揃え(または右揃え)よりも優れています。

左揃えのテキストは、段落の中央揃えのテキストよりも読みやすくなります。これは、テキストを中央揃えすると、各行の開始位置が変わるためです。これにより、ユーザーは、各行が読み続け始める場所を見つけるために努力する必要があります。

推論は、テキストを理解するために過度に運動していることにあなたの目に行き着きます。私の個人的なケースでは、たとえば、Matlab / VHDLやPython C ++などの単語に気づいて、私の視力がテキストの中央に引き寄せられたように感じました。彼らは私にあなたが何をしているのかを教えてくれますが、あなたは単にスキルをリストアップしようとしているのではなく、あなた自身を説明しています。

そうは言っても、テキストは極端に長くはなく、中央揃えにすることはデザインの「ステートメント」です。したがって、それをそのまま維持したい場合は、テキストのナビゲートに役立つ視覚的な手がかりを追加することを検討します。たとえば、単語やフレーズを太字にしたり、サイズを変えたりします。色を使用して言語を強調することもできます。すべてのテキストが同じ関連性を持つとは限らないので、すべて同じように見えるべきではありません。


2

他の人は既に中央揃えのテキストで有効なポイントを作成しているので、繰り返しはしません。

あなたが考慮すべき他のいくつかの事柄があります:

  • 細いセリフフォント(小さいフォントサイズまたはその他の細いフォント)は、反転テキストには適していません。基本的に、中央揃えのテキストと同じくらい読みづらくなります。古いディスプレイや安価なデバイスを使用していて、テキストをまったく読むことができない人々について考えてみてください。

  • よりパーソナルなタッチのフォントを使用します。プレーンなジョージアまたはタイムズは、高速読み込みが必要なテキストの多いサイトにはおそらくまともな選択ですが、2015年にはほとんどすべてのWebデザイナーがタイポグラフィに夢中です。http://www.google.com/fonts/でフォントを確認してください。非常に読みやすいセリフフォントとサンセリフフォントがたくさんあり、訪問者を驚かせます。コントラストを使用したり、素敵なフォントをペアにしたり、異なる太さを使用したりします。

  • 私はウェブサイトがあなたについてであると思います、そしてそれは本当に重いコンテンツではないでしょう。メインページの素敵な大きなヒーロー画像を作成します。あなたが取り組んでいる典型的なデバイスやあなたの典型的な作業環境の素敵な写真のように。それを背景画像として設定し、素敵な大きなテキストいくつか入れます。それはほとんど常にあなたの訪問者に素晴らしい影響を与えます。

  • テキストを構造化し、リストする場合はリストを使用し、見出しを使用します。テキストを美しく表示するためのオプションはたくさんあります。プレーンな古い鈍いパラグラフは今日では時代遅れです。


2

一般的に、中央揃えのテキストが大量にあるのは読みにくいため、あまり適していません。左揃えのテキスト行(またはRTL言語の場合は右揃え)は、中央揃えのテキスト行より簡単に追跡できます。

特にこの種の情報については、現在のような段落構造ではなく、セクションが各スキルで構成される左揃えのセクションレイアウトをお勧めします。短く、読みやすく、簡単に拡張できます。また、Yiselaが語るような視覚的な手がかりを追加します。

これは次のような非常に大まかな例のようになります。

セクション化された例

これらのことをどれだけの期間行ったかの時間枠を追加し、どれだけ上手かについての参照を提供するのも良いかもしれません。専門分野のタイトルのすぐ隣に置くこともできますが、おそらくタイトルほど強調する必要はありません。


2

見出しは、複雑なコンテンツや多様なコンテンツがある場合に最適です。ただし、あなたの場合、改善された段落構造から利益を得ることができます。たとえば、最初の2つの段落を結合して、自分の教育を自分の身元に関連付けることができます。全体として、これにより、読者はディスカッションの流れを維持しながら、あなたが誰であるかをよりよく理解できます。

私が書いている段落は、テンプレートとして使用する良い例です。最初の行で短いステートメントを作成してから、比較、対比、または追加情報をフォローアップできます。これに続いて、例または追加の関連情報を提供する1行または2行でメッセージを聴衆に伝えることができます。最後に、リンクした単語で終わり、あなたが言ったことについて結論を出します。

以下を検討してください。

私の名前はステイシーです。私は資格のあるエンジニアです。エンジニアリングの学士号を取得しました。これにより、過去5年間、デジタルシステムを設計するための知識とスキルが得られました。私が設計したシステムの例には(...)が含まれます。私は技術的な知識に加えて、ネイティブの英語を話す人であり、専門的な英語コミュニケーションの正式な教育を受けています。

最初の行は、あなたが誰で、何をしているのかを言って家に帰ります。2行目は、資格のあるエンジニアであることの重要性を説明しています。3行目は、技術的な専門知識をサポートする例を示しています。最後の行は、あなたの技術的なスキルと他の専門的なスキルを結びつけます。全体的に、この段落では、構造、フロー、および品質のレイアウトが改善されています。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.