絵文字によるコンテキストの表現: HackerNoon の絵文字信頼性指標の設計

HackerNoon では、読者に対する透明性が、作家と読者の間の信頼関係を築く鍵であると考えています。読者に可能な限りの透明性を提供するために、読者がストーリーを読む前に知りたい情報をすばやく簡単に伝える方法を作りたいと考えました。

これは、記事がニュース記事なのか意見記事なのかを読者に伝えるだけの簡単なことかもしれません。一方で、ライターが記事を書いている企業に利害関係を持っているかどうか、記事を書くのに AI を使用したかどうかなど、読者に伝えたい複雑な事柄もあります。

これらの目標を達成するために、私たちは Emoji Credibility Indicators を作成しました。現在、 Figma CommunityとGitHubでオープンソース化されています。

絵文字の信頼性指標の設計

それでは、絵文字信頼性インジケーターの設計プロセスについて詳しく見ていきましょう。David と編集チームによる最初の設計概要には、コンテキスト/免責事項とコンテンツ タイプの 2 つのカテゴリに分かれた 22 個の絵文字信頼性インジケーター (関連記事、 HackerNoon のすべての絵文字信頼性インジケーターの説明) が含まれていました。各信頼性インジケーターには、説明に加えて、デザインのインスピレーションとして絵文字が割り当てられました。

ここからは、私たち (私とKien ) が想像力を駆使して、これらの絵文字インジケーターを現実のものにしていくことになります。HackerNoon のデザイン言語に従い、ピクセル アート スタイルを選択しました。グリッド サイズのオプションをいくつか検討した後、必要な詳細レベルを維持できる 24 ピクセルのグリッドをピクセル化に採用しました。ソフトウェアの選択については、さまざまなファイル タイプにエクスポートできるオプションが多数あり、グリッド ツールにも精通していることから、Adobe Illustrator に少し偏りがありました ( Adobe Photoshop 、 Aseprite 、Corel Draw などが良い選択肢です)。

私たちのピクセル アートのデザイン プロセスは、基本的な形状から始まり、詳細を描き、奥行きを作り、ストロークを追加し、形状を結合してさまざまなファイル タイプにエクスポートするという 5 つのステップで構成されています。コメディ/風刺絵文字の信頼性インジケーターを例に、これらのステップを詳しく見ていきましょう。

基本的な形から始める

ピクセルアート/8 ビット デザインを作成するときは常に、頭の中にあるアイデアに共鳴する基本的な形状から始めます。コメディ/風刺絵文字インジケーターの場合は楕円です (「😂」絵文字からインスピレーションを得ました)。

図面の詳細

次に、描いた図形にさらに詳細を追加します (この場合は顔の特徴など)。

奥行き感の創出: ハイライトと影

よりリアルに、そしてより平坦に見せるために、顔にハイライトと影を追加します。この場合、光源は正面中央にあると想定され、影は端に移動し、ハイライトは中央に移動します。

ストロークの追加

より明確にするために、全体をまとめるストロークを追加しました。

図形の結合とエクスポート

より使いやすくするために、図形を結合し、PNG と SVG の両方としてエクスポートしました。

その後、このプロセスをさらに 21 回繰り返し、最終的に、現在 HackerNoon に掲載されているEmoji Credibility Indicatorsが完成しました。

最終製品: オープンソースのピクセル絵文字パック

結論として、絵文字信頼性インジケーターは、読者とライター間のオンライン コミュニケーションを強化するためのもう 1 つのステップです。これらのピクセル化された絵文字は、コンテンツにコンテキストを追加する信頼性インジケーターとして機能するだけでなく、ユーザーのコンテンツに対する信頼とエンゲージメントに影響を与えます。これらは、思慮深いデザインによって複雑な概念をシンプルかつ直感的な方法で伝えることができる例です。

コンテキストを絵文字化するこの探求にご参加いただき、HackerNoon の「絵文字信頼性指標」をお試しください。

クリエイティブであり続け、象徴的であり続けましょう。