![見出し画像](https://assets.st-note.com/production/uploads/images/84539985/rectangle_large_type_2_9aecbf2b694004a7290bde0a1aa2eb73.jpeg?width=1200)
タチサラさんのエンディングバナーを改善【完結編】
改善大好き
改善紳士のけんぞーです。
前回、タチサラさんの
エンディングバナーを改善しようとしましたが
見事に失敗しました。笑
ということで
今回はリベンジマッチです♪
エンディングバナー前回の反省
タチサラさんの
現状のエンディングバナーはこちら。
![](https://assets.st-note.com/img/1660116726974-ruvzHbqJPl.png?width=1200)
でもって改善紳士が
改善しようとしたバナーがこちら。
![](https://assets.st-note.com/img/1660116659654-3ps2Oo8oFj.png?width=1200)
いや~ダメですね。
ダメダメですね。
まずは
ひとり反省会です。
<反省ポイント>
・前のデザインに引っ張られ
「サラリーマン」「研究所」などのワードと
関連度が低い、葉っぱを入れてしまった。
・背景に研究者のメモらしい画像を入れたが
文字よりも背景画像が目立ってしまった。
・メモ画像からイメージを受け、
手書きフォントを使ってみたが
ただただ読みにくいだけになった。
・タチサラさんの炎のカラーを
背景に入れてみたが
文字よりも、より背景が目立ち
文字が死んだ。
・まとめるとデザイン性を優先したことで
読みやすさと見やすさを殺した。
いや~
ダメポイントが
たくさん出てきましたね~。
でも、
ダメポイントは改善の種なので
「ダメ=悪い」ではないです。
改善紳士的に言うと
「ダメ=改善ポイント」です。
ダメなポイントから分かる改善ポイント
行動するからこそ
ダメな部分が見えてくる。
でもそれでOK!
ダメな部分が見えたら
そこから改善すればALL OK!
さっそく
改善ポイントを
探ってみましょう!
<改善ポイント>
・前のデザインに引っ張られ
「サラリーマン」「研究所」などのワードと
関連度が低い、葉っぱを入れてしまった。
→「サラリーマン」「研究所」のワードと
関連性の高いイメージを入れてみる。
・背景に研究者のメモらしい画像を入れたが
文字よりも背景画像が目立ってしまった。
→文字を邪魔しない背景にする。
・メモ画像からイメージを受け、
手書きフォントを使ってみたが
ただただ読みにくいだけになった。
→手書きフォントは使わない。
・タチサラさんの炎のカラーを
背景に入れてみたが
文字よりも、より背景が目立ち
文字が死んだ。
→文字を活かす背景にする。読まれてなんぼだから。
・まとめるとデザイン性を優先したことで
読みやすさと見やすさを殺した。
→デザイン性の優先度を下げ、読みやすさ、見やすさの優先度を上げる。
はい。
良い改善案が出てきました!
それでは、
デザインしていきましょう!
改善案を考慮してエンディングバナーを改善
こちらは前回のバナー。
![](https://assets.st-note.com/img/1660116659654-3ps2Oo8oFj.png?width=1200)
まずは背景と画像を消して
文字だけにしました。
![](https://assets.st-note.com/img/1660116965662-FfcCuHV6Un.png?width=1200)
次に、
サラリーマン研究所と関連度の高い
画像を入れてみます。
![](https://assets.st-note.com/img/1660117084108-n9S5LnImcx.png?width=1200)
お!良いかも。
次に、手書きフォントをやめて
読みやすいゴシックフォントにしました。
![](https://assets.st-note.com/img/1660117145845-XzE3IqqG5c.png?width=1200)
文字の大きさを調整。
![](https://assets.st-note.com/img/1660117276661-Ufrd9ieQHY.png?width=1200)
サイトマップへの誘導文をボタン風へ。
![](https://assets.st-note.com/img/1660119186826-BUcnQaxxy8.png?width=1200)
項目をふせんみたいにしてみた。
![](https://assets.st-note.com/img/1660119189155-EGjqg8aet3.png?width=1200)
前回は、背景をタチサラさんの炎の赤にしましたが
サラリーマン研究所のタイトルの中に炎を入れてみました。
![](https://assets.st-note.com/img/1660119192786-Vf6z8bEcYH.png?width=1200)
ふせんが目立ちすぎていたので
ふせんをやめて、白くて丸みのあるイメージへ変更。
![](https://assets.st-note.com/img/1660119195579-9CD1QEo2dC.png?width=1200)
120%を強調。
![](https://assets.st-note.com/img/1660119198324-6OtIRABvNk.png?width=1200)
毎朝7:00に発信中の場所に困る。
![](https://assets.st-note.com/img/1660119200999-iRCjcvgjeX.png?width=1200)
サイトマップへの誘導イメージを、更にボタンらしく。
![](https://assets.st-note.com/img/1660267934400-xb3WOvHTow.png?width=1200)
押したくなるボタンではなかったので
文言を変更しつつ、アイコンを追加。
![](https://assets.st-note.com/img/1660267934560-EsDEL2jtQG.png?width=1200)
毎朝7:00に発信中をボタンの中へ。
![](https://assets.st-note.com/img/1660267934713-cgx3D4KMwP.png?width=1200)
4つの角に、グレーの三角を入れて
研究者が持っているボード風にしてみた。
あくまでも、主役は文字。
![](https://assets.st-note.com/img/1660267978373-lpfV2GOTfm.png?width=1200)
ボタンが大きすぎるので、
毎朝7:00に発信中を移動。
う~ん。なにか違う。
![](https://assets.st-note.com/img/1660268383879-rCm2u5hA5h.png?width=1200)
そだ。
研究者に喋らせよう♪
![](https://assets.st-note.com/img/1660268616456-W5whGWLpqD.png?width=1200)
いい感じ!
ラスト!
レイアウトがしりすぼみなので
最後のアクションボタンを大きく!
![](https://assets.st-note.com/img/1660268677095-tOue73nlwR.png?width=1200)
完成です!
エンディングバナーを振り返ってみよう!
タチサラさんの
エンディングバナーが
ここからの~
![](https://assets.st-note.com/img/1660116726974-ruvzHbqJPl.png?width=1200)
↓ ↓ ↓ ↓ ↓
![](https://assets.st-note.com/img/1660116659654-3ps2Oo8oFj.png?width=1200)
↓ ↓ ↓ ↓ ↓
![](https://assets.st-note.com/img/1660268677095-tOue73nlwR.png?width=1200)
こうなりました!
いや~よかった。
失敗したからこそ
いい改善案が出て
いいデザインになりました。
<改善ポイント>
→「サラリーマン」「研究所」のワードと
関連性の高いイメージを入れてみる。
→文字を邪魔しない背景にする。
→手書きフォントは使わない。
→文字を活かす背景にする。読まれてなんぼだから。
→デザイン性の優先度を下げ、読みやすさ、見やすさの優先度を上げる。
いろんなデザインに
共通する改善案ですね♪
まとめ|失敗してからがスタート
今回の勝手に改善では
とても大きな気付きがありました。
それは、
とにかく行動すること
行動さえすれば
なにかしらの結果がでる。
成功でも失敗でも
どちらでもOK。
成功したら
そのまま続ければいいし
失敗したら
改善すればいい。
行動しなければ
成功も失敗もないので
迷って動けないときは
とりあえず行動してみて
なにかしらの結果を出してみる。
それから考えても
遅くないんだな~と思いました。
大きな気づきをくれた
タチサラさんに感謝感謝です。
デザインのご相談や、
勝手に改善されたい人は
コメントくだ~い♪
改善紳士への
お仕事依頼はこちらから
以上、改善紳士のけんぞーでした!
いいなと思ったら応援しよう!
![改善紳士|KaizenWorks](https://assets.st-note.com/production/uploads/images/52998120/profile_2c210d61cbb607f38835757130101325.png?width=600&crop=1:1,smart)