親戚のHPを改修した話 3

【前書き】
親戚がピアノ教室をしており、google 検索に引っかからないとの相談をうけた。WordPress でちゃちゃっとやればいいや……などと甘い考えで引き受けたら……
JIMDO（ジンドゥー）という初CMSとのご対面と、SEO対策の他にも文章に困ったからライティングしてほしい、ロゴは任せるとのこと。

JIMDOの使い方わかんねぇーから始まり、「ああ、このバナーよく見たら×PIXTAになってるやつだw」という発見、「ピアノ弾けるようになったらIQが上がる記事」のライティング必須という冒険など、実にエキサイティングな旅路であった。

制作サイト
https://www.rosemary-music.com/

ヘッダ画像の作成

ヘッダ画像がこういうヤツ（もうちょっと違うかった）。著作権気になるし、無料でやりたい気持ちは分かりますけど、あんまプロっぽくない。
プロっぽいホームページにするためには改修の必要がある。

元の画像が白いピアノにバラであるため、Amazonなどに落ちている画像や「ぱくたそ」などのフリー素材でピアノとバラを探す。

これを大谷キミト氏メソッドで加工。ただし、PhotoshopではなくCLIP STUDIO PAINTで加工している（Photoshopは予算の都合でAdobeから強制停止を食らってしまったため）……

ピンクや黄色などのグラデーションをレイヤーとして乗せ、春らしい明るいイメージを演出するテクニック。雰囲気を盛り上げるイメージテクニックだそうだ。
「Photoshopレタッチ 伝わる写真補正&加工を学ぶ現場の教本」を見ながら完成させたのがこちら。

バラは周囲の枝葉を消し、花の本体だけを白いピアノに乗せる。このとき、上から文字を乗せることを想定し、花束にしない。3つの花は向きを若干変えてランダムにしている。

花が浮いてしまうので、浮かないように陰影をつける。白いピアノはロゴを消す。最終的に画質と雰囲気を統一するため、白で加算（発光）を使用。さらにその上から、キミト氏メソッドを使用。

特に、白系レイヤーの加算（発光）は、明るくポジティブな朝という雰囲気を出したいときに使えるテクニックで、逆光などで暗くなりがちな写真画像にカバーをすると映える。個人的によく使うテクニックではある。

「子どものIQが上がる記事」のバナー

伝えたいこと（仕様）：ピアノで子どものIQが上がる、音楽は感性や人格形成に貢献する

この長文を、一瞬で見せる方法がある。それがバナーである。
当たり前といえば当たり前だが、大量の情報を一枚の画像で見せることができるのが「デザイン」である。……と前田デザイン室では言われている。

素材は「ぱくたそ」からいただいた、どこかのお子様。

ぱくたそは二次加工が可能である。
こちらにも、周囲に春らしいポジティブオーラを出したいので、白系レイヤーの加算（発光）を行う。テクニックとしてはその程度。
完成はこちら。

ピアノで子どものIQが上がる … 知性
音楽は感性や人格形成に貢献する … 創造性
上記全て … （将来、勉強や社会生活などで役立ち）未来を育む力

で、13行分の情報を一枚の画像に集約できる。
このプレゼンテーション能力は、デザインを学べば誰でも習得可能なテクニック。

子どもの横に「知性」「創造性」などと大人の使う言葉を仰々しく書くと嫌らしいので、クレヨンで あえて目立ちにくく 添える。

「未来を育む音楽のチカラ」を右に寄せると右が重くなるので、鼻歌を歌うような可愛らしい音楽要素として、ラクガキ状の音符を左に添える。

これで、大量の情報を一瞬で伝え、かつ違和感のない構成のバナーになる。「子どもの親が見て、楽しそう！習わせたい！と思ってもらえる内容がいいです」という要件も満たすことができる。

バナーデザインというのは凄いものだ！

次回はうっかり消えたテンプレを復旧する話。