駆け出しのWebデザイナーが基礎学習を終え、さらに大きく成長するには実案件を制作し、納品するのが一番の近道です。
実案件を獲得するのに一番重要な、ポートフォリオに載せる作品作りについて書いていきます。
そもそもポートフォリオって何？
そもそもWebデザイナーにとっての「ポートフォリオ」とは、
自分の作品・実績（Webデザインやコーディング実績など）をまとめておく作品集の様なもので、これを企業や、仕事の発注者にみてもらい、「僕はこんなことできますよ！こんなWebデザインできますよ！」とアピールする作品集です。
駆け出しのWebデザイナーは実績が少ないので、発注側の判断材料が少ないことが多いです。なので、同じ金額で制作実績が少ない人と多い人だと、間違いなく後者にお願いしますよね。
そこで少しでも自分の実力が伝わる様に、また、判断材料を多くしてもらうために、充実したポートフォリオが必要になってきます。
このポートフォリオに載せる作品作りの仕方をアウトプットしていきます。
ポートフォリオ制作の流れ
ポートフォリオサイトの作成において、参考にさせてもらったサイトがこちらになります。未経験デザイナーのためのポートフォリオの作り方【載せる作品づくり編】
ポートフォリオ制作の流れ
①ポートフォリオに載せる作品をつくる
②作品を言語化してまとめる方法を考える
③いざポートフォリオづくり
https://liginc.co.jp/456044
この流れで作成していきます。
今回は、こちらの「①ポートフォリオに載せる作品をつくる」をやっていきます。
「ポートフォリオに載せる作品をつくる」手順
- つくる作品の決定
- 目的・目標設定
- ペルソナ策定
- サイトに流入するまでの流れ
- コンテンツ情報の精査
- コンテンツの組み立て
- イメージボードの策定
- ワイヤーフレーム設計
- デザイン制作
こちらの手順でやっていきます。引用:https://liginc.co.jp/456044
実案件をとることが難しいので、今回はデザインスキルをみてもらうため、架空サイトを作っていきたいと思います。
1.つくる作品の決定
今回は架空のホテルのWebサイトを作ります。
おすすめは周りの友達や知り合いの人で、美容師・フォトグラファー・イラストレーターなど作品を作る人を探してみて、作らせてもらえないか言ってみるといいかもです。
2.目的・目標設定
目的：売り上げのアップ
目標：新規顧客をふやす、Webサイトからの集客
とします。
ちなみに目的と目標の違いは、こちらです。
- 目的：最終的なゴール
- 目標：ゴールまでの道標
3.ペルソナ策定
ペルソナとはマーケティング用語で、「企業が提供する製品・サービスにとって、もっとも重要で象徴的なユーザーモデル」のことです。引用:https://smmlab.jp/?p=20107
噛み砕くと、想定ユーザーのことです。
今回の架空のホテルの例でいくと、どんな人が予約してくれるかな？どんな客層をターゲットにして集客するかな？という部分を設定するということです。ペルソナの設定によって、Webサイトのデザインや、動線なんかも変わってきます。
今回のペルソナ
- 名前：佐藤みき 25歳 独身
- 北海道在住
- 仕事でバリバリ稼いでおり、常に忙しい。
- 28歳のアウトドア好きな彼氏がいる。
- 彼氏の誕生日におしゃれなホテルに１泊し、お祝いしたいと考えている。
- ホテル選びのポイント① 綺麗な室内でおしゃれ
- ホテル選びのポイント② 価格は１泊2人で30,000円~40,000円
4.サイトに流入するまでの流れ
どういう経路でこのWebサイトに流れてくるかを考えます。
インスタグラムのハッシュタグから画像の発見→検索流入
5.コンテンツ情報の精査
ペルソナにとって必要な情報の洗い出しをしていきます。ペルソナのニーズですね。
今回は、おしゃれな空間が伝わること。提供しているサービス。世界観。
6.コンテンツの組み立て
コンテンツの組み立てをしていきます。
「ヘッダー→コンセプト→etc→…」って感じです。
今回のコンテンツはこちらです。
- ヘッダー
- メインビジュアル
- コンセプト
- 特徴
- 部屋紹介
- レストラン
- バー
- アクセス
- インフォメーション
- コンタクト
- フッター
7.イメージボードの策定
思いつくイメージを具現化してきましょう。ここは慣れてこないと難しいと思います。
僕もイメージを膨らませるために、いろんなWebサイトをみてみたりしました。手書きでもいいので、ラフ案を書いていきます。
8.ワイヤーフレーム設計
ワイヤーフレームとは、Webページのコンテンツなどを大まかに書いた構成図のことです。
今回作成したワイヤーフレームがこちらです。
9.デザイン制作
ここからデザイン制作です。上記ワイヤーフレームを元にして、画像の挿入、文字の挿入、彩色などを行ってきます。ここが一番肝心で、難しいところです。
インプット量を多くして、できるだけアウトプットしていかないとうまくならない様な気がします。
僕ももっとアウトプットしていきます。
今回はこの様なデザインにしました。
今回はここまでにします。
お疲れ様でした。
コメント