Published on 2023-01-10
Written by motogram
この記事はZennでも公開しています。
https://zenn.dev/motogram/articles/547ad157d2ddea
ポートフォリオサイトをそろそろリニューアルしたいと思い、Markdownファイルをそのままブログ記事としてポストできるAstroを使ってポートフォリオサイトを作ってみました。
今回は、デザインから実装まで一通り行いました。
おおまかな流れは以下のようになります。
ポートフォリオサイトを作るにあたり、どういうデザインにするかをコンセプトを決めます。
様々なアプローチがあると思いますが、私の場合は、作りたいサイトのイメージに合う他のサイトのデザインをひたすら集めて、 イメージボードを作成します。
本来はもっとたくさん集めますが、今回はある程度作りたいデザインの方向性が決まっていたため、数を絞りました。
(catnoseさんのポートフォリオサイトがとても良いですね!!)
イメージボードを作成することで、デザインしたいサイトのイメージが見えてきますので、 どういったデザインにしたいかを言語化していきます。
ファンシーな雰囲気を出すために、MIT licenseで公開されているMicrosoftのfluent Emojiを使わせて頂きます。
https://github.com/microsoft/fluentui-emoji
また、最近はまっているSplineで作った3Dグラフィックのテイストがこの雰囲気に合いそうなので、ポイントで使用していきます。
そして、LINEさんより、SIL Open Font Licenseで公開された素敵なフォント「LINE SEED」フォントもWebフォントとして使わせて頂きます。
https://seed.line.me/index_jp.html
ここまで来ると作りたいデザインが大分具体的になって来ますので、次の「ページ構成を考える」ステップへと進みます。
作りたいデザインの言語化ができたことで、デザインの方向性がイメージできるようになったので、この段階でロゴを作ってしまいます。
ただ、ロゴは時間をかければいくらでも時間をかけることができるので、今回はポートフォリオサイトの公開を優先し、さくっと作成してしまいます。
「m」の頭文字をイメージしたシンプルなロゴに仕上げました。