Webアイコンセットの使用法と利点に関する7つの専門家のヒント



あなたはあなたのウェブサイトのためにアイコンセットを使用することについて疑問に思っていますか、そしてどれを選ぶべきですか?これらの専門家のヒントは、多くのプロのWeb開発者がすでに知っていることについてあなたを納得させるかもしれません。アイコンを1つずつ見つけて、何らかの形でそれらを一致させる方法を見つけるよりも、含まれているアイコンセットからアイコンを検索する方がはるかに簡単です。

私たちはコミュニティにアイコンセットの使用に関する最良のヒントを求めました。彼らの多くは、人気のあるFont Awesomeアイコンセットの使用に同意していますが、市場で入手できる唯一のアイコンセットではありません。

どのアイコンセットを使用していますか?コメントで教えてください!

 Webサイトに特定のアイコンセットを使用していますか? Font Awesomeを特定の用途で使用していますか(Shopifyで、ニュースレターなどで)?もしそうなら、それを使用している理由と、アイコンセットを使用した経験は何ですか?それらのCDNを使用しましたか、使用量の改善に気付きましたか?

Jeff Roscher:顧客がモダンで魅力的な素敵なシンプルなスタイルを追加します

eWorkOrders.comではFont Awesomeを使用しています。これは、弊社のマーケティングサイトと、サービスとしてのソフトウェア(SAAS)であるコンピュータ化された保守管理システム(CMMS)の両方の一部です。弊社のマーケティングサイトでは、見込み客がモダンで魅力的なものを見つける、シンプルでシンプルなスタイルを追加しています。興味深い境界線とマウスオーバーイベントを追加して、よりインタラクティブでエキサイティングなものにしました。お客様の場合、入力フィールド内の視覚的な手掛かりとしてFont Awesomeアイコンが使用され、日付フィールドのカレンダーアイコン、電子メールアドレスフィールドの封筒、電話アイコンなど、入力するデータのタイプを識別するのに役立ちます。電話番号のフィールド。編集、コピー、印刷などの機能ボタンで使用されます。

アイコンは、期限切れの作業指示の横にある赤い感嘆符のアイコンのような、または何かに注意が必要なときに、データに関する迅速な視覚情報を提供するために使用されます。他にもいくつかの場所にあり、プログラムの見栄えを良くしています。

Font Awesomeは最高です!彼らのCDNは高速であり、必要なあらゆる種類のアイコンに対して多くのオプションがあります。私たちは決して失望したことはありません。

ジェフはeWorkOrders.comの社長です。 eWorkOrdersは、顧客がサービスリクエスト、作業指示書、資産、予防保守などを管理するのに役立つ、使いやすいWebベースのCMMSです。
ジェフはeWorkOrders.comの社長です。 eWorkOrdersは、顧客がサービスリクエスト、作業指示書、資産、予防保守などを管理するのに役立つ、使いやすいWebベースのCMMSです。

Rachel Foley:大規模なアイコンライブラリに簡単にアクセスする手頃な方法

顧客のマッピングでは、すべてのマーケティングチャネルと次の製品を含む製品全体の図像をFont Awesomeに完全に依存しています。

  • ウェブサイト
  • メール
  • ソーシャルメディア
  • カスタムグラフィック
  • モバイルアプリ
  • ウェブアプリ

Font Awesomeを使用するのは、大規模なアイコンライブラリに簡単にアクセスできる手頃な方法だからです。スタイルは、私たちのブランドと調和する遊び心のあるものです。さらに、アイコンのさまざまな重みとスタイルを利用できるため、自由が与えられます。

アプリケーションにはCDNを使用しているため、製品のユーザーエクスペリエンス全体で非常に一貫した感覚が得られます。さらに、必要なときにアップグレードするのは非常に簡単です。マーケティング資料を使用すると、柔軟性が向上し、CDN、ローカルインストール、ベクターバージョンを組み合わせて使用​​できます。

1月に完全に採用されて以来、FAは常に信頼されてきました。

レイチェルはニューヨークを拠点とするWebデザイナーであり、コンテンツマーケティングの専門家であり、成長するB2Bブランドを強化し、SEO戦略を通じて長期的なマーケティングの成功を構築することを目指しています。彼女は現在、フィールドセールスチーム向けのソリューションを作成しているB2B販売ソフトウェア会社である顧客のマッピングにいます。
レイチェルはニューヨークを拠点とするWebデザイナーであり、コンテンツマーケティングの専門家であり、成長するB2Bブランドを強化し、SEO戦略を通じて長期的なマーケティングの成功を構築することを目指しています。彼女は現在、フィールドセールスチーム向けのソリューションを作成しているB2B販売ソフトウェア会社である顧客のマッピングにいます。

Andrew Ruditser:Font Awesomeのアップグレードに伴い、

Font Awesome is used on all our sites since the dawn of time. When we first started working with Font Awesome, it was mainly used for their ソーシャルメディア Icons. As Font Awesome upgraded, so did we. Not only are their phone icons fantastic, we enjoy the comical icons that they offer. As of recent, Font Awesome announced their version 6 icons. To us, this shows that Font Awesome cares for their users, and want to keep their system up to date with recent code.

Font Awesomeでは、幅広いアイコンから選択できるようになりました。この柔軟性は、設計段階から開発段階まで私たちに役立ちます。 Font Awesomeの場合、プラットフォームはユーザーに2つのオプションを提供します。最初のオプションは無料のサービスで、1,588の無料アイコンから選択できます。 2番目のオプションは、7,842のアイコンを提供するProメンバーシップです。この会社には、アイコンチートシートと呼ばれるものもあります。このリストには、Font Awesomeが提供するすべてのアイコンが表示されます。これらのアイコンが無料パッケージまたはプロパッケージの一部であるかどうかがわかります。

追加するために、Font AwesomeはCDNからコードをプルするオプションも提供しています。彼らのルートに行くことを強くお勧めします。彼らのCDNの応答時間は速く、私たちのサイトと彼らのプラットフォームの間の「遅れ」はほとんどありません。

Andrew Ruditser、リードテクノロジーコーディネーター
Andrew Ruditser、リードテクノロジーコーディネーター

ジェフ・ロメロ:それはページの速度をはるかに速くします

中小企業のお客様向けにWordpressでカスタムWebサイトを開発しています。ソーシャルメディアのプロフィールから電話やメールのアイコンまで、ウェブ上のさまざまなアイコンを表すために、これまで画像を使用してきました。アイコンに画像を使用するプロセスでは、一貫したアイコンセットを見つけてアップロードし、サイトに合うようにサイズを変更する必要があります。

これは小さな画像ファイルですが、一貫したアイコンセットを取得し、それらをサイトのテンプレートと一致させるには少しプロセスが必要です。これで、Font AwesomeとそのWordpressプラグインを使用して、アイコンをHTMLの行をコピー/貼り付けするだけの一貫したメディアセットに置き換えることができます。さらに良いことに、少量のCSSでアイコンのサイズを変更できます(font-sizeプロパティを使用)。アイコンは画像ベースのアイコンよりもよく表示され、モバイルデバイスではっきりと表示されます。最後に、画像ファイルではなくHTMLの行であるため、ページの速度が大幅に速くなります。

Jeff Romeroは、ローカルおよび企業のSEO戦略、クリック課金型広告管理、Webデザイン/開発、およびマーケティング分析サービスを専門とするデジタルマーケティング代理店Octiv Digitalの共同創設者です。
Jeff Romeroは、ローカルおよび企業のSEO戦略、クリック課金型広告管理、Webデザイン/開発、およびマーケティング分析サービスを専門とするデジタルマーケティング代理店Octiv Digitalの共同創設者です。

ヴァンス:チームにデザイナーがいない場合は特に便利です

私はWeb開発者として、たくさんの素晴らしいアイコンの簡単な解決策としてFont Awesomeを使用しています。そうは言っても、Font Awesomeは、開発チームにデザイナーがいない場合に特に適しています。 Wordpressプラグインの開発に便利です。開発者はFont AwesomeのCDNを使用してプラグインにプラグインをすぐに埋め込むことができるからです。

Font Awesomeでの私の経験は今のところ良好です。しかし、だからといって欠点がないわけではありません。明らかな欠点の1つは、ページの読み込み速度(パフォーマンス)です。これは手っ取り早い解決策なので、いくつかのアイコンを使用するだけでも、アイコンのセット全体を埋め込む必要があります。これにより、ウェブサイトの読み込み速度とGoogle Page Speed(PSI)スコアが低下する可能性があります。

ウェブ開発者でありウェブ所有者であるヴァンス。
ウェブ開発者でありウェブ所有者であるヴァンス。

Sunny Ashley:シンプルでクリーン、そして新しいビジターに即座に認識可能

私たちは、ウェブサイトのフッターでFont Awesomeアイコンを使用しています。具体的には、Facebook、Twitter、LinkedInのアイコンを使用して、ソーシャルメディアチャネルを参照しています。それらはシンプルで、クリーンで、新しいビジターがすぐに認識できます。 Font Awesomeの他のユーザーも知っているように、設定も非常に迅速かつ簡単でした。

Autoshopinvoiceの創設者兼CEOのSunny Ashley氏。 Autoshopinvoiceは、独立した自動車修理工場とガレージ向けのショップ管理ソフトウェアを提供します。
Autoshopinvoiceの創設者兼CEOのSunny Ashley氏。 Autoshopinvoiceは、独立した自動車修理工場とガレージ向けのショップ管理ソフトウェアを提供します。

BurakÖzdemir:フェザーアイコンが過度のDOMサイズを引き起こさない

Feather Iconsは、Cole Bemisによって設計および保守された、読みやすく視覚的に心地よいオープンソースアイコンのコレクションです。 2020年6月の時点で、280を超えるアイコンが利用可能です。 Feather Iconsによって提供されるすべてのアイコンはMITライセンスであり、SVGファイルとして個別にダウンロードできます。ダウンロードする前に、フェザーアイコンのWebサイトでアイコンのサイズ、アイコンのストロークの色、およびストロークの幅をカスタマイズできます。

羽のアイコンは、開発者であるか、基本的なフロントエンドタスクの処理方法を知っている場合、Webサイトやプロジェクトに最適な選択肢です。これらの軽量アイコンはモジュラーJavaScriptライブラリでレンダリングすることもできるため、過度のDOMサイズ、つまりWebページのパフォーマンスに悪影響を与える可能性のある指標を引き起こすことはありません。したがって、フェザーアイコンを使用すると、市販されている他のパッケージと比較して、ページの読み込み速度を下げることができます。このアイコンセットを使用する唯一の欠点は、ほとんどのブランドアイコンが見つからないことです。

羽のアイコン
BurakÖzdemirはトルコのWeb開発者です。彼はWebベースのアプリケーションの作成を専門としています。
BurakÖzdemirはトルコのWeb開発者です。彼はWebベースのアプリケーションの作成を専門としています。

Michel Pinson
著者について - Michel Pinson
ミシェル・ピンソンは旅行愛好家であり、コンテンツの作成者です。教育と探検への情熱を融合させ、彼は知識を共有し、教育コンテンツを魅了することで他の人を鼓舞することにコミットしました。世界をグローバルな専門知識と放浪癖の感覚で力を与えることにより、世界をより近くに結び付けます。




コメント (0)

コメントを残す