みなさんこんにちは。
未経験、実績ゼロ、週７バイトからフリーランスWEBクリエイターを目指している氏家すなおです。
今回はココナラのヘッダーデザインを制作してみました。
やっぱフリーランスを目指すのならココナラに登録はしとかなきゃですよね。
完成品はこちら
このヘッダーを制作するにあたって、「悩んでいたけど、こうしたらしっくりきた」という発見が３つあったので共有したいと思います。
もし、同じようにデザインしている途中で「なんかしっくりこないんだよなぁ」となたんでいる方がいたら、ぜひ参考にしてみてください。
1. 最初のアイデアを削る
デザインをするとき、ほとんどのデザイナーさんは参考になるデザインを探すと思います。
僕の場合は、要件定義をした情報に合うデザインをいくつかピックアップして、その参考デザインを元にレイアウトを決めます。
今回僕が参考にさせていただいたのはPinterestで見つけたこちらのデザインです。
そして、このデザインを参考にして、最初のラフで作ったヘッダーがこちらです
で、ここからテキストを差し替えてサクサクとルンルン気分でデザインしていたのですが、ある部分のデザインがずっとしっくりこなくて、沼から出られなくなってしまったんですね。
完成デザインを見てもらうとごっそり削ってる部分があるので、なんとなくわかるとは思うのですが⋯⋯
こいつですね。
最初は「なんとなくいいな」と思って真似したデザインだったのですが、やはりデザインで「なんとなく」は禁物です。
確かにこの部分位アイキャッチ的なシンボルがあると、まとまりは良くなるかもしれないのですが、自分がアピールしたいテキスト情報とは合わなかったのかもしれません。
見事にハマってますね。
掃き溜めのようにボツデザインが溜まっていきます。
こういうの恥ずかしいですが、全部見せます。
このように、しっくりこない時間が続くとモヤモヤしますよね。
元デザインの見た目の良さに引っ張られて意固地になっても良いことはありません。
なので、そういう時は思い切って削りましょう！
スッキリしましたね！
いや、まじでスッキリしましたよ。
ずっと引き出しにしまってあった思い出の手紙を思い切って捨てた16歳の夏の思い出が蘇りましたよ。
まぁ、それに関しては今でも後悔してますけどね。
まったく需要ないけど僕の幼少時の大恋愛を綴ったエッセイはこちら
2. アイコンを使ってみる
次は完成形でいうところの下部バー内のデザインでのアイデアです。
最初の案(ラフの段階)ではボタンっぽい枠を並べるつもりでしたが、なんかしっくりきませんでした。
配置を変えたり、色を変えたり、枠を変えたり、袋文字を追加してみたり。
思いつくままやってみましたがどうもしっくりきませんでした。
結果、なんやかんやあって、アイコンを使ったら個人的にしっくりきました。
しかし
なんとなくうまくいった！⋯⋯だけでは再現性がないのでちゃんと考察してみます。
しっくりこなかったデザインを自己分析してみたのですが、
その答えとしては、
バナー全体を囲む外枠もあるし、余白が十分に取れていないので、枠という視覚情報が渋滞していたのが原因と考えました。
その解決方法としてアイコンを使ったことで「まとまりが際立った」のが良かったと考えられます。
アイコンが、ブログや記事でいうところの”見出し”,”アイキャッチ”のような役割になったんですね。
アイコンがあることで、目線移動に休憩がるようになって読みやすくなりました。
つまり、文字情報が連続するときに効果があるのではないでしょうか？
アイコンもせっかくなので自作しました。オリジナルにすると愛着が出ますね！
余談ですが、ここで第１のアイデアである「削る」にしなかった理由についても記載しておきます。
もちろん悩んでいるうちに、いっそのことまたごっそり削ろうというアイデアは出ましたが、自己紹介のヘッダーなのだから”自分が何を提供できるのか？というサービス名一覧”を入れるメリットはかなり強いと考えられるので、削りませんでした。
その理由は単純です。
見込みクライアントさんがヘッダーを見てくれたときに、分かりやすいからです。
「あ、この人は〇〇をして”くれる”人なんだ」
と思ってもらうためです。
例えば ”デザイナー” って単語だけだと、「この人はデザイナーなんだな」という印象しか残りませんが、
”売れる分析をしたランディンページ” という単語ならば、それを求めていた人にとっては、ビッタビタでドンピシャのベネフィットになります。
ベネフィットというのは顧客さんの求めているモノ(利益)を指します
で、僕個人としては、このベネフィットを心の中で読ませるというアクションはとても大事なんだと認識しています。
その理由は僕が昔、フランス人のシェフに料理を教わっていた時期に気づいた発見が関わっています。
少し話が飛んですいません。
もう10年以上前になります。
僕は東京にある高級住宅街の１つ、広尾というトイプードルがよく似合うオシャレマダム街の小さなフレンチカフェで働いていました。
僕と、パートの主婦さん、そしてガタイの良いカタコトのフランス人シェフ。その３人だけで十分回せてしまう小さなカフェです。
その時に師事していたシェフに言われたことが、すごく僕の中で印象的な言葉として残っています。
シェフはランチを食べ終わったお客さんに、どんなに忙しくても「美味しかった？」と感想を聞いて回っていました。
その他の片付けや雑用は僕に任せて「美味しかった？」と客席までわざわざ近づいて聞きにいきます。
美人のマダムだと感想を聞いた後の雑談も止まりません。
ときには「美味しかった？」ではなく「美味しかったでしょ?(美味しかったって言えよ)」と問い詰めるような勢いで感想を聞いていました。
もちろん、みんな口を揃えて「美味しかったよ～」と返します。
そりゃ、ガタイの良いフランス人に詰められれば誰もがみんな「美味しかった」と返すだろうよ
僕はそんなふうに思っていました。
確かに自分が作った料理が美味しいと言われれば嬉しいのは理解できます。
しかし、美味しいと言わせるようなことをしてもらう「美味しかった」は本当に嬉しいのだろうか？
僕の中に生まれた疑問はだんだんと大きくなっていきました。
あと、早く片付けしろよという想いも比例して大きくなっていましたね。
そして、ある時聞いてみたんですね。
どうして(クソ忙しいピークの時でも)毎回感想を聞くんですか？
するとシェフはこう返しました。
「お客さんはね。美味しかったって口にすると本当に美味しいと思って帰るんだよ」
あの時のマダム好きシェフ
正直、想像していた答えではなかったです。
僕が思っているより奥が深い心理戦だったのです。
シェフが狙っていたかは別として。
確かに、そのシェフの料理は本場のスパイスが効いていて、クセが強いランチプレートを出すときもありました。
ちょっと馴染みのない味であっても最後に「美味しかった」と言葉に出させれば、美味しかった思い出というゴールに持っていけます。
さすがに「不味い」から「美味しい」にはできないけれど、「ん？これって美味しいのか？」くらいの疑問ならば通用する。
これ、あとで知ったんですが「ラベリング」とか「ピグマリオン効果」というような立派な心理的技術だったんです。
というわけで話を戻します。
つまり、デザインおいて顧客さんにベネフィットを読んでもらうことはめちゃくちゃ大事なんです。
例えばランディングページを依頼したいお客さんがいるとして、
売れる根拠を考えてランディングページを制作するのはデザイナーとして当たり前です。
しかし、当たり前なのだからアピールする必要がないワケではありません。
僕のヘッダーを見たタイミングで「売れるLP」というキーワードを脳に持ち帰ってもらうことが目的なのです。
とか、偉そうに考えを語っておきながら、僕のデザインにはまだまだ検証が必要なんですけどね。
もっとアピールできる演出はできないのか？
優先順位はあっているか？
考えたらキリがありません。
なので、その時の100%を出しつつ、日々勉強することが大切なんですね。
3. 画像をはみ出させる
今回でいうところこの似顔絵イラストのことですね。
最初は下部のバーに隠れるようにしていたのですが、どうしてものっぺりしていました。
下部の載せる情報もこれ以上多くなると、読みづらくなりそうだったので、情報を入れ替えて、大きくしてはみ出させてみました。
うまいこといきましたね。
この思い切って重ねるというのは、奥行きや立体感が出て、デザインがリッチになると言われています。
今回は奥行き目的ではなく、全体の余白バランスを整えるためのアイデアでしたが、結果的にしっくりまとまった印象になりました。
アイデアがすんなりハマる時もあれば、なかなか沼から出れない時もあります。
どちらにしろ、デザインって面白いですよね！
長くなりましたが、今回はこのくらいにしておきます。
最後に
読んでくださってありがとうございました！
僕は未経験で実績ゼロなので、自分のデザインで成果が出た！と強く言えません。
しかし、世の中の効果が出ているデータを調べて、一人一人の持つ課題に合わせて考えに考え抜いて、提案することはできます。
これからも日々精進して参りますので、ご興味持っていただきましたら、
お気軽にご相談、お問い合わせの方、お待ちしております！！
お仕事の範囲(随時向上予定)
- WEB制作 / STUDIO, WIX
- WEB制作(補助程度) / HTML, CSS , Javascript
- モバイルアプリ開発 / Adalo
- バナー&ヘッダーデザイン制作 / Illustrator
- 資料デザイン作成 / Illustrator
- WEBデザインのみ / XD
- 動画編集(補助程度) / Premire pro
対応時間(週7バイトのため限られますが全力で返信します)
※バイト先も状況を理解してくれている良い人たちばかりなので、その他の時間帯は要相談で可能です
月曜 / 22:00以降
火曜 / 9:00 – 13:00 + 22:00以降
水曜 / 9:00 – 18:00
木曜 / 22:00以降
金曜 / 9:00 – 13:00 + 22:00以降
土曜 / 9:00 – 18:00
日曜 / 10:00 – 18:00 ※要相談
ノーコードポートフォリオ(随時更新予定)
エンジニアポートフォリオ(参考程度にどうぞ)
最後までご覧いただきありがとうございました！
その他SNSでも発信予定ですが、基本的にはTwitterでお知らせします。
ご興味のある方はフォローの方、よろしくお願いいたします！
コメント