ゴール
制作面
自分の出来ることを知ってもらう
可能な限り思考過程を伝える
スキル面
デザイン：XDの各種機能（コンポーネント・スタック・リピートグリッド）を用いて制作する。
ロゴとスキルアイコンを関連したデザインで作成する。安心感のある雰囲気をデザインする。
コーディング：FLOCSSによりコンポーネント単位で実装する。
ロゴにSVGアニメーションを実装する。
配色
安心感のある雰囲気にするため、柔らかい色で、かつ好きな北欧の配色を選択しました。
素材
スマートフォンのモックアップはリアルなものを使用し、PCから見てもイメージしやすいものとしました。
ロゴはRをモチーフとして、子供の頃好きだった恐竜を取り入れてデザインし、
スキルアイコンはそこから派生させて作成しました。いずれもIllustratorで作成しています。
ペルソナなど、制作時に作成した資料はなるべく掲載するようにしました。
モックアップ：Pixeden「Free iPhone X Psd Mockup Vector」
カンプ
メインビジュアル以外は、作品が目立つようになるべくシンプルなデザインとしました。（実際の作品点数が少ないので、これから増やします…!）
作品解説ページは、出来る限りそれぞれの判断理由を伝えることを意識しました。
フォントは柔らかい印象でありながら汎用性が高いものとして、筑紫A丸ゴシックとQuicksandを選定しました。
コーディング
FLOCSSを参考に、コンポーネントベースでファイルを分割して制作しました。
コンポーネントベースによる制作を導入したことで、「今どの部分を作ろうとしているか」という意識が明確になり、作業に取り組みやすくなりました。
コンポーネント部分と余白部分の区別が徹底出来なかったので、制作を重ねてこちらも整理していくことで、作業効率も上がっていくと感じました。
SVGアニメーションは vivus-instantというブラウザサービスを使うことで効率良く作成することができました。
制作経緯
なるべくシンプルに、かつ思考過程を伝えることを意識して制作しました。
複数ページの制作は初めてでしたが、コンポーネントベースを取り入れたことで、各パーツを再利用しながら制作することが出来ました。
ターゲット
採用担当者・クライアント