Works
制作物
2023
Mar
ポートフォリオサイト
- 担当
- Design / Coding (HTML / SCSS / jQuery)
- ツール
- Figma / Illustrator / Photoshop / Visual Studio Code / Github
- 期間
- デザイン：3ヶ月
実装：2週間
転職活動のために自身のポートフォリオサイトを作成いたしました。学習をする中でデザインを作っては別案を制作しを繰り返しデザインを練りました。
経験が浅い中での転職のため、採用担当者様はどのようなポートフォリオならば見てもらえるか考え、自身の強みなど伝え名前を覚えてもらえるように制作しております。レスポンシブ化対応済みです。
ターゲット
- Webサイト制作会社の採用担当者様。
- 少ない時間の中、多くのポートフォリオを見なくてはならない。
- メインデバイスはPC。さっと移動中などにスマホで見ることもある。
コンバージョン
- 採用担当者様にサイトを開き、内容を見てもらえるポートフォリオ。
- 応募者がどのような人柄か、スキルマッチするかどうか判断してもらえるようにする。
ファーストビューの背景とタイポグラフィ
ファーストビューは左右にラインを引き、左に固定メニュー、右側にあしらいテキストを入れております。これらは、ポートフォリオは採用担当者様にお渡しするものと考えこの形は菓子折りのパッケージデザインやそれに掛かった熨斗から着想を得ました。
最初は左右のラインは、四方をぐるっと囲うラインで1ページスクロールで構成されたデザインでしたが、内容量の制限がかかること、見やすさの点を考慮し現在の左右のみのデザインに変更いたしました。
右側のあしらいテキストには"Keep your weird!"と入れました。これは以前旅行で訪れたアメリカ・ポートランドのスローガン（Keep Portland Weird）です。個性的で人と違っていることを歓迎するポートランドにぴったりな言葉です。それぞれの個性や強みを楽しみ活かせる、そういった制作ができればと考えております。
背景には、インクを垂らしている動画を使用しております。私自身、墨流しやマーブリングが好きで服やペーパーアイテムを集めているのですが、どこかじっと見てしまうような不思議な雰囲気の動画でこのポートフォリオを見てもらえたらと思いこの動画を採用いたしました。
使用フォント
タイトル(欧文) : Al Ragas
欧文 : Montserrat
和文 : IBM plex sans JP
タイトルには装飾の意味も込めAl Ragasというフォントを使用いたしました。やわらかい部分もありますが毒のあるようなあしらいがあり、背景の動画や全体の雰囲気を出すためにもぴったりだと考え採用いたしました。
Montserratは、装飾テキストとは反対に可読性の高さとどっしりとしたウェイトの安心感から選びました。ブエノスアイレスの都市開発により失われてしまう都市型タイポグラフィーの美しさを自由なライセンスで解放していくというプロジェクトのフォントだそうです。
IBM plex sans JPは読みやすさ重視で採用いたしました。"font-feture-settings:"palt";を指定した上で、文字間やラインハイトを微調整し文章が重く読み難くならないように調整をかけております。
制作物ページ
下層の制作物ページはトップページとは変わって白ベースにいたしました。制作物に重きを置き、引き立たせるために白にノイズをかけた背景を使用しシンプルにいたしました。
担当フェーズや期間使用ツールなどはぱっとわかるように表形式にし、ピックアップした制作時のこだわりポイントを掲載しております。
問い合わせセクション
ファーストビューやスキルセクションなどはダークトーンですが、最後のコンタクトページでは、白バージョンの動画を使用し、ピンク縁取りのテキストでシンプルに問い合わせリンクを設置いたしました。
ここのセクションは結の部分にあたるため、明るく転調させ前向きな雰囲気が出せる様にいたしました。
改めてターゲットの視点に立ち、サイトの見やすさの工夫、情報の取捨選択をすることは難しいと感じました。様々な人に見てもらい、意見をいただきながら制作を進め、"私”を知ってもらうことができるポートフォリオが出来たのではないかと思います。
Other Works
制作物
