カテゴリー別アーカイブ: デザイン

デザイナー採用担当が教える!ワンランク上のポートフォリオ10のヒント

2020年、転職にあたってポートフォリオを作った際の制作ノウハウ記事が、同じ境遇にある多くの方に見ていただけました。その流れでとある企業から「イベントでこの内容話してみませんか?」とお誘いをいただきました。せっかくなのでそのイベントでは記事にまとめた内容とは別のコンテンツを準備してお話させていただきました。

つくづく私は、ポートフォリオは自分目線の作品集ではなく、受け手目線のプレゼンツールであるべきだと考えています。イベントではそんな考えを「10のヒント」と題してお伝えしました。そして約半年経った今、当時のイベント動画が7日間限定で公開されることになったので、私もブログでその内容を公開したいと思います。

10のヒントは、ポートフォリオを作り始める前にどんな人たちにプレゼンするのかを考えた「準備編」と、作る際に採用担当者に伝わりやすくする技術を伝えた「制作編」の2部構成です。このエントリーですべてご紹介していますが、イベント動画の方がプレゼン形式でより理解しやすいと思います。お時間あればぜひ動画もご確認ください。

準備編

  • 1.企業の選定状況に合わせたポートフォリオを考える
  • 2.行きたい企業の特徴をリサーチする
  • 3.採用担当者が注目するポイントをつかむ
  • 4.募集人材に求められるレベルを正確に把握する
  • 5.未経験者枠に求められるものをつかむ

制作編

  • 6.読み手が理解しやすい順序・言葉・量を考える
  • 7.実績が少ない場合の対処を考える
  • 8.制作実績以外に掲載できることを考える
  • 9.ポートフォリオを第三者にレビューしてもらう
  • 10.選考で損をするNG手法

はじめに



最初に結論です。ポートフォリオ作りは「作品集を作るぞ」という自分視点ではなく、採用担当者の視点で考えることが大切です。読み手が知りたいことは何か?どんな体裁、どんな言葉、どんな構成なら興味を持ってもらえるかを考えると、自然と伝わりやすくなります。これらは「10のヒント」すべてに共通しています。

準備編

1.企業の選定状況に合わせたポートフォリオを考える





転職では複数社受けることがほとんどですが、内容をそれぞれ変えるべきか?という質問をよくお聞きします。もちろん会社の特性が違えば見せ方も変えるべきですが、限られた時間ですべての体裁を変えるのは時間と労力がかかります。まずどんな企業にも見せられる汎用的なベースを作った後、企業ごとにアレンジするのが良いでしょう。

例えば、受けようとする企業に明らかな得意領域があるなら、自分の実績もそこに近しいものを掲載した方が注目してもらいやすくなります。また全体の中で、それらの実績をなるべく最初に見せるのも、興味を惹く上で大切になります。もし余力があるなら、志望企業が大切にすることをくみ取ったオリジナルページを作るのも有効です。

2.行きたい企業の特徴をリサーチする





志望する企業については誰でも下調べをすると思います。まず最低限、Webサイトやブログ、SNSなどから公式に発信する情報を把握しておくのは必須ですが、そんな当たり前の情報を知っていたとしても採用担当者の気持ちは動きません。大切なのは「そんなことまでよく知ってますね!」と思わせる情報を把握しておくことです。

例えばその会社の社長や社員のSNSでの発言から、今注目しているデザインのトレンドや技術などの興味関心、問題意識を把握できます。また文章として残っていないイベントでの発言で印象に残った一言など、本人も覚えていないかもしれない情報を知っていると「うちの会社にとても興味があるんだな」と思われるでしょう。

3.採用担当者が注目するポイントをつかむ




採用担当者は自社に合う人材かどうかを見極める際、知識やスキルといった「ハードスキル」だけを見て判断しているわけではありません。同時に、相手に配慮ができる人か、意思疎通しやすい人かといった「ソフトスキル」も必ず確認しています。ソフトスキルがポートフォリオから見えるの?と思われるかもしれませんが、確実に見えます。

例えば読みやすいボリューム、構成、レイアウト、文章かどうかでも読み手への配慮は十分推し量れます。また掲載している情報から、過剰に自分を良く見せようと飾ったり、曖昧な言葉で説得力が無かったりすると、ソフトスキルが弱い人なのかな?と思われます。特に緑の文字で示したあたりがポートフォリオからも見えると心得ましょう。

4.募集人材に求められるレベルを正確に把握する




企業の募集要項には「リードデザイナー」「デザイナー」「アートディレクター」など様々な名称があります。それぞれ求められるレベル感が異なることは分かると思いますが、応募する際にはポートフォリオの中でも、自分がそのポジションに見合った人材であることを証明しないと、選考通過の可能性が低くなります。

基本的には経験年数で求められる力は変わります。経験年数が短ければ、制作力は未熟でも努力できる、素直であることが求められ、逆に経験年数が長いほど、制作力があるのはもちろん、教育できる、チームを作って動かせる、といった力が求められやすくなります。この傾向を元に、ポートフォリオの内容を検討する必要があります。

5.未経験者枠に求められるものをつかむ





募集要項によっては「経験の有無は問いません」といった言葉があります。ここで言う経験はすなわち「実務の経験がない」ということなのですが、同じ未経験者でも興味を持たれる・持たれないが分かれるのはなぜでしょう。ここではAさんとBさん、2人の行動パターンを示しているのですが、2人の間にどんな違いがあるでしょうか。

Aさんは勉強への投資もせず、やっているのはスクールでの課題だけ、デザイン業界を知るための活動量も少なめです。かたやBさんは学びの投資もいとわず、自主的に何かを制作し、業界への興味関心も高く、それらの行動を裏付ける情報も語れる人です。同じ未経験でもBさんのような人なら「興味あり」と思われるのではないでしょうか。

制作編

6.読み手が理解しやすい順序・言葉・量を考える



ここから実際に制作する際のヒントになりますが、まず気をつけたいのは実績の「順序」「言葉」「量」です。採用担当者の多くは通常業務と採用業務を兼務している人が多く、忙しい人がほとんどです。そんな忙しい人が短い時間でも実力を理解してくれる「順序」「言葉」「量」とはどんなものなのでしょうか。

まず順序は何事も結論→詳細の順に伝えること、言葉は抽象的ではなく具体的に伝えること、量は多すぎず少なすぎず丁度良いところを見極めること、この3つが大切になります。私が作ったポートフォリオもこれを徹底しており、多忙な採用担当者に「分かりやすいな」「読みやすいな」と思っていただけるようにこだわりました。

まず順序の話。スキルを伝える際にも、まず冒頭で「自分はUIやビジュアル作りを中心としつつ、それらをとりまく5つのスキルで構成されている」という全体像を示し、その後それぞれのスキルについて詳しく紹介するページを設けています。読み手を安心させるため、まず最初に話の全体地図を見せてあげるのは有効な手段です。

こちらは実績を紹介する部分です。実際の案件について紹介し始める前に、まず冒頭に具体的な言葉で「私ができるのは〇〇〇、〇〇〇、〇〇〇です」といった形での説明を挟んでいます。実績ページの中からでもその人のスキルは推し量ることはできますが、最初に結論を示してあげた方が読み手が理解する負担を軽減できます。

こちらは実績紹介の詳細です。ここでも小さな文字を読ませる前にまずタイトルで、この案件で注目してもらいたいポイントを述べています。忙しい採用担当者は、沢山書かれた小さな文字すべてに目を通してくれるわけではありません。私は制作当時、このタイトルだけ読んでもらえれば理解してもらえるようにしておこうと考えました。


次は言葉。多くの人は、いかにも良いことを言ってそうな、それっぽい抽象的な言葉で説明しがちです。しかし採用担当者に選ばれるデザイナーの多くは、日頃から自分でも具体的な言葉でプレゼンしていることが多いため、応募者の言葉ひとつから説明能力の有無を見抜きます。日頃から具体的に言語化する能力を鍛えておくことが大切です。

最後は量。ここは人によって意見が分かれるため、一概に「〇〇件掲載するのが良い」と言い切るのは難しいところです。そこで私はTwitterで「何件見て通過・見送りを決めているか?」というアンケートをとってみました。すべて隈なく見る人が大半だったものの、次いで多いのは3~5件という結果は参考になるのではないでしょうか。

7.実績が少ない場合の対処を考える




制作期間が比較的長い案件が多い会社に所属し続けた場合や、経験年数が短い場合、自然と実績の数も少なくなります。しかしポートフォリオは実案件のみを載せなければならない、というルールはありません。自分が持てるスキルを証明できる情報なら、案件以外の実績も積極的に掲載して良いと、私は考えています。

例えば、実際に採用されなかった没案を、没になった理由を踏まえてブラッシュアップしたものを掲載するのもアリですし、世にあるWebサイトを自分なりに分析し「自分ならこう作る」と改善案を作るのも良い試みです。またプライベートで何かこだわりを持って作っているものがあれば、作り手としての熱意を証明する上で有効です。

8.制作実績以外に掲載できることを考える




「4.募集人材に求められるレベルを正確に把握する」でも触れましたが、経験年数が長くなるほど組織に貢献する力も求められやすくなります。そういう意味でも案件だけでなく、組織の生産性を向上させるためのスキル・実績を掲載するのも有効です。多くの場合は面接時に聞かれるのですが、それをポートフォリオで先に見せるのです。


組織に貢献する力とはすなわち、他者を巻き込んで生産性を向上させる働きです。後輩への指導、積極的な情報収集と組織内への共有、勉強会の企画・実施、車輪の再発明を防ぐ工夫など、ここで紹介したもの以外でも沢山あるはずです。ポートフォリオ作りをきっかけに自分自身の活動を振り返り、言語化しておくのも大切な営みと言えます。

9.ポートフォリオを第三者にレビューしてもらう






頑張って作ったポートフォリオは思い入れも強いため、特にレビューなどもなく転職活動に利用することが多いと思います。しかしポートフォリオに限らず、作ったものを客観的に見るのは大切で、自分では気づかなかった粗が必ず見えます。自分以外の誰かにレビューを依頼するのは、選考通過率を上げるためにも大切なのです。

身近にレビューしてくれる人が居ない場合も、有料レビューサービスやキャリアカウンセラーに見てもらう方法があります。またSNSで尊敬するデザイナーにレビューをお願いする手もあります。Twitterでアンケートをとりましたが、五分五分の確率で見てもらえるかもしれないという結果でした。思い切って依頼してみるのも良いでしょう。

10.選考で損をするNG手法






最後は選考を通過しない人に共通する「NG集」です。採用担当者はポートフォリオの表面的な美しさだけを見るのではなく、そこに記された情報の裏にある「採用希望者の人柄」を見ます。採用活動は事業を継続する上でも土台作りに等しいため、誤魔化しや偽りを見抜く上でも、厳しい視点で内容を精査しています。

最後に


あらためて結論です。ポートフォリオは採用担当者の視点を踏まえて作ることで、確実にブラッシュアップすることができます。ここで挙げた10のヒントを参照することで、転職希望者の方々の選考通過率が高まることを願っています。

お知らせ

この記事内容を話したセミナー動画を無料でご覧いただけます

本記事の内容を私が話しながら説明した動画が、今日から7日間限定でWEBSTAFFのサイトから配信されます。文章で読んでいただくよりも分かりやすいと思いますので、より詳しく理解したい方はぜひこちらをご覧ください。

【7日間限定録画配信】元UI/UXデザイナー採用担当が教える!ワンランク上のポートフォリオ作り10のヒント

Clubhouseで限定イベントを開催します

特別企画として3月19日(金)の20:00からClubhouseにて「NTT Com「KOEL」荒砂氏と語る!デザイナー転職、ココだけの話【ポートフォリオ編】by WEBSTAFF」というイベントを開催します。このポートフォリオ作りのイベントを企画してくださったWEBSTAFFの石川さんと、ポートフォリオ作りに関してあれこれと雑談する予定です。当日は私以外でデザイナー採用に関わっている方もゲストとしてお話いただく予定なので、そちらもぜひチェックしてみてください。


NTT Com「KOEL」荒砂氏と語る!デザイナー転職、ココだけの話【ポートフォリオ編】by WEBSTAFF

月に一度「NeWork」でデザイナーのゆる飲み会やってます

昨年から開催していたデザインシステム雑談会に集っていただいた方を中心に、今年に入って毎月いろんな会社のデザイナーが集まれるゆるいオンライン飲み会を開催しており、次回は【3/26(金)】に開催します。ちょっと変わっているのが、集まりの場をNTT Com が制作しているオンラインワークスペース「NeWork」を使っている点で、色々とある小部屋に自由に出入りしたり、気になる部屋に聞き耳を立てたりといった楽しみ方ができて、過去に開催した際にもとても盛り上がりました。デザイナーという言葉に興味を持たれる方であればどなたでもご参加OKです。私のTwitterアカウント宛にDMいただければお誘いします!

ポートフォリオ作りでお悩みの方はこちらの記事もどうぞ

元デザイナー採用担当が教える、選考通過率の高いポートフォリオ作成術


NTT Communications のデザインスタジオ KOEL に入社しました


入社日から時間が経ってしまいましたが…。9月1日からNTTコミュニケーションズのデザインスタジオ「KOEL」にUIデザイナーとして入社しました。KOELという名を初めて聞いたという方も多くおられるかと思います。KOELは2020年4月にNTTコミュニケーションズ社内に設立された、デザインを専門とする組織です。

チームにはNTTコミュニケーションズ、NTTグループ内でデザインの浸透に邁進してきた鉄人の方々、若くて有望なデザイナーたちが、日々社内外の様々なプロジェクトにデザインの力を発揮しようと邁進しています。そんな中で私もUIデザイン領域の専門家として、早速いろんなプロジェクトに関わらせていただいています。

KOELという名はちょっとユニークですが、この名前になんとなくピンと来るところがありました。聞くとこの名前には、あらゆるものを「超える」という意味が込められているとのことでした。ロゴには真ん中に斜めの切込みが入っていますが、この角度は人が物を投げる時に最も遠くへ飛ばせる40.89°になっているそうです。

NTTグループは元々国営でもあり、多くの大企業の中でも特に、お堅い、古い、といったイメージが私の中にもありました。そんな前提がありながらも、チームのメンバーと会話を重ねれば重ねるほど、NTTっぽいイメージではなく、良い意味でNTTらしくない、新しいイメージが自分の中に築かれていくのが分かりました。

NTTコミュニケーションズは通信事業の分野でまさに「社会のインフラ」を支える企業。民営でありながら、ある種の使命感が期待される企業でもあります。そんな中、デザインの力でお堅い社内の成約、古い価値観、社会における常識を超え、そして通信事業分野として物理的な距離を、デザインの力で超えることを信じる人がKOELには集まっています。

…と、かなりカッコよさげな話をしていますが、ジョインしてみてまだまだそうした理想に及んでいない部分も見てきました。巨大な組織の中でデザインを根付かせる活動は、予想以上に草の根的な動きが必要になる部分もあり、これまで自分が悩んだことのない問題にも早速ぶち当たりまくっています。

しかし、仲間として受け入れてくださったチームの方々は、皆デザインにおけるどこかしらの領域のプロフェッショナルでありつつ、自分たちの組織に誇りを持っていて、フランクで前向きで、一緒に問題を解決していこう!と協力しあう、ポジティブな空気が漂っています。コロナ渦でリアルに会ったことも無い人がいるにも関わらず、このチームワーク感は半端ないです。

社会インフラの常識を超えるなんて、自分ひとりの力では到底難しい話です。しかし、NTTコミュニケーションズの各領域のスペシャリストと、デザインを専門とするKOELが力を合わせれば、理想として掲げる「Smart World」の実現に、自分も少しでも貢献できるのでは?と思ったりもしています。

最後に所信表明的な話で、ちょっとした夢を語っておきます。3年以内でどのくらい目標達成できたか、また振り返ってみたいです。

  • コーポレートサイトのリニューアル
  • 各種プロダクト、webサイトのデザインガイドラインの整備
  • 新規事業立ち上げに関わるプロダクトのUI制作
  • 社内における「分かりやすく美しい提案資料」制作力の向上
  • 社内における「webサイト制作力」の向上
  • デザイン業界でのKOELのプレゼンス向上
  • KOELで一緒にUI領域を広める仲間を採用
  • 何かしらデザインに関する書籍の出版

KOELについて詳しく知りたい方は、ぜひ以下のリンクをご参照ください。それでは今後とも荒砂とKOELをよろしくお願いします!

KOEL DESIGN STUDIO by NTT Communications
note KOEL
note KESIKI | カルチャーデザイン03 チームへの誇り


元デザイナー採用担当が教える、選考通過率の高いポートフォリオ作成術


ここ最近、転職するにあたって約10年ぶりにポートフォリオを作りました。私は元々ポートフォリオ作りが苦手で、力が入りすぎていつまでたっても完成しない…といった状況になりがちだったのですが、今回はわりとすんなり完成しました。

その理由は、ここ数年でデザイナーの採用に関わり、採用担当者の目線で沢山のポートフォリオに目を通す機会が増え、作成において気をつけなければならない点がなんとなく分かるようになったからだと感じています。

そこで今回は、こんなポートフォリオなら選考を通過しやすいのでは?と思うことをまとめてみたいと思います。尚、考え方は企業や採用担当者によって異なるので、あくまでも個人の考えとしてご参照ください。

作成前に踏まえておきたい認識

そもそもポートフォリオとは

まず辞書で「ポートフォリオ」の意味を調べてみると、「紙挟み」「折鞄(おりかばん)」とあります。これは書類をまとめて入れておくケースのようなもので、必要に応じて書類の差し替えができるものです。

過去の私を含め多くの人が、ポートフォリオは一つの完璧な完成品を作るもの、と誤解している節があります。しかし元々の意味合いを踏まえても、提示する相手によって都度内容を調整するもの、というのが正しい認識です。

就職活動で使うポートフォリオなら、受ける企業の業務に合わせて掲載内容や掲載順を調整すべきですし、営業ツールとして案件を受注するためのポートフォリオなら、ターゲットとする顧客の悩みに近い参考事例を中心に掲載することになります。

ポートフォリオは「作品集」ではなく「解決事例集」


ポートフォリオはデザイナーの作品性・作家性を相手に見せつけて優越感に浸るものではありません。課題解決のステップや考え方と共に最終的なアウトプットを事例として見せ、相手に安心してもらうためのツールです。

上図の上半分のように「自分の実績を見てくれ!」という気持ちが優先されると、受け手に響きにくくなります。逆に「私と仕事をすれば具体的にこんなことをするのでメリットがありますよ」と伝えられると、良い結果に結びつきます。

見る側の視点に合わせ、どんな絵や言葉が入っていたら、自分という人材が役に立つと思われるかを、とことん突き詰めて考える必要があります。

採用担当者の興味を引くための5つのコツ

1)構成要素はプロフィール1割:実績9割にする


上図のように、転職活動で必要になる書類はポートフォリオ以外にもいくつかあって、それぞれに役割があります。実績以外は履歴書や職務経歴書で満たされるので、ポートフォリオには実績のみを掲載するのが合理的です。

とは言え、名前を含む簡単なプロフィールくらいはあった方が親切なので、それらを1割程含めたバランスが良いと思います。くれぐれも不要な情報でページ数をかさ増ししないようにしましょう。その方が採用担当者の確認の負担も少なくなります。

2)自分語りは書類選考通過後にする


選考ステップで初めてポートフォリオを目にする書類審査では、何よりもまず実績が求めるレベルに適っているかを見定めます。そのため、志望動機を除いて上図のような「自分語り系コンテンツ」は読み手にとって優先度が低い情報になります。

書類審査を通過して実際に面接で顔を合わせる時に、十分に詳細を伝える機会があるので、ポートフォリオの中では長々と語らないようにしましょう。もし語るとしても、ボリューム少なくサラッと見せるようにしましょう。

3)企業と自分の特性が重なる案件を目立たせる


前提でお伝えした通り、ポートフォリオの役割は「この人と仕事をすれば自社にメリットがある」と感じてもらうことです。そう考えると、受けようとしている会社の実績と近い実績が目立っていた方が、受け手としても入社後の活躍を想像しやすくなります。

例えば、インタラクティブ性の高いキャンペーンサイト作りが得意な制作会社に対して、コーポレートサイトの実績を強調して掲載しても、「この人を採用して活躍してくれるのだろうか…?」という気持ちにさせてしまいます。

対象企業の業務内容や実績をよく確認し、企業の強みと自分の強みが重なる実績を中心に掲載することが大切です。

4)未踏の領域にチャレンジする際は自主製作を含める


しかし、グラフィックデザイナーからwebデザイナーに転身する場合、LPなどが得意なデザイナーがプロダクト系のUIデザイナーを目指す場合など、対象企業の得意領域に対して、自分の経験や実績がマッチしない場合もあります。

新たな領域にチャレンジする勇気は素晴らしいものですが、採用担当者の気持ちとしては「いくらこの領域に強くても、うちの得意領域で強みを発揮できるのかな…」と不安になるのが正直なところです。こんな時に有効なのが、自主制作の実績です。

例えばUIデザイナーを目指すなら、Daily UIで作った100画面を並べるのも良いし、web制作経験がないけどwebデザイナーになりたいなら、自分なりに企業サイトのリニューアルデザインを作って掲載するのも良いかもしれません。

精神論的な言葉になりますが、採用担当者に「熱意」を届けるのはとても大切です。ここで言う熱意は一重に「数」と言えるでしょう。とにかく、誰が見ても驚くほど沢山の自主制作を掲載すれば、採用・不採用はともかく、熱意は必ず伝わります。

圧倒的な数が見えると「実績はないけど、ここまでやる気があるなら入社しても頑張る人なのかもしれない…話を聞いてみようかな」と考えてもらえるかもしれません。

5)体裁も自分の強みを見せる手段ととらえる


ポートフォリオの体裁について、webデザイナーだからブラウザで見れる形式の方が印象が良いのでは?紙にプリントしたポートフォリオが無いと手抜きと思われるのでは?といった悩みはないでしょうか。

実際のところ、こんな形が最適という答えはありません。採用担当者は、どんな体裁でまとめているかよりも、自分の能力をうまくプレゼンテーションするために最適な体裁を選べているか、に注目します。

例えば開発もデザインも両方極めたいなら、ブラウザで確認できるポートフォリオがあった方が強みを証明できます。紙媒体とweb媒体、どちらも極めたいなら、HTML版と表紙や紙にこだわった冊子版、両方作った方が強みを理解してもらいやすくなります。

また、書類審査が通って対面での面接になった時、どんな形がプレゼンしやすいかを考えておくのも大切です。プレゼンの場では自前のPCにポートフォリオを映して見てもらうのがベストの自己紹介方法なら、紙のポートフォリオは不要でしょう。

また、オンラインのポートフォリオ作成サービスを使う手もあります。個人的には、デザイナーなら見せ方にも独自のこだわりを持ってほしい気がしますが、求めるレベル感に対する実績が伴うなら、問題ないとも思います。

ポートフォリオの作例


ポートフォリオサンプル(PDF形式:6MB)

ここからは実際にポートフォリオの作例をご紹介します。上記のリンクからPDF形式でご覧いただけます。このサンプルは私の直近のポートフォリオをベースにしたもので、いくつかの部分をダミーのサンプルに置き換えたものになります。

サンプルと実際の私の実績が混在しますが、画像マークやダミーと書いた部分は仮のものと認識いただければと思います。本来なら転職用に作ったものをそのままお見せできればよいのですが、非公開も含まれるため、こんな形をとらせていただきました。

とはいえ、何も画像がないとイメージしづらい部分もあるので、2011年以前に関わった昔のプロジェクト画像で一部使えそうなものは掲載しています。古い案件イメージでちょっと恥ずかしいのですが、何卒ご了承ください。

もしも私が実際に関わった直近のプロジェクトが気になる方は、株式会社ベイジの実績ページをご確認いただいて、各ページの制作クレジットから私の名前を探していただけると嬉しいです。

尚、私は開発力に強みがないことや、面接の場でスライド形式での説明したいと考えていたため、すべでPowerPointで作成しています。

全体構成


全体の構成は5つに分かれており、レスポンス広告のセオリーである結果、実証、信頼、安心の流れをになっています。これは購入や申し込み、問い合わせをより多く獲得する上での情報設計の基本で、webサイトや広告でもよく取り入れられています。

表紙


ポートフォリオは作品集ではないとお伝えしましたが、それは無個性とイコールではありません。採用担当者は連日多くのポートフォリオに目を通すため、一目見て「何かセンス良さそう…」と感じると、中身をじっくり見ようという気持ちになります。

表紙の役割は、中身に興味をもってももらうためのきっかけ作りです。私のポートフォリオの表紙が皆さんの目にどう映るかは分かりませんが、目指したところは「なんとなくセンス良い人かも…」と思わせるところでした。

ちなみに、一応このビジュアルの意味もあります。デザイナーは複雑な物事をシンプルで分かりやすく伝える仕事なので、複雑な要素とシンプルな要素が共存したビジュアルになっています。

特長(結果:自分に何ができるのか)


まず特長パートで、端的に自分にどんな能力があるのかを伝えます。最初にフィロソフィーという形でメッセージを入れ、自分の力を3つにまとめて説明しています。このパートで、この後どんな実績があるのかを予測できるようになっています。

物事を分かりやすく伝えるコツは、大枠→詳細の流れで説明することです。本に目次があるように、人は最初に全体像を見通すことができると、安心して次の話を聞く心の準備ができるのです。

スキル(結果:さらに具体的に何ができるのか)


ここでは先に挙げた3つの特長を、実際のスキルという切り口で形を変えて伝えています。UI・ビジュアルデザインを中心に、プロジェクトマネジメント、ブランド設計、ライティング、情報設計、UXリサーチと、図解で先に全体像を示しています。

その後は、それぞれのスキルをさらに具体的な言葉で伝えています。各説明文に加えて、具体的なアウトプット、利用するツールなども含め、より対応できる内容をイメージしてもらいやすくしています。

またここでは見る人を退屈させないために、目を惹くビジュアルを組み込んでいます。文字だらけのプレゼン資料は飽きてしまうので、適度に退屈させないための工夫を入れるようにしています(UI・ビジュアルデザインの画像は2011年以前の実績です)。

実績:デザイン(実証:どのように実行するのか、したのか)


ここから実績紹介です。前段と同じく先に全体像として、私の場合は実績に3つのカテゴリがあることを伝えています。また一つ工夫している点として「私にできるデザインとは」という見出しで、できることを具体的に言語化したページを作っています。

忙しい採用担当者はとにかく結論を知りたがっています。採用希望者の方からあらかじめ、自分にできること具体的な言葉でまとめておくと、採用担当者が多くの実績から自分の目と頭で特長を把握する手間や負担が少なくなります。

そしてこちらが代表的な実績です(掲載実績情報はすべてダミーです)。思い入れのある実績が沢山あっても、忙しい採用担当者はすべてに目を通さない可能性もあります。見る人に負担を考慮して最低限見て欲しいものを選びぶのが良いでしょう。

各実績の1ページ目は、大見出しでプロジェクトの概要を伝え、詳しい状況説明を箇条書き3つでまとめます。加えて制作期間、担当領域、URLと、ここも大枠の概要から少しずつ、内容をブレイクダウンして説明する形になっています。

そして2ページ目は各案件ごとに、特に自分のこんなスキルが役立った、こんな点を工夫した、という解説を掲載しています。ここが特に案件紹介の肝で、採用担当者が最も興味を持つ部分になります。

代表実績の選定基準も重要です。サンプルの場合、1ページ目で対応可能なwebサイトの幅広さを、2ページ目で得意とする作業の幅広さを、それぞれ満たした選定になります。基準は自分のスキルを最もうまく説明できる組み合わせで選ぶと良いでしょう。

その他の多くの実績は得意領域ごとにカテゴライズして、小さなサムネイルでサッと見てもらえるようにします。ここで印象付けたいのは各案件の品質ではなく、経験が豊富にあることです。

実績がこれ以上の数になると、採用担当者の貴重な時間を無駄にし、確認の負担を増やします。この時点で興味を持ってもらえて面談に臨めるなら、面接の場でさらに色んな案件を見てもらっても良いでしょう。

実績は内容によってフォーマットを変えると良いでしょう。私の場合はロゴ制作にも強みがあるため、それらを紹介するページも設けています。これらも流れは同じで、主要案件を強調して見せた上で、その他は流し見できる作りになっています。

実績 – ライティング・登壇(信頼・安心:第三者視点でどんな評価か)



ライティング・登壇以降のページは実際の私の実績になります。

私のスキル含まれるにライティングと登壇は、デザイン制作実績のような実際の技術とは違った側面を持ち合わせています。SNSでの記事のシェア数や書籍への寄稿などは、第三者からの評価を証明するものでもあるので、信頼・安心を担うコンテンツとしてここに掲載しています。

各実績ともに、できるだけ見出しやタイトル画像、写真を露出させ、実際の記事URLを辿らなくても内容が理解できるようにしています。忙しい採用担当者は詳細URLまで目を通す可能性は低いため、こうした配慮はとても大切です。

プロフィール


プロフィールは最後の最後に1ページだけ設けています。ページ数は少ないのですが、本当に興味を持ってくださった方がさらに私のパーソナリティを追えるよう、各種SNSやブログへのリンクを設置しています。

まとめと補足

提出前のチェックリスト

以上が、私が考える採用担当者に理解してもらいやすいポートフォリオの作り方でした。チェックリストとしてまとめると以下のようになります。作成時に見合わせると、改善のヒントが見つかるかもしれません。

  • 内容の割合はプロフィール1割:実績9割になっている
  • 全体の構成は結果、実証、信頼、安心の流れになっている
  • 転職しようとする企業の事業内容に合わせた実績を掲載している
  • 未踏の領域に転職する場合は熱意が伝わるボリュームで自主制作を掲載している
  • 最も見てもらいたい実績は5つ程度に絞り、各案件を詳しく紹介している
  • 内容説明は、まず全体像を伝えてから詳細を語るようにしている
  • 制作実績には制作期間、担当領域、実物が確認できるURLを記載している
  • 第三者からの評価が分かる情報(ブログ記事、登壇、受賞歴)を掲載している
  • 自分のパーソナリティをさらに確認できる情報にリンクさせている
  • 体裁は、自分の強みが伝わること、面接でプレゼンしやすいことを考慮している

とは言え、ポートフォリオの表現に制限はありません。要は自分の魅力が担当者や企業にしっかり伝わるようなアプローチ方法を意識して選べるかどうかが大切です。

新卒デザイナーは例外

尚、ここまで長々とテクニカルな話をまとめましたが、新卒でデザイナーを目指す人のポートフォリオに限っては、ここまでの配慮は求めません。粗削りでも、モノづくりに対する情熱が見えれば、それだけでポテンシャルを見込まれる可能性があります。

逆に言えば、数年でも現場でデザイナーを経験している場合、転職時に自分本位で見る人への配慮が足りないポートフォリオのまとめ方をしていると、実際のデザイン業務でも配慮が足りない人なのでは?と思われる可能性もあります。

ポートフォリオが良くても選考を通過できない場合もある

ポートフォリオ以前に一つ把握しておきたいことがあります。それは、企業はチームの構成バランスを考えた上で求人を出しているため、募集中のスポット枠も数が限られているということです。

スキル的に申し分無くても「丁度昨日、枠が埋まってしまった」となると、選考を通過できなくなります。またスキルが募集要項に対してオーバースペックすぎてもマッチしない場合があります。

最後に

ここでまとめたことでもそれ以外でも、ポートフォリオの作り方について質問してみたいことがあれば、Twitterからお気軽にご連絡ください。受け手の気持ちを考えたポートフォリオを作って、ぜひ転職を成功させてもらえればと思います。

荒砂智之のTwitterはこちら

お知らせ

この記事内容に関連したセミナー動画を無料でご覧いただけます

本記事に関連したセミナー動画が、今日から7日間限定でWEBSTAFFのサイトから配信されます。よりポートフォリオ作りでヒントを得たい方はぜひこちらをご覧ください。

【7日間限定録画配信】元UI/UXデザイナー採用担当が教える!ワンランク上のポートフォリオ作り10のヒント

Clubhouseで限定イベントを開催します

特別企画として3月19日(金)の20:00からClubhouseにて「NTT Com「KOEL」荒砂氏と語る!デザイナー転職、ココだけの話【ポートフォリオ編】by WEBSTAFF」というイベントを開催します。WEBSTAFFの石川さんと、ポートフォリオ作りに関してあれこれと雑談する予定です。当日は私以外でデザイナー採用に関わっている方もゲストとしてお話いただく予定なので、そちらもぜひチェックしてみてください。


NTT Com「KOEL」荒砂氏と語る!デザイナー転職、ココだけの話【ポートフォリオ編】by WEBSTAFF

月に一度「NeWork」でデザイナーのゆる飲み会やってます

昨年から開催していたデザインシステム雑談会に集っていただいた方を中心に、今年に入って毎月いろんな会社のデザイナーが集まれるゆるいオンライン飲み会を開催しており、次回は【3/26(金)】に開催します。ちょっと変わっているのが、集まりの場をNTT Com が制作しているオンラインワークスペース「NeWork」を使っている点で、色々とある小部屋に自由に出入りしたり、気になる部屋に聞き耳を立てたりといった楽しみ方ができて、過去に開催した際にもとても盛り上がりました。デザイナーという言葉に興味を持たれる方であればどなたでもご参加OKです。私のTwitterアカウント宛にDMいただければお誘いします!

ポートフォリオ作りでお悩みの方はこちらの記事もどうぞ

デザイナー採用担当が教える!ワンランク上のポートフォリオ10のヒント


ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました

デザイナーではない方にもデザインの原則を分かりやすく解説した名著「ノンデザイナーズ・デザインブック」が発売されて20年。この記念すべき節目を迎えるにあたり、期間限定で特典PDF(非売品)プレゼントキャンペーンが行われます。

この特典は「The Non-Designer’s Design Book Missing Pages 2018」と題され、「本書が2018年に書かれたら」「自分が書いたとしたら」という視点で、18名のデザイナーが本書のためだけに書き下ろした内容が掲載されています。光栄なことに、今回私もこの特典PDFの制作に関わらせていただきました。

こちらはキャンペーン期間中、Twitter、Instagram、Facebookなど各種SNSでノンデザイナーズ・デザインブックに関するコメントをハッシュタグ「#ノンデザ20周年」を入れて投稿した上で、専用の応募フォームから応募すると特典ダウンロードURLが届く、というルールです。ぜひご興味のある方はコメントを投稿して応募してみてください。

応募フォームがどこにあるの?というツイートを見かけましたので、こちらにもリンクを掲載しておきます。

ノンデザイナーズ・デザインブック20周年記念特設サイトはこちら
特典PDF「Missing Pages 2018」応募フォームはこちら

本書の出会いはキャリア10年を超えた頃

私が本書の凄さを実感したのはデザイナーとしてのキャリアを10年以上重ねた30歳の頃と遅めでした。当時、自分の経験則を元に感覚的にレイアウトを考えることが多かったのですが、感覚値であるが故、正確さ、一貫性、再現性が弱いことに悩んでいました。そんな時に手に取ったのが本書(ちなみにカバーはオレンジのバージョン)です。

紹介される「4つの基本原則」を読み進めるにあたり、自分がそれまで「なんとなくこっちの方が良い」と判断していたことに対して、なぜそうするのが良いのか、なぜそうしない方が良いのかが詳しく言語化されており、キャリア10年の中で経験してきた細かな悩みがひとつひとつ解消され、とても腹落ちしたのを記憶しています。

本書は私のケースように、ある程度キャリアを重ねる中で積み上げてきた失敗が先にあり、どこかで自分のデザイン力に、正確な判断、安定したクオリティ、成功パターンの再現性の難しさに壁を感じた人が、改めてデザイン力の土台を再構築する際にも、絶大な力を発揮する良書です。

そうした意味でも初学者の方だけでなく、デザイナーを続ける中でまだ本書に目を通したことの無い方にも、改めて手にとっていただきたいと思います。

また私の場合はこちらのブログ記事「ウェブデザインに応用するデザインの4つの基本原則」を自主的にまとめたことで、さらに基本原則の理解を深めることができました。ピックアップしているサンプル表現が少し古いですが、ぜひこちらもご一読いただけるとより一層理解が深まるかと思います。

ウェブデザインに応用するデザインの4つの基本原則

18名のデザイナーが共同執筆した特典PDF「Missing Pages 2018」

私はこの企画の中で「わかりやすい図の作り方に応用する基本原則」と題し、作図する際にどのような視点でデザインの基本原則を考慮しているのかを、サンプルの解説を中心に4ページほど執筆させていただいています。

多くの方に御覧頂いた「誰も教えてくれない『分かりやすく美しい図の作り方』超具体的な20のテクニック」の中では細かく触れなかった、デザインの基本原則について少し掘り下げており、どちらかと言えば初学者の方に見ていただきたい内容です。主に以下のような内容について説明しています。

  • 本当に伝えたいことをひとつ見つけ出す
  • ルールと要素を可能な限り減らす
  • 図に個性を出さない
  • 言葉をコントロールする

その他、私以外の名だたるデザイナーの方々が執筆された内容も、それぞれ独自の視点が交えられていて、とても読み応えがあります。過去にノンデザイナーズ・デザインブックをお読みいただいた方にも、ぜひご覧いただけると嬉しく思います。

セミナー「ノン・デザイナーズ・アカデミア」も開催予定

このプロジェクトに関連して、6月にセミナーも開催され、私もそこで登壇させていただく予定です。内容についてはまだ検討中ですが、本書をお読みいただいた方の学びがさらに深くなるような内容にしたいと考えています。お時間ある方はぜひそちらにもご参加いただければと思います。

最後にこのプロジェクトにお声をかけていただいた株式会社スイッチ鷹野雅弘さま、出版を担当されている株式会社マイナビ出版角竹輝紀さま、また共に執筆に参加されたデザイナーの方々に、改めてお礼を申し上げます。キャンペーンはまだ始まったばかりですので、引き続きよろしくお願いいたします。

ノンデザイナーズ・デザインブック20周年記念特設サイトはこちら
特典PDF「Missing Pages 2018」応募フォームはこちら


UIデザイン提案に不可欠!顧客の納得度を上げるために意識すべき4つの条件(スライド付)

去る6月22日(木)に渋谷で行われた、株式会社アジケ主催のイベント「UX dub〜UX/UIの現場、最前線〜」に登壇させていただきました。今回のエントリーはこのイベントで発表させていただいた内容のフォロー記事になります。

日頃のクライアントへのUIデザインの提案において、なかなか作ったものに対して納得していただけない、スムーズに話が進まない、といった状況は、誰しも経験するものかと思います。しかし近年、私自身の経験を振り返ると、以前に比べてスムーズに提案が進むようになったと感じていました。

そんな時にお誘いいただいた、このイベントの「UX/UIの現場、最前線」というキーワードを聞き、私の所属するベイジではどのようにパートナーをリードしてUIに落とし込んでいるのか?をお話してみようと思いました。

この内容について、我々が作るWebサイト自体のUXやUIを深く追求することももちろん大切なのですが、そこに加えて我々自身がクライアントに最良のCX(カスタマーエクスペリエンス)を与えることも大切だと考えています。そこから、主に以下4つの内容でお話させていただきました。

  • 1)良好な関係性を築きやすい顧客を選んでいるか
  • 2)顧客が安心できる進行を心がけているか
  • 3)論理的なデザイン提案を行っているか
  • 4)専門家としてリーダーシップを発揮しているか

1)良好な関係性を築きやすい顧客を選んでいるか(P15)

企業に所属する個人のデザイナーで関与できる人は限られますが、良好な関係性を築けそうな顧客を選んで仕事をすることは、プロジェクトを円滑に進める上でも非常に重要なポイントです。計画性が低く、制作会社を下に見ているクライアントからプロジェクトを受注すると、スムーズな進行が阻害される危険性があるということです。

ベイジではプロジェクト開始前にここを厳しくジャッジしているため、クライアントから不条理な難題を押し付けられることもなく、建設的にプロジェクトを進めることができています。実はここをしっかり抑えている会社は、デザイナーにとっても非常に仕事がしやすい環境であると言えるのです。

しかし、ジャッジする以前に問い合わせ自体が少なければ、仕事を選り好みすることはできません。そこで必要になるのが、戦略的にクライアントになりうるターゲットに対して、常日頃から自分たち自身の強みを積極的に発信し続ける行動です。オンライン・オフライン問わず様々なチャネルから自分たちの強みを可視化しておくことで、プロジェクトを進める段階で良好な関係性を築きやすくなります。

UIデザインを提案する以前に、そもそものところでこの道筋を作っているかどうか、道筋に沿って強みを理解してくれている顧客を引き寄せているかが大切になるのです。

2)顧客が安心できる進行を心がけているか(P22)

プロジェクトを通して、常にクライアントは不安を感じているものです。提案内容自体のクオリティの高さは当たり前に求められるものとして、その上でクライアントに安心してもらえるような質の高いコミュニケーションを心がけることも、提案内容の納得感に間接的に影響を与えると考えています。

その点、コミュニケーションは非常に属人的になりがちです。上流工程から下流工程に渡って、人が変わっても質の高いコミュニケーションを継続するためには、チーム全体でクライアントにどのように対応すべきか?を共有しておく必要があります。具体的に言えば、以下のようなコミュニケーションルールを整備しておく、ということです。

  • プロジェクト定義書の共有
  • WBSによるスケジューリング
  • メールは誰かが1時間以内に一時返信
  • 打ち合わせ前日までに当日の確認資料とアジェンダを共有
  • 打ち合わせ後は1営業日以内に議事録を共有
  • 必要事項はWBS以外にイシューリストで担当者と機嫌を明確化
  • 行動指針と日報で何のためのルールかを認識

実はここでお伝えしている内容は、ベイジのコーポレートサイトの中でお客様向けに紹介しています。我々自身が約束する行動を、プロジェクトが始まる前段階で見える化しておくことも、一つのコミュニケーション作りと言えます。こちらでさらに詳しくその内容を紹介していますので、ぜひご覧ください。

プロジェクト管理 | 株式会社ベイジ

3)論理的なデザイン提案を行っているか(P29)

ベイジではデザイン提案の際、完成したビジュアルだけを見せるようなことはありません。提案したデザインに対して、なぜこうすべきなのか?を論理的に説明します。プロジェクトやクライアントの特性によって順序や内容は変わりますが、代表的な説明事項として以下の5つをご紹介しました。

デザインの役割定義(P31)

UIデザインはコンテンツ、構造、機能、情緒表現の4つで構成されています。その中でも、提案するビジュアルデザインにおける役割は機能と情緒表現になります。この話を最初にクライアントと共有しておくことで、デザインの見た目の表層的な部分(機能や情緒表現)と内容自体の根本的な部分(コンテンツや構造)の問題は分けて考えましょう、と話ができるようになります。

ターゲットの再確認(P35)

ベイジでは戦略提案の時にターゲットを定義して共有していますが、デザインを提案した際には、個人的な好みの話、抽象的な感性の話、なんとなく好き(嫌い)といった話が出てきがちです。そうした際に事前に定義したターゲットを振り返り、作り手である我々がどう思うかではなく、ターゲットならどう考えるか?という視点に立ち返りましょう、と伝えるようにしています。

ブランドの明確化(P41)

ブランドは基本的に目には見えので、具体的な言葉にして共有しておく必要があります。ベイジではクライアントのブランドを、属性・ファクト(誰も否定できない事実)、機能ベネフィット(機能面での効能や作用や利便性)、情緒ベネフィット(顧客が受ける精神面での便益)、ブランドパーソナリティ(ブランドを擬人化するとどういう人なのか? )、ブランドタグライン(ブランドの約束)で構成されるピラミッドに構造化して共有しています。

トレンドやセオリーの啓蒙(P45)

クライアントによっては最近のWebデザインの特性を知らないこともあります。タッチデバイスの普及によるUIの大きさの変化、マルチデバイス化に伴うデザインのシンプル化をはじめとした、技術革新によるUIデザインのトレンドやセオリーの変化の話です。これらあらかじめ説明しておくことで、提案するデザインに妥当性が生まれ、認識の違いによる無駄な議論を回避することができます。

デザインの提案(P50)

実際のデザイン提案の際に気をつけるポイントは3つあります。1つは提案の幅をもたせること。提案物の数を増やせばいいという話ではなく、クライアントが予想しない部分まで考え抜かれていないとデザインに対する納得感というものは得られにくいものです。そして2つ目は意味をきちんと説明すること、3つ目は対面することです。経緯や意図を、必ず会って説明することが大切です。

4)専門家としてリーダーシップを発揮しているか(P57)

この「専門家としてのリーダーシップ」が特に、クライアントにデザインを納得してもらう上で大切になるポイントです。クライアントは我々に対して専門家としての意見を求めているため「この場合◯◯するのがベストです」「◯◯と考えるべきです」と自信を持って対応できなければなりません。

具体的に言えば、言われたままの要望をそのまま返すような行為、こういう姿勢であればあるほど、提案は後手後手にまわって、クライアントの信頼は獲得できなくなります。また、もしもクライアントの認識が間違っていれば指摘してがあげる態度も必要です。

そして、専門家びいきな説明をしない、という点も重要です。「デザイン的に見るとこれが優れている」とか、「デザイナー的にはこうした方がいい」といった、根拠のない話は回り回って提案物の評価に悪影響を及ぼします。

まとめ

Webサイトを作る作業は、デザインデータやHTMLを作ることだけではなく、クライアントとの関係性や、チームの関係性を作ることも含まれます。単純にブラウザに映し出される絵だけを作るという意識を変え、それらを作るために関わる人々とどのような関係性を築いていくか、という部分まで配慮することで、クライアントからの信頼を得ることができるのではないでしょうか。

UX dub について







※掲載写真はすべてアジケさん撮影

今回はアジケさん初主催のイベントで、告知当初からUX/UIに関心の高い多くの方々から多くの申し込みがあり、結果的に大盛況のイベントとなりました。このイベントの趣旨を、アジケの神田淳生さんから以下のように伺っています。

dubとはレゲエ用語で、曲をリメイクすること。UXの視点を活用してWebサイトやサービスをより成長させることや、クリエイターが集まって一つのサービスを(リ)メイクすることをイメージして付けたタイトル。

アジケさんのオフィスではBGMにdubを流しているというところから、イベントの最中も緩いdubのBGMが流れており、非常にアジケさんらしい、緩やかなムードのイベントでした。今後もこのイベントは継続的に開催されるとのことです。

今回一緒に登壇されたのは、オハコ菊池涼太さん、アルチェコ熊澤宏起さん、スタンダード鈴木健一さん、そしてアジケの梅本周作さんといった面々で、各社の業務を通じたUX/UIに関する、まさに最前線の情報が語られました。私がお話した内容以外の部分は、すでに仕事の早い方々がまとめてくださっていますので、こちらに関連情報として掲載する形とさせていただきます。

今回の登壇の機会を与えていただいたことで、私自身が日々行っているデザインの提案や、デザイン提案にまつわるコミュニケーションがどのようにクライアントとの関係性作りに影響を与えているのかを、改めて見直すことができました。お誘いいただいたアジケの梅本さん、神田さんに深く感謝いたします。

レポート記事

【UX dub Vol.1 イベントレポート】UX/UIデザインの現場、最前線
【イベントレポート】UX dub「UX/UIデザインの現場、最前線」(前編)
【イベントレポート】UX dub「UX/UIデザインの現場、最前線」(後編)
「UX/UIの現場、最前線」イベントレポート

UX dub 座談会

独立部隊、掛け持ちナシ…?クライアントにコミットするUX/UIデザイン4社の仕事術とは
これから進むべき道とは?UX/UIデザイン会社が思い描く未来像
職域を超えろ。ステレオタイプに捉われない、UX/UIデザイナーのあるべき姿とは


デザイン力に伸び悩むあなたが劇的にブレイクスルーするための3つの解決策

デザイナーとして数年間のキャリアを積み上げた方なら、ある程度の実力を身に付けてきたと感じる反面、自分の成長が「停滞している」と感じることはないでしょうか。幾つもの仕事を経験し、デザインの表現や作業スピードには自信が付いた、これまでの経験に沿って仕事をこなすことで大きな失敗にはならないけれど、でもどこか大きく進歩もしない、そんな状況です。

私も20代後半、特にその悩みを感じることがありました。正直なところ、そうした自分の停滞を感じつつも、見て見ぬふりをしているような心境もありました。そこには、会社に所属していてある程度の実力があれば、目の前の仕事は経験則からそこそこの力でこなすことができるし、急に進退を迫られるような切迫した状況には陥らないことなどが影響していたと言えます。停滞に対して「そこまで急いで対処する必要はない」「いつかは変わる」と自分の今の環境を肯定していたのです。

しかしこうした停滞に対する静かな焦燥感は、成長したいと思う気持ちの現れとも言えます。そこを一歩自分から乗り越えることで状況は変化するものです。私の場合、そのきっかけは転職にあり、今所属するWeb制作会社ベイジに入社後は、年を重ねるごとにその停滞から脱出していくことができました。

今回は私の経験を元に、停滞を感じるデザイナーがその状況を打破し、ブレイクスルーするために改めて見直すべきだと考えていることを3つご紹介しようと思います。

  • 1)デザインを基礎から突き詰めて学び直す
  • 2)広義のデザインに触れることができる環境に身を置く
  • 3)練習・勉強することの楽しさを知る

1)デザインの基礎を徹底的に突き詰めて学び直す

30歳の頃、私はすでに3社の制作会社を経験していました。新卒で入社した大阪の小さな広告制作プロダクションでは右も左もわからない状況からスタートしましたが、退職する時にはある程度仕事を任せてもらえるようになり、デザインに対する自信も付いていました。

そこから上京して就職した会社では多くの方から「ちやほや」されました。自分で言うのもなんですが、基本的に前向きな性格であるがゆえに、任せてもらえる仕事には心血を注いでチャレンジし、土日だろうが深夜だろうが、与えられたデザインのクオリティを上げることに集中する日々でした。

そんなところから、荒砂はデザインができる、と声をかけていただける状況になり、大きな挫折も少なく、順調な毎日が続きました。そしてその上り調子の時に会社が傾き、あえなく転職することになりました。

そこからは非常にもどかしく、苦しい期間でした。転職活動を続ける中で、自信を積み上げてきたはずのデザイン力は社外で通用するほどの芯の強さが無いことに気がつきました。一歩会社の外に出てみると、もっとレベルの高い仕事を、圧倒的なスピードでこなしている優秀な方が多く居ました。

正直に言えば、社外の人と積極的にコミュニケーションをとったりすることが無かったこの頃、自分の市場価値がどのレベルのものなのかは見て見ぬふりをしていました。なぜなら、会社の中に居れば優位な立場を追いやられるようなこともなかったからです。

しかし転職する機会に、自分の力がいかに井の中の蛙であったかを思い知りました。そしてそこで改めて思ったことが、もっと骨太で、どこでも誰にでも通用する、市場価値の高いデザイナーになりたい、ということでした。

そんな時、私は今でも第一線で活躍しているクリエイターのブログをよく見ていました。そこで語られるデザインに対する想いや、作られたもののクオリティの高さを横目で見つつ、なんとか自分もこうした人たちと同じ土俵に入れないものか、と考えていました。

そんな時に出会ったのが現在所属するベイジです。もともと代表がブログでデザインやwebビジネスに対する学びを公開していたのを外から眺めていたのがきっかけでした。自分もこうして外に語れるような、強いデザインに対する思考力が欲しいと心底思いました。

そして30歳でベイジに入社するわけですが、正直なところ、1~3年目は特にボロボロでした。それまで積み上げてきた感覚頼りのデザイン力はベイジで求められるデザインクオリティには耐えかねるもので、日々葛藤と焦り、力量不足に悩む日々でした。まさに基礎からの再スタートです。

デザインにおいて、ベイジでは4つの基本原則のおさらいからスタートしました。本を読み、練習し、実践することの繰り返しです。もちろん最初からうまくいくわけではなく、原則に反した判断から何度もやり直す日々が続きました。

思い返しても辛いと感じたシーンは多々ありますが、そんな中でもしぶとく継続できたのは、転職の際に経験した自分のデザイン力の薄っぺらさにほとほと嫌気がさしていて、その時の自分から少しでも脱却したい、という気持ちが常に根底にあったからだと振り返っています。

ベイジのデザインの特長は、デザインの基本原則やビジネスで求められる論理性、デザイナーびいきの視点に囚われないことに徹底的に忠実なところと、時にその原則うんぬんをさて置いて、パッと見で魅力的なのか?グッと人の心を引き込む力が宿っているのか?という、いわば論理性を度外視した感性の部分を、同時にバランス良く追求し続けるところにあります。

写真一つ、書体一つ、色一つ選ぶにしても、なぜその写真、書体、色である必要があるのか?という理由と共に、一目見て人の心ハッとさせるような魅力があるのか?という部分を徹底的に自分自身に問い続け、磨き続けていくような作業です。

実は私のように、感覚値だけである程度のデザインレベルに到達する人は世の中に五万といるのです。しかしその上のレベル、ユーザの心に強く正確に働きかけたり、企業のビジネス上の成果に論理的にひも付けて提案できるようなデザイン力に到達するためには、徹底的に感覚値や自己都合を排除した上で、ネガティブチェックに耐えうる論理的なデザインを導き出す、自分への厳しさが求められます。

私はそもそも感覚値でステップアップしてきただけに、自らそうした思考に至ることはできなかったと振り返っています。しかし、転職を期に基礎から再度積み上げることが求められる環境を選んだことで、そうした自分の特性を抑えた上で、デザインに対する思考を深めることができました。

そうして入社から6年、自分のデザインはお客様のビジネスの中での機能を果たした上で、様々なデザインポータルサイトにも掲載されるようになり、自分のデザインに対する考えをブログで社外に発表して、時には大きなバズを生み出すことも経験しました。30歳を過ぎた頃、自分が欲しいと考えていた「強いデザインに対する思考力」が少しは身につきました。当時の自分が今の自分を見たら、それこそタイトルにあるような「劇的な成長」だと感じるのではないかと思います。

当時の私と同じように、デザインが好きで誰にも負けたくなくて、でも本当に自分の力が外で通用するのかについては実は不安である、実は自分の力が人と比べて薄っぺらいことを知っているけれど、見て見ぬふりをして誤魔化している、今居る環境にとどまっていれば危機的状況に陥ることはないと思うけれど、実際に状況が変わった際のことを想像すると不安で仕方がない、そしていつかは本質的でどこでも通用する、強いデザインに対する力をいつかは身につけたい、と考える人が居たとしたら、もう一度基礎から徹底的に学びなおすことができる環境に身を置くことは、最適な選択肢の一つなのかもしれません。

しかし20代後半のタイミングを逃すと、こうした環境に身を置くことは難しくなります。なぜなら30代を過ぎた人材には基礎の学び直しよりも、チームをリードするような働きが求められるようになるからです。でもこの記事のタイトルにピンと来た方なら、まだ間に合うのではないでしょうか。

2)広義のデザインに触れることができる環境に身を置く

書体、配色、写真を選ぶといったデザインの手法は「狭義のデザイン」と言えます。まさに先に述べたような内容です。その上で、クライアントに対してwebを使ったマーケティング施策の提案や、UXデザインの手法を取り入れたサイト構築を行う上流工程の仕事は「広義のデザイン」の意味合いが強くなります。

例えば我々が制作に携わる企業サイトはテクノロジーの進化と共に、役割が変化しています。上の図を見ていただくと分かるように、1994〜2002年頃は企業の看板的な意味合いや、会社案内としての意味合いが強くありました。存在するだけで価値があった時代と言えます。この頃のWebデザインは見た目の新しさ、表現の面白さといった「狭義のデザイン」であっても十分に効果を発揮しました。

その後、徐々に役割は戦略実現のためのツールとして、またコミュニケーションのプラットフォームとしての役割を強め、リードの獲得、ブランドの形成への働きかけが強く求められるようになりました。そこでは前述したような表現手法にあたる「狭義のデザイン」よりも、人の心をどのように動かすのか?という「広義のデザイン」の力が求められるようになったのです。

ここで最初の話に戻りますが、実は停滞を感じるデザイナーは、ある意味狭義のデザインは一定の水準まで到達した人であると言えます。そしてその後のさらなる成長を望むのであれば、広義のデザインに目を向けなければならない、と私は考えています。

元々Webであれグラフィックであれ、デザインにはこの広義のデザインの考え方が根本にあります。しかし、就職した企業によってはこうした考え方、働き方を求められず、いかに表現のスキルを上げるかだけを課題として掲げられたり、広い意味でのデザインの意味に触れることができない環境も多く存在します。そうした企業の属した場合、デザイナーとしての働き方は時代の流れと逆行する形となって先細りしていきますし、さらなる成長を感じる事も難しいでしょう。

その環境を具体的に言うなら、プロジェクトの背景も満足に伝えられず、ただ決められた企画に沿って絵を作り、そこに自分の考えを反映しようと思っても、上流での決定事項は変えることができず、「なぜこんなもの作らないといけないんだ」という疑問が出やすい職場で働くようなイメージです。

もちろん、狭義のデザインのみに特化して働くキャリアもありますし、その働き方が自分の中でのデザイナー像である、と考える人もいます。しかし昨今のAI技術の進化に伴って、こうした狭義のデザインの部分については自動化が進み、細かなデザイン表現の場が奪われていく時代であることも認識しておくべきでしょう。

そうした中、心のどこかで広義のデザインへの関与を望む気持ちがある場合には、できるだけ早いうちにそうした考え方を重要と考える環境に身を置くことが大切です。ある程度、狭義のデザインである表現手法を追求することも重要ですが、例えば私のように転職などのタイミングで、デザイナーとしての働き方、未来を見据えて自らのデザイナーとしてのポジションを見直すことも大切です。

この点において、私は現在の会社に入社した後、ビジネスの戦略、マーケティング、ブランディング、UXといった広義のデザインを、直クライアントに提案する機会に多く関わることができています。制作会社も色々とありますが、こうしたビジネス戦略に強みを持たない企業に属した場合には、広義のデザインに触れる機会は少なくなります。

デザイナーとしてキャリアを積み上げる上では、最終的に自分はどういったデザインを作り、どういった規模の、どういった人々に影響力を発揮していくのか?を考えるべきです。そして自分の強みを知り、戦略的に進むべき道を検討する必要があります。

3)練習・勉強することの楽しさを知る

この記事を読んでいるあなたは、練習・勉強することは好きですか?学校でいうところの勉強とは、授業を受けてその内容を頭に叩き込み、テストでその回答を自分の頭から引き出す、というものです。本来、人はこうした自己成長に喜びを得られるものですが、なかなかその勉強すること自体の楽しさを知っている人は少ないものです。

先にも書いた通り、私はもともと根っから感覚値で物事を判断して結論を出しやすい性格のため、熱心に厚い本を読んで歴史から基本を学んだり、広い事実からセオリーを導き出したり、といった活動とは、学生の頃から無縁の生活を送っていました。

しかし、好きという気持ちは根底にあるため、意識的に「練習・勉強するぞ」とならずとも、興味の働くままに物を作ってみたり、目の前の課題をクリアするために努力したり、といった行動はその都度とってはいました。ある程度まではこうした行動パターンでも成長することは可能です。

ですが、人にその知識を体系立てて説明できたり、説明を受けた人が同じように再現できるレベルの勉強と、自分だけの感覚値としてプラスになるというレベルの勉強には大きな差があり、歳を重ねるごとに基礎体力の差に開きが生まれてきます。

私のように、場当たり的でミニマムな勉強方法は、目の前の課題をクリアする上では一時的に機能することもありますが、より高いレベルの仕事をクリアする時、不確定要素だらけのビジネス上の課題に対する答えを求められる時、チームや顧客に対する強い影響力が求められる時ほど、通用しなくなります。それはどんな企業、どんな職種を選んだとしても同じです。

私の場合はベイジで活動を続ける中で初めて、練習・勉強することの楽しさを知りました。例えば、先にも挙げたデザインの基本原則の知識を自分なりにまとめて資料を作り、勉強会を開いて人に教えることは、強く自分の知識として定着しました。また、デザインポータルに掲載されているような優秀なデザインの模写を練習として一定期間続けたことで、仕事の中ですぐに活かせる力になりました。

両方に共通するのは、自発的に積み上げた知識を人の目に触れるところにアウトプットしていたことです。こうすることで、知識は完全に自分の引き出しに格納され、いつでも自由に引き出すことができるようになります。これがいわゆる勉強というもの、学びというものであることであることを知りました。

伝えた人から「為になった」とコメントをいただくこと、そして何より、自分がその知識を利用して新たに大きな課題を解決できるようになった時には、場当たり的な勉強では得られなかった、自分の実力となったことへの実感と、喜びを得ることができます。自発的に勉強を重ねれば重ねるほど、自分の確固たる力と喜びを同時に得るサイクルが出来上がるのです。

勉強すること、練習することには苦労が伴います。私はよくこの話の際に、DRAFTの宮田識さんの言葉を思い出します。以下、著書である「DRAFT宮田識 仕事の流儀」からの抜粋です。

毎日の仕事に振り回されていたらダメですね。徹夜続きで何もできないっていうのは最悪。野球でもサッカーでもゴルフでも、スポーツ選手は試合とは別に、ものすごい量の練習をしています。バットが外れて負けた。そうしたら死ぬほどバッティング練習するじゃないですか。PKで負けた。そうしたらぶっ倒れるまでPKの練習をするじゃないですか。それを考えたら、「デザイナーは甘いんじゃないですか?どれだけ練習してますか?」ということですよね。世の中、簡単にうまく行く方法はない。自分が好きで選んだ仕事なら、やってみろと言うしかない。練習するにしても、言われたことをこなすだけじゃダメですよ。自分の意思で動かないと身に付きませんから。自分から求めて初めて分かること、覚えることがあるんですよ。それが長く記憶に残る。自分だけのアイデアソースになっていくんです。

誰もが凡人です。そうした凡人が結果を出すには、努力・練習するしかありません。これを毎日苦しい中でも継続することで、結果的に喜びや楽しみを感じることができるようになるのです。

私はこの「勉強する・練習する」ことを学んだのは、タイミングとして遅すぎたと感じています。世の中の優秀な方は若い頃から、勉強することの喜びと楽しさを知っていて、それを自然と生活の中に取り入れていることから、早くに高いパフォーマンスを発揮できているのです。

しかしそんな私でも30歳から勉強や練習を改めて意識しはじめたことで、人に自らの知識を伝え、自分の力で学んでいく喜びを覚えながら、伸び悩みや停滞感を脱出することができました。コツコツと自分が求められる力に対して前向きな勉強・練習を積み重ねる人であれば、私のように長い時間をかけなくても、短い期間で想像もしていなかった自分のポテンシャルを引き出すことができるはずです。

あとこの話で一つ気をつけておかなければならない話があります。それは自分が今いる環境が、練習や努力が報われる環境であるかどうかを客観的に把握しておくことです。こうした頑張りが報われない環境に居続けるのは、あなたのキャリアにおける大切な時間を無駄にします。そうした時は思い切って環境を変える必要があると、私は考えています。

まとめ

以上が、デザイナーの成長における停滞をブレイクスルーするために、私が改めて見直すべきだと考えている3点です。総じて言えば、まず基礎となる土台を積み上げることができる環境を選ぶこと、そしてそこで感覚的な判断基準を排除した論理的な考え方を身に付けるための活動を積み重ねること、が重要です。停滞期は辛いものですが、考え方一つ、行動一つでそれまでの停滞が嘘のように、ガラッと視界が開ける可能性は十分にあると考えています。

お知らせ

そして、もしもここでお話した内容に少しでも共感した、興味が湧いたという方がいらっしゃれば、ぜひ私の所属するベイジという会社もブレイクスルーのための環境として、選択肢に入れるのも良いと思います。採用サイトからご応募いただいて、お話を聞かせてください。もしくはFacebookTwitter経由で話しかけていただいても構いません。もちろん現状のスキルはある程度考慮されますが、それよりもここでお話した私の経験や考えに共感いただける方であれば、ぜひ積極的に応援していきたいと考えています。

興味を持っていただけた方はこちらから株式会社ベイジの採用情報をご覧ください


Service Design Night vol.4 ~事業会社とデザイン会社 デザイナーぶっちゃけトーク:スキルアップやキャリアパスについてどう思う?~への登壇にあたって考えたこと

2月28日(火)に渋谷で行われた「Service Design Night vol.4 ~事業会社とデザイン会社 デザイナーぶっちゃけトーク:スキルアップやキャリアパスについてどう思う?~」というイベントに登壇させていただきました。テーマは、事業会社と制作会社でデザインに関わる人がそれぞれの視点で、今後デザイナーはどのようにキャリアアップやスキルアップを図るのか?という問題を掘り下げて考えるというものです。

デザイナーに求められるスキルが多様化・細分化される中、数年後にどんな人材になっていれば良いのか?今後何を身につけていくべきなのか?という疑問は、多くの方が抱いている問題です。今回私は事業会社で働いたことのない、生粋の制作会社視点の立場でのスピーカーということで、お声がけいただきました。このエントリーでは、私自身が発表した内容を補足と合わせてご紹介してみたいと思います。

一緒に登壇されたのは、株式会社バンクの河原香奈子さん、株式会社rootの古里祐哉さん、株式会社Fablicの”わりえもん”こと割石裕太さんという顔ぶれでした。

登壇者の皆さんのお話

キャリアは考えすぎない(バンク河原さん)

バンクの河原さんは制作会社から事業会社に転職した経歴で、制作会社勤務の時代に培った「スピードと引き出し」を武器に事業会社へと転職し、現在は新サービスの立ち上げに邁進中。サービスの成長と共にリアルなユーザの声や周りの反応を感じられるところ、チームの一員としてサービスを作り上げる醍醐味がある、というお話はとても興味深い内容でした。制作会社のデザイナーは、制作内容や社内のレイヤー構造の面でも、最終的な受け手の反応を感じ難い場合が多いので、事業会社のデザイナーが得られる働き甲斐がよく分かるお話でした。

デザイナーはセルフブランディングが重要(Fablic割石さん)

Fablicの割石さんのお話はセルフブランディングに対する考え方でした。変化のスピードが速いWeb業界において、都度自分のスタンスを合わせることよりも、確固とした自分自信のデザイナーとしてのコンセプトを持つことで、他のデザイナーとの差別化を図ることが大切、というお話でした。割石さんは今回初めてお会いしましたが、割石さん自身のキャラクターと作り出すデザインの世界観が一致していること、そこをブラさずに外に向けてアウトプットを続けていることは、デザイナーとして生き抜く上で非常に重要であると感じました。

デザイナーに求められるのは横断的スキル(root古里さん)

rootの古里さんは事業会社から制作会社に移られた、河原さんや割石さんとは逆パターンのキャリアパスで、サービス開発に携わるデザイナーには、上流工程から実装に渡るまでの「横断的スキル」が必要であるというお話でした。昨今のデザイナーは表面的なデザインスキルに加え、デザイン思考に基づいたビジネス自体への理解がより具体的なスキルとして求められるようになったこと、そして進化し続ける技術的な側面への理解もキャッチアップしていく必要があること、両側面のバランスをうまくとりながらスキルアップしていく必要があることが再認識できるお話でした。

私が考えるキャリアパスとスキルアップ

そして私からはこんなスライドで、今後デザイナーとしてキャリアアップを図る上でどんなことが重要になるのか?具体的にどうやってスキルアップしていくのか?という点について、自分自身の経験を交えてお話させていただきました。要約すると、結論は次の2点です。

キャリアパス「ビジネスへの理解を深めて市場価値を高めることが重要」

まずキャリアパスは、デザイナーとしての主力武器であるデザインの表現力を磨きつつ、ビジネス面への理解を深めて市場価値の高い人材になることが重要です。キャリアスタート時、デザイナーはまず決められた指示書に従ってインターフェースやビジュアルを作る作業を任されます。そこで様々な表現方法を身につけていくわけですが、30歳を過ぎたあたりから「綺麗なデザインは作れて当たり前」という状況を迎えます。重要なのはその当たり前な状況の中で、どのように自分自身の市場価値を高めていくのか?ということです。よりマーケティングやUXを含めたビジネス的な視点でデザインの対象について語れるゼネラリストになるのか、テクノロジーの進化と共に変わり続ける最先端の表現を扱うスペシャリストになるのか。自分自身の特性を踏まえて見据えておく必要があります。

スキルアップ「広い対象に向けてアウトプットを継続することが重要」

そしてスキルアップについては、広い対象に向けて継続的にアウトプットを行い、フィードバックを得続けることが大切です。自分のアクションが他人に影響を与え、そこからフィードバックを得る、というのが一般的な学びのサイクルです。自分から何も発信しなければそのフィードバックを得る機会が少なくなるため、ハードスキル・ソフトスキル共には伸びることはありません。正直なところ、会社の仕事だけで手一杯になっていて「休めるときはしっかりと休みたい」と考える人も居るでしょう。しかし、そうしたしんどい時こそどうすればアウトプットできるのか?時間をかけなくても継続できることは何か?を考えて新たな一歩を踏み出す人こそ、スキルアップのスピードは早くなります。そしていつの間にかアウトプットが習慣となり、苦労せずとも自然とスキルアップする循環を自分の中に持てるようになるのです。

制作会社が良いのか、事業会社が良いのか

今回のイベントは「制作会社 VS 事業会社」的な構図ととらえがちですが、結局のところデザイナーにとってどちらでキャリアを積むのが効率的か?は、個人によって変わる、と言わざるを得ません。しかし、会社や業務内容によって違いがあることは大前提としつつ、上記の図のような傾向があるのではないか?と、このイベントに向けて資料をまとめる中で考えていました。どちらからキャリアをスタートしても、最終的に主力武器となるデザイン力と、ビジネスへの理解力、両方の力を付けていくことがデザイナーに求められることであると私は考えています。

制作会社のデザイナーはデザイン表現の幅を広げやすい

制作会社からのキャリアスタートとなった場合に得られるメリットとしては、やはりデザイン表現の幅が広くなる、という点が挙げられます。数少ない特定のサービスに絞られることなく、様々な業種のデザインワークを短期間でこなしていく日々は、確実にデザイン表現の幅げます。まずもってビジュアル表現で幅を広げたい人にとっては、やはり制作会社からのキャリアスタートが望ましいのではないでしょうか。デメリットとしては、事業会社ほどデザインした対象が結果的にどうなったのか?を知る機会が少ないことが挙げられます。それは言い換えると、一つのビジネスとしてデザインがどのように機能したのか?が分かりにくい状況である、と言い換えることもできます。

事業会社のデザイナーはビジネス的な視点が身に付きやすい

逆に事業会社からキャリアをスタートした場合には、自分が作ったデザインに対してユーザがどう感じたのか?という結果を知りやすい、というメリットがあります。自分の背後にカスタマーサポートが居て、機能のローンチ当日にその結果を実際の声に触れることができる環境もあるでしょう。その点は、制作会社ではなかなか味わいにくい仕事の醍醐味であると言えます。デメリットは、制作会社ほど表現に幅を求められることが少ないため、表現力が広がりにくいことではないでしょうか。また勤務時間についても比較的無理を強いられる場合が少ないため、デザイナーとしての限界値を求められる機会も少なくなります。積極性がなければデザインスキルが伸びにくい、と言えるのではないでしょうか。

まとめ+おまけ

今回こうした登壇の機会をいただいたことで、自分自身に今後求められることや目指すべき方向、日々のスキルアップ方法について、改めて深く考えることができました。登壇終了後は多くの方からご挨拶いただいたのですが、時間の関係でお話できなかった方もいらっしゃいました。そこで、期間限定で「制作会社のデザイナーに聞いてみたいこと」と題して、気軽に質問を書き込んでいただけるスプレッドシートをご用意しました。制作会社で働くデザイナーの話をもっと聞いてみたいという方は、ぜひこちらのシートに質問を書き込んでみていただければ、可能な範囲で回答させていただこうと思います。

制作会社のデザイナーに聞いてみたいこと

最後に、こうした機会にお声をかけていただいたrootの西村和則さんに深く感謝しています。会場にいらした方も含め、お礼を申し上げます。


誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック

【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。
ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました

デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか?

・最終的に何を言いたいのか結論が見えないよ。
・関係性が複雑すぎて理解しずらいんだけど。
・要素が多すぎて全てを把握するのが大変。
・何をどこから見れば良いの?
・結局一番言いたいことはなんなの?
・文字サイズがたくさんありすぎてまとまりがないね。
・安っぽいチラシみたいでダサイなぁ。
・全体的にバランスが偏ってて不安定。
・このスペースがぽっかり空いてて…寂しくない?
・なんだか派手な色使いで賑やかすぎる。

私も後輩のデザイナーの作る図に対して、日々あれこれフィードバックを出しますが、自身をふと振り返ってみると、こういった「図」の作り方について誰かから体系的に作り方を教わったという記憶はなく、長年かけて自分なりに失敗を繰り返して技術を習得してきたものだったなと思いました。そんな中、もっと効率的に「分かりやすく美しい図」を誰もが作ることはできないか?と感じていました。

というわけで今回は「分かりやすく美しい図の超具体的な作り方」として、自分が知っているノウハウをできる限り具体的に明文化し、デザイナーはもちろんのこと、デザイン業務以外に携わる方にとっても役に立つ、図の作り方のヒントとしてご紹介してみたいと思います。

分かりやすく美しい図を作るための3つの原則

原則1)一番伝えたいことは何か?を的確にとらえる

図解は、文章よりもスピーディーに大まかな概念を伝えるための手段です。時間をかけて長文を読ませなくても、図を見せれば一番言いたいことの概略を数秒で伝えることができます。最も重要なのは「一番伝えたいことをいかに的確にとらえるか」です。いくら図が美しくても、内容が伝わらなければ意味がありません。チャートでもグラフでも地図でも「この図で伝えたいのは◯◯」と一言で言えることが、分かりやすい図を作るための最初の一歩になります。

原則2)ルールと要素を可能な限り減らす

スピーディーに情報を伝えるためには、何よりも「シンプル」であることが重要です。シンプルをもう少し具体的な言葉に落とし込むとすれば「要素やルールが少ない」と言い換えることができます。文字サイズ、色数、線の種類、線の細さ、マージン、形などなど、すべての要素において最低限のルールで作成することが、シンプルさ、分かりやすさにつながります。

原則3)デザインの4つの基本原則を守る

分かりやすさと美しさを併せ持つ図を簡単に作る、魔法のような裏技はありません。必要とされる力のベースとして、デザインの基本原則を徹底的に身につける必要があります。スポーツ選手にとっての筋肉のようなもので、これを鍛えずして全ての結果には結びつきません。近接、整列、コントラスト、反復の4つの原則を図の細部に渡るまで突き詰めることで、自然と分かりやすさと美しさは向上します。

参考)ウェブデザインに応用するデザインの4つの基本原則

チャート作成のテクニック

01)規則正しい形を使う

図版の役割は複雑なものをシンプルで分かりやすい形で伝えることが大原則です。その前提で考えると、図版内で使う要素もシンプルな形であればあるほど良いと言えます。正円、正三角形、正方形、正五角形…など、規則正しい形で表現することを心がけましょう。長方形を使う場合でも黄金比(1:1.618)の比率にするといった工夫で美しさを保つことができます。

02)全体の形をシンメトリーにする

シンメトリーな構成は安定感があります。構成する内容を左右対称なバランスで表現できそうであれば、積極的にこの形に収めると良いでしょう。もちろん、全ての図版において左右対称に表現するのは不可能と言えますが、やはり左右や上下のバランスが違うとシンプルさに欠ける印象につながります。図版に個性は不要です。より安定した印象につながる表現を追求するようにしましょう。

03)情報を囲む際は一重にとどめる

情報をグループとして見せる一番簡単な手法は「囲む」です。囲みは一つのグループと見なされ、情報構造を整理するのに役立つ反面、要素が増えるために複雑な形へと近づきます。囲む以外にも「近づける」「同色にする」といった表現でグループは表現できます。初心者の方はまず二重以上に囲まないことを徹底し、囲み以外でグループを表現することを心がけましょう。

04)線は最低限の部分のみに使う

囲み同様に、線も情報の区切に多用されます。最も簡単な例は、AとBを区別するために間に線を引く、といった使い方です。しかしこの線自体には情報としての意味はないため、可能であれば無い方がよりシンプルになります。線は増えれば増えるほど図版の印象を複雑になり、少なければ少ないほどシンプルで洗練された印象になります。線を引く以外の情報の表現方法を優先して考えるようにしましょう。

05)色はベース、アクセント、ポイントの3色に絞る

配色は、最も多くの面積で使われるベースカラー、キーとなる部分で使うアクセントカラー、ごく一部の目立たせる箇所に使うポイントカラーの3つに絞るのが鉄則です。3色にどんな色を使うかは、掲載される媒体全体の配色設計に合わせるのが無難です。例えばWebサイトで、グレーベースのコーポレートサイトであれば、ベースはグレーに、アクセントはブランドカラーにすると奇麗にまとまります。

06)文字はサイズ2種類、書体2種類(欧文と和文1種類ずつ)に絞る

クオリティの低い図版に共通して言えるのは、文字のルールが必要以上に沢山あることです。一つの図版の中でサイズが何種類もあったり、書体もあれこれと違うものを使うのは望ましくありません。書体は欧文和文それぞれ1種類、サイズはキャプション用の小さい文字を1種類、見出し用の大きな文字を2種類ほどに抑えると、シンプルさを保てます。文字サイズは明確に違いがわかるサイズに設定しましょう。

07)重複語、修飾語、冗長な語尾を削除する

図版のスペースは限られているので、できるだけ無意味にスペースをとってしまう要素を省く努力が必要です。それは図形などの形だけでなく、言葉も関係します。同じ言葉が繰り返し使われる場合には、一つひとつは省いてタイトルでまとめたり、長過ぎる言葉は箇条書きレベルに言葉を削ったりと、工夫できる部分は沢山あります。可能な限り情報を減らすことが、分かりやすい図版を作る上では重要です。

08)矢印は最低限の大きさに止める

矢印の形ひとつでも図版の印象は変わります。実はこの矢印は、小さくても、また控えめな配色であっても、視線を誘導するのに十分な力を発揮します。図の中で重要となるのは、関係性が指し示された「要素」であるため、関係性を指し示す矢印自体は控えめな表示でよいのです。最低限、矢印がどちらを向いているかが分かるレベルに調整するのが良いでしょう。

09)吹き出しは角丸とツノを小さくする

人の声を表現する際に使う吹き出しの表現には、明確にクオリティの低さを避けるテクニックがあります。まず角丸を使う際にはRを小さくすることです。3〜4pxほどにとどめるのが良いでしょう。角丸が大きすぎると大雑把な印象につながります。またこれはツノにも同じことが言えます。ツノについては、ルールを最低限にする大前提も踏まえ、設置する位置も可能な限りルールを減らしましょう。

10)平面的に表現する

よほどの複雑で特殊な内容でない限りは、関係性はすべて平面的に表現できます。奥行きをもたせた立体的な表現は、パースが狂って違和感が出る、他の図版との統一性が保ちにくくなる、作成に時間がかかるなどのデメリットが多くなります。できれば平面的に表現する方が良いでしょう。図版の構成でオリジナリティは不要です。誰もが見慣れた形にする方が、分かりやすさにつながります。

グラフ作成のテクニック

11)グラフの項目同士の配色は明確に違いがわかる色にする

グラフの項目同士の色味の変化が小さいと、一目見て隣接した要素同士の区分けが分かりにくくなります。色の違いははっきりと分かるようにしましょう。項目数が多い場合には多色使いも検討しますが、散漫な印象になりやすいため、できれば色数は少なくしたいところです。単色で作る場合も、十分に項目同士の色の違いが認識できるようにしましょう。

12)指し示す線は可能な限り短くし、角度は90度・45度・0度の3種類を使う

グラフには何のパーセンテージなのかを説明するテキストを入れますが、数値が小さいものはオブジェクト内に言葉が入りきらないため、線を引いてテキストと結びつける表現を使います。その際使う線も、要素を減らすという大前提から考えると不要な要素ですので、できる限りルールを減らして必要最低限の存在感にとどめましょう。具体的には、線は短く、角度も90度・45度・0度以外は使わないようにします。

地図作成のテクニック

13)素材を表現別に数種類ストックしておく

地図をゼロから作るのは非常に時間がかかり、且つ正確さを担保するのは難しいため、基本は素材を使うことが前提になります。世界地図、日本地図、日本地図でも市区町村ごとにレイヤーが分かれたものなどが必要になるため、日頃からの素材リサーチ能力が重要になります。また地図はリアルな形やデフォルメされた形など、UIの印象によって使い分ける必要があるため、そのバリエーションも踏まえて収集しておくと良いでしょう。

参考)Webデザインに使える商用可能な地図を配布しているサイトまとめ
参考)日本の白地図

14)地図自体に枠、影、立体感を付けない

地図自体が複雑な形のオブジェクトなため、必要以上に装飾を施すとそれだけで野暮ったい印象につながります。また伝えたい情報は、その地図のどのポイントに何があるか?ということなので、地図自体をそこまで目立たせたり、装飾したりする必要は無いと言えます。基本はベタ塗りとし、その上に乗る要素に視線が集まるようにしましょう。

15)文字は縦書きと横書きを使い分ける

決められたエリア内で文字が入りきらない場合、縦書きをうまく利用することも検討しましょう。「ルールは少ない方が良い」という前提から考えると、もちろんすべて横書きで統一されている方がよりシンプルになりますが、そのルールを守るために狭いエリアで文字を何度も改行させてしまうくらいであれば、縦書きを使ってスマートに表現した方が良い場合もあります。柔軟に検討しましょう。

アイコン作成のテクニック

16)フリーのクオリティの高いアイコン素材を使う

アイコンは特に図版の印象を左右します。アイコンがいびつだと、それだけで図版全体のクオリティが低く見えます。もちろん、クオリティに自信があれば自作するのも良いのですが、自信が無い場合はフリーの素材を使ったり、それらをベースに少し改良するなどして作成すると高いクオリティを保つことができます。フリー素材の知識もデザイナーの能力の一つです。常に自分のライブラリを更新しておきましょう。

参考)Material icons – Google Design

17)ピクセルのズレをなくす

ピクセルのズレは全体的にボンヤリとした印象につながります。Webサイトに限って言えば、UI自体がシンプル化の一途をたどり、図版の印象が全体の印象につながりやすくなっているため、こうしたボンヤリ感はサイト全体の見た目の印象に大きく影響します。ピクセルにスナップする設定にしたり、パスの位置を細かく調整するなど、ピクセルのズレに繋がるオペレーション上の悪い癖は早々に無くすようにしましょう。

18)想像で形を作らず、参考を見てディティールを研究する

想像スケッチという遊びがあります。アニメのキャラなどのお題を出され、記憶を辿ってその絵を描くというルールですが、あのゲームの面白さは、頭の中にあるイメージとアウトプットされたイラストのギャップにあります。こうしたゲームが成り立つほどに、人の記憶は曖昧だと言えます。ゼロからアイコンを作成する場合、Googleの画像検索などで対象物のディティールをしっかり研究し、特徴を抑えるようにしましょう。

全体バランスのテクニック

19)デザインのトンマナに質感を合わせる

ここまでのテクニックで、図はできるだけルールを少なく、シンプルに作ることを述べてきました。基本的な考え方としてこれらは意識しておくべきですが、図を包括するグランドデザインによっては、適宜アレンジを加えることも重要です。例えばこちらの例のように、グラデーションがデザインのポイントになっている場合はグラフにグラデーションを活かす手もありますし、アイコンには透明感をプラスして重ね合わせるような手法も考えられます。シンプルであることと、デザインのトンマナを合わせることは別次元と心得ておきましょう。

20)同居する別図ともルールを共有する

ここまでこのエントリーでも様々なチャートやグラフ、アイコンを掲載していますが、作成の際には全てを並べた時の統一感を考慮しています。それは配色、書体の種類やサイズ、マージン、テクスチャ感など、いろんなルールが絡んできます。数多くの図を作成しようとすればするほどルールは増えていきますが、無駄なルールを増やさないこと、時にはルールを増やして表現の幅を広げること、見栄えを優先することのバランスをとることが重要です。このバランスは誰からも具体的に教えてもらえるものではありません。

まとめ

細々としたテクニックを述べてきましたが、図を作ることに自信のない方は、まずは冒頭で述べた3つの原則から実践してみてください。図で伝えるべきことは何で、何が最も重要であると伝えるのか?その情報をいかにして少ない要素とルールでシンプルに伝えるのか?最後はデザインの原則をいかに細部にまで浸透させることができるか。これらを如何に突き詰めることができるかが、分かりやすさと美しさを併せ持った図を作るためのヒントになると、私自身は考えています。

【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。
ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました


dots.CareerMeetUp – UIUXの巻「うちのUIUX事情/基調講演:BCG Digital Ventures Experience Designer 坪田 朋 氏」

11月26日(土)に渋谷にて、UIUX担当者向けのイベントとして「dots.CareerMeetUp – UIUXの巻」というイベントが開催されました。登壇者はBCG Digital Ventures のエクスペリエンスデザイナー坪田さん、Speeeのアートディレクター篠原さん、ランサーズCTOの横井さん、ウエディングパークのマネジャー西脇さん、三井住友銀行IT戦略室の木村さんという顔ぶれでした。今回は登壇者の方々の話の中で学びになった点をまとめたいと思います。

関係者にどうやってUXデザインの価値を理解してもらうか?

UXデザインは何をもって成功とするかは非常に難しい、という話題はこのイベントでも会話に出てきました。成功したことが実感できるタイミングが数ヶ月・数年後というケースもあるなど、効果を短期的に、且つ明確にで測りにくい概念です。故に、その重要性と身近さ、緊急度、決裁の難しさが多くの企業にあるようです。

実際に制作を担当する人からプロジェクトに関わる関係者たちに、どうやってその重要性を示していくのか?という問題に対して、Speeeの篠原さんからは「権力者を巻き込むこと。社長をワークショップに巻き込むこと。」という意見が挙げられました。

元々トップの意思決定によってUXデザインが事業の中で重視された経緯があれば、トップダウンで社長の口からその重要性を語ったり、一緒にワークショップに参加してもらう機会を作れば、自然と関係者のUXデザインに対する意識も改革されていくというお話でした。

様々な会社の社長の著書の中でも、社長自らその姿勢を行動で示し、結果的に社内のスタッフの意識が変革されていくケースはよく目にします。我々のように実際に手を動かす人たち自身が自分たちの必要とする活動をアピールし、権力のある人の賛同を得ることは、様々な社内政治が渦巻く環境の中では大切であることが伺えました。

UXデザインの価値が通じない環境の場合どうするか

質疑応答の中で「UXデザインの価値を分かってくれない場合はどうしたらよいのか?」という質問があった際、坪田さんからは「価値を認めてくれる会社を選ぶ。自分で選択することが大切。」という回答がありました。

意思決定者が多く、フットワークが重くなる企業の中で、新しい価値観や考え方を受け入れてもらうためには並々ならぬ努力が必要です。自分自身は過去に何千人規模の大企業に勤めた経験はありませんが、やはりそうした無理ゲー感を感じた経験は少なからずあります。

どちらが正しい・間違っているといった話に固執し、貴重な時間をモヤモヤとした気持ちで過ごすくらいであれば、やはり自分が大切にする価値観を共有できるステージに自分自身が近づくことも非常に重要です。時間は無限にあるわけではないので、クリエイター自身も自身のキャリアを厳しい目で見つめて判断する力が必要になります。

このイベントで三井住友銀行の方が登壇していらしたことからも顕著ですが、スタートアップだけでなく、大きな企業もデザインシンキングを取り入れ始めていることがリアルに伺えました。そうした流れの中で、文化を根付かせるところにコミットするか、すでにデザイン文化がある環境でサービスをグロースさせるところにコミットするのかは、クリエイター自身が意識的に選ぶ必要があると感じました。

UI/UXデザイン担当者が身につける必要があるスキル

質疑応答で「UI/UX担当者が今後身につけていく必要があるスキルは?」という質問に対して、ランサーズの横井さんから「知識の深さ、視野の広さ、視差の高さ」という回答がありました。知識の深さは自分自身の専門分野のこと、視野の広さは横軸に居る別の職能に対する理解のこと、視差の高さはビジネスの上流行程への理解のことです。

また別の質問「イケてる・イケてないUX/UI担当者とは?」に対し、三井住友銀行の木村さんからはイケてる人として「ビジネス、エンジニア、デザイナーの架け橋になっている人」という回答が、Speeeの篠原さんからはイケてない人として「UXと言いながら、自分のポジションに閉じてしまう人」という回答がありました。

どの回答からも共通しているのは、UXデザインに関わる際にはビジネス全体を見通す視点を持ち、職能に関係なく目的達成のために協力・理解を惜しまない姿勢を持つことが重要という話です。自らの作業のみの完遂だけを目標とするような視野の狭さでは、ビジネスを通じて顧客に良いUXを与えることはできません。

またUXデザインとは、ユーザビリティやアクセシビリティ同様に、デザイナーやエンジニアなどUXデザイナーという肩書きでなくとも、自分自身の専門知識に加えて持つべき知識です。その考えに対して登壇者の方々の回答は非常に納得できるものでした。

各々の専門分野のスキルや知識は深めつつ、すべてのクリエイターがUXデザインの考え方を身につける必要があると感じました。

サイトパフォーマンスからUXを追及する

見落としがちな視点として、サイトパフォーマンスの視点を大切にするという話がWedding Parkの西脇さんから語られ、非常に参考になりました。情緒的な演出を目的に取り入れた表現がパフォーマンスの悪化を生み、結果的にUXに悪影響を及ぼすケースは多々あります。特にデザイナーは実装フェーズから離れていることが多いため、パフォーマンス観点での使い勝手は改めて認識しなければならないと感じます。

Wedding Parkでは社内の文化としてサイトパフォーマンスを考える活動があり、パフォーマンス改善を盛り上げる社風、パフォーマンス向上のためのハッカソンや合宿、KPI達成による成果報酬(社長からのご馳走)といった文化が作られているという話でした。

海外ではパフォーマンスエンジニアと呼ばれる職業も確立しており、サイトパフォーマンスがUXに密接に関係していることは明白です。Yasuhisa hasegawaさんのポッドキャスト、Automagic Podcastの#175、竹洞陽一郎さんの回でサイトパフォーマンスについて非常に詳しく語られているのを思い出しました。UXをパフォーマンスの視点で考えるヒントが沢山詰まっているので、ぜひ一聴されると良いと思います。

Automagic Podcast #175 竹洞陽一郎さん

人生であと25個くらいしかサービスを作れない

キーノートの坪田さんの話の中で「人生であと25個くらいしかサービスを作れない」という話がありました。自分の現在の仕事のペースを俯瞰して見ると、何年でいくつくらいのサービス開発に関わっているのかが分かります。自分自身が引退する年齢を考えると、あと幾つくらいのサービス開発に関われるのかが分かるということなのですが、坪田さんの場合は「25個」というお話でした。

この件は自分も最近考えることが多く、とても共感できました。近年の自分の働き方を振り返ってみても、長いものだとデザインのフェーズが約半年ほど続く場合もあったり、継続的にサービスをお手伝いするケースも増え続けているため、一定期間に関わるプロジェクト数は減少傾向にあります。

30代を超え、定年する頃の自分のイメージが見え始めると、その時自分はどんなふうに今の自分を振り返るのだろう?と考えるのですが、やはり「全力でやりきった」と言える仕事が沢山あったなと振り返りたいだろうなと感じています。

そうした話を踏まえると、日々目の前にある今現在関わっているプロジェクトこそが、その結果に如実に結びついているということがリアルに感じられるようになります。毎回毎回のプロジェクトに対して、どこまで自分自身の思考を深めることに向き合えるのか、が大切であると感じました。

意識すべきキャリア

坪田さんはキーノートの中で、会社という枠にとらわれずに自身の強みをアピールすることの大切さが語られていました。具体的な例で言うと、SNSを使ったアウトプットであったり、登壇の期会に自身の考えを来場者に伝えるといったものです。

私自身も今年に入って積極的にブログを書くようになり、様々な人と知り合う機会が増えたことで、その大切さを以前よりも意識するようになりました。自ら積極的に思いや考えをアウトプットすると、自分の欲する情報が自然と入り込んでくる流れが生まれ、徐々に環境が変わるものだと感じています。自らの活動をより活性化させるためには、思考を外へ外へと出すことが大切であると感じました。

登壇者の方々の当日のスライドはこちらからご覧ください


ランディングページ8要素におけるデザイン表現セオリー(サンプル165点付)

WebデザイナーがデザインするWebページの一つに、広告を経由して1ページ内で商材の特長を説明し、お問い合わせや購入へと導く「ランディングページ」があります。

ランディングページは、ユーザの興味を惹くビジュアルの魅力(シズル感)を特に強調したり、瞬時に内容を理解させるためのメリハリのコントロール力も特に求められるため、高いクオリティでページ全体をまとめ上げるには、幅広い表現力が求められます。

私もこれまで多くのランディングページのデザインに関わってきましたが、過去を振り返ると、制作に与えられる時間はタイトな割に、ページ内に掲載するボリュームは非常に多く、またメリハリを出すために様々な表現をいくつもの箇所で検討しなければならない、というケースが多々ありました。

デザイナーにとっては、いかにして効率的に、早く、且つ高品質でランディングページをデザインするのか?が大きな課題になるわけですが、多くのランディングページを分析してみると、特定の要素ごとにデザインの「セオリー」があることに気がつきます。

セオリーを意識せずにデザインを進めた場合、手当たり次第にデザインを考えるため、スムーズに進む時と進まない時の差が生まれますが、セオリーを知れば表現の幅が見えるため、無駄な方向に思考が拡散することが無くなり、効率的に作業を進めることができるのではないかと私は考えています。

ということで今回は、そんなランディングページで使われているデザインのセオリーを8つに分類し、そこにまつわる表現サンプルをまとめてみました。サンプル自体のクオリティよりも、表現の幅がこれだけある、という部分で参考になるかと思います。

  • 01)文章
  • 02)写真
  • 03)人物
  • 04)評価
  • 05)現実メタファ
  • 06)関係
  • 07)背景
  • 08)境界

01)文章

文章はランディングページ内で最も重要な要素です。ユーザは一行一説をじっくり読むことはなく、早いスピードで興味のある言葉のみを拾い読みしていくため、単語ごとにメリハリをつけたり、重要な言葉を特に目立たせたり、といった工夫が求められます。

1-1)マーカー

最低限ここだけは読んでほしいという文章に使うと効果的。ある程度長い文章でも使える。乱用しすぎず、一文の中なら1箇所を目安にすると良い。

1-2)強調点

見出し内で特に目を留めてほしい、短い単語に使うと効果的。長い文章に使うとワンポイントにならないので、あくまでも単語に使うのがポイント。

1-3)左右に斜線

見出しにちょっとした「勢い」を加える表現。大げさに入れる手もあるが、小さく入れるだけでも十分アクセントとして効くので、使い勝手が良い。

1-4)部分的な色変更

文章内で特に目を留めてほしい単語に使うと効果的な強調表現。色を変えた文字だけサイズを少し大きくすると、さらにその言葉の強調度合いが増す。

1-5)袋文字

言葉にボリューム感を持たせる表現。影やグラデーションを加えて密度を出すのも良い。多用しすぎると野暮ったくなるので注意が必要。

1-6)手書き文字

人っぽさ、人の温かさを出したい時に使える表現。ランディングページにおいては、お客様の声などで使われるケースが多い。

1-7)打ち消し線

元々の意味よりユーザに対するメリットが大きくなっている時に使える表現。金額が安くなっている場合などによく使われる。バツや二重線などバリエーションがある。

1-8)ギザギザ丸

サブ的な扱いとなる言葉をワンポイントとして入れる際に役立つ表現。大きく使うと大雑把感が出るため、小さくワンポイントにとどめておく方が良い。

02)写真

写真に関する表現は大きく3つ「角版」「丸版」「切り抜き版」に分類されます。少し変わった特徴的な表現が求められる場合には丸版や切り抜き版が、スタンダードで安定感が求められる場合には角版が使われます。

2-1)角版(四角でトリミング)

安定感のある表現。多くの商品写真を並列に整然と見せる際などに有効。画像の縦横の比率は3:4、2:3、1:1など実際の写真の比率と合わせると良い。

2-2)丸版(特殊な形でトリミング)

ポップさ、柔らかさ、かわいさ、親しみやすさ、といった印象を出す際に適した表現。丸をフリーハンド風の緩いラインにする手法もある。

2-3)切り抜き版

要素の形状をしっかり見せたい場合に使える表現。部分的に飛び出させることで、ワンポイントにするといったテクニックがある。

03)人物

ランディングページにおいて人物の表現は、お客様の声や、こんなお悩みありませんか?をはじめ、様々な箇所で多用されます。加えて、人が発した言葉をどういった表現で見せるかがポイントになります。

3-1)吹き出し

人が発した言葉、感じた言葉を伝える表現。丸、四角、モコモコした形など、形状も様々。タイトルに小さくアクセントとして使うのにも有効。

3-2)シルエット

人の写真が使えない時、匿名性を持たせたい時などに使える表現。ベクターデータのフリー素材がネット上に豊富にあるのでそれらを活用すると良い。

04)評価

その商材が賞を受賞している、ランキングで上位、品質が保証されているといった場合には、その事実を特に分かりやすく伝える必要があります。一目で伝えるためには、その内容を想起させる物理的なモチーフを使うことが定石になります。

4-1)メダル

金や銀のグラデーション、月桂樹を組み合わせた形、下からリボンが出た勲章風など、様々な表現がある。中に自由に言葉を入れて使う。

4-2)証書

紙にプリントされた賞状や保証書がモチーフになることが多い。こういったモチーフでよく併用される、飾り罫をうまく取り入れると良い。

05)現実メタファ

UIデザイン表現はフラットでシンプルな方向に流れていますが、ことランディングページにおいては一目見た時のインパクトが特に重視されるため、商材によってはまだまだ現実メタファを用いて緻密に作り込んだ表現が必要とされる場合があります。

5-1)紙

複数ある情報を一つにグループ化する際に最も多用される表現。ノート、メモ帳、付箋紙など様々なバリエーションがある。

5-2)紙+α

より強く紙らしさを演出する際に使う表現。クリップや押しピン、テープなどを組み合わせて使うことが多い。

5-3)プリント写真

クラフト感を演出する表現。文字が書き込めるポラロイド風もある。こちらは角版と同様に、実際の写真の比率(3:4や2:3)を守るのが鉄則。

5-4)手紙

お客様の声や企業からの心を込めたメッセージなど、人間味のある気持ちを伝える際に使える表現。ペンを添えるケースもよく見られる。

5-5)黒板

専門的な知識を伝える際授業のようなシーンや、カフェなどのメニューを模した印象を演出する表現。チョークの多色使いも併用される。

5-6)リボン

見出しやアクセントなど、様々な箇所で使える汎用性の高いモチーフ。横にまたいだり、角に掛けたり使い方に大きく幅がある。

5-7)クリップボード

チェック、現場感、調査といった意味合いで、枠組みとして使われる。紙の表現、マーカー文字の表現とも相性が良い。

06)関係

ランディングページには、最終的に商材の申し込みへと繋ぐにストーリーがあります。自然にそのストーリー伝えるためには、要素同士の関係性をどれだけ分かりやすく表現するかが重要になります。

6-1)接続

情報をつなぐ表現。「つまり」「だから」「こちら」などで使われることが多い。矢印は強力な視線の誘導になるため、使いこなすと内容がグッと伝わりやすくなる。

6-2)比較

ビフォーアフター、こんなに変わりました、といった際の表現。変化前を抑えめにし、変化後の方を強く強調してメリハリを持たせるのがポイント。

6-3)並列

複数の要素を同等に扱う表現。チェックボックスと言葉を組み合わせたり、ナンバリングを使って幾つの情報があるのか一目で分かるようにした表現が多い。

6-4)ステップ

お申し込みなどの手順を説明する表現。矢印や三角で左→右、上→下に流れを表現するのがベター。商材の性質にもよるが、ステップは3〜5にとどめると分かりやすい。

07)背景

ランディングページはあっという間に読み進められるため、狭い範囲に要素を詰め込むより、広い範囲に要素を大きく並べていく方が読みやすくなります。反面、広く合いたスペースを寂しく感じさせないよう、背景をどう処理するかを考える必要があります。

7-1)放射線

特定の要素に対して、登場感や凄みを出す際に使う表現。主にメインタイトルや商品写真の背景に使える。

7-2)写真

ワントーンで薄い色にした写真を敷いたり、レンズのボケをイメージさせて手前の商品を目立たせる表現などがある。

7-3)パターン

規則的に同じ形を並べる表現。毎回パターンを作るのは非常に手間がかかるため、ネット上にあるフリーのパターン素材をストックしておくと便利。

08)境界

ランディングページ内は幾つかの大きな情報の括りが存在しますが、ユーザに飽きさせずにページを読み進めてもらうためには、その区切り毎に強くメリハリをもたせる必要があります。情報同士の境界線部分をどのように表現するかがポイントになります。

8-1)見出し帯

帯と言葉で情報の括りを示す表現。ページ内で統一して一つの表現を使い回すのも良いが、同じパターンが続く退屈なデザインになっていないかに注意する必要がある。

8-2)見出し帯+角(つの)

見出し帯が上下、どちらを指し示すのかをより分かりやすくした表現。矢印があることで、より情報を読み進める作用も働く。

8-3)斜め

スポーティーさ、アクティブさ、エッジーさを表現する際に有効。境界線上に商品をかぶせるように置くと、より画面に動きが出る。

8-4)波

大きな波の形で柔らかな印象にしたり、小刻みで尖った形でポップな印象にしたりと、表現したい印象によって手法も様々。いろんなルールを併用しない方が良い。

まとめ

実際のところ、ランディングページは星の数ほどあるため、ここで取り上げたもの以上にまだまだ数多くの要素やセオリーがあるはずです。ランディングページ制作の依頼が来た時にそのセオリーやサンプルを調べ始めるよりも、いつも見ているデザインの参考をチョコチョコとストックして定期的に整理することが、効率的且つ高品質でデザインを仕上げるためのコツなのではないかと思います。みなさんもぜひ、自分なりのセオリーを見つけ出してみてはいかがでしょうか。