ウェブサイトのデザインハンドオフを改善するためのヒント

ウェブサイトを構築する過程で、行われるいくつかの段階があります。 それを単純化して標準のWebサイトを見ると、段階は次のようになります。

1. 必要性–誰かが何らかの理由でウェブサイトを必要としています。
2. ブレーンストーミング–一般的な構造、目標などを決定します。
3. 提案–クライアントは、サイトを構築するためのフリーランサーまたは代理店を見つけます。
4. コンテンツ–記事、画像など、ランディングページ、サイトマップなどにあるものすべて。
5. デザイン–個人/チームは、コンテンツに基づいてデザインとレイアウトに取り組みます。
6. 開発–人/チームは、設計に基づいてサイトの機能部分を開発します。

ほとんどの場合、ここでそれを混ぜることができます。 実行する作業の順序を変更しても、チームは優れた結果を生み出すことができます。 ただし、異なるエージェンシーの人々が同じプロジェクトに取り組んでいる場合、これは難しい場合があります。これが、すべてを処理できるオールラウンドなエージェンシーを選択する主な理由です。

この記事では、ステップ5の設計からステップ6の開発までを取り上げます。 これは、開発を遅らせ、計画プロセスで以前に決定されたものを台無しにすることによって物事がうまくいかない可能性がある場所です。

デザイナーが考慮すべきこと

「設計者はコーディング方法を知っている必要がありますか？」 は一般的であり、非常に合理的な質問です。 設計者が背後にあるコードを理解し、理想的にはそのようなコードを（ある程度）作成できる場合、設計者はプロジェクトをより早く完了するためにチーム全体を支援することができます。

これが当てはまる理由は次のとおりです。

1 –結局、すべてがブラウザに表示されます。

Figma、Adobeなどで作成したデザインはすべてブラウザに表示されます。 すべてのブラウザは、HTML / CSSと呼ばれるプログラミング言語のタイプを利用してページをレンダリングします。 Javascriptを使用すると、デザインをインタラクティブにすることができます。

これから取るべき重要な注意は、どんなデザインもHTML / CSSで実行可能でなければならないということです。 多くの才能のあるフロントエンド開発者は、テクノロジーが許す限り、ほとんど何でも実装できます。 ただし、覚えておいてください。常に「できるか」ということではなく、「うまくやって、維持できるようにすることができるか」ということです。

2 –一貫性

保守可能であることは、プロジェクトを成功させる秘訣です。 コードベースが混乱しているため、既存のサイト要素を微調整したり、新しい要素を追加したりするのに何時間も費やしたくありません。 再利用可能なコンポーネントがほとんどまたはまったくない非常に複雑な設計は、混乱してしまうことがあります。

いくつかのWebデザイナーのヒント：

• コンポーネントを念頭に置いて設計します。 現在、ほとんどのツールがこの機能を提供しています（Figma、Adobe XD、Sketch）。 煩わしさがなくなるまで、より頻繁に使用するように強制します。
• 要素をうまく揃えます。 同様のセクションは、互いに同じ距離にある必要があります。 たとえば、80pxは維持するのに適した分離です。 ここで80、そこに86、3番目に92、もう1つに78を使用して、セクションをランダムに配置しないでください。 きちんと整頓してください。
• グリッドを使用してください！ すべてのツールはグリッドシステムを提供します。 理想的には、12列のグリッドを選択してください。
• ワイドスクリーン（1920px以上）でデザインを紹介します。 これは、開発者が各セクションとその背景がどのように機能するかを理解するのに役立ちます。

3 –サイトの重量

私たちは皆、速いウェブサイトを望んでいますよね？ さて、デザイナーもこれの一部です。 これを考慮してください：8つの巨大な高解像度画像、4つのビデオ、およびアニメーション要素を備えたWebサイト。 。 これを時間通りに最適化して頑張ってください。 実行可能ですが、画像や動画の遅延読み込み、アップロード時のメディアの最適化、より優れた画像ファイル形式のサポート、高性能のためのスマートアニメーションアプローチの追加には、追加の開発時間と手法が必要になります。

開発者があまり経験がないか、速度について心配していない場合、低から中レベルのスマートフォンやラップトップでWebサイトが非常に遅くなる可能性があります。

開発者を支援する方法は？

デザイナーとして心に留めておくべき目標の1つは、サイトのルックアンドフィールを維持しながら開発をより簡単かつ迅速にすることです。

Web上で簡単に実行できることを検討する必要があります。

• ボックス–それはすべてボックスです。 あなたはいくつかの角を丸めることができます、はい、あなたは楕円（ボックスで定義されている）などを作ることができます。 ただし、レイアウトと相互作用するより複雑な形状を使用すると、事態は困難になります。
• 正確な位置をアニメーション化するのは難しい–画像をクリックして、テキストの反対側に移動したいとしますか？ 「簡単」に聞こえますが、そうではありません。 画像が移動する位置は、ビューポートなどに基づいて変化するサイトコンテナを基準にして維持する必要があります。 そして、画像が大きい場合はどうなりますか？
• ボックスの寸法をアニメーション化すると、レイアウトに影響します。 これは、アニメーション中に要素が順序付けられる方法の変更を指します。 これはブラウザで非常に重い場合があり、多くの場合、大きな遅延が発生します。

別のコンテンツを検討してください！

テキストの2倍でデザインはどのように見えますか？ または、横向きの画像ではなく縦向きの画像として？ 編集チームが何をアップロードするかはわかりません。 アスペクト比や画像のエッジなどの制約が必要ですか？ 可能であれば、これをデザインで紹介します。

Zeplinなどのツールでデザインを提供する

FigmaやAdobeXDのようなほとんどのデザインツールには、開発者とデザインを「共有」する方法があります。 そこから、フロントエンドチームは、レイヤーの色、タイポグラフィ設定、間隔、およびその他の視覚的プロパティを検査できます。これにより、レイヤーをデザインに非常に密着させることができます。

フォントやビデオなどの他のアセットを提供する

サイトで特定のフォントを使用したことがある場合は、それを開発者に提供してください。 ライセンスが付与されており、特定のURLからアクセスできる場合は、それも共有してください。 開発者にとって、最初から正しいフォントで作業することが重要です。 ビデオがある場合は、それも共有してください。 動画はYouTube、Vimeo、またはセルフホストのいずれになりますか？

「ピクセルパーフェクト」を求めないでください

サイトの最終的な外観をデザインと完全に同じに保つというこの概念は、開発者チームにあなたを嫌わせる簡単な方法であり、時間どおりに稼働する可能性を破壊する可能性があります。 ほとんどの場合、デザインは完璧にはなりません。 すべてのボタンの前に正確に18pxの間隔があることを100％確信することは不可能ですか？ そして19pxではありませんか？ または、すべてのタイトルが37pxではなく38pxであるということですか？ または、すべての境界線が#dddであり、黒であるが不透明度が15％の境界線はないのでしょうか。

開発者は、サイト全体の一貫性を維持するために、このような小さな間違いをあちこちで切り上げます。 これらは、同じルールに従うコンポーネントを組み込んでいます。 特定のケースで明らかに意図的な変更がない限り、要素が全面的に同じになれない理由はないはずです。

最終的に、コード化されたWebサイトは、デザインの一般的なルックアンドフィールに従う必要があります。

デザインにコメントを残す

タブ、アコーディオン、スライダーなどの特定の要素をインタラクティブにしたい場合は、デスクトップ、モバイル、クリック可能なものでどのように機能するかを数秒で書き留めてください。

ユーザーのように考える

完了したら、少し立ち止まって、サイトを使用していると想像してください。 上から下に読み、下にスクロールし、どこかをクリックして詳細を表示します。 ワークフローに欠けている可能性のあるものはありますか？ ユーザーインタラクションで変化する特定の要素のビューはありますか？ それが真実であり、設計がない場合は、開発者にそれを理解させることになり、仕事にストレスがかかります。締め切りが厳しい場合は、一般的なファイルをチームと共有して、いくつかの「状態」ビューが近づいています（それらがどれであるかを必ず言及してください）。

レスポンシブビュー

デスクトップで15ページをデザインしてから、モバイル版を作成するのは大変な作業です。 その上に少し異なるタブレットバージョンを実行するのはさらに面倒です。 これが、一部の設計者が追加を無視する理由です。ただし、これは、開発者がコードで追加する必要があることを意味します。 そしてそれのために決定を下します。 複雑な要素が表示された場合は、サイト全体を実行しなくても、理想的にはタブレットビューを紹介します。

要約すれば

設計者は、開発者の人生を悪夢または非常に良い経験にすることができます。 後者を達成するための鍵は、使用されているテクノロジー、HTM1 / CSS、インタラクティブな要素が実行可能かどうかなどをよりよく理解することです。

開発者の周りに幸運があり、特定の要素について心配している場合は、それらを呼び出してすべてを調べてください。 彼らは間違いなくあなたに何がトリッキーで何が簡単かについての指針を与えるでしょう。