ヘッダーって奥深い・・・。

隊長”しずおか”です！
GW最終日みなさんいかがお過ごしですか？
わたしは昼間からお酒を飲みまったりと過ごすSTAY HOME！な日々を送っていました。

さてBIGHIGH総隊長の「第１回タイトルヘッダー選手権！」を受けて、わたしが作成したヘッダーについてご紹介させていただきます。

提出したヘッダーはこちら↓

■タイトルについて
シンプルイズザベスト！タイトルをSWINGMAN Noteとあえてシンプルにすることによって、先入観やイメージを固定せず、記事の中身で勝負！という意図です。Noteの中身はこれからみんなで作っていくので可能性は無限大！という事で、あえてシンプルにしてみました。また、20周年というのもさりげなくアピール。

■ヘッダーデザインについて
入社してからIllustratorを使い始め、手探りで勉強中のため思い通りのものを作れたかといったら微妙なのですが、まず画像はフリーのサイトから自分のイメージに合うものを探しました。イメージは東京タワーとその景色、写真のような画像もいいかなと思っていたのですが、”すいんぐまん”をどうしても登場させたかったのでイラストタッチでかわいくなおかつシンプルでスッキリしたデザインのものを探しました。そして画像に合いそうなフォントに。小さなすいんぐまんはザッキー作のものを加工して背景透明化し加工、縮小してビルの上に立たせてみました。存在感があるようでさりげなく立っているのがこだわりです。

それを受けてのBIGHIGH総司令官のコメント

■タイトルについて
個人的にはすごく好きです。基本的にこのnoteの広め方が仕事関係の方々であることを考えると、シンプルに考えるのが分かりやすく変な色がつかないという点でもすごくよいと思います。noteが入っていることで、意図はだいたい伝わるし。

■ヘッダーデザインについて
弊社のなんとなくのイメージでもある東京タワー。会社の前の桜田通りからの東京タワーはドラマのロケでもよく使われる絶景です。ということで、東京タワーをうまくつかって、手書き風の画像にすることで、いかにもノートにデッサンされたような感じがでていて…タイトルとの親和性も高くすごく素敵だと思います。すいんぐまんが小さくいるのもGOOD！１点、見てみたかったのは、タイトルや すいんぐまん をすべてこの画像のタッチに合わせた案。なんとなくタイトルはデッサン風でなくともよさそうな気がするけど、すいんぐまんをさりげなく入れるなら、タッチも合わせたほうが調和するはず。

うれしいお言葉、ありがとうございます！
わたしが一番こだわったすいんぐまんにGOODいただけてうれしい！！！
タイトルは画像のタッチに合わせたつもりが、まだまだですね。すいんぐまんも画像のようなタッチにするのは今の私にはなかなかハードルが高い・・・。とあきらめていましたが調べたら出来そう！？と調べてチャレンジしていましたが、なかなか思うようにいかず出来上がったのがこちら↓

ごめんなさい、脱線に脱線を重ね、いろいろ試したくなり完全にわたしが作りたいだけの違う方向のものを作り出していました。こちらにもすいんぐまんがいますのでウォーリーを探せ的な感じで楽しんでいただければと思います。ポップすぎでキッズな感じがしてしまうので会社のヘッダーとしてはふさわしくないですよね・・・。静岡の象徴富士山もあるし、ポップで好きなテイストなのですが。。。
という事でまたまた同じようテイストで(完全にわたし好みの方向に進んでおります・・・）２種類さらに作成してみました！

虹ってハッピーな気分になりますよね。なので、東京の街並みに大きな虹を架けてみました。うん、カワイイ！！！でも虹が主張しすぎ？？なので却下！で少し変化を↓

う～ん、ちょっとさびしいかな？でもシンプルなので結構スキかも。色合いも主張しすぎずいいんではないでしょうか？Illustratorだともっとミントっぽい色合いなのに、アップするとちょっとくすんだ感じなのが気になりますが...
本日のしずおかのnoteヘッダーはこちらを採用しました。(そして、大好きなすいんぐまんをちりばめました♪)

ヘッダーはページをクリックした人が一番最初に目にするもの。そのためどういう人(会社)なのか、どういう内容なのかおおよそのイメージがつくと思います。だからヘッダーにはこういうデザインが主張すぎないもののほうがふさわしいのかもしれません。完全個人的見解ですが・・・。

いろいろな会社のヘッダーを見てみても、その会社のイメージが伝わるようなデザインになっており、デザイン重視、コメントにインパクトがある、風景や人がメインになっているの等さまざまで面白いです。

そこでヘッダーに興味を持ちもっと掘り下げて調べてみました。
ヘッダーは最初の視界に入る「ファーストビュー」で注意を惹きつけ、検索画面に戻らずにホームページに長く滞在してもらえるような工夫が必要となりとても重要とのことで、「グーテンベルグ ダイアグラム」「Ｚパターン」「Ｆパターン」という３種類の目線のパターンにそってデザイナーさんは作成されるようです。

■グーテンベルグ ダイアグラム
視線は左上から右下に流れていくように習慣付けられる印刷物に当てはまることが多いパターン。広告とか目玉商品が一番左だったりしますよね。(ラーメン屋さんも一押し商品は左上っていいますしね）←
■Ｚパターン
左上から始まった視線が右上→左下→右下というパターンを描き、アルファベットのZのような動きをとることから「Zパターン（Zの法則）」と呼ばれているそうです。初めてサイトを訪れた初見ユーザーに多く見られる視線の動きと言われています。Web上でユーザーは、最初にざっとページの全体を見るため、このような動きをとっているとされています。そのため、初見ユーザーが多く訪れるTOPページなどはこの視線を意識してデザインすることが大切です。
■Ｆパターン
左上から始まった視線が右上→下に下がってまた左→ 右というパターンを描き、まるでアルファベットのFのような動きをとることから「Fパターン（Fの法則）」と呼ばれています。Fパターンはリピーターに多く見られる視線の動きと言われています。商品ページや記事ページはこちらのFパターンを意識したデザインが有効とされています。

また、配置するサイト全体を確認して、ページに馴染むデザインになるよう「サイトのカラーに近い色、近いトーンの色を使う」、「サイトのコンセプトをしっかり聞き出して作成する」という事等を計算して作成するようです。デザイナーさんすごい！
ヘッダー今まで何気なく見ていましたが奥深いです。これからはコンセプト・色合い・法則などにも注目して、デザイナーさんの意図もくみ取りながらヘッダーを見たいと思います！

今回の企画では特にコンセプトなどは決めずに「noteはじめるのでみんなで思い思いのヘッダーを提案してください！期日３日間で！」と、わたくし隊長なのにざっくりしたお願いと今思えばむちゃぶりのような短い期日設定にも関わらず、みなさましっかり提出していただきまして本当にありがとうございました。

みんなへのコメント

◆せれーの
「波紋」、すごい発想ですね！しかもその波紋の言葉にもしっかり意味があり、素晴らしい！しかもこのデザインを一から作成できるのがまずすごい！
BIGHIGHのコメントから修正を加えたデザインはさらに良くなっていて全体的にまとまりが出でさらに素敵です！
◆ばんび
東京ラブストーリーから文字ったのがまずおもしろい。さすが、ユーモア溢れるばんびならではのタイトルですね！他にも候補を考えているとの事なので気になる～。続編期待です！
◆ザッキー
最年少のザッキーですが、大人っぽい素敵なデザインだなと率直に思いました！センスを感じます。今まで積み上げてきた20周年の道を「足跡と波」という表現に繋げる発想が素晴らしい！わたしにもその発想力ほしい。
◆ちゃこ
一人ひとり違う色（個性）を持っているけど、一丸となる日はみんな集まって、大きな虹になって架け橋になろう！というメッセージが心に刺さりました！社長が日本を支えてるポイントも好きです。
◆BIGHIGH
全体的なバランス、色味、お手本デザインという感じで完成されていますね。さすがです！「＆TOKYO」が舛添元都知事時代のもので今の小池知事は「TokyoTokyo Old meets New」という取り組みをしているというのも知らなかったので勉強になりました。

みんなに提出していただいたヘッダーですが、同じようなものはなく、どれも個性があふれていてとても刺激になりました！！！こういう発想があったのか！こういう考え面白いな・・・こういう事もできるんだ！等々自分にないものがどんどんアップデートされていくのでいい企画ですね！同じテーマでチャレンジ企画、続編楽しみです。

さいごに

せれーのへ
山菜の王様知りませんでした・・・。こしあぶら？？？初耳です！！
我が家は元々農家だったので祖父母が畑で作った採れたて野菜を祖母がよく天ぷらにしてくれたのが良い思い出です。我が家はピーマンありましたよ！王道だと思っていました(笑)あとはなす、さつまいも、玉ねぎと人参のかき揚げ、かぼちゃあたりかな？子供の頃はすが嫌いで食べていなかったのが悔しいです。こんなに美味しいのに！！！一番好きなのはさつまいもでした。
ばんびへ
マーベル系の映画をある方の影響で見始めるとの事ですが(笑)私もマーベル作品大好きなんです！シリーズがたくさんありすぎるのでまずは2008年公開の「アイアンマン」から見始めるのがスタンダードだと思います！ネットで時系列ごとのおすすめ順がのっているのでそれ通りに見るのをオススメします。（作品を飛ばしてみるといきなり知らないキャラクター出てたりいつの時代の話？となったりするので混乱するかも）私が一番好きなのは「ガーディアンズ・オブ・ギャラクシー」！ぜひ見てください！！！
（しずおか）