デザインの開発を始めましょう（文字通り）

デザイナーがコーディングを学ぶべき時が来た理由

今日のデザイナーは、見た目のよいユーザー インターフェイスを作成する以上のことをする必要があると私は確信しています。デザイナーの役割は進化しており、創造性とテクノロジーの間のギャップを埋めることが求められています。

これを実現するためにツールキットに追加できる最適なスキルの 1 つは、コーディングです。

さて、デザイナーがコーディングを学ぶべきか否かデザイナーと開発者の間の古い区分はもはや機能していないと思います。それは今日の製品開発のニーズを満たしていません。インターフェースに取り組んでいる人は、開発者であっても、優れたデザイン感覚を持っている必要があります。

同時に、設計上の決定は、以下のことを理解していない人が設定した厳格なルールやマニュアルに縛られるべきではありません。

• 交流、
• テクノロジー、または
• コーディング。

プロセス中、設計 (右側) と実際の実装 (左側) は次のようになります。

そして、これを修正できるのはあなた方（デザイナー）だけです。私はあなた方に、あなたが夢見た UI を完成させるための魔法の薬としてコードを提供します。

結局のところ、デザインは人ではなく機能である、というのは正しい言葉です。

コーディングにより、デザイン市場の変化に適応しやすくなります

デザインは急速に変化しており、それに追いつくために必要なスキルも変化しています。「プロダクト デザイナー/開発者」という正式な職種がすぐに誕生すると言っているわけではありませんが、雇用主は間違いなく、従来のデザインの枠から抜け出せる人材を求めています。雇用主が求めているのは、次のようなデザイナーです。

• 理解する人間の行動、

• チーム間で協力できる

• ビジュアルの作成だけにとどまらず、貢献します。

  
  

コーディングを理解しているデザイナーには、独自の利点があります。チーム間での連携が得意で、アイデアを実際のユーザーのニーズを満たす実用的で魅力的なソリューションに変えることができます。

従来の UI デザインだけでは不十分です。フレームワーク、コードベース、デザインを支えるシステムなど、物事がどのように構築されているかを理解することで、美しいだけでなく、それを動かすテクノロジーとシームレスに連携するエクスペリエンスを作成できます。私たちはもはや、単に「見た目が美しい」画面を作っているだけではありません。

例えば、最近のプロジェクトではフラッター単一のコードベースからアプリを構築するためのオープンソース フレームワークである を初めて使用して、情報に基づいた設計上の選択を行うにはコーディングの知識がいかに重要であるかを認識しました。

テクノロジーを知らなければ、開発チームの制限内で機能するアニメーション、トランジション、またはモーション要素を設計することははるかに困難になります。

ドイツの園芸家向けのVeggie Grower iOS アプリのアニメーションは、コーディングを学んだおかげで実現できました。

コーディングの利点はスキルだけにとどまりません。脳の働きを変えることさえできます。コーディングに挑戦するたびに、脳に新しいつながりが生まれます。脳は適応し、進化し、他の分野でも役立っています。

科学によれば、プログラミングや楽器演奏など、難しいことや馴染みのないことを学習すると、新しい神経経路が形成されます。新しいスキルは、能力を拡大するだけではありません。脳の配線も作り直します。困難に直面した時、私たちはより順応性や回復力を持つようになります。

コーディングは開発者の視点を理解するのに役立つ

コーディングできるデザイナーは、開発者とのコラボレーションを容易にします。これにより、プロセスがスムーズになり、製品の品質が向上します。コーディングは、より実用的で現実的なデザインの作成に役立ちます。開発者の作業が楽になり、チーム間の摩擦が軽減されます。コードを理解すると、アイデアをよりうまく伝え、創造的なビジョンを実行可能なソリューションに変えることができます。

私の「子供」である Veggie Grower アプリについて、もう少し詳しく説明します。私の最大の失敗は、クライアントが「驚きの要素」を強く求めたため、UI を過度に複雑にしてしまったことです。私たちは印象づけたいと思っていましたが、的を外してしまいました。アプリ ストアでの実際の UI はうまくいきませんでした (このストーリーの表紙を上に参照してください)。

この経験から、デザイナーは開発者にとって第一線で防御する必要があることがわかりました。ビジネスのアイデアが非現実的な領域に傾き始めたら、製品と UX が複雑になりすぎないように、デザイナーが抵抗しなければなりません。私たちは、アプリをリリースするための賢い回避策をいくつか見つけることができました。私は Lottie のアニメーションと自分で作成したアニメーションを組み合わせて使用しました。私のコーディング スキルがここで間違いなく役立ちました。リリースを実現できる程度に仕上げるのに役立ちました。

コーディングを学んだことで、自分のデザインに対する見方が完全に変わりました。開発者の視点から物事を見るようになり、複雑な機能と予算の制限とのバランスを取ったり、大きなアイデアと実際に実行可能なことの間の現実的な妥協点を見つけたりするなど、開発者が直面する課題を理解するようになりました。

開発者の苦痛を理解する vs いつ自分の立場を守るべきかを知る

コーディングを通じて、プロセスの開発側に対する共感を学びました。

開発者は、多くの場合、物事を機能的にするために多大なプレッシャーに直面していることを認識することが重要です。何日もデバッグに費やした後、開発者が最も望まないのは、不必要な複雑さを追加する複雑な設計要素に対処することです。

ここで、私たちデザイナーが問題解決者として介入する必要があります。ユーザーと開発者の両方に役立つ形式と機能のバランスを取りながら、シンプルさと明瞭さを追求しなければなりません。

これは、すべてのデザインを平凡なレベルまで単純化するという意味ではありません。戦略的になり、インターフェースを、開発者が理解して実装しやすい、管理しやすく構築可能なコンポーネントに分解することを意味します。

さて、「ゲートキーピング」と呼ばれるものについてもお話ししましょう。現在、UX では、これは通常、否定的な特性として見られています。ゲートキーピングとは、何かに対する一般的なアクセスを制御し、通常は制限する活動です。

しかし、デザインにおいては、「ゲートキーパー」であることが仕事の大きな部分を占めます。私たちは、何かが公開される前の防衛線です。私たちの役割は、私たちが作成に協力したすべてのものが、実際にユーザーの体験を向上させるようにすることです。

この「ゲートキーピング」は難しいことではありません。ユーザーのニーズを最優先にすることです。そして、ここで少しのコード知識が大きな違いを生むのです。

開発側を理解すると、特定の設計の詳細がなぜ重要であるかをより適切に伝えることができます。

ユーザーの注意を引くために特定のアニメーションが必要な機能に取り組んでいるが、開発者は時間を節約するためにそのアニメーションを省略したいと考えているとします。そのアニメーションを、たとえば簡単な CSS の調整や既存の JavaScript ライブラリの使用で実現する方法を知っていれば、効果的に主張することができ、開発者が耳を傾けてくれる可能性が高くなります。

これが重要です。コーディング方法を知ることは、建設的でどちらの当事者もイライラさせない方法で自分の視点を主張する上で非常に重要です。

コーディングによって「Wow Factor」の背後にある魔法を見ることができる

下部の「アボカド男」は、追加アイテムの読み込みを示しています。開発者にとっては扱いにくいため、Lottie を使用して JSON に変換しました。これにより、シームレスな統合が可能になり、数日ではなく 15 分しかかかりませんでした。

機能性を重視しながらも、「驚きの要素」を忘れることはできません。

アニメーションの流れ方や UI の色の完璧なバランスによって、思い出に残る体験が生まれます。この感情的なつながりは、製品を使いやすいだけでなく楽しいものにするために非常に重要です。

ユーザーは、軽微なユーザビリティの問題に対して寛容であるインターフェースが視覚的に魅力的だと感じたときです。結局のところ、機能的なデザインよりも美的なデザインの方が成功する可能性が高いのです。

しかし、「驚きの要素」は自然に生まれるものではありません。その瞬間に対する私たちのビジョンが最終製品に反映されるようにするには、開発者と緊密に連携する必要があります。Lottie やCSSアニメーションなどのツールを使用すると、開発者に私たちの意図を正確に示すことができ、遷移やインタラクションを生き生きと表現するのに役立ちます。

コーディングは、何が可能かを理解するのに役立ちます

コーディングを学ぶことで、何を構築するのが現実的で、何は無理があるかを理解できるようになります。もちろん、Dribbble の素晴らしいポートフォリオは見ていて楽しいものです。しかし、それらのデザインを開発できなければ、それは単なるデジタル アートであり、機能的な製品ではありません。

コーディングの基礎をある程度理解すると、何が可能かが見えてきます。つまり、非現実的なアイデアで開発者を困惑させることなく、創造性を発揮できるようになります。

たとえば、ログイン画面のマイクロインタラクションを設計するとします。繊細で満足のいくアニメーションが必要だと想像してください。パスワードを入力するときにユーザーにフィードバックを与える必要があります。たとえば、正しい形式が満たされるとフィールドが緑色に点灯する必要があります。CSS や JavaScript を少しも理解していないと、開発チームが構築するのに何時間もかかるような複雑すぎるものを提案してしまうかもしれません。コーディングの知識があれば、どの効果が現実的かがわかります。クールで実現可能なアイデアを提案するのに役立ちます。

デザイナーは「水のように」適応力と流動性を持つべきです（この引用に感謝します、ブルース）。私たちは依然として創造の限界を押し広げることができますが、目の前にある制約に敏感です。

最高のデザインはインスピレーションを与えるユーザーも開発者も同様構築可能な範囲を超えて無理をすることなく。

インパクトのあるデザインのために手を携えて

デザインは美学に関するものではありません。提供する製品やサービス、そして最終的にはブランドに対する人々の体験を向上させることを目的とした問題解決プロセスです。

今日、私たちは単なるデザイナーではありません。問題解決者であり、ユーザー エクスペリエンスの擁護者であり、そして最も重要なことに、協力者でもあります。創造性と技術的洞察力を組み合わせることで、私たちは明日の製品への道を切り開いています。それは美しいだけでなく、ユーザーにとって真に意味があり効果的な製品です。

デザイナーとしての私たちの仕事は、美しいプロトタイプを作るだけではありません。開発者と協力し、そのビジョンを実現することです。つまり、開発プロセス全体に関わり、技術的な課題に取り組み、必要に応じてデザインを調整し、コミュニケーション ラインをオープンに保つということです。この継続的なコラボレーションにより、優れたデザインが優れた製品に生まれ変わります。

デザインが進化し続けるにつれて、コーディングの重要性は増すばかりです。デザインとテクノロジーの交差点には、イノベーションの大きな可能性がありますが、そのためには考え方の転換が必要です。コーディングをコア スキルとして取り入れることで、デザイナーは見た目が美しいだけでなく、機能的で開発者に優しく、インパクトのある製品を作成できます。