1 つのピクセルで 1000 ドルを失った方法

これは、顧客が私に 1px の移動で 1000 ドルを失うように仕向けた話です。それは私のキャリアを変えました。また、Web 開発がどのように変化し、これらの変化に適応できるかについても教えてくれました。

昔、私はソーシャル メディア エージェンシーを経営していました。社内の最先端システムでソーシャル メディア アカウントを運営する以外に、コンテストを運営したり、クライアント向けの小規模なマーケティング アプリを作成したりしていました。

クライアントが何も考えていないこともあったため、アプリをゼロから設計していました。ごくまれに、マーケティング アプリを開発するための準備が整ったデザインをクライアントに提供することはありませんでした。

通常、私が行ったことは、クライアントの予算に合わせて設計を大まかにたどることでした。誰もが満足し、コンテストは成功し、クライアントに多くの新しいフォロワーと幅広いブランド認知度をもたらしました.

それはソーシャル メディアの始まりであり、有機的な活動でクライアントにリーチする方法は、現在と比べて非常に簡単でした。

そのため、Web 開発者としての私の生活は非常に快適でした。その1人のクライアントが来るまで、彼はコンテストをしたくありませんでした。彼は、自分のソーシャル メディア アカウントにニュースレターの購読ページを作成したいと考えていました。

ソーシャル メディア プラットフォームの名前については言及しませんが、昔は、ソーシャル メディア ページに HTML、CSS、および JS を使用してサブページを作成することができました。

この仕事のために私が交渉した予算は妥当なものでした。クライアントはそれを受け入れました。急いで注文を履行するのに十分な時間がありました。

私は言及するのを忘れましたか？彼は、ニュースレターのページを独自のデザインで作成しました。それは美しく人目を引くもので、当時のマーケティング アプリのアイデアをはるかに凌駕していました。

私にとっては、ページを作成して他のタスクに移動するだけだったので、タスクが簡単になりました.他のタスクと混同して 2 日後、ランディング ページを完成させ、結果に満足してクライアントに送りました。

しかし、クライアントは私の熱意を共有しませんでした。彼は、ランディング ページがデザインと異なっていると私に言いました。そうですね。デザインは単なるインスピレーションであり、多かれ少なかれすべてを適切な場所に配置しました。

わかりました、もっと調整するだけだと思いました。ボタンを左に、画像を上に、というように移動します。私にとってはごく普通のことでした。なぜなら、完璧な解決策を作ったとしても、何人かのクライアントがいくつかの変更を求めてきたからです。

これは、クライアントが自分の望むものを手に入れることへの参加感と満足感を与えるため、自然で重要なステップです。

さらに数日後、ニュースレターのランディング ページを調整し、クライアントに送信しました。 1時間後、「まだ歪んでいます」との返事。

実装は提供された設計をほぼ完璧に表現したものであり、このプロジェクトの予算を使い果たしてしまったため、私にとってはがっかりしました。

実装のスクリーンショットを作成し、それを Paint.NET アプリのデザインに重ねることに決めたのはそのときでした。明らかになったのは、実装はデザインに似ていましたが、要素はさまざまな方向でデザインからピクセル離れているということでした.

私の人生のこの時点まで、私はピクセルの違いが見られないことにかなり満足していました.イライラしました。しかし、私は自分が引き受けたこの仕事をどうしても終わらせたかったのです。それで、私はこのプロジェクトにさらに取り組みました。合計で、さらに数時間作業したため、予算を $300 超過しました。

今回は、別のアプローチを選択します。実装を調整しようとしませんでした。要素を移動しただけなので、Paint.NET のデザインに 100% 適合します。それは私の最初のピクセル パーフェクトな実装でした。

頭の中では「意味がない」「やってみよう」と戦っていました。最後に、新しいバージョンをクライアントに送信することができました。ピクセルパーフェクトになると、クライアントは結果を受け入れました。

すぐに次の作業に移る予定でしたが、気になりました。違いは何ですか？ 2 つの Paint.NET アプリを並べて開き、最初の実装とピクセル パーフェクトなアプリを比較しました。

私のかなり折衷的なエンジニアリングの目が見たものは驚くべきものでした.私の最初の実装は醜く見えました!私はこれまで見たことがなく、この 2 ～ 3 ピクセルの違いは認識に影響を与えないと考えていました。しかし、私はニュースレターのモナリザをお粗末な目で見ていました。

私は当初、このナンセンスをピクセルでクライアントに請求したいと考えていました。ただし、非常に重要なことを学んでいることを考慮して、基本料金を請求しました。

この瞬間とこのクライアントによって、フロントエンド開発者からデザイン開発者への転身が固まりました。それ以来、多くのデザイナー、クライアント、フロントエンド開発者と仕事をしてきました。

誰もがピクセル パーフェクトな実装を期待しているわけではありません。それは必ずしも必要ではなく、金銭的にも常に賢明であるとは限りません。しかし、特に顧客を引き付けたい場合はそうです。

良いデザインは人の目を惹きます。優れたデザインは、CSS シートに追加した 1px に隠れています。

このような問題に集中できるようにするには、ソフトウェアの技術的な側面を整理する必要があります。そのため、e コマース ストアまたはアプリのマーケティング、ビジネス、エクスペリエンスの側面により多くの労力を注ぐことができます。

そのため、 Elastic Pathが提供するものが気に入っています。私がこの記事で参加しているコンテストを後援している会社です。複数の e コマース サイトをセットアップするために必要なすべての運用機能を提供します。

開発者として、私は製品カタログや支払いシステムなどの維持と開発よりもビジネス ニーズに重点を置いているため、このアイデアが気に入っています。これらは、新しい e コマースの場で利用できる使いやすい API を提供します。 .

記事が気に入ったら、ハートのアイコンをクリックしてコメントし、SNSで共有してください。乾杯！