ツール型ウェブサイトへの参入——解釈と典型例

ツール型ウェブサイトについて、まず疑問に思うのは、無数のオンラインウェブサイトの中で、どのようなウェブサイトがツール型ウェブサイトと見なされるのか、その特徴は何で、他のウェブサイトとどう違うのかということです。インターネットで関連情報を検索したところ、この用語の明確な定義はないことがわかりました。

今後の研究に役立てるため、これまでの学生の研究成果を統合し、ツール型ウェブサイトの定義版を参考資料として提供します。

——いわゆるツール型ウェブサイトは、その名の通り、インターネット上に構築されたツールであり、特定の分野で人々が目標ニーズを満たすために提供され、一定の操作プロセスを持ち、目標タスクの完了を主な目的とする、ネットワークアプリケーションに基づくツールを指します。

主な機能は次のとおりです。

– 1つ以上のタスクを完了する

– 運用プロセスのガイダンスに重点を置く

– タスクを迅速に完了することに重点を置く

– 目標を達成するための唯一の手段ではなく、ユーザーがより効率的に目標を達成できるように支援するだけです

同時に、多くのツール型ウェブサイトには独立したポータルも装備されており、主に情報を表示し、ツールの価値、動向などを具体的に紹介し、ログインやダウンロードの入り口を提供するために使用されます。このポータルとツールページは高度に統合されているため、ツール型ウェブサイトのカテゴリに分類し、ツール型ウェブサイトポータル（またはツールウェブサイトホームページ）と呼びます。

ツール型ウェブサイトの概念をより直感的に理解するために、ウェブサイトをその機能に基づいてコンテンツ型ウェブサイトとツール型ウェブサイトに分類することができます。ツールベースのウェブサイトとコンテンツベースのウェブサイトの対比や違いについては、すでに何人かの学生が詳しく説明しているので（詳しく知りたい場合は、関連記事を読んでください）、ここでは繰り返しません。

代表的なツールの Web サイトには、Google シリーズ (検索、翻訳、ドキュメント、リーダーなど)、Tenpay、Alipay、Data Cube、salesforce、xero、TA、DNSpod などがあります。

典型的なコンテンツベースの Web サイトには、Sina、Tencent、Tianya Forum などがあります。

以下では、経験的な観点から私が気に入っているツール型ウェブサイトの代表的な例をいくつか紹介します。

Google - 一貫性こそが重要

ツール型のウェブサイトの場合、最も広く使用されているのは、Google 検索、翻訳、ドキュメントなど、私たちがよく知っている Google シリーズの製品であるはずです。そのほとんどは、Google 検索の後に徐々にリリースされた新しいツールです。これらのツールはネットユーザーのインターネット生活に大きな利便性をもたらします。

製品ラインが非常に多いため、機能属性の違いにより異なるビジュアル スタイルが簡単に作成されます。しかし、Google のマルチプロダクト システムにおけるビジュアル スタイルは、ナビゲーション バー、カラー システム、基本的なレイアウト構造などの点で非常に統一されていることがわかります。たとえば、すべての背景レイヤーは黒、白、グレーで、すべての新機能は目を引く赤いボタンで、すべての機能メニューは左側にあります。

この一貫性により、新製品に対するユーザーの認知コストと学習コストが大幅に削減され、ユーザーは新製品に慣れることができます。これは、ブランド イメージとエクスペリエンス仕様に関する Google エクスペリエンス チームの強力な策定および実行能力を反映しています。

Xero——新鮮だけど実用的

下の Xero は、典型的な小型のフレッシュなものです。この Web サイトが気に入っているのは、単純すぎることのないシンプルさと、派手すぎない美しさが Web サイトの機能性に非常によく合っているからです。

Xero は、現金出納帳、総勘定元帳、請求書、レポートなどの出力機能を備えた、中小企業向けの総合的な会計ツールです。会計ツールのウェブサイトとして、ユーザーの最も重要な要求は、もちろんセキュリティと正確性です。そのため、Xero は、ポータルと製品ページで中程度の明るさの青と緑を使用してそれを表現することに非常に敏感でした。同時に、画像と構造は水平と垂直で安定しており、究極の安全で信頼できる雰囲気を作り出しています。

情報表示の面では、Xeroポータルは、空白スペースが多く、大小のフォントのコントラストが強いなど、Web2.0の典型的な特徴を備えています。製品ページでは、各コントロールの視覚要素が可能な限り削減されています。たとえば、表には垂直のワイヤーフレームがなく、グラフは色が統一され、ボタンはテクスチャが簡素化され、一般的なリンク、ヘッダー、タブを含むすべてのクリック可能なテキストはすべて青色などです。これを行う目的は、大量のテキストデータが不要な詳細によって邪魔されることを防ぎ、テーマを一目で明確にし、ユーザーがクリーンで快適な環境でタスクをすばやく完了できるようにすることです。

この製品は、かつてニールセン・ノーマン・グループによってベストアプリケーションUI 10に選ばれました。

フォーク——クリエイティブな写真がブランドイメージを高める

ツールベースのウェブサイトでは、ツール自体がユーザーにもたらす価値がウェブサイトの成否を決定づける可能性は確かにありますが、ポータルは製品のショーケースのようなものでもあり、訪問者が製品の目的と価値をすぐに理解し、使用できるようにします。したがって、ポータルの成功は Web サイトにも重要な影響を及ぼします。色彩、レイアウト、イラストを工夫して、ポータルをできるだけ目を引くものにし、訪問者の支持を得ることは、ビジュアル デザイナーにとって大きな課題です。下のフォードは、イラストの創造性の点で典型的な例です。その注目すべき状況的デザインの特徴は目を引くものです。

招商銀行と言えばヒマワリを思い浮かべる。テンセントと言えばペンギンを思い浮かべる。Mailchimpと言えば郵便配達猿を思い浮かべる。では、フォークと言えば、フォークを持って小舟に座っているこのかわいい年老いた漁師を思い浮かべるべきだ。ロゴは目立たないかもしれませんが、このスポークスマンとのコントラストにより、このツールは本当に忘れられないものになっています。よく見ると、内部のいくつかのページに海をテーマにしたイラストデ​​ザインがあることに気づきます。これを見ると、同じことに詳しくない人でも、ダウンロードをクリックして試してみようという気になるのではないでしょうか。

ポータル ページ フレームワークでは、人気のレスポンシブ Web デザイン モデルが採用されており、ブラウザーを拡大/縮小したり、携帯電話からアクセスしたりしたときにレイアウトが微調整され、視覚的なコミュニケーションの整合性が反映されることは特筆に値します。

ツール型ウェブサイトポータルのエクスペリエンスデザインに関しては、Xiao Yivan が詳細な研究を行っていますので、こちらをご覧ください。

原題：ツール型ウェブサイトへの参入 - 解釈と典型的事例

キーワード: ウォークイン、ツールタイプ、ウェブサイト、定義、典型的な、ケース、私たちの最初の、ウェブマスター、ウェブサイトのプロモーション、お金を稼ぐ