公式アカウントのレイアウトをよりエレガントに見せるにはどうすればいいでしょうか?

公開アカウントの記事のレイアウトをより美しくするにはどうすればいいでしょうか?

美の追求は人間の生まれながらの本能です。どこにでも。

新しいメディアの読書シナリオでは、美しいタイポグラフィと優れたコンテンツが互いに補完し合います。

断片的な読書シナリオで、画面いっぱいにぎっしり詰まった華やかなテキストを見ているところを想像してみてください。たとえコンテンツの質が高くても、読書への興味は薄れるでしょう。

優れたタイポグラフィは、コンテンツに彩りを添え、素晴らしい読書体験を生み出す必要があります。

高品質なパブリックアカウント記事のレイアウトをデザインするにはどうすればよいでしょうか?この記事では、組版の目的、組版スタイル、VI、テキスト、イラスト、見出しと末尾のガイダンスなど、複数の側面からセクションに分けて説明します。

1. 組版の目的

1. 読者へのプレッシャーを軽減する

断片的な読書シナリオでは、読者がパブリック アカウントを閲覧するシナリオは複雑で多様です。読者はベッドにいるとき、バスや地下鉄に乗っているとき、食事の列に並んでいるとき、仕事をサボっているとき、あるいはトイレでしゃがんでいるときなどです。

いつでも読書が中断または終了される可能性があるこのシナリオでは、読者の高い注意をどのように維持するかが鍵となります。

高品質の組版は、読者の読書体験に基づいて行われ、読むプレッシャーを軽減し、読者が快適でリラックスした気分になるようにする必要があります。

組版スタイルの多様性とコンテンツ モジュールの複雑さだけに焦点を当てると、本末転倒になります。

2. 読者の読書効率を高める

生活のペースはますます速くなり、読者が読書に集中できる時間はますます少なくなっています。記事が論理的でなく、構造が複雑な場合、読者はそれを一語一語読むだけの忍耐力を持たないでしょう。

組版により、記事の論理を整理し、内容を要約し、キーワードや文章を表示できるため、読者は最短時間で記事の意味を理解できます。

3. 公式アカウントに対する読者の理解を深める

言葉は人を反映するとよく言われますが、実際には言葉だけではなく、多くのものがイメージの延長です。

記事内のテキストのトーン、イラストのスタイル、見出しと末尾のガイダンス、その他のレイアウト モジュールは、公式アカウントまたはブランドに対する読者の認識に影響を与えます。

公文書の組版スタイルが面白ければ、読者は著者が面白い魂を持っていると考え、組版スタイルが真面目であれば、読者は著者が非常に信頼できると考えるでしょう。

スタイルは長い時間をかけて徐々に形成されるプロセスであり、スタイルを長く維持することによってのみ読者の理解を深めることができます。

2. 組版スタイル

レイアウトを設計する前に、まずレイアウト スタイルを決定する必要があります。レイアウト スタイルによって、その後のレイアウトの方向が決まります。

そうでなければ、時には文学的なテキストレイアウトを使用し、時には面白い写真を追加し、ビジネススタイルガイドの写真が良いと考えると、読者は、まるで自分自身を楽しませている統合失調症患者のように、雑然とした非専門的な印象を与えることになります。

多くの大規模なウェブサイトを検索した結果、市場で最も一般的な 10 種類のタイポグラフィ スタイルをまとめました。

1) ファッション雑誌風

代表アカウント：杜少飛

2) モダンミニマリストスタイル

代表的な公開アカウント: Socket Academy、People、Shiyi

3) インターネット技術スタイル

代表的なパブリックアカウント: GeekPark、36Kr

4) 面白いスタイル

代表公開アカウント：小生每每

5) 実践科学スタイル

代表公開アカウント：Haohaozhu

6) 文学的で新鮮なスタイル

代表公開アカウント: HANS

7) ハイエンドなビジネススタイル

代表公開アカウント: LatePost

8) ショッピング

代表公募口座：1件

9) 中国風

代表的公開アカウント：最も中国的なのは誰？

10) ストリップ・ウィンド

代表公開アカウント：GQ Lab

スタイルの良し悪しはなく、適切かどうかだけの問題です。公式アカウントの位置づけから始めて、実態を踏まえた総合的な分析・判断を行います。

対象読者が1995年以降に生まれた人たちで、内容がよりリラックスしたトーンであれば、ユーモアのあるスタイルや文学的で新鮮なスタイルを選ぶことができます。企業アカウントで、読者にプロ意識や信頼性を伝えたい場合は、高級なビジネススタイルやモダンでシンプルなスタイルを選ぶことができます。職場や意見アカウントであれば、汎用性の高いモダンでシンプルなスタイルを選ぶことができます...

3. 公式アカウントのメインカラー

色調はタイポグラフィの魂です。優れた公開アカウントにはそれぞれ独自のメインカラーがあります。

メインカラーは 1 つに決め、3 つ以下にするのが最適です。統一されたメインカラーを使用すると、読みやすさが向上します。記事にさまざまな色を使用すると、段落間の断片化の感覚が生じ、読者が混乱することになります。

このアカウントのメインカラーはプラムレッドなので、アバター、記事の強調部分、始まりと終わりのガイド画像、スタイルはすべてこれを中心に展開されています。

メインカラーを長期間使用することで、ブランド認知度を高めることもできます。たとえば、赤を見るとコカコーラを思い浮かべ、青を見るとペプシを思い浮かべます...

色調の選択は、ブランドとパブリックアカウントのトーンに応じて決定できます。

読者にポジティブなエネルギーを伝えたい場合は、オレンジや黄色を選択できます。ビジネス気質を表現したい場合は、青や赤を選択できます。もちろん、公式アカウントの読者が若者である場合は、モランディカラーシステムを選択することもできます。

選択できるカラーマッチングのウェブサイトをいくつかご紹介します。

LOLColors: https://www.webdesignrankings.com/resources/lolcolors/ 中国語の繁体字カラー: https://color.uisdc.com

カラーハント: https://colorhunt.co

中国語カラー: http://zhongguose.com

4. テキストレイアウト

テキストのレイアウトは、一般の人々の読書習慣に合わせて、シンプルで明確なものにする必要があります。

1)フォントサイズ

同じ記事を異なる携帯電話で読むと、フォントサイズが若干異なります。安全のため、メインテキストのサイズは通常 14 ピクセルまたは 15 ピクセルです。

14px は小さくて美しく見えますが、15px は読みやすくなります。読者が高齢者の場合は、フォントサイズを適切に拡大することができます。

説明テキストやそれほど重要でない情報の場合は、13px を選択できます。

サブ見出しのフォントサイズは、通常、メインテキストより 3 サイズ大きい 17 ピクセルまたは 18 ピクセルですが、画像スタイルは組版スタイルに合わせてデザインすることもできます。

2)フォントの色

人々は黒とグレーのテキストを読むことに慣れています。テキストフォントとして他の色を使用すると、読者の読みやすさが増します。

したがって、一般的には黒のフォントを選択することをお勧めしますが、デフォルトの純粋な黒 (#000000) は選択しないでください。これは彩度が高く、携帯電話で表示すると非常に眩しいためです。

グレーの黒を選択できます: #595959、#3f3f3f

3)フォントスタイル

フォント スタイルについては特に言うことはありません。携帯電話によって適応が異なるため、安全のためにデフォルトのフォントを使用してください。

4)文字間隔、行間隔、余白、配置

G20のロゴの作者であるFang Hongzhang氏は、「テキストの読みやすさについて」の中で、これは非常に意味深いことだと述べています。

各文字の間には適度なスペースが必要です。文字間の距離が狭すぎると、卵が 2 つ非常に近い位置にあるような状態になり、いつでも衝突する危険があります。文字間の距離が広すぎると、文字の緊張感や張りが失われ、読みにくいテキストになります。

そのため、文字間隔は 1 に設定されており、これは、まばらすぎず、密すぎず、ちょうど良い間隔です。行間も同様です。行間の距離は広すぎたり、密集しすぎたりしてはいけません。1.5 倍または 1.75 倍が主流です。

両側の余白に適切なインデントを設定すると、視線が集中しやすくなり、読みやすくなります。主流のインデントは 16 です。記事がよりリラックスしたものであれば、32を選択することもできます。

配置。記事をきれいに見せるために、一般的には両端を揃えることをお勧めします。そうしないと、ページの両端が犬に噛まれたかのように不均一に見えてしまいます。

5)段落内に空白を残す

記事の段落が非常に長く、画面全体が密集した単語で埋め尽くされている場合、非常に読みにくくなり、一般的に注意力に欠ける現代の読者には読み飛ばされてしまう運命にあるため、記事をモジュールに分割する必要があります。

長い記事を論理構造や物語のリズムに応じて 3 ～ 5 つの段落に分割し、サブ見出しを改良すると、読む際の負担を軽減できます。

段落を視覚的に区別できるように、サブ見出しと前のテキストの間に 2 行の空白スペースを残し、サブ見出しと次のテキストの間に 1 行の空白スペースを残します。

文と文の間に適切な空白を残すと、記事に息抜きの感覚が加わります。通常、1 つの文は 3 ～ 5 行で構成され、各行の間には 1 つのスペースが空けられます。これにより、文章がより明確になり、整然として読みやすくなります。

文章が 7 行、あるいは 10 行を超えると、携帯電話の画面全体が文字で埋め尽くされ、息が苦しくなるほど暗くなります。

文脈とイラストの間の最適なスペースは 1 行です。余白がないと、画像とテキストがごちゃごちゃと混ざってしまいます。余白が多すぎると、まばらに見えてしまいます。

6)重要なポイントを強調する

記事では、フォントサイズや色が同じだと、何が重要なポイントなのかわかりにくくなります。フォントサイズを大きくしたり、色を変えたり、太字のテキストを追加したりすると、読者が重要なポイントを理解しやすくなります。

フォントサイズを大きくするのは、一般的にサブ見出しで段落全体の要点をまとめるときに使用され、フォントサイズは本文より 3 サイズ大きくなります。また、感情的な文章の終わりにも適しており、読者の感情を解放するための感情増幅装置として機能します。この場合、フォントサイズは本文より 1 サイズ大きくするだけで済みます。

色番号を変更する場合、通常はデフォルトで太字になります。色番号は視覚的なレイアウトの統一性を必要とし、メインカラーと一致するか、メインカラーである必要があります。 1 つの記事では、色番号は 1 つだけにし、3 つ以下にするのが最適です。そうでないと、雑然としすぎてしまいます。

太字は単独でも使用できます。下線と斜体は英語環境の産物であり、通常は推奨されません。

注意すべき点は、記事が重要なポイントでいっぱいになっている場合、実際には重要なポイントがないということです。 1 つの画面に強調する部分が多すぎてはいけません。1 つの文またはいくつかの単語で十分です。

解説テキストの行数はもっと多くても構いませんが、通常は 3 行を超えません。

フォントサイズは12px、13pxから選択できます

グレートーンを選択: #a5a5a5、#7f7f7f

7) 中国語、英語、数字の混合

読みやすくするために、中国語と英語の間にスペースを追加します。

HUAWEIの携帯を購入しました。

Facebookでつながりましょう！

中国語、英語、数字の間でも同様です。

iPhone12を購入しました。

現在、iPhone 12はiOS 14にアップデートされています。

5. 記事の写真

記事中のすべての写真には役割があります。著者が単に見た目が良いと思う写真を使用しているわけではありません。一般的に言えば、写真には 3 つの機能があります。

1)補助指示

情報によっては、言葉だけでは直感的に表現しにくいものや複雑すぎるものがあります。読者が理解しやすいように、図を使って説明したり、理解を助けたりすることができます。

例：

2)読むプレッシャーを軽減するために空白スペースを残す

写真は視覚的な単調さを打破することができます。記事に言葉がぎっしり詰まっていると、読者に強い圧迫感を与え、興味を失わせてしまいます。イラストは読者の視覚を調整し、読者に休息の場を与え、疲労を和らげることができます。

一般的には、テキスト 3 画面と画像 1 画面が推奨されます。記事が非常に厳密な場合は、テキスト画面をさらに増やしたり、画像用の空白スペースを残さないようにしたりすることもできます。

3)感情を表現する

記事の感情的なクライマックスでは、適切な写真がテキストと一致し、感情を増幅させることができます。

写真はレイアウト スタイルと一致している必要があります。ある瞬間には文学的かつ芸術的でありながら、別の瞬間にはパロディ的なものであってはなりません。そうすると記事に分裂感が生じてしまいます。

文章のスタイルに一貫性を持たせてください。ユーモアのある記事に適切に絵文字を追加すると、雰囲気を盛り上げることができますが、真面目な記事に絵文字を使用すると、読者に非専門的な印象を与え、逆効果になります。

著作権フリーの写真を選択してください。そうしないと、著作権侵害の危険があります。 Weibo、Zhihu、Tieba 上の画像は著作権で保護されている可能性があるため、使用しないことをお勧めします。

公式アカウントのバックエンドのマテリアル センターには著作権フリーのギャラリーがあり、そこで写真を見つけることができます。または、次の 2 つの Web サイトにアクセスすることもできます。

Pixabay: http://pixabay.comUnsplash: http://unsplash.com

GIF 画像は次の Web サイトにあります:

ソウギフ: http://www.soogif.com/

6. ヘッドガイダンス

ヘッドガイドは、公式アカウント記事の本文が始まる前の領域です。注目を誘導したり、公式アカウントの価値を伝えたり、メインコンテンツと区別したりする役割を果たします。

それは、スローガン、パブリックアカウントの価値に関する段落、読者がスクロールダウンしたくなるような画像、またはコンテンツの要約などです。

完全なヘッダー ガイドは 3 つのモジュールで構成されます。

1) 注目を誘導し、公式アカウントの価値を伝える

注意を誘導する目的は、読者に公式アカウントをフォローするための潜在意識のヒントを与えることです。また、読者にスターを追加するように誘導します。

価値を伝えるコピーライティングが大切です。よく知らない読者が初めてパブリックアカウントを見たとき、そのパブリックアカウントが何をするのか、どのような価値を提供できるのか、そのトーンはどのようなものかわかりません。そのため、この文章は読者が注目する理由、またはスタイリッシュなスローガンを与える必要があります。

形式的には、アニメーション画像と静止画像のどちらも許容されますが、視覚的な表現の点では、アニメーション画像の方が読者の注目を集める可能性が高くなります。

2) ヘッダー画像 + コンテンツの概要

読者がタイトルをクリックして入ってくるということは、コンテンツに対して一定の期待を持っているということです。このとき、タイトルを引き立て、コンテンツとの関連性が高い画像を選ぶことで、読者の興味をしっかりとそそることができます。

コンテンツの要約についても同様です。これは実際にはコンテンツの要約ではなく、読者の好奇心を刺激して読み進めてもらうためのフックの段落です。

3) 著者について

記事の著者や出典については詳しく述べません。オリジナルコンテンツには出典を含める必要はありません。

実際の状況では、3 つのモジュールすべてが必要なわけではありません。記事のトーン、公開アカウントのスタイル、自分の好み、デザイン能力、その他の総合的な要素に基づいて、任意の組み合わせを作成できます。

以下に、優れた見出しの例をいくつか示します。

7. テールガイダンス

テールガイダンスの目的は、読者が記事を読んだ後にさらなる行動を起こすよう促すことです。そうでなければ、読者が記事を読んで良質で感動的だと思ったとしても、注目しなかったり、いいねしたり、メッセージを残さなかったりすれば、公式アカウントにとって何の価値もありません。

市販されている一般的なテールガイドは、次の 4 つの部分で構成されています。

1) インタラクティブメッセージ

インタラクティブなメッセージの場合は、読者が最も表現したいメインテキストに関連した質問をするだけです。予算に余裕がある場合は、最も多くの「いいね！」を獲得したメッセージを書いた読者にちょっとした特典を与えることもできます。

例1:

例2:

2) 過去の問題

過去の号から厳選することで、読者の記事クリックの価値を最大化し、質の高いコンテンツの相互推薦を通じて読者が公式アカウントに長く留まることが期待できます。通常は、最新のデータが最も優れた 3 つの記事が選択されます。

例1:

例2:

例3:

3) 注意を誘導する

記事を読んだ後、読者は一番下までスクロールしており、注目を集めるまであと少しです。彼らの注意を誘導することが最後の一押しとなります。

公開アカウントの価値をコピー文で伝えるには、「私が誰であるか」だけでなく、「私がどのようにお役に立てるか」も読者に伝え、実用的な情報で読者を直接誘い込むこともできます。

例1:

例2:

4) ユーザーに「いいね！」や「シェア」や「視聴」を促す

読者は記事を読んだ後、いいね、読んだり共有したりすることを忘れてしまうことがあります。この場合、読者に思い出させるためのテキストを書くことができます。

例1:

例2:

例3:

最後に、高品質なテールガイダンスの例をいくつかお勧めします。

例1:

例2:

QR コードだけでシンプルにすることもできます。

8. 表紙画像

表紙はタイトルと同様に、読者を惹きつけて記事を開いてもらうことを目的としています。良い表紙は最後の仕上げとなり、タイトルとともに読者の好奇心を増幅させます。

表紙はできる限りシンプルでわかりやすく、要素をできるだけ少なくする必要があります。そうしないと、読者に視覚的な混乱が生じ、タイトルをはっきりと見ることができなくなります。

悪い例:

カバーにはさまざまなサイズがあり、大きいカバーは 2.35:1、小さいカバーは 1:1 です。

市場に出回っている大型カバーには、次の 2 つの一般的なタイプがあります。

1)コンテンツベースの仕上げ

表紙はタイトルの内容に関連し、タイトルのより具体的な補足説明を提供できる写真を選択する必要があります。

2)キーワード増幅

記事のキーワードや目を引く言葉を表紙画像に直接入力します。カバーベースは通常、シンプルな要素で構成され、単語数は 2 ～ 6 語程度で多すぎないようにしてください。多すぎると視覚的な混乱が生じます。

小型カバーは大型カバーに似ており、2 つのタイプに分かれています。

大きなカバー画像には、ブランド認知度を高めるためにロゴを追加できますが、メイン画像の影に隠れないようにしてください。

さて、パブリックアカウントの記事の組版方法についての説明は基本的に終了しました。

これを読んでもまだどこから始めればよいかわからない場合は、次の提案があります。成熟した競合他社の公式アカウントを見つけて、好きなスタイルを選び、それをそのまま真似してください。今後、操作と設計のレベルが徐々に向上した後、徐々に改善し、完成させていきます。

上記のタイプセッティング モジュールの多くでは、デザイン スキルが必要です。デザイン スキルを持っていない場合はどうすればよいでしょうか?心配しないでください。以下にいくつかのウェブサイトをお勧めします。

9. レイアウトツールと著作権フリーの画像ライブラリ

1)ウェブサイトのレイアウトデザイン

チュアンキット: https://www.chuangkit.com

Chuangketie には、多くのパブリック アカウント記事のレイアウト デザイン テンプレートがあります。テキストを入力するだけで、ワンクリックで独自のレイアウト デザインが生成されるので、非常に便利です。

デザイン: www.gaoding.com/introduction

Chuangketie と同様に、どちらも完全なテンプレート生成ツールであり、一緒に使用できます。

2)組版エディタ

135 Editor と Xiumi Editor はどちらも市場で主流です。機能や素材は似ていますが、使用ロジックに違いがあります。自分の習慣に合わせて使用​​できます。

135 エディター: http://www.135editor.com

Xiumi エディター: http://xiumi.us

記事のイラストやヘッダー画像などに最適な著作権フリー画像ライブラリ：

Pixabay: http://pixabay.com

アンスプラッシュ: http://unsplash.com

GIF 画像は次の Web サイトにあります:

ソウギフ: http://www.soogif.com

著者: トマトオペレーション

出典: トマトオペレーション