今回は、当社のデザイナーがまとめたヘッダー制作に関する記事のご紹介です💁‍♀️

こんにちは！
イチマルイチデザインでUI/UXデザインを担当している、入社半年のデザイナーです。
今回、自社noteの「顔」となるヘッダー制作を担当しました。
先輩デザイナーからプロの視点を学びつつ、試行錯誤した5日間の制作プロセスを記録としてまとめます。

はじめに

今回の制作概要は下位の通りです。

• 制作物： note用の公式ヘッダー画像
• 背景： noteに力を入れて、イチマルイチデザインをもっと多くの人に認知してもらい、採用を増やしたい
• 目的： イチマルイチデザインのブランドイメージを正しく伝え、記事を読みたくなる「入り口」を作る
• 制作ツール： Figma
• 制作期間： 2026/1/9(金)〜1/16(金)（実働5日間）

リサーチと構成の整理

いきなり画像の作成ではなく、まずはリサーチをし「何を載せるべきか」情報の優先順位を整理をしました。

他社のヘッダーを調べると、企業ロゴを活かしたシンプル系・企業ロゴとコーポレートカラー・イラスト系まで。世の中のヘッダーデザインにはいくつかのパターンがあることが分かりました。
当時の弊社のWebサイトがスタイリッシュなトーンだったこともあり、今回は
・企業ロゴ＋シンプルな白背景
・企業ロゴ＋写真＋コーポレートカラー
このいずれかの方向性を検討することになりました。

今回は下記の順位で情報設計を行うことにしました。

• 情報の優先順位：
• 1. 最優先： 一番伝えたいメッセージ（社名やコンセプト）
  2. 補足　： サービスの内容を補完する要素
  3. 詳細　： デザインのアクセントや補足テキスト

note推奨サイズ（1920 × 1006 px）とPCとスマホでトリミングされる範囲をあらかじめ把握しておきます📝

デザイン制作ver1〜社内フィードバック

当初は、既存のサムネイルを流用したシンプルでスタイリッシュなロゴ案で進めていました。
狙いは企業名の認知アップです！

しかし、社内レビューでもらったのは、自分では抜けていた「noteの画面全体での見え方」という視点でした。

・情報の重複： アイコンも名前もすでに「101 DESIGN（ロゴ）」、ヘッダーまで同じだと少しクドく見える。
・色の干渉： 記事のサムネイルとヘッダーも同じ青色だと、画面全体の「青の主張」が強くなりすぎる。

これらを踏まえ、先輩から「比較検討のために、以下の方向性でも作ってみてはどうか」と具体的な助言をもらいました。

1. 背景色を変えて変化をつける
2. 読みやすさを考慮し、社名をカタカナ表記にしてみる
3. ロゴの代わりに、ミッションなどのメッセージをメインにする

デザイン制作ver2〜社内フィードバック

先輩からのフィードバックをもとに再度デザインパターンを作成し、そこから比較して候補を絞り込んでいき「カタカナ社名 ＋ メッセージ」か「英語のロゴ ＋ メッセージ」の構成を採用。

2回目のレビューでは、先輩から「他社事例の分析の仕方」と「101のページに合わせた具体的な改善案」を共有いただきました。

他社事例の分析から学んだこと

ただ「おしゃれ」なだけでなく、なぜそのデザインが成立しているのかを紐解く視点を教わりました。

• 視線誘導： ロゴと反対色の画像を使用した自然とコンテンツに目がいく工夫
• 情報の密度： サムネイルが複雑な場合、ヘッダーに白地などの「抜け感」を作りバランス調整
• タイポグラフィ： 読ませる文字か、グラフィック（あしらい）としての文字かの使い分け

導入箇所に合わせた具体的な改善案

noteの記事一覧の画面全体のバランスを踏まえ、先輩から以下のような方向性の提示（たたき台）をいただきました。

🤔黒背景案： 画面を締める効果はあるが、少し重すぎる。
👍バランス型： 実績画像で抜け感を出しつつ、一部に濃い色を入れて画面を締める。
👍実績メイン案： 親しみやすさ強め。抜け感＋実績メインならこちらのパターンもあり

その他、目的から逆算した細かなアドバイスもいただきました。

最終候補からデザインへの決定

先輩からのフィードバックをもとに、実際にFigmaで精緻化し、細かなパターンを出しを行いどれが一番しっくりくるか比較・検証しました。

• 色の濃度を変更や背景を分割してみる
• キャッチコピーやロゴの位置を入れ替えて比較
• 表示される案件のサイズや数、位置を変えてみる

最終案では、
A：ベタ+実績パターン
B：抜け感＋実績メインパターン
と、参考の背景中央分割パターンの３案で、ディレクターに相談・提案します。

デザインごとのメリット・ベネフィット、懸念点を含めてわかりやすく伝えるように教わっているのですが、言語化がなかなか難しく。。。いつも苦戦しています😖

最終的に、真ん中の「B：抜け感＋実績メインパターン」デザインに決定しました👏

ぜひ、私たちのnoteトップ画面で実物を見てみてください！

おわりに

今回の制作では、ヘッダー単体の見た目だけでなく、アイコンや記事一覧と並んだ時の「画面全体での見え方」を調整するプロセスや、このデザインから見る側にどう受け取ってもらいたいかを考え、情報の優先順位をつけることが重要だと感じました。

また、参考デザインについて、ただ見た目を真似するだけでなく、どういう目線で参考にするか、分析する目を養っていく必要があると感じました。

イチマルイチデザインの熱量や文化が伝わる記事をどんどん発信していきます！

🛠️ 詳しい制作プロセスはnoteにて紹介中です！

今回の記事はダイジェスト版として一部画像なども省略しているので、ぜひ全文をご覧くださいませ🍀

🔗【デザイン制作裏話】自社note用ヘッダー作ってみた！制作の裏側まとめ

🤝 こういう方とお話ししたいです

• 仕組みづくりにも関わりたい
• AI×デザインに興味がある
• 裁量を持って挑戦したい

そんな方がいれば、ぜひ一度カジュアルにお話ししましょう🕊️