ポートフォリオリニューアルの裏側！〜大失敗を超えてゆけ〜

皆さん、こんにちは。デザイナーのアシダです。先日、築7年だったポートフォリオをリニューアル公開しました。Twitterで報告後、予想以上に多くの方達に拡散していただき、嬉しいコメントも沢山いただけました。
皆さまありがとうございます。

リニューアルしたサイトはこちらです。
▼ASHIM FACTORY（アシムファクトリー ）
https://ashim-factory.com/

だがしかし！実はこのポートフォリオ、色々とすったもんだがあり、タイトル通り大失敗を超えた先に公開されたものです。

この公開されたデザインは2案目で、1案目のデザインはある方達にフルボッコされたためお蔵入りとなりました。
ではなぜお蔵入りとなったのか、どのように2案目へと変化していったのか、私の大失敗談を交えながらご紹介させていただきます。

1案目のデザインがダメだった理由

まずはこちらのお蔵入りとなったデザインデータをご覧ください。これが、ポートフォリオ1案目です。

トップ、About、制作実績、ブログ、漫画コンテンツ、価格表、お問い合わせなど、合計10ページにWordPressで詳細ページを構築するようなサイトです。

そしてデザインが出揃った2020年の秋頃、以前私が務めていた会社の先輩達と3人で飲みに行く機会がありました。そこで私が「実は今ポートフォリオのリニューアルを進めてて、ちょっとデザインチェックしてもらえませんか？」と、カバンからノートPCを持ち出してXDのデザインを見てもらったのです。

先輩2名のうちの1人は社内でもトップのデザイナー。そしてもう1人は恐ろしいほどに仕事ができる敏腕ディレクターです。この飲み会の開催が決まった日から、ぜひ2人にチェックしてもらおうと目論んでいました。

デザインは旧ポートフォリオの踏襲で大枠は外してないと思う。ちょっとアドバイス欲しいなぁくらいの気持ちで、ひと通りペルソナとリニューアル目的について先輩達に伝えました。

ペルソナ1
制作会社やデザイン会社のディレクターさん。リテラシーが高め。案件増加で外部のデザイナーを探している。何人ものポートフォリオを仕事の隙間時間にザッと見ている。とても忙しい。予算にゆとりあり。

ペルソナ2
法人化した社長さん・独立した個人事業主さん。webとグラフィックの両方を任せれるデザイナーを探している。ロゴや事業案内リーフレットなども相談したいが予算感が分からない。なるべく予算を抑えたい。

ペルソナ3
未来のアシスタントさん。

続いてポートフォリオリニューアル目的です。

・価格表を出して初期提案をスムーズにしたい
・最低受注額を定めて新規商談数をある程度絞りたい
・イラストも描けることをアピールしたい
・趣味で描いてる漫画「やがて前向き名人」を広めたい
・ブログや漫画など仕事以外の取り組みも集約されたサイトにしたい

ひと通り説明が終わり、デザインを見たディレクターさんがひと言。
「誰のサイトなんこれ、アッシーらしくないな」

そして、デザイナーの先輩も、「うん、なんか違う人のサイトみたいやね。クリエイターユニットのサイトにも見える。ちょっとお利口に作り過ぎてない？」

あれ？思ってたんとちゃう。2人とも同じ意見だし、なにこの展開。
つまりはこういうことです↓

・ページが多すぎる
・トップである程度実績や人柄を知りたい
・1ページで完結させてほしい、なんならワンビューでもいい
・想いが強いのは分かるが文章が長すぎて逆にスキルに自信が無いようにも見える
・ブログや漫画をSNSで投稿しているならサイトで同じもの見せなくていい（お腹いっぱい）
・ちょっと後引くくらいで余韻残す方がいい
・型にハマり過ぎたデザインで「アッシーらしさ」が感じられない

随分と言ってくれますよね。
要するに、デザインうんぬんカンヌンの前に構成という根本からダメということです。もう泣きたい気持ちになりました。

何かを予感させるラフ

「そんなに言うなら、どんな構成がいいか描いてみてくださいよ」と私が言うと、ディレクターの先輩がカバンから紙を1枚取り出し、ものの20秒くらいでラフを描いてくれました。

ふむ。1ページ完結、確かに良さそうに見えなくもない。

一方デザイナーの先輩は、ものの10秒くらいでこんなラフを描いてくれました。ワンビュー完結です。

もしこれがデザインになるとしたら、一体どんな感じになるんだろう。私のXDのデザインよりもこっちの方が良く見えてきた。

悔しいこと沢山言われたけど、2人は私が在籍中の4年半一緒に仕事をしてきた人達です。私の働き方を見てくれてて、性格もよく知ってくれてる人。
それに、社内のトップデザイナーと敏腕ディレクターの2人が言うことだから、恐らく間違いないんだろうなぁ。あぁ悔しい、直したい。

コーダーさんにどう伝える？

実を言うと、この頃すでにコーディングも着手しており、何ページかテストアップされている状況でした。ただ、このままあのデザインで10ページ以上のサイトを公開して良いのだろうか。まだWordPressの実装に入っていないのが唯一の救い。止めるなら早い方が良い。

コーダーさんに、今の作業を一度止めてもらうよう連絡しました。

コーディングは、いつも大変お世話になっているWEB制作事務所NIARのゆかちゃんです。ゆかちゃんは仕事がいつも丁寧でスピーディー。信頼のおけるパートナーさん。

▼Twitter
YUKA / WEB制作事務所NIAR　@kbyk8888
https://twitter.com/kbyk8888?s=20

▼Facebook(小林友加)
https://www.facebook.com/kbyk8191

▼WEB制作事務所 NIAR
https://web-niar.com/

私が先輩達にフルボッコされた経緯をのちにオンライン会議でゆかちゃんに伝えました。次はもっと良いポートフォリオにするから、どうか協力してほしい。費用については完了分はお支払いするので、本当に申し訳ないが構成から考え直したい。そして、サイトが10ページではなく1ページになる、、と。

コーディングが既に始まっていて、何ページかテストアップもされている。そんな状況の時にデザイナーが突然「構成から考え直したい、サイトを1ページにしたい」と言い出すなんて本来有り得ない。進め方としては大失敗だし大迷惑だ。

ゆかちゃん激怒するだろうか、Zoomの画面越しに、ツバとか吐かれるかもしれない。

ゆかちゃんは嫌な表情ひとつ見せることなく「公開するなら納得いくもの出したいですもんね！」と明るい声で後押ししてくれた。「確かにこっちの方が、アッシーさんらしいデザインな気がします。」
途中までのコーディング作業が台無しになるというのに、なんという寛大で心強いパートナーさんなのだろう。天使か、さもなくば戦士なのか。
ミーティング後のやり取りがこちら。

もう失敗は許されない。色んな人達からアドバイスをもらい、ゆかちゃんにも迷惑かけた。やり直すからには、自分が納得のいくデザインにしてドカン！といいサイト打ち上げなきゃ。

12ページ以上のサイトから、1ページ完結のサイトへ

先輩から総ダメ出しを受けてから、構成をもう一度ゼロベースから練り直しました。コンテンツを削ぎ落とし、先輩にアドバイスをもらったように1ページ完結のLPのような設計に変えました。

そして、この構成を先輩達にグループLINEで送ってフィードバックをお願いしました。

深夜だというのに仕事も忙しい中、先輩方からの丁寧かつ的確なフィードバック。これはもう、何がなんでも良いサイトを公開しなくてはいけない。

ユーモアで端的、明るいデザインへ一新。

構成チェックで大方OKだったので、次はデザインをゴリゴリ進めていきます。その2案目がこちらです。

どうでしょうか、ガラッと変わりましたよね。そして厚かましくも、先輩達に引き続きLINEグループでデザインチェックをお願いしています。

会社を辞めた私に対して、これだけ親身なアドバイスをもらえるなんて贅沢な話です。改めて素敵な先輩達と働けてたんだなぁと実感。ここから先はもう自力でやるしかない。次に先輩達に見せるのは公開後、絶対にいいもの作らなきゃ。

ここからは黙々とブラッシュアップ。

左から2番目のデザインをしていた頃、同じWebのスクール卒業生で且つ飲み仲間でもあるデザイナーさんと飲みに行く機会があり、そこでも半ば強引にデザインチェックをしてもらうことに笑。

そしてこんなアドバイスをもらいました。
「今のだと平面感が強いので、雲を動かすとか奥行きがあった方がいいですね。キャラクターも全部同じ構図だから、イラストのところはアシダさんがペンに乗ってるとか変えても面白いかも。
価格表のところは、お金の上にアシダさんが座ってたり」

なるほど、面白そうだ。またひとつユーモアが増しそうな予感。
そこから雲を2層にして影をつけ、キャラクターも各セクションごとに描き起こします。

途中、右サイドナビを急に設置してみたりと気の迷いがありましたが、なんとか4番目のデザインでFIXとなりました。

そして季節が冬に変わる頃、ゆかちゃんのハイパーコーティングでテストアップがぐんぐん進んでいきます。（コメント送信の時間帯がたまにおかしい笑）

遅くに対応してくれてありがとう。あなたは戦士だ。

言葉は筋のあるものに絞る

テストアップ後のデザインを眺めてて引っかかることがありました。
なんだろう、キャラクターのセリフがありきたりなのかな。誰でも言えそうな気がする。悩みながら過ごしたお正月休み、それを解決するとても良い本に出会いました。中川政七商店13代社長、中川淳さんの「経営とデザインの幸せな関係」という本。その本に気になることが書いてありました。

どうしても言いたいことを1つだけ丁寧に伝えましょう。

何か掴めそうでまだ掴めない。モヤモヤする。
そしてモヤモヤが解消するまで、この本を読みながら自分のブランディングについて全体像を紙に書き出して整理していきます。

本の中で「言葉は筋のあるものに絞れ」と書かれているのを見て、何かクリアになった気がしました。
そうか、この賑やかでコミカルな雰囲気のデザインに対して、キャラクターの台詞が堅すぎて矛盾してるんだ。もっと親近感があって身近な言葉に変えてみよう。普段お客さんとのミーティングで、私が話しているようなこと。

こうして、デザインの上から下までタイトル・詳細文・キャラクターの台詞を全て見直し、紙に書いたブランディンング構想と照らし合わせて何度も文章を調整しました。

公開6日前、渾身のテキストブラッシュアップをゆかちゃんに送信。

本来であれば、こういうことは初期の構成段階でやるべきだったんですよね。新年早々めちゃくちゃ反省しました。

アニメーション・レイアウトの細かすぎる微調整

今回のポートフォリオはアニメーションが肝です。淡白な表情のキャラクターだけど、動かすことで印象強く見せたい。
アニメーションの読み込み速度がスムーズになるよう、ゆかちゃんは試行錯誤で色んな方法を試しながら実装してくれました。

そして公開間際までスマートフォン、タブレット、PCのブレークポイント3箇所に対してキャラクターや台詞の位置、吹き出しの余白、微妙なバランス調整が続きます。
私の細かすぎる修正依頼のやり取り（ほんの極一部）がこちらです。

ゆかちゃん、すったもんだの末、私の細かすぎる要望にも根気強くついて来てくれて本当にありがとう。サイトのアニメーション、PCもスマホも最高です。イメージ通りの楽しくて明るいサイトになりました。私のデザインにここまで命を吹き込んでくれて感謝しかないです。
ゆかちゃんに依頼して今回も本当に良かった。

自分のポートフォリオも、誰かのフォローが必要

今回のポートフォリオサイト、進め方としては大失敗もありましたが、ありがたいことに色んな人達が手厚くフォローしてくださり、自分らしいポートフォリオを公開できました。1人では絶対に無理だった。ご協力いただいた皆さんに心から感謝です。

そして、私はポートフォリオを1ページにするという選択肢を選びましたが、これは人それぞれの構成案があって良いかと思います。なので1ページがベストというわけではありません。私も、第2フェーズでは実績紹介を拡張予定です。

これから「ポートフォリオを作るよ！リニューアルするよ！」という方は、まずは初期段階で自分の事を誰かにヒアリングするのがオススメです。自分の良さ・らしさは1人で考え込むより周囲の人(第3者)に聞くのが一番早いし信憑性も高いです。

第3者例
・自分のことを昔からよく知ってる人
・一緒に仕事して自分の仕事を見てくれてる人
・敏腕ディレクター&デザイナーさん

そして、この第3者例で頭に浮かぶ人が何人かいたとします。何がなんでもその人にお願いして、時間を作ってもらってデザインを見てもらいましょう！
私は今回3名の方に見ていただきました。
※お酒の席だとアルコールも入ってフィードバックが容赦ないので注意してくださいね笑

大変長くなりましたが、これからポートフォリオを作られる方、リニューアル予定の方にとって少しでもヒントになれば私も嬉しいです。読んでくださった皆さまありがとうございました。またどこかでお会いしましょう！！！

またね！