デザイナーが再びハマーの公式サイトに不満を述べる

デザイナーが再びハマーの公式サイトに不満を述べる

昨年、この公開書簡は大ヒットし、羅永浩氏を驚かせた。今日、著者が新しい章を発表するとは思ってもみなかった。批判は依然として鋭いが、強迫性障害を持つデザイナーだけが見つけられる>>>

ハマーの公式サイト 123WORDPRESS.COM に関するデザイナーの不満

[要点]: コピーライティングは冗長、フロントエンドは奇妙、プロセスはわかりにくく、才能が不足しています。このうるさいデザイナーは新たな不満を抱いています。

著者の公開アカウント: OCDesigner、フォロー歓迎

ラオ・ルオ:

こんにちは、またお会いできて嬉しいです。以前、私は強迫性障害を持つデザイナーだと自己紹介しました。その後、強迫性障害を持つ人の中には、1時間手を洗える人もいることを知りました。彼らと比べると、私は実際には、目に入る砂粒さえ我慢できないプロダクトマネージャーだと言った方が適切だと思います。

昨年 9 月に、私はあなたに公開書簡を書きました。そこには、Hammer の公式 Web サイトに関する苦情が 10 件以上含まれていました。しかし、あなたとの良好なやり取りの結果、問題の 95% が修正され、回避されました。したがって、この新しい公開書簡が生まれました。

その公開書簡:「ラオ・ルオへの公開書簡!ハマー公式サイトに対するデザイナーの苦情」

1. 免責事項

部外者として、私たちの「推測」のいくつかは正確ではないかもしれません。しかし、これは存在の問題ではなく程度の問題だと私は信じています。掲載されている情報を信じたり参考にしたりすることで生じた直接的、間接的な損失については一切関与しておりません。この声明に同意しない場合は、手紙を読むのをやめてください。

2. 利用環境

コンピュータハードウェア: MacBook Pro (Retina、15 インチ、2013 年後期)

システムバージョン: OS X 10.10.4 (14E17e) [システム言語は中国語です]

ブラウザ: Safari 8.0.7 (10600.7.5)

すべてのスクリーンショットは5月9日から10日までのものです

3. 問題の概要

コピーライティングが冗長

フロントエンドがおかしい

混乱したプロセス

人材不足

4. 具体的な指示

1. コピーライティングが冗長すぎる

1) 関数紹介テキストの「引数」が説得力に欠け、ロジックがわかりにくい。

ウェブサイトのすべての画面は説得力のある「スライド」であるべきです。各小見出しが議論であるなら、その下のそれについて論じているテキストが証拠であるべきです。しかし、Hammer の公式ウェブサイトのテキストは混乱しています。

スクリーンショット 2015-05-13 7.14.56pm.png

Smartisan Technology 公式ウェブサイトより

写真のサブタイトル(主張)は「OS は美しく、使いやすく、ユーザーフレンドリーである」ということのようです。本文(論拠)の主旨は、「ある程度改善する」、「ある程度磨く」、「ある程度実行する」という、超長形容詞で構成された3つの並列文です。明確な主語がないため、読むと混乱してしまいます。「美しい」、「使いやすい」、「人間化」とは対応関係がありません。

2 番目の段落のメインの文章は、「新機能により、後戻りはできなくなります」です。これは、人々にいくぶん恐ろしい印象を与えます。その上、誰もが「7年に一度」のジョークは誰もが知っていると思っているのでしょうか? オチは隠されているものの明かされず、人々はまだ裏話が語られていないと感じています。

スクリーンショット 2015-05-13 7.17.25pm​​.png

Appleの中国公式サイトより

上の写真はAppleの公式サイトからの例です。サブタイトル(引数):「iOS バージョン」。本文(論証)文の本体は「iOS 8のシステム機能と特徴は利点を提示する」であり、主題が明確で、達成すべきタスクも明確です。

2 番目の文の本体は「これは素晴らしい試合であるだけでなく、素晴らしい経験でもあります。」です。わかりやすく、正確です。

2) 冗長なコピーがウェブサイトと製品に「浸透」します。

コピーライティングは簡潔かつ正確である必要があります。あまり書きすぎたり、「物語を語りすぎたり」しないでください。このようなコピーライティングは、最初は楽しさやコミュニケーション(マーケティング)をもたらすかもしれませんが、ユーザーが繰り返し開いて使用するようになると、何度も繰り返される冷たいジョークのように退屈なものになってしまいます。

スクリーンショット 2015-05-13 7.19.20pm.png

湖南テレビ「リアルメン」より

面倒なコピーライティングは冗長な吹き替えのようなもの。最初は「面白い」ためだったのが、後になって「馬鹿げている」ものになってしまった。上の動画では、王宝強は引き金を引く訓練をする際に、自らの効果音を加​​えている。効果音なしの訓練と比べると、インストラクターは王宝強の発砲動作をよりよく理解できるかもしれない。そして、10回も吹き替えをしなければいけないと叱られたとき、吹き替えは冗長でばかげているように思えた。

時には、責任を放棄したり説明したりするために、ハマーは長い前置きの文章を言わなければならないようだ。これらの言葉は、私たちの設計機能の本来の意図を保持し、機能を使用するための楽しさと指示も提供します。

しかし、これが少し使用頻度の高いシナリオの機能である場合、長くてくだらない説明は常に煩わしくなります。結局のところ、誰も今読みたいとは思いませんし、特に繰り返し読みたいとは思いません。

スクリーンショット 2015-05-13 7.23.18pm.png

Smartisan Technology English 公式サイトより

スクリーンショット 2015-05-13 7.23.48pm.png

Hammer Noteの英語インターフェース経由

「何がポイント?」外国人が理解できない「ポイント」が国際化の障害になっている。

製品やウェブサイトのコピーの書き方は、「非大衆化」かつ「非地域化」する必要があります。現在インターネットで人気のある単語や文のパターンを使用してテキストをコピーに書き込むと、大惨事になります。 1年間更新されない期間によって、最終的に人気がなくなるという事実に加えて、より重要な理由は、文化の違いによって形成された「ジョーク」が、通常、外国人にうまく翻訳され、伝えられないということです。

上の図 1 の「革命的」、「破壊的」、「再定義」という言葉は、もともと Apple の広告から引用したものです。残念ながら、これらの言葉は Apple の広告の英語版には登場せず、その「意味」が失われてしまいました。上記の図 2 で言及されているユーザーの中には、実際に中国出身の人もいます。そのユーザーに対する皮肉な発言が真面目に翻訳されているのは明らかに不適切です。

2. フロントエンドの驚異

1) ウェブサイト上のテキスト表示の多くは画像で補完されています。

これは普及(SEO と複製)に悪影響を与えるだけでなく、変更とメンテナンスのコストも増加します。テキストを更新および変更する必要がある場合、更新が完了する前にデザイナーが介入して資料のコピーを複数作成する必要があり、作業チェーンが長くなります。

スクリーンショット 2015-05-13 7.26.31pm.png

Smartisan Technology 公式ウェブサイトより

上の写真にある単純なものから複雑なものまで、すべての「テキストと画像」は、画像全体を読み込むことによって実現されます。

ウェブページの最も基本的な要素を表示するために画像を使用する理由はありません。テキストを含むすべての要素を画像の形式で表示すると、ウェブページの読み込み速度に影響し、サーバーのリソースが浪費されるだけでなく、システム独自のテキストレンダリング方法を無視し、表示効果が最適ではなくなります。

上に表示されているテキストのレイアウトに特別な点はほとんどありません。シンプルなコードで実装されているため、メンテナンスや更新が容易になり、モバイル版の開発もスピードアップします(要素の再利用)。

2) フロントエンドの怠惰さは、最終的な効果に対してのみ責任を持ち、実装方法については責任を負わないという事実にも反映されています。

スタイルの多様性や素材の使用は、怠惰の言い訳にはなりません。私が見たすべてのスタイルは、コードを通じて「きれいに」完了できます。

スクリーンショット 2015-05-13 7.28.50pm.png

Smartisan Technology 公式ウェブサイトより

上の画像では、ページ素材のシェーディングを実現するために、フロントエンドでは 2350×7146 の背景画像を使用しています。

レイヤーに分割したり、スライスにカットしたり、何もせずに画像全体を貼り付けたりします。 「設計者本人」による「設計図」の修復であれば、修復効果は当然「抜群」です。ただし、ページが「ハイエンド」に見えるほど、実装方法は低俗なものになります。

実は、Hammer がこの問題に遭遇したのは、「スキューモーフィック スタイル」にこだわっているからではありません。ゲーム Web サイトでは、告知などを公開するために「スクロール」スタイルがよく使用されていますが、このようなローテクな実装方法は見たことがありませんでした。

3. 混沌としたプロセス

1) コードの保守と管理により、プロセス管理の混乱が露呈します。

たとえば、Retina スクリーンのサポートに関しては、同じコンテンツ形式に対して、サポートしているものとサポートしていないものがあります。これは標準が欠如していることを示しています。

同時に、公開コードが必要なところでは、公開コードが確立されておらず、複数の異なるコードが同時に実行されているため、何度も修正が必要となるバグが発生します。

スクリーンショット 2015-05-13 7.30.54pm.png

Smartisan Technology 公式ウェブサイトより

HD 画面に対応しているかどうかは問題ではありません。問題は、明確な要求がなければ、明確な行動が起こらないことです。

もちろん、Hammer は HD スクリーンのシェアを気にするかもしれないし、気にしないかもしれないし、HD スクリーンのエクスペリエンスを気にするかもしれないし、気にしないかもしれない。しかし、いずれにしても、これは最初から決定され、実装および規制するための基準が存在する必要がある要件です。

同じページ上で、同じ種類の素材の一部が Retina 素材である場合もあれば、理由なく Retina 素材でない場合もあります。標準化された管理が欠如していると、必然的にプロセスが混乱することになります。

スクリーンショット 2015-05-13 7.32.56pm.png

Smartisan Technology 公式ウェブサイトより

一つの世界、一つの夢。同じスタイルで共通のコードが使用されるため、メンテナンスと更新が効率的かつ便利になります。

下部のスタイルはまったく同じですが、Smartisan Technology の公式バージョンでは、個別に管理される複数のコードが使用されています。このやり方は、バグの再発につながることがよくあります。図に示すように、登録情報が更新され、テキストに変更されましたが、公開コードが呼び出されないため、Web サイトには古いスタイルがまだ表示されます。

公開コードの作成と保守に関する認識が不足していると、製品マネージャーのプロセス管理が不十分であることが明らかになります。

2) プロジェクトが進行しても、「関連」または「影響を受ける」プロジェクトは更新されません。

関係部門は、自分たちが抱えているプロジェクトにどのようなプロジェクトが関係しているかはおろか、利用可能なリソースが何であるかさえ把握していません。あるいは、知っていても更新することを忘れてしまうこともあります。

スクリーンショット 2015-05-13 7.35.07pm.png

Smartisan Technology パブリックアカウント経由

スクリーンショット 2015-05-13 7.39.40pm.png

Smartisan Technology 公式ウェブサイトより

図1のSmartisan Technologyの公開アカウントは5月4日に採用通知を発表し、コピーエディターなどの新しい人材を募集しました。図2 公式サイトは3月20日に最終更新されており、公式アカウントに掲載されているポジションは見つかりませんでした。

「これが効果的であれば、まずはこれを投稿し、あとからもう1つを更新する」。プロジェクト推進にはプロセス管理が必要であり、それが仕事を通じて蓄積される最大の財産です。

Apple が新製品を発表するための記者会見を開くときは必ず、まずオンライン ストアをオフラインにします。このプロセスはベストプラクティスであり、ユーザーに対する固定された期待も形成します。

自社のリソースとビジネスを理解することによってのみ、合理的なプロセスを整え、計画することができます。プロジェクトを推進する際には、まずどのプロジェクトに影響があるのか​​を分析し、影響を受けるプロジェクトを分散したり、自ら完了させたりすることで遅延やエラーを回避します。最終的には、合理的なプロセスをまとめ、固めていくことが、会社にとって重要な資産となります。

<<:  CSSで半透明の背景色を実現する2つの方法について簡単に説明します。

>>:  JavaScript Promise の徹底解説

推薦する

Ubuntuサーバーの一般的なコマンドの概要

以下のコマンドのほとんどは、コンソール/ターミナル/シェルで入力する必要があります。 'su...

MySQL トランザクション分離レベルの表示と変更の例

トランザクション分離レベルを確認するMySQL では、'%tx_isolation%'...

完璧なアロエベラジェルを選ぶには?完璧なアロエベラジェルの本物と偽物の見分け方

最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...

MySQLインデックスを正しく作成する方法

インデックス作成は大学図書館の書誌インデックスの構築に似ており、データ検索の効率を向上させ、データベ...

Vue+thinkphp5.1+axiosでファイルアップロードを実現

この記事では、thinkphp5.1 + Vue+axiosを使用してファイルをアップロードする方法...

VUE+Canvasは、インゴットを受け取る富の神のゲームを実装します

前回のキャンバス ゲーム シリーズへようこそ: 《VUEがFlappy Birdを実装しました〜〜〜...

Vue のフィルターウィジェットの詳細な使用方法

この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介...

MySQL 8.0.15 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64解凍版のインストールと設定方法を紹介します。具体...

jQueryはシンプルなコメントエリアを実装します

この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...

Nginx サーバーで URL リンクを設定する方法

LNMPのようなアーキテクチャを持つウェブサイトは、一般的にPHPフレームワークに基づいて開発されて...

MySQL データベースの手動およびスケジュールされたバックアップ手順

目次手動バックアップタイマーバックアップ手動バックアップ1) cmd コンソール: mysqldum...

Windows 10 での MySQL 8.0.20 のインストールと設定方法のグラフィック チュートリアル

Win10システムにMySQL8.0.20をローカルにインストールし、個人的にテストして利用可能であ...

HTML ハイパーリンク スタイル (4 つの異なる状態) の設定例

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

Reactはページング効果を実装する

この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...