Portfolioを2週間で作成してみる-前編-

どうもこんにちは！最近noteサボってたので最近の学びや気づ気をアウトプットし直していきます！！　現在進行形でPortfolio作成中なので工程や気づきをつらつら書いていきます。

制作フローがざっくり掴みたい人にはオススメかもです！！

まず、Portfolio作成を通しての目的

Portfolioという履歴書を作り、一定のデザインスキルと技術力を示すことです。また質の高いPortfolioを作成するために、以下のこと学びのポイントと設定しています。

1 デザインツールのXDをUIデザイン業務として使いこなせるようにする。
2 工数見積もりを通して、Web制作の全体の流れを掴む
3 プロトタイプの再現度を高める

1については、XDは以前から使用していましたが、アップデートで新しくなった機能や、基本機能のインプットをできていなかったため、今回のデザイン制作を機に学びなおすことにしました。
2に関しては、制作に必要な業務と期間を洗い出すことで、案件が入ってきたときの感覚が擬似体験できると考えました。
3については実装フェーズの部分で、フロントエンドの技術力の効率的なインプットを意識して進めたいと考えました。

何はともあれコンセプトを決める

まず誰に何をどう伝えたいのかの言語化をしていきます

ターゲット
- UI/UX領域のアシスタントデザイナーの求人をしているPMや採用担当者

何を伝える?
-デザインに対する熱意と誠実さ

採用担当者の方は、幾つものPortfolioを閲覧していることを想定して負担をかけないようなデザイン、(例えば、スライドなどの機能をつけないなどタップ操作が少ない)を意識しました。

どう伝える?(コンテンツ)
・TOP画面(自分の名前、Portfolioとわかりやすいページ)
・Skill画面(スキルをグラフ化してイメージで訴求)
・Work画面(実績部分、簡潔に役割と行ったことを示す)
・About画面(自分の自己紹介など)

ビジュアルコンセプト
-シンプルさの中に遊び心を。
シンプルなレイアウトで誠実さを表現しながら、デザインに対する思いを表現するために遊び心のある色使いや表現を施すことにしました。

工数見積もりって難しいのですね

しかも全ての工程を全部一人で実施するとなるとインプット時間も考慮するため、知識としても経験としてもない領域を工数として見積もるのは難しかったです。しかし、どれだけ完璧な工数を見積もっても実際の案件やPJなどでは工数通りに進む方が稀なので、ここは経験の差かなと感じました。

大まかなワークフローから小タスクを区切って、人日計算で
工数を区切りました。ここら辺はもっと工数見積もりやワークフロー整理が
上達したら別記事で書きたいです。

一週間でデザインを完遂させる。

1 ワイヤーを作る
デザインの骨格となるワイヤーフレームの作成です。
ワイヤーフレームとは、大まかなコンテンツの配置や構造(レイアウト)が表現されていものです。このワイヤーの作成が今後のデザインの可能性を決めてしまうので、じっくり時間をかけて(約8h)作成しました。
この部分でシンプルさを追求したかったため、左に固定ヘッダーを置いて、右側のコンテンツを左寄せにすることで整理された印象を与えるようにしています。

2 モックアップ
モックアップ作成では、配色、タイポグラフィー、コンポーネントなどを決め、ビジュアルコンセプトを明確に表現できるようにしていきます。
モックアップとは、簡単に言うと本物と見た目(配色、レイアウトなど)がそっくりのモノです。ここでは、遊び心を入れるために、凹凸を表現しているニューモフィズムを採用し、ボタンの要素として配置しています。

3プロトタイプ
プロトタイプを作成しページ遷移時のアニメーションや、情報設計の再確認を行いました。
ちなみにプロトタイプとは、モックアップにさらに動きをつけてより本物と近い状態にしたモノです。

XD使いこなせるようになった？

Adobe XDを業務レベルで使いこなすことを念頭に置いていたのでとりあえずXDの基礎レベルはこれでクリアだろうなと思うものを洗い出してデザイン作成時に並行してインプットを行いました。自動アニメーションの機能など、完璧に使いこなせている自信は今の所ありませんが基本機能については扱えるようになったと感じています。ここはアニメーション表現が必要になった時に細かいテクニックを学べばいいと考えています。

失敗したこと

工数の中にデザインシステム作成をモックアップ作成する前に設定していたが、そもそもデザインシステムって何？から始まりデザインシステムの目的はデザイナーと開発者の共通言語を作り、コミュニケーションコストを削減したり、ブランディング的要素があったりするので、今回一人で制作から開発ということであまり意味をなさなかったように感じました。しかし、このデザインシステムは今後チームで開発に関わって行く時は必須なので、目的や作成プロセスなど覚えておきたいです。

一人で全部やる大変さ

工数見積もりからコンセプト決め、デザイン制作を振り返ってみると、一人で全ての意思決定を行っているため、柔軟に対応できる分どのレベルまで成果物を持っていくかの設定が難しかったです。例えば実績ページを詳細に作ってある別ページを作ってコンテンツを充実させるか、Websiteのアイコンを作成し独自性を表現するかなどです。これは期間と優先順位を鑑みて、重要度が高く、なおかつ期間内に終了する見込みがあるものを要件に設定すればいいということに気づきました。次回は実装フェーズでの学びや気づきなどを書いていこうと思います。読んでいただきありがとうございました！

後編に続く

次回は実装フェーズでの学びや気づきなどを書いていこうと思います。最後まで読んでいただきありがとうございました！