「いえざきゆめみのポートフォリオ」は、わたしのポートフォリオサイトです。 今後使えるアイデアや、自分の興味やできることを広げるための「れんしゅう」と、一定期間をかけて制作した作品をまとめている「つくったもの」がメインコンテンツとなっています。 作品で自分の好きなことやできることを伝えたり、作品が少しずつ増えていくことで、今まで気づくことができなかった自分の得意や傾向を知ることができるようなデザインにしました。見てくださる方・自分にとっての作品図録のような存在にしたいと思っています。

特に、ヘッダー・セクションやページのタイトルに使っているロゴが気に入っています。 様々な Web サイトを参考にする中で、自分のポートフォリオには「ナチュラルな雰囲気で手作りっぽい、少しずつつくりあげていく最中、というイメージにしたい」と思いました。 その印象に一番説得力を持たせてくれているのが、この手書きの文字たちです。

この文字は、大学で一緒に職員をしている先輩に書いていただきました。一文字ごとのやわらかい雰囲気や、「う」「の」など止めの墨だまりがかわいらしくて、とても気に入っています。

サインペンでコピー用紙に書いてもらったものをコピー機でスキャン後、そのデータを Adobe Illustrator で線抽出して使用しました。最初はプリンター設定が用途にあっていなかったためスキャンがうまくいかなかったり、Illustrator 上で自然なサインペンの線を抽出するのが難しかったです。 しかしその中でうまくいく方法を一つひとつ覚えていくことが楽しくて、今後も使える知識を得られた時間でもあったと思っています。

ヘッダーのナビゲーションメニューにカーソルを当てると、丸が描かれるようにアニメーションを設定しました。 丸がつけられる動きによって、ユーザーは自身がそのメニューを選んだと直感的にわかりやすくなります。また手書きの線なので、このポートフォリオで表現したい手作り感を引き立たせることもできています。ペンで丸を打つような動きが自然に表現できたのも好きなポイントです。

同じような理由で、ページの先頭に戻るための矢印ボタンにも手書きの線を使用しています。

画像を大きく、見せたいものを前に出すことを意識して制作しました。 トップページの各セクション、「つくったもの」内のスライドや、「れんしゅう」のコンテンツも同様です。 特に「つくったもの」は、サムネイル画像がトップページの中でも一番大きく表示されるようデザインしました。画面の真ん中にスライドが表示されているので、ユーザーがトップページをスクロールして眺めている間にも、印象に残りやすくできたのではないかと思います。

作品の写真・サムネイル画像を引き立たせるようデザインしたつもりだったのですが、画像が背景色と同化してしまい、画像と背景の境界がわかりにくくなってしまうことがありました。 そのためトップページとつくったもの一覧ページのスライドすべてに、背景色に似た薄い色の境界線を引くことで対応しました。（上の画像「つくったもの」のスライド2枚目は、背景とスライドが同化してしまい角丸がついていないように見える。下の画像「つくったもの」のスライドには、ベージュ色の角丸付きの線が見える）

また思っていたよりも、ポップアップを実装するのが難しかったです。ポップアップには Micromodal.js を使用しました。ポップアップがファーストビューの中に収まるよう高さを調整したり、ポップアップの中に入っている Swiper の矢印を配置するために余白を整えたり、 限られた枠幅を使ってコンテンツをきれいに見せるために、考えることが多い機能だと思いました。