マークシートは何をしますか？

ロゴは生成されるよりも選ばれるものです。仕事は、誠実で異なる5つのアイデアを、ロゴが実際に使われるサイズでそれぞれ証明し、相手が1分で判断できる1枚のページにまとめることです。そのページがマークシートです。読むためではなく、見るためのページです。つまり、5列の画像と、ほとんど言葉のないページです。

この方法は、実際の2つのアイデンティティ案件から来ています。どちらの案件でも、相手はシートが開かれてから90秒以内にマークを選びました。また、方法論なしに有能なモデルが生成するものと比較したテストからも来ています。テストから2つのことがわかり、以下の手順はその両方に役立ちます。

規律は、この方法が追加するものです。 描く前のブランドに関する実際の知識、真に異なる5つのアイデア、16ピクセルでの証明、すべてのマークに挙げられた率直な弱点、そして相手が決める選択。
個性は、失ってはならないものです。 人々が好むマークは、一目で意味が分かり、丁寧に描かれたように見えます。意味を持たせるために一文を必要とする整ったグリフのシートは、名前の大胆でよく描かれた1枚の絵に負けます。

素早く作業してください。元の案件では、依頼から5分後にシートが開かれました。これは最初の印象であり、別のラウンドは簡単です。だから、よく選び、注意深く描き、磨き上げないでください。

手順：ブランドを知る、アイデアを見つける、スケッチして5つを選ぶ、シートを作成する、見る、開いて提示する、さらなるラウンドを実行する、選ばれたものを適用する。

1. 描く前にブランドを知る

5つのものが必要です。尋ねる前にそれらを探してください。

名前：ブランドが書く通りの正確な名前、それ自身の字体で、そしてその意味：文字通りの意味、語根、それが反映することわざ、駄洒落。
何をするか：一文で、理想的には変化として：何が入って何が出てくるか。
誰のためのものか、どのように感じさせるべきか：2、3の言葉で。
既に存在するもの：サイトが使用している書体、古いロゴ、見出し、製品自身の語彙。
相手がロゴについて既に言ったこと：制約、スケッチ、賞賛するロゴ。

プロジェクトでは、最初に読みます：README、ランディングページのコピー、ページタイトルとメタデータ、フォントの設定（@font-face、next/font、Tailwind設定、Google Fontsのリンク）、ブランドやロゴのファイル、そしてこれまでの会話。見つからなかったものだけを、最大3つの短い質問からなる1つのメッセージで尋ねてください。相手に尋ねられない場合、または「そのまま進めて」と言われた場合は、そのまま進め、提示する際に何を仮定したかを伝えてください。

これが最初に来るのは、これなしで描かれたマークはストックアイコンになってしまうからです。元のシートでは、すべてのマークが何か具体的なものに基づいていました。名前の意味、サイトの見出しの一行、システムが扱うものに何をするか、などです。

デフォルトのブリーフ

相手が別段の指示をしない限り、次のようにデザインします：1色で、可能な限りシンプルで、目的があり、少しユニークであること。

つまり、暖かいオフホワイトの上に黒だけで、他には何もありません。色が欲しい場合や、サイトにアクセントカラーがある場合でも、最初に黒で形状を選んでください。色は弱い形状を受け入れ可能にするものではありません。マークはとにかく1色で機能する必要があります（タブアイコン、スタンプ、ダークサーフェス）。色と効果は、マークが適用されるときに追加されます。

2. 異なる場所からアイデアを見つける

約10個の候補を、それぞれ1行で書き出してください。リストを作成する前に references/concept-moves.md を読んでください。良いマークの出典、例、それぞれの落とし穴が説明されています。

人々の好みは次の線に沿って分かれるため、種類の広がりを目指してください：

ブランドの文字に基づくマーク；
名前が物である場合の、名前の絵；
製品が何をするかを、1つの形状として示したもの；
ブランド自身の世界からの記号やパターン；
さらに遠くからの1つか2つ。

それらの中から選ぶためのルール：

5つのアイデアであって、5つのスタイルではない。 同じメタファーに基づく2つのマークは1つとしてカウントします。候補を根底にあるアイデアでグループ化し、各グループから1つだけ残します。
ほとんどは一目で理解できるべき。 シートは何も説明しません。マークにはその絵と短い名前があるだけです。したがって、最終的な5つのうち少なくとも3つは、それだけで意味がわかるものでなければなりません：物、文字、見える動作。メッセージはマークを深めることはできますが、救うことはできません。一文なしでは何の意味もない素のグリフ（点と棒、2つのスラッシュ、無地のブロック）は、場所を獲得するために印象的でなければなりません。
物語よりもシルエット。 2つの候補の間では、より巧妙な物語ではなく、より強い形状を残してください。物語は一度語られ、形状は毎日見られます。
明白なアイコンを特定し、制限する。 すべてのカテゴリにはあります：チャットの吹き出し、不動産の家、AIの火花、ショップのカート、セキュリティの盾、書類に関するもののページや線のスタック。名前自体にもよくあります（Kilnというブランドの炎）。これらがこのブランドにとって何であるかを言ってください。5つのうち最大1つだけがそれらに頼ることができ、しかもこのブランドだけが持つ何かと融合された場合のみです。1つのマークがページで、別のマークが炎である場合、それはそれぞれ1つずつではなく、2つです。相手が除外したものはすべて除外されます。
マークごとに1つのアイデア。 マークを説明するために「と」という言葉が必要な場合、それは2つのマークです。分割するか、半分を落としてください。

最初のアイデアは明白なものに集中します。元のシートの1つでは、最初の5つのマークのうち3つが吹き出しで、勝ったマークはそれらから遠ざけられた後のラウンドから来ました。

相手が別の数を要求しない限り、5つが適切な数です。それより少ないと本当の選択肢がなく、多いと選択が作業になり、5列は1画面に収まります。

3. スケッチし、その後5つを選ぶ

候補にコミットする前に、描いてください。assets/contact-sheet.html をプロジェクトの design-lab/logo/candidates.html にコピーし、候補ごとに1つの <symbol> を追加し、ステップ5のスクリプトでレンダリングし、画像を見てください。すべての候補が大きく、小さく、そして実際の16pxアイコンを拡大したものとして表示されます。形状として最も強く、アイデアとして最も離れている5つを残し、それらを改善してください。最も確信している2つにほとんどの描画時間を費やしてください。シートには、そのまま出荷できるマークが少なくとも1つ必要であり、5つの均等な初稿のシートは、1つの完成したロゴに負けます。

1つのコンタクトシートが標準です。2つ目は、ほぼ機能するマークを描き直すためのものです。そこで止めてください。相手は別のラウンドを要求できます。提示する前に candidates.html とその画像を削除してください。

このステップが存在するのは、頭の中の絵とページ上の絵は別物だからです。テストでは、選択する前に候補を見た実行は、5つ描いて止めた実行よりも明らかに良いマークを生成しました。

マークの描き方

各マークは、64×64グリッド上の1つの <symbol> です。

少ないパーツ、1つのシルエット。 1〜4つの形状。レンダースクリプトは、それ以上を使用するマークについて警告します。シンプルは長方形だけを意味するわけではありません。アーチ、カール、フレア状のベル、文字のボウルは、それが1つのきれいな形状である場合に歓迎されます。元の案件から出荷された両方のマークは4つの角丸長方形であり、テストで最高のマークは、ブランドの名前の由来となったものの単一のシルエットでした。
塗りつぶし形状または太い線。 塗りつぶし形状は fill 属性を持ちません。なぜなら、シートは同じ描画をある場所では黒で、別の場所では白でペイントするからです。線画の形状は、fill="none" stroke="currentColor"、丸いキャップと結合、そしてマーク全体で1つのストローク幅（7単位以上）を持ちます。グラデーション、不透明度、フィルター、マスク、<text> はありません。文字は形状から構築され、決してタイプされません。タイプされた文字は他人のフォントだからです。
計算し、推測しない。 長方形や円を超えるものについては、点を計算してください：円弧が線と交わる場所、曲線が終わる場所、曲がりくねった部分の均等な厚さ。パスを出力する数行のPythonは推測よりも速く、推測された曲線は推測されたように見えます。
グリッドにスナップする。 全体の単位または半分の単位、等間隔、整列したエッジ、マーク全体で1つのコーナー半径。
ボックスを均等に埋める。 各マークの長い方の方向で約48単位の範囲にし、中央に配置し、5つの重みが似ていて比較が公平になるようにします。
タブアイコン用にデザインする。 約6単位より薄いギャップや線は、16pxでつぶれてしまいます。大きな形状と開いたギャップは耐え、通常はあらゆるサイズでより良いマークになります。
読み方向に従う。 前後を示すマークは、ブランドのスクリプトの読み方向に合わせて実行します。アラビア語やヘブライ語の場合は右から左。

4. シートを作成する

assets/sheet-template.html をプロジェクトの design-lab/logo/marks-sheet.html にコピーし、フォルダを作成し、番号付きの6つの場所を埋めてください。テンプレートのスクリプトは、シンボルからすべての列を構築するため、各マークは1回描画され、すべてのサイズで同一になります。

ページは意図的にプレーンです。1行のタイトル、その後に5列が並んでいます。各列には、上から次のものが表示されます：

マーク（大）；
名前の横にあるマーク（明るい背景と暗い背景）；
64、32、16ピクセルのアイコンとしてのマーク、およびその16ピクセルアイコンを拡大したもの（実際のピクセルが見えるように）；
透明な背景にそのマークだけを、PNGとSVGとしてダウンロードする2つのボタン。

人々はこのページを見ます。読みません。何も追加しないでください。理由、キャプション、読み方の説明、推奨事項はありません。マークの意味、弱点、どれを選ぶかはすべてメッセージ（ステップ6）に含めます。

言語。 タイトルと名前は、相手が明らかに理解できる場合、ブランドの言語（ワードマークの言語）で書いてください。右から左へのスクリプトの場合は dir="rtl" を設定します。ブランドが2つのスクリプトで書かれている場合、シートには主要なものを表示します。2番目のロックアップは選択と共に提供されます。
書体。 ワードマークは、ブランドが実際に使用する書体で設定します。プロジェクト自身のフォントファイル（シートへの相対パスによる）またはサイトが読み込むホスト型フォントを使用します。サイトが名前のウェイト、ケース、文字間隔を一致させます。ブランドに書体がない場合は、意図的に1つ選び、その旨を伝えてください。
タイトル。 1行の短いもの、例えば「Harborの5つのロゴ」。
名前。 各マークには、1〜3語の短い名前を付けます。決して文にしないでください。人々は名前でマークを選び、覚えます（「結び目がいい」）。そのため、名前は実際に機能します。
文字。 マークにAからEの文字を割り当てます。
ファイル名。 ダウンロード用のラテン文字の短い小文字の名前：harbor は harbor-logo-A.png を生成します。

プロジェクトに既にマークシートがある場合は、上書きしないでください。ステップ7で何をすべきかが説明されています。

5. 相手より先に見る

シートをレンダリングし、その画像を見てください。スクリプトはこのスキル自身のフォルダにあり、コンタクトシートを含む任意のHTMLページで動作します：

bash "<this skill's folder>/scripts/render.sh" design-lab/logo/marks-sheet.html

マシンにあるヘッドレスChromiumを使用して、HTMLの隣にPNGを書き出し、パスを出力し、続いて4つ以上の形状から描かれているか、7単位より薄い線があるマークの警告を出力します。それらの警告に対処してください。その画像を開き、マークごとに確認してください：

それは正しいシートですか。5列、ワードマークに正しい書体、残った {{placeholders}} はありませんか？レンダリングは静かに間違ったページやフォールバックフォントをキャプチャする可能性があります。
各マークは、その名前が示すものとして読み取れますか？説明は他にありませんか？
意図していないものとして読み取れるマークはありますか？数字、異なる文字、メニューアイコン、既に知っているロゴなど。
各列の下部にある拡大された16pxアイコンでは、形状は別々のままですか、それともギャップが閉じて薄い部分が灰色になりますか？
ボックスの端でクリップされている、中央からずれている、または隣接するものより明らかに重いまたは軽いものはありませんか？
長い名前はマークの横に収まっていますか？すべての列の高さは同じですか？
ワードマークの横で、マークは名前とよく調和していますか？それとも、名前の最初の文字をすぐ隣で繰り返してぎこちなくなっていませんか？

見つけたものを修正し、確認のために再度レンダリングしてください。16pxで失敗するマークは、より少ない、より大きなパーツで描き直すか、次善の候補と交換します。最大2つのマークは、16pxでの既知の弱点を示してもかまいませんが、それぞれ弱点の行でそのことを述べなければなりません。

スクリプトがレンダリングできない場合（理由を付けて終了する）、スクリーンショットを撮れるブラウザでHTMLを開いてください（ある場合）。まったく見ることができない場合は、提示する際にその旨を伝えてください。

6. 開いて提示する

相手のためにシートを開いてください。macOSでは open、Linuxでは xdg-open、Windowsでは start です。HTMLが開くべきものであり、PNGは確認と共有用です。両方を design-lab/logo/ に残し、相手またはプロジェクトのルールが指示する場合にのみコミットしてください。

相手が選ぶ前に、マークを製品に組み込んだり、プロダクションファイルを作成したりしないでください。それは相手の決定であり、一度決まれば2分で完了します。シートのダウンロードボタンは、スライドやモックアップでマークを試すためのものです。適切なファイルは選択と共に提供されます。

次に、短いメッセージを書いてください：

シートの場所と、開かれていること；
マークごとに1行、文字、名前、それが何であるか、なぜこのブランドに属するか、そして正直な弱点（もしあれば）（「汎用的な建物アイコンに最も近い」、「控えめで少し文字通り」）。ページにはこれらは一切載っていないので、この行がマークの意味が生きる場所です；
あなたの選択とその理由を、1、2文で。そのまま出荷できるマークを推奨してください。一目で理解でき、16pxアイコンとして保持できるもの。最も気に入ったアイデアに既知の欠点がある場合は、それがお気に入りのアイデアであると述べ、出荷するものとして別のマークを指名してください；
閉じる質問：どれか、またはさらに推し進めるためにどの2つか。選択したら、ファイルを作成してサイトに配置すると伝えてください。

本当の意見と本当の弱点を伝え、その後は選択を相手に委ねてください。元の案件では、相手が推奨を却下したことが一度ありました。現時点で色、スタイル、フォントの選択を求めないでください。メッセージをこれらの数行に抑えてください。ページが表示し、メッセージが説明します。それぞれ一度だけです。

7. さらなるラウンド

「あと5つ。」 新しいファイル marks-sheet-2.html を作成し、文字を続けてください（FからJ）。すべてのマークがラウンド間で一意の文字を保持するようにします。テンプレートの表示方法に従って、タイトルの下に前のシートへのリンクを配置します。新しい5つは、前のシートのアイデアとは異なるアイデアから来なければなりません。

...

マークシート