案件概要
自分の制作物をまとめて閲覧できる方法がない
自分についてまとめた資料がない
自分の制作物と自分自身についてまとめたポートフォリオにする
WEB制作会社
1週間
2か月
4週間
figma
photoshop
VSCode
サイト制作の目的やアプローチを考案するための5W1H
自己分析およびPROFILEページの漫画の構成
ターゲットを具体的に想定するためのペルソナ
デザインコンセプト
余白、シンプル、綺麗、優しい、人の役に立ちたい人、個性的、ポップ、明るい
他の人のポートフォリオと差別化された“自分だけのポートフォリオ”にすることを特に意識しました。そのために試行錯誤した結果、とにかく自分の好きな要素を可能な限り詰め込めば自分らしいポートフォリオになると思い、趣味のイラストを使った構成や配色にしました。
このポートフォリオを通して自分が好きなデザイン、作りたいデザインをアピールしたいと思い、このコンセプトにしました。情報のグルーピングがどのようになされているかを見た人が一目で分かるように、要素間の余白には特に気を付けました。
メインカラーが存在感ある黄色であり、サイト全体にイラストが散りばめられているため、背景となるベースカラーは情報量の少ない白色にして、個性とシンプルさのバランスを調整しました。
自分の好きな色であること、イラストを散りばめたポップな雰囲気との相性が良いことから、この色味の黄色をメインカラーにしました。
メインカラーと相性がよく、可読性と視認性が高いこの黒色をテキストカラーにしました。白色とのコントラストを抑えて読みやすくするため、少し淡いトーンにしました。
英語フォント（セクションタイトル）は、シンプルで飾りがないサンセリフ体の中から“Roboto”を選びました。サイトの大半を占める日本語フォントが細くて柔らかいフォントを使用しているので、タイトルはシンプルで程よく太い“Roboto”を大きく使用し、タイトルと本文でメリハリがつくようにしています。
自分の個性の一つである“優しい性格”をサイト全体で表現するために、その目的に合うフォントを選びました。“Zen Kaku Gothic Antique”は丸み加減が強めで、柔らかい形が優しい雰囲気を演出するために適している点が選んだ理由です。
ファーストビュー没案
制作のポイント
私はキャラクターの絵を描くことが好きなので、自分自身のイラストをサイトの個性にしました。サイトの各所に自分のイラストを散りばめることで、ターゲットである制作会社の採用担当者様に「ケンさんのポートフォリオサイトはこのイラストのサイトだ」と覚えてもらう狙いです。簡単な自己紹介文を載せたPROFILEのセクションでは、自分の好きなものをイラストとして載せてアピールし、サイトをよりポップな雰囲気にしました。
ファーストビュー動画の絵コンテ
没イラスト集
ターゲットである制作会社の採用担当者様が手短に閲覧できる見やすさを重視し、デザイナーへの志望動機や自分の強みを簡潔な文章とイラストでまとめました。また志望動機であるSTORYセクションは6コマの漫画でまとめることで、他の人のポートフォリオサイトと差別化しました。漫画は本来右から左に視線を動かしますが、WEBサイトは左から右が一般的なので他のセクションとの整合性を考えて左から右の順でコマを読むようにしました。コマの大きさが均一であるため、どの順番で読めばいいか迷わないよう読む順にコマがフェードインして表示されるようにしました。
振り返り
今回の制作では、一度見たら“ケンさんのポートフォリオ”と覚えてもらえるようなサイトにするため、企画・設計に拘りました。オリジナルのイラストを使用したことで、他の人のポートフォリオと差別化したものにできた手応えを感じられました。自分らしさを表現しながら、自分が好きなシンプルで綺麗なデザインを自分なりに表現できた点が、今回の制作で最もよくできた点だと自己評価しています。
また余白のつけ方の基礎を改めて確認して余白を調整したことで、余白を作る時に意識すべきことを確認することが出来たため、このデザインに挑戦して良かったと感じています。
改善点はFigmaの要素をもっと整理整頓しながら制作できるようにすることです。自分一人での制作なので自分が困るだけでしたが、チーム制作ではデータを共有するのでそうはいきません。そのため、誰が見ても使いやすいよう改めてルールを決めて、定期的にファイル整理をするよう心掛けていきます。
元々全く異なるデザインでポートフォリオ制作を進めていましたが、デザインが迷走してしまい没にしました。そちらについてもnoteでまとめていますので、是非ご覧くださいませ。
記事はこちらをクリック
