開発者としての日常生活を改善するための 3 つの段階

はじめに

それぞれの新しいプロジェクトを開発するすべての段階を最初からやり直さなければならないと思うと、単調さの重圧に押しつぶされそうになり、イライラしたことはありませんか? すべてのプロジェクトが同じ退屈なプロセスに従い、創造性を発揮する余地がほとんどないと感じるのは、開発者の間でよくあるフラストレーションです。

しかし、この悪循環から抜け出し、Webflow 開発の経験を喜びと満足の源に変える方法があるとしたらどうでしょうか。その秘訣は、Webflow 開発ワークフローを次のレベルに引き上げるベスト プラクティスとイノベーションを活用することです。

この詳細なガイドでは、日常的な開発手順を効率化し、よくある問題を克服し、プラットフォームの潜在能力を最大限に引き出すために使用できるテクニックを紹介します。さあ、ベルトを締めて、効率が支配する世界に乗り出す準備をしましょう。

ステージ 1 - 成功への準備

新しい Webflow プロジェクトを開始するときは、そこから拡張するための強力で効率的な基盤が必要です。これは準備段階ですが、開発はすでに始まっており、成功するために考慮すべき重要なポイントがあります。

1.1 スタイルガイド

スタイルガイドをプロジェクトの青写真と考えると、その重要性は明らかです。スタイルガイドの作成はプロジェクトの始まりであり、クラスとスタイルが全体を通して予測どおりに動作することを保証します。したがって、特定のページの開発に取り掛かる前に、時間をかけてスタイルを作成してください。スタイルガイドの作成には 2 つの方法があります。

• 自分の好みに合わせてゼロから独自のベースプロジェクトを作成するか、
• Finsweet 、 Relume 、 Wizardryなどの既成のオープンソース フレームワークを使用します。

1.2 変数

Webflow の最近のアップデートにより、変数の使用がさらに直感的かつ効率的になりました。変数を適切に設計されたグループに整理することで、開発を簡素化し、効率を高めることができます。次のようなグループの作成を検討することをお勧めします。

• 一般的な色
• 背景
• 文章
• 文字サイズ
• テキストサイズ モバイル
• コンテナ（最大幅）
• アイコンのサイズ

これらのグループを作成し、対応するクラスに関連付けると、簡単に自信を持って Web ページの開発に進むことができます。

変数の作成に取り組むことは常にベスト プラクティスであり、Webflow はローコード開発の分野でこの伝統を継承しています。これらの定義済みグループは、あらゆるプロジェクトに強固な基盤を提供し、よりスムーズで構造化された開発プロセスを可能にします。また、クライアントからカラー スキームを暗い色から明るい色に変更するように要求された場合、変数を使用していたことに感謝することになるでしょう。

1.3 アクセシビリティを優先する

アクセシビリティはプロジェクトの最終段階まで残されることが多いですが、その重要性はいくら強調してもし過ぎることはありません。プロジェクトの最初から、アクセシビリティ機能の統合を念頭に置いて、追加するすべての決定と要素に影響を与える必要があります。

Webflow はチェックリストを公開しており、それを注意深く検討すると、この問題の主なポイントがわかるようになります。

Webflow の際立った利点の 1 つは、組み込みのアクセシビリティ ダッシュボードです。このダッシュボードは、視覚障害を持つ人々がプロジェクトをどのように認識しているかについての視覚情報を提供します。この機能を使用すると、複数のアクセシビリティ フィルターを使用してプロジェクトを表示し、さまざまな表示条件をシミュレートして、改善の可能性がある領域を強調表示できます。

より公平で包括的なデジタル環境を作り出すことが目的です。最初からアクセシビリティを優先することで、プロジェクトの使いやすさが向上するだけでなく、能力に関係なく、すべてのオーディエンス メンバーがプロジェクトに平等にアクセスできるようにするという取り組みを示すことにもなります。

ステージ2 - 開発プロセスの習得

これで、デザインに従ってすべてのページを直接開発する段階に入ります。この段階をうまく乗り切るために役立つ推奨事項をいくつか紹介します。

2.1 カスタムコード

「やめてください。なぜ？何のために？どうしてこんなことが起きるの？！結局のところ、未来はすでに到来しているのに、なぜ今コードが必要なのか？」とあなたは言うかもしれません。しかし、正直に言うと、コードの知識がなくても、Web 開発を理解し始め、すぐにキャリアをスタートすることができます。しかし、競争力を維持し、ノーコード/ローコード プラットフォームのシンプルなドラッグ アンド ドロップ機能で素晴らしいものを作成するのは真実ではないようです。したがって、 前回の記事でお話しした終わりのない開発と学習へようこそ。

2.1.1 HTML

Webflow のようなローコード プラットフォームで作業する場合、div とテキスト要素のみに頼って構造を作成しがちです。しかし、これが昨日の私たちとの違いです。少なくとも、私の記事を読んで、完成した製品の品質に責任を持つということです。<header>、<nav>、<main>、<aside>、<footer> などの要素を使用し、見出しレベルを正しく設定して、マークアップがセマンティック規則に従っていることを確認し、明瞭性とアクセシビリティを向上させます。

2.1.2 CSS:

• 今後のすべてのコードをグローバルとローカルに分けます。グローバル CSS を Navbar コンポーネントに追加します。こうすることで、どのページからでもアクセスできるようになり、プロジェクトを公開する前でもスタイルがどのように適用されるかを確認できます。

• メディア クエリを使用して、コードでホバー状態のスタイルを記述します。この方法により、ホバー位置がデスクトップにのみ表示されるようになります。

  
  

 <style> @media screen and (hover:hover) { //Insert your code here... } </style>

• 1024 ピクセル幅の画面用に個別のスタイルを記述して、この特定のサイズのデバイスに固有のレイアウトの問題を解決します。

  Webflow ではレスポンシブ デザインを簡単に作成できますが、タブレット レイアウトは幅 991 ピクセルから始まります。1024 画面では、デスクトップ スタイルがすべて適用されます。ただし、1024 画面用にスタイルを別途記述する必要がなかったプロジェクトはまだ 1 つもありません。この項目は検証必須と考えます。スタイルを別途登録するかどうかは、個々のプロジェクトによって異なります。

• CSS コードにコメントを追加して、読みやすさを向上させ、他の開発者との共同作業を容易にします。その後のプロジェクト編集時に、自分や他の開発者の作業が楽になります。以前の開発者からプロジェクトを引き継いだ場合は、プロジェクトを希望どおりの状態に保ちます。

 <style> /* About page Start */ //Insert your code here... /* About page End */ </style>

• Webflow アニメーションだけに頼るのではなく、ページのパフォーマンスに影響を与えずにページをより簡単に、より効率的にするために、CSS アニメーションを使用することを強くお勧めします。

  Webflow に組み込まれたアニメーション ツールを使用すると、初心者でも多数のインタラクションを備えた優れた Web サイトを簡単に作成できます。ただし、高度な開発方法について言えば、CSS アニメーションは非常に軽量であり、その存在によってページの速度が低下することはないことに注意することが重要です。逆に、Webflow アニメーションは、基本的に要素の CSS プロパティの変更のみを目的としており、JS を介して機能するため、ページの速度が低下します。これは小規模なプロジェクトでは目立ちませんが、大規模なプロジェクトでは目立ちます。いずれにせよ、練習のためであっても、ネイティブの Webflow アニメーションではなく、できる限り CSS を使用することをお勧めします。何度も繰り返すと習慣が身につくことを覚えておいてください。それを形成しましょう。

• lottie アニメーションとのユーザー インタラクションが計画されていない場合は、.json ではなく mp4 ファイル、さらには最適化された .json を使用する方がはるかに適切です。Safari のパフォーマンスが向上します。

2.1.3 JavaScript:

これらは長い間当然のことと考えられてきたベストプラクティスです。

• グローバル プロジェクト スクリプトにはグローバル設定を使用し、ローカル スクリプトにはページ設定を使用するなど、JavaScript の配置に関するベスト プラクティスに従ってください。

• ページの読み込み時間を最適化するために、並行して読み込むことができるスクリプトには <async> 属性と <defer> 属性を使用します。

  
  

2.2 Webflow コンポーネント

プロジェクトのデザインを研究しているとき、次のような質問を自分に投げかけたことがありますか。プロジェクト内のどの繰り返し要素を、さまざまなページでテンプレートとして使用できますか? Webflow のコンポーネントを使用すると、要素と子要素からカスタマイズ可能なブロックを作成することで、一貫性があり、効率的で、スケーラブルなデザイン ワークフローを維持できます。これらのブロックをサイト全体で再利用し、1 か所で変更することで、繰り返し使用されるレイアウトを個別に修正する必要がなくなります(ソース - https://university.webflow.com/lesson/components?topics=layout-design )。

多くの場合、次のようなことが考えられます。

• ナビゲーションバー
• フッター
• ボタン - 非標準の場合、カスタム デザインとエフェクト、および/または分岐構造がある場合。
• CTA バナー - プロジェクト全体で、1 つまたは 2 つの種類がよく使用されます。
• 私がよく使うシンボルはセクションです。タグとクラスを含む空のセクションがあり、その中にはコンテナー、見出し 2、段落、およびいくつかの空の div ブロックを含むすべての標準クラスがあります。これは、最もよく使用するコンポーネントです。追加してリンクを解除し、開発部分を終了してください。ベースとして追加することで、各 div ブロックを個別に追加するのではなく、多くの時間を節約できます。

コードを使用すると、Webflow コンポーネントの機能を拡張し、HTML ページ構造にアクセスすることなく、クライアントに非常に柔軟なプロジェクト管理システムを提供できます。これは、開発者がプロジェクトを完了した後、クライアントがプロジェクトの多くの設計面を制御できる、Web 開発に対するまったく新しいアプローチです。将来的には、クライアントは、すでに作成されたコンポーネントに基づいて、新しいページを独自に簡単に作成できるようになります。根本的に新しい要素を開発する必要がある場合のみ、開発者を雇う必要があります。コンポーネントを使用する場合、クライアントが完璧に準備された HTML 構造を破壊する可能性はほとんどありません (ただし、当社のクライアントは多くの場合、非常に有能です)。

2.3 メディア資産のグループ化

アセットのグループ化を使用すると、アセットを簡単に見つけて管理できます。たとえば、巨大なナビゲーション バーがあり、アイコンを含むリンクが多数あるとします。デザイナーは既にその一部を用意しており、残りの部分を 3 日以内に完成させると約束していますが、最後の部分はまだクライアントが検討中です。デザイナーが新しいオプションを描き、クライアントが半分を確認し、残りの半分を編集して承認し、最終的に開発のために送信するまでの間に、アセット パネルにはすでに他の多くの画像が存在している可能性が高くなります。アイコン画像は壊れているため、将来的に見つけたり置き換えたりするのが面倒になります。このような場合、アセットをグループ化すると作業が楽になります。グループ化により、プロジェクト内のすべてのメディアを整理して維持できます。

2.4 アーカイブ フォルダーを用意して次のものを保存してください。

• 動的 СMS ページの静的バージョン。変更や編集を行う場合は、静的バージョンで実行してから СMS ページに転送する方がはるかに簡単です。Webflow の СMS ページの特徴は、必要なすべての要素をコレクション内の対応するフィールドに接続すると、この接続が存在する要素をコピーして静的ページに転送できないことです。

• 要素の初期バージョンを含むページ。頻繁に多数の編集を行うため、すでに構築されているものをプロジェクトから削除しないように注意する必要があります。これをアーカイブ ページに移動し、適切な時期まで残しておきます。

• 実験用のテストページ。

  
  

ステージ3 - 最終編集

プロジェクトが本当にレベルアップしたという印象を残さないように、プロジェクトをクライアントに引き渡す前にプロジェクト終了時に行うべき重要なことは何ですか。

3.1 プロジェクトのクリーンアップ:

• 未使用のクラスとアニメーションを削除します。

• コメントアウトされた未使用のコードを削除します。

• 使用されていないメディアを削除します。パネルに不要なものがたくさんあり、個別に削除できない場合は、次のハックをお勧めします。すべてのアセットを削除し、プロジェクトを公開し、Webflow をリロードし、プロジェクトで使用されているメディアのみをパネル アセットに入れます。

  
  

3.2 クライアント用のプロジェクト ユーザー マニュアルを作成します。

スタイル ガイド ページに加えて、完成したプロジェクトの使用方法を説明するページも必要です。優れた開発者とは、クライアントが将来プロジェクトを管理する方法について考える人です。変更がどれだけ簡単に行えるか、クライアントが変更を管理する際の自由度はどの程度か。Webflow のおかげで、これは可能な限り完璧に近づくことができます。CSS の知識と Webflow コンポーネントの動作原理を理解していれば、現在のページの変更や新しいページの作成が簡単に行えるプロジェクトをまとめることができます。

3.3 バックアップに一意の名前を付けます。

説明性の原則は、開発者が名前を付けるすべてのものに適用されます。プロジェクトのどの部分も、将来的にあなたと同僚にとって直感的である必要があります。

結論

最後に、開発者としての日常生活を改善するために重点を置くべき主なポイントを簡単にまとめてみましょう。

ステージ1 - 準備

• デザイン要素の一貫性と予測可能性を確保するためにスタイルガイドを作成します。
• 変数を設定して開発を合理化し、効率を高める
• 最初からアクセシビリティを優先して、包括的でユーザーフレンドリーな Web サイトを作成します。

ステージ2 - 直接開発

• コーディング能力を貴重なスキルセットとして追加し、Web 開発の無限の可能性を解き放ちます。
• Webflow コンポーネントを、プロジェクトの将来性を保証する強力なツールとして使用します。
• メディア アセットをグループに整理して、簡単にアクセスおよび管理できるようにします。
• 後で使用するために未使用の要素を保存するためのアーカイブ フォルダーを維持します。

ステージ3 - ホームストレート

• 未使用の要素とアセットをクリーンアップして、プロジェクトのパフォーマンスを最適化します。
• シームレスな引き継ぎとクライアント管理を容易にするためにクライアント ガイドを作成します。
• データの損失を防ぎ、継続性を確保するために、プロジェクトの意味のあるバックアップを保存します。

Webflow 開発の効率と生産性を最大限に高めるには、ベスト プラクティスの採用が不可欠です。このアプローチに従うことで、反復的なタスクの時間を節約できるだけでなく、リラックス、自己啓発、革新的なプロジェクトの作成に貴重なリソースを割くことができます。ワークフローを変革し、創造性を発揮してさらにクールなものを作りましょう。

読んでくれてありがとう！

他の開発者の生活を楽にするために、自分の考えや経験を共有できることを嬉しく思います。私が学んだことを共有することで、開発プロセスをよりスムーズにし、すべての人にとってより良い体験を生み出すことができればと思います。