ウェブサイトのAboutページの紹介コンテンツの書き方

ウェブサイトのAboutページの紹介コンテンツの書き方

公式、電子商取引、ソーシャル ネットワーキング、個人のいずれの Web サイトでも、訪問者に貴重な時間を費やして Web サイトを閲覧する価値がある理由を直接伝える、適切に設計された「About」ページが必要です。

1. 「About」ページはなぜ必要なのでしょうか?

ユーザーに考えさせないでください!

1. サイトの価値を訪問者に伝え、ユーザーを維持する

2. サイトの目的を常に意識し、話題から逸れないようにする

2. 名前は何にするか

「About」ページの目的は、訪問者ができるだけ早くウェブサイトの方向性を見つけられるようにすること、または競合他社と比較した独自の利点や特徴を表示するなど、さらなる補足として機能することです。したがって、名前はよりシンプルでわかりやすいほど良いです。

サイトの種類によって名前が異なります。

典型的なポータル名はよく知られているため伝統的です。例えば、NetEase の「会社概要」や Google の「Google 百科事典」などです。

人気があり親しみやすいウェブサイトは、DiGuo や phpChina のように「About Us」と呼ばれることが多いです。また、Douban や Alipay のように「About + ウェブサイト名」というタイプも数多くあります。

個人のウェブサイトは比較的シンプルで、「About(概要)」という 2 つの単語で要約できます。 Renren などの多くのソーシャル ネットワーキング サイトでも同様です。

海外のサイトも大体「about Flickr」「about us」「about」など上記と同じです。

3. どこに置くか
1. 目立たない場所に置く

非常に強力なタイトル、ロゴ、コンテンツ、または視認性を持つ Web サイトはフッターに配置されます。

これらは、皆さんがよくご存知の、または一目で内容がわかるタイプのサイトです。例えば、Sina Weibo や Taobao などです。

2. 最も目立つ場所に置く

個人サイト、ブログ、または新しい Web サイトなどの小規模なサイトでは、サイトの方向性と目的を訪問者に明示的に「知らせる」こと (好奇心から訪問者をできるだけ引き留めるため) と、それをページの上部に配置することが必要です。

PMCaff はつい最近設立されたばかりで、ナビゲーションはすっきりと明瞭です。図01

PMCaff網站導航

01 PMCaffウェブサイトナビゲーション

Gmail の右側には、ユーザーに使用方法を説明する「ヘルプ」があります。 「About」機能自体は示唆的な説明ですが、Google には多くの製品ラインがあり、これを個別に提示することで「Prompt」機能を最大限に活用できるようになります。図02に示すように。

Gmail導航

02 Gmailナビゲーション

Geek Parkは新しく建設されたサイトです。しかし、geek は外国語であり、文字通りに解釈するのは簡単ではありません。一般的な定義は「変わった性格の人」です。サイトのナビゲーションを見ると、さらに混乱します(だから「奇妙な性格」を持っているのでしょうか?)。さらに奇妙なのは、フッターに「About」リンクが配置されていることです。これは典型的な標準的な誤った回答であり、ユーザーの方向感覚の喪失に直接つながります。時間に余裕のないユーザーにとって、ウェブサイトにアクセスして離れるのにかかる時間はほんの一瞬です。図03に示すように。

極客公園導航

03 ギークパークナビゲーション

3. 最もシンプルなドメイン名

xxx.com/about よりも簡単なものは何でしょうか?

4. 何を書くか
1. ウェブサイトの目的、特徴、利点(必須)

エッセイを書くときは、要点を簡潔に述べることが重要ですが、ここでも同じことが言えます。ナンセンスなことを言わないで!

Douban のコピーライティングはシンプルで洗練されており、構造が明確です。 Doubanについて→Doubanの起源→Doubanに参加する図 04 に示すように、最初の段落を例に挙げます。

豆瓣的“關于”

04 豆板の「About」

誰もが Renren.com を知っていますが、その「About」セクションは「People」ページでもあります。上記の紹介文には、「Renren.com は中国最大かつ最も影響力のある SNS ウェブサイトです。実名制を基盤とし、日記、グループ、インスタント メッセージ、フォト アルバム、マーケットなど、豊富で強力なインターネット機能体験をユーザーに提供し、ソーシャル インタラクション、情報、エンターテイメント、取引に対するユーザーのニーズを満たします。」と書かれています。明確かつ簡潔です。

Geek Park の「About」の上には 4 つのラベルがはっきりと表示されており、視聴者の邪魔になるだけでなく、これら 4 つのページはそれぞれ別の HTML ファイルでもあり、Web サイトの速度が遅くなります。さらに厄介なのは、Geek Park が他と何が違うのかが明確に示されていないことです。 ——これは、ウェブサイトの創設者の一人であり、Maybe の著者である著者がブログで明確に述べている説明とはまったく対照的です (著者は次のように書いています: Geek Park、私たちのチームは IT とビジネス情報の集中的な読書コミュニティとして位置付けられています)。図05に示すように。 (最後の行の「お問い合わせ」は 2 番目のラベルにも繰り返されます)

極客公園的“關于”

05 ギークパークの「About」

2. 主催者(オプション)

1. ウェブサイトは有名ではないが、ホストは有名である

Flickr を知らないなら、Yahoo を知っておく必要があります。 (まあ、これは良い例ではありません。) iQiyi を知らないなら、Baidu は知っておく必要があります。主催者に頼って、自分の勢いを強調しましょう。

2. ウェブサイトは興味深いので、著者がどんな人なのか知りたい

ハリー・ポッターが好きなら、おそらくローリング(どのように書いたか、彼女の人生など)にも興味があるでしょう。同様に、たとえば個人のウェブサイトなど。サイトのコンテンツが優れていて、訪問者がブロガーについてもっと知りたいと思うなら、この小さな願いが満たされれば、訪問者は間違いなくあなたのサイトに戻ってきます。

5. 書き方

目的は明らかです。

1. フレンドリー。 「you」の代わりに「you」を使う

2. 直接的かつ効果的。遠回しに言わないで、大げさなことや空虚な言葉を言わないで

3. スペシャル。自分の特徴を見せる

4. 簡潔。削除できる場合は、書き込む必要はありません。

5. ヘルプページに移動します。すべての機能を没入感あふれるレベルまで紹介する必要はありません。これはトラブルシューティングを行う場所ではありません。まだ混乱していますか?混乱してサイトを閉じるのではなく、ヘルプ ページにアクセスしてください。

<<:  HTML の div、td、p およびその他のコンテナーでの強制改行と非改行の実装

>>:  VueはOpenLayersを使用してTiandi MapとAmapを読み込み

推薦する

MySQL 5.5 の導入に関する問題

MySQL の導入現在、会社ではプラットフォーム運用を通じてMySQLを導入しています。金曜日、プラ...

DockerにRocketMQをインストールするための実装手順

目次1. 画像を取得する2. ブローカーサーバーを作成する3. ブローカーを作成する4. Rocke...

ホストサービスにアクセスするDockerでのサービスの実装

目次1. シナリオ2. 解決策3. 結論4. 参考文献1. シナリオ日常の開発およびテスト作業には ...

Linux にバイナリ MySQL をインストールして MySQL パスワードをクラックする方法

1. システムに必要な libaio ソフトウェアがインストールされていることを確認します。インスト...

Nginx レイヤー 4 負荷分散構成ガイド

1. レイヤー4負荷分散の概要レイヤー 4 ロード バランシングとは何ですか?いわゆる 4 層負荷分...

ウェブページの背景画像を伸ばす2つの方法

解決策は2つあります。 1つはCSSで、background-size:coverを使用して画像の伸...

知らないかもしれないLinuxのファイル権限管理方法

なぜ権限管理が必要なのでしょうか? 1. コンピュータ リソースは限られているため、コンピュータ リ...

雨滴効果を実現する JavaScript キャンバス

この記事の例では、雨滴効果を実現するためのキャンバスの具体的なコードを参考までに共有しています。具体...

クールなページング効果を実現するネイティブJS

この記事では、次のような効果を持つ JS ページング効果の例を紹介します。クールだと思いませんか? ...

CSSプリコンパイル言語とその違いの詳細な説明

1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...

フレームセットを使用してワイドスクリーンを中央に配置するためのヒントを共有する

コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...

Vue+Router+Element でシンプルなナビゲーションバーを実装する

このプロジェクトでは、Vue+Router+Element の具体的なコードを共有して、シンプルなナ...

HTML で色を表すには、6 桁の 16 進コード、RGB、またはキーワードを使用します。

HTML で色を表す方法は 3 つありますが、最もよく使われるのは 6 桁の 16 進コード表現です...

テーブルのネストと境界の結合の問題に対する解決策

【質問】外側のテーブルと内側のテーブルがネストされていて、内側のテーブルと外側のテーブルの両方に境界...