いちげ氏のアイキャッチデザインを徹底分析!【02】

みなさん、こんにちは!　michaco(みちゃこ)です。

愛媛の素敵なデザイナーいちげ氏(@booichiro)のアイキャッチデザインを
隅々まで分析して言語化することで、
魅力的なデザインをスキルとして自分にインストールするためのnoteです。

==========

アイキャッチ分析
02

==========

今回分析するいちげ氏デザインのアイキャッチがこちら。

・写真を見せたいときに最適
・背景に合わせて透過具合を変えてる
・画面のほぼ半分で、区切られている
・すべての文字の「揃い」が美しい
・たて文字タイトルの中によこ文字

◆写真を見せたいとき「使える」デザイン

このアイキャッチは、紙のガイドマップの写真を「見せる」デザインになっています。
・写真の撮り方
ガイドマップが置かれた状態でななめから撮影されいて、画面に動きが出ています。
旅先で目に留まった紙のガイドマップをサッと手に取るように、
このアイキャッチも「お、なんだろう」とクリックへと誘われる感じ。

さらに、ガイドマップを置いている机(?)
古い木の歴史あるなつかしい感じが、デジタルでポップな色合いのガイドマップを引き立てています。江川﨑の自然豊かなイメージにもつながります。

・配置
写真を真ん中に大きく配置しています。
写真全体が入ることよりも、画面のバランスが優先されています。

また、アイキャッチに重要なタイトル。
見せたい写真の上に文字を乗せるのは、意外と難しいのです。
こちらのデザインでは、色のついた棒を何本か並べて透過させた上にタイトルを乗せています。これは、よく見ると紙のガイドマップのデザインと同じ。たてとよこで印象を変えながらも、一体感を保っています。
そうして乗せたタイトル文字の左側は、写真だけが大きく残っています。これで、タイトルを目立たせながらも写真を見せるエリアを確保しているのですね。

◆背景に合わせて透過具合を変える

先ほど説明した「色のついた棒を何本か並べて透過させている」部分ですが、よく見ると透過具合がちがっています。
一番右の棒の水色が濃いんです。
そこは、背景の写真にガイドマップがあまり映り込んでいない部分。
この部分を濃くすることで、画面全体的がひきしまって見えます。
写真はひだり側、文字はみぎ側というふうに、バランスがとれていますね。

◆画面のほぼ半分で区切られている

タイトルの乗っている黄色い四角の左端のラインが、画面のぼぼ真ん中を区切るように配置されています。
このような細やかな配置が、写真がひだり、文字がみぎのようなバランスを保っているのですね。

◆すべての文字の「揃い」が美しい

このデザインも、文字の揃い具合が美しいです。
英語も日本語も混ざっていますが、しっかり上揃え。
特に、「江川﨑」の文字と、そのひだりの「サイクリングイラストマップ」の文字が上と下どちらも揃っています。これはなかなか思いつかないというか、ここまで細部を調節することは見落としがちです。
大事なタイトル文字の周りをごちゃごちゃさせずに、サブタイトルを入れるポイントだと思います。

◆たて文字とよこ文字を組み合わせる魅力

ちょっとマニアックですが、「江川﨑」の「﨑」のハネの部分にできるすき間に、「2017改定版」という文字が入り込んでいるところが好きです。
「いちげ氏、ここに入れるかー!」とつっこみをいれてしまう。
「江川﨑」のひとつひとつの漢字の間に、よこ文字が入り込んでいるのもかわいいです。もちろんここでも、よこ文字の左右の揃えもしっかりされています。

まとめ

☑　見せたい写真があるときは、最適なデザインがある
☑　背景に合わせて透過させる具合を変えてみよう
☑　画面を分けるときは、左右の真ん中を意識する
☑　文字はそろえる
☑　たて文字とよこ文字を組み合わせるとおしゃれ

ちなみに、こちらのnoteの私がつくったアイキャッチ。

「いちげ氏デザイン、真似してみた!」のですが、お分かりいただけたでしょうか?

この「真似する」アイディアは、いちげ氏からいただきました。
何度も何度も見ながら真似してみたからこそ、いちげ氏のデザインがとても素晴らしく、「使える」ワケが分かりました。
比較してみると、私のほうはまだまだ細部までデザインし切れていないことがわかります。「いちげ氏、ここまで調節しているのか!」と感動しきりです。

特に、先ほど説明してきたポイントを再現していくと、アイキャッチの印象がずいぶん変わるはずです。

※michacoはいちげしデザイナーズサロンに参加しています!