date：2024.11
tool：Figma / Visual Studio Code
Outline
制作概要
SNSで活動しているイラストレーターくろやぎ様のポートフォリオサイトの制作、実装、運営管理を依頼されました。ヒヤリングから2つの絵柄でイラストを制作できる点を強みとして、ターゲットからお問い合わせをいただくことをゴールと設定し、ユーザーにとって見やすく、実装面では管理、更新のしやすいサイト制作を意識しました。
2024年の11月末にサイトを公開し、12月の1周目に1件目のお問い合わせをいただく効果も発揮しました。
担当範囲：企画、デザイン、コーディング、運営管理
-
課題
絵柄が複数あり、訴求方法が定まらない。
既存のサイトはイラストを制作時期、ジャンルに分けて掲載しているが、ページごとに遷移する必要がありテンポよく作品を確認しにくいと感じる。 -
目的
イラストの方向性を決めてアピールし、企業からのお問い合わせをいただくための窓口を作る。
-
ターゲット
イラストレーターを探している出版社、ゲーム会社の企画者。
-
情報設計
作品の絵柄を「ゲーム向けのリッチでカッコ良い絵柄」、「児童書向けのシンプルで可愛い絵柄」の大きく2つに分け、「小中学生の勉強も遊びも支えたい」というコンセプトを設定しました。
トップページではファーストビジュアルで2つの絵柄を得意とする強みをアピールし、それぞれの作品一覧に素早く遷移できるようボタンとしても配置しています。
次に活発的に活動していることをアピールするための「topics」を前半に配置することで「現在進行形で活躍している」印象を与え、信頼感と安心感につなげます。「work」にてユーザーに対してコンセプトイメージの定着を図り、「contact」にて依頼に繋げる構成にしています。
最後に「profile」にてクライアントの詳細を伝え、依頼を検討する段階でクライアントの人柄や姿勢に触れられる設計としています。 -
デザイン
イラストが一番目に入るように装飾を最低限にしたシンプルなデザインを意識しました。メインカラーはベーシックかつ、クライアントのイメージカラーであるモノトーンを採用し、「ゲーム向けの絵柄」にはライトブルーを「児童書向けの絵柄」にはイエローをアクセントカラーに設定しました。絵柄の違いを視覚的に明確にするため補色対比を用い、絵柄の切り替え部分で明確な色の変化を設けることで、ユーザーの視線誘導と内容理解を同時に促す設計にしています。
実装面では今後の更新、管理のためにも、コードの再利用性が高く、メンテナンス作業の効率化を図れるpugを採用しました。
