検索結果0件」

    未経験でも受かるWebデザイナーのポートフォリオの作り方7選

    2020/11/08
    未経験でも受かるWebデザイナーのポートフォリオの作り方7選

    こんにちは、シンヤです!
    先日、以下のツイートをしました。

    未経験でも受かるWebデザイナーのポートフォリオ7選
    ・課題を伝える
    ・解決案を伝える
    ・ペルソナを伝える
    ・論理構成を伝える
    ・数字を伝える
    ・Material Designを踏襲する
    ・細部にこだわる
    という感じです
    小綺麗な見た目しか作れない人は落とします
    それ以前にDesignは「設計」という意味です😀

    こちらのツイートについて、深掘りして解説していこうと思います。


    僕はデザイナー採用担当者でもあります

    時期的にコロナで採用は止めていますが、コロナ前まではデザイナー採用担当でした。
    なのでデザイナーのポートフォリオは、それなりに見てきたつもりです😊

    そんな僕が、未経験でも採用したいと思うWebデザイナーのポートフォリオは、以下の通りです。

    1. 課題を伝える
    2. 解決案を伝える
    3. ペルソナを伝える
    4. 論理構成を伝える
    5. 数字を伝える
    6. 「Material Design」を踏襲する
    7. 細部にこだわる

    という感じです。
    以下に詳しく解説いたします。


    1. 課題を伝える

    僕らデザイナーというのは、アーティストではありません。
    「商業デザイン」というのは商売なので、必ず誰かの課題を解決するために作品を作ります。

    つまり制作物に対して解決したい課題感がないというのは「なぜこの制作物を作らないといけないのか」を把握していないということです。

    それは別の言い方をすると、言われたことをこなしているのと同じです。
    厳しい言い方をすると、言われたことだけをこなす「指示待ち人間」は不要です。

    これは経験の有無は関係ありません。
    未経験でも課題感を持って制作に取り組んでいる人もいるし、経験者でも「言われたことだけしかこなせない人」は大勢います。

    言われたことだけをこなすだけなら作業は外注すればいいし、発注先にはいくらでもあります。
    一緒に働くなら「課題が何か」を捉えつつ、お互いディベートしあって、作品を磨き上げられる人材が欲しいのです。


    2. 解決案を伝える

    課題をとらえた制作物を作れることをアピールできるなら、次は「どうやって課題を解決したか」をポートフォリオに盛り込みましょう。

    面接担当者は「課題を解決するために、どのようなアプローチを試みたか」を知りたいのです。

    例えば例を挙げると、以下のような感じですかね。

    転職サイトの場合

    • 課題:求人に応募してくれない
    • 仮説:求人が沢山あるので、どれに応募したらいいかわからない
    • 解決案:「新着記事」の項目を設け、新しい求人を見てもらう

    などですかね。

    ちなみにこれは適当に作ったので、上記はそのまま真似しないでください😅


    3. ペルソナを伝える

    ペルソナとは簡単にいうと「どのような人に対して作る制作物なのかを定義したもの」になります。
    つまり、制作物を利用する架空のお客様という感じですね😊

    制作物を作る前には、ほとんどの場合「ペルソナ」を作ります。
    なぜなら、誰に向けて作るかを定義しないと、制作物に入れるメッセージを決められないからです。

    仮に僕がペルソナを作るとなると・・・

    このブログのペルソナ

    • ターゲット
      • テクノロジーに関心がある20代の若者
    • 性別
      • 男女共に見るが、男性が比率多め
    • 性格
      • めんどくさがり・流行り物が好き・飽き性
    • 趣味
      • ネットサーフィン・Netflixで動画を見る
    • 年収
      • 300万円〜400万円前後
    • ITリテラシー
      • それほど高くない(スマホが使える程度)

    というような感じです。
    ペルソナを入れてもらうと、採用担当者も「制作物を利用しているユーザー」がイメージしやすいです😊


    4. 論理構成を伝える

    デザインとは基を正せば「設計」という意味です。
    設計という言葉の意味を紐解くと・・・

    ある目的を具体化するためのもくろみ

    となります。
    つまりデザインとは・・・

    1. 問題を解決するために「計画」を立てて
    2. 計画を基に「解決案」を考えて
    3. 解決案を実際に「図面」に描いていく

    ということを繰り返します。
    つまりデザインとは「論理構成の塊」なんですよね。

    なのでポートフォリオには、制作物の論理構成を入れるのは最低限必要だと思っています。
    でないとデザイナーとしての能力が推し量れませんからね😅


    5. 数字を伝える

    これは経験者向けかもしれませんが、デザインは商業成果物である以上「数字」は必ず全て付きまといます。

    • KPI:目標
    • PV:ページを見られた数
    • CTR:クリックされた比率
    • CVR:商品購入率
    • ROI:投資利益率

    などなんでもいいですが、解決したい課題に対して、どれだけの成果を出すことができたのかを見たいのです。

    課題を捉える力があるなら、必ず「どれぐらい課題を解決できたか、数字で表す」ことに対して非常に強い拘りを持っています。

    未経験者であれば、バナーを作って実際に少額で広告配信をしてみるのもいいかもしれません。
    今ならGoogle広告が7,500円分無料で使えますしね😀


    6. 「Material Design」を踏襲する

    Material Designとは、Googleが提唱しているデザインシステムです。
    デザインシステムとは、サービス開発する上で必要なデザインを、一つの統一されたルールで言語化されたガイドラインのことです。

    つまりデザインシステムがあると、あらゆる画面で統一された見た目を提供できるということです。

    昨今はLPやコーポレートサイト、ブログなどにも、Material Designを応用します。
    WebやアプリのUIデザインだけでなく、Webデザインを行う際にも非常に重要な原則となっています。

    Material Designの原則

    Introductionの項目には、以下のように書かれています。

    Material is the metaphor
    Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.


    Bold, graphic, intentional
    Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience.


    Motion provides meaning
    Motion focuses attention and maintains continuity through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment with interactions generating new transformations.

    これをよりかんたんに分解すると、以下の2つになります。

    現実の物理法則を適用させる

    見た目と動きに意味を持たせる

    になります。


    以下のような挙動はNGです

    物体がゲル状になる
    液体が注がれる
    物体がガス状になる

    以下のように現実の物理法則を適用させます

    物体同士の高さの概念を表現するために、影を入れる
    (出典:Elevation
    遷移を表し、物体を画面全体に表示させ、メッセージを見やすくする
    (出典:Navigation transitions
    ボタンを押したらメニューを表示し、コンテンツを右にずらす
    (出典:Component behavior

    7. 細部にこだわる

    商業成果物とはいえ、世に出る作品です。
    いわば「自分が生み出した子供同然」です。
    にもかかわらず適当に仕立て上げて、細部に対してこだわりを持てないのであれば、デザイナー失格です。

    そのような「手抜き感」があるポートフォリオはすぐわかります。
    細部に対してこだわれない人は、仕事も雑であることが多いので、デザイナーとしても同僚としても信頼を置けません。

    将来性にだけ目を向けてIT業界に入りたいと思っている人に多いと思います。
    我々はテクノロジーを活用したモノづくり集団でもあるので、ある種職人気質なところがあります。

    つまり端的にいうと「こだわりが非常に強い人が多い」ということです。
    金や将来性にばかりに目を向けて、肝心のモノづくりに対するこだわりがない人は、IT業界で生きていくのには向いていません😱


    見た目だけ小綺麗に整えられただけのポートフォリオは要らない

    これがデザイナー採用担当者からの正直な感想です。
    そもそもDesignとは「設計」の英語読みなので、綺麗な見た目の画面を作る仕事ではありません。

    さらにDesignの言葉を深掘りすると、"計画を記号に表す"という意味のラテン語designareです。
    つまりデザインとは「設計業務」なのです。

    にもかかわらず、見た目だけ小綺麗に整えられただけのポートフォリオを出す人が多すぎます。
    僕はそのようなポートフォリオを見ると・・・

    箱だけきれいに整えられて、肝心の中身が残念なプレゼント

    上記のように受け取ってしまいます。
    箱には興味なくて「箱の中身」が大事なんですよね😅

    見た目を整えることしか頭にない人は、僕はデザイナーを名乗る資格はないと思います。


    最後に

    確認のために「未経験でも受かるWebデザイナーのポートフォリオの作り方7選」を復唱します。

    1. 課題を伝える
    2. 解決案を伝える
    3. ペルソナを伝える
    4. 論理構成を伝える
    5. 数字を伝える
    6. 「Material Design」を踏襲する
    7. 細部にこだわる

    以上になります。
    そして最後に大事なことを繰り返し書きます・・・

    見た目だけ小綺麗に整えられただけのポートフォリオは要らない

    この記事を参考に、よりよりポートフォリオ作りに挑戦してみてください。
    ではでは、またね〜🤗

    • 未経験でも受かるWebデザイナーのポートフォリオの作り方7選