ポートフォリオサイトをデザインからAstroで実装までしてみた(デザインコンセプト編）
ポートフォリオサイトをそろそろリニューアルしたいと思い、Markdownファイルをそのままブログ記事としてポストできるAstroを使ってポートフォリオサイトを作ってみました。
「これからポートフォリオサイトを作ってみようかな」と考えていらっしゃる方に、少しでもお役に立てれば嬉しいです。
完成したポートフォリオサイト
ポートフォリオサイトが出来上がるまでの流れ
今回は、デザインから実装まで一通り行いました。
おおまかな流れは以下のようになります。
- デザインコンセプトを決める
- ページ構成を考える
- ワイヤーフレームを作る
- デザインカンプを作る
- コーディングする
使用技術・ツール
デザイン
実装
- Astro(今回のメイン）
- tailwindCSS
- React(Splineで作った3Dグラフィックの表示に使用）
ホスティング
- Vercel（いろいろ選択肢はありますが、今後お付き合いが増えそうなので）
画像CDN
- Cloudinary(ブログを書くのに画像が増えていきそうなので）
デザインコンセプトを決める
ポートフォリオサイトを作るにあたり、どういうデザインにするかコンセプトを決めます。
イメージボードを作成
様々なアプローチがあると思いますが、私の場合は、作りたいサイトのイメージに合う他のサイトのデザインをひたすら集めて、イメージボードを作成します。
本来はもっとたくさん集めますが、今回はある程度作りたいデザインの方向性が決まっていたため、数を絞りました。
(catnoseさんのポートフォリオサイトがとても良いですね！！）
デザインを言語化する
イメージボードを作成することで、デザインしたいサイトのイメージが見えてきますので、どういったデザインにしたいのかを言語化していきます。
- 暗めの青をベースにした配色(アクセントカラーは明るい水色）
- catnoseさんのポートフォリオサイトのようなファンシーな雰囲気
- Microsoft fluent emojiの採用
- 3DグラフィックをSplineで作成
- LINE SEED fontをWebフォントで使用
- ブログのアーカイブページはタイムラインで表示
ファンシーな雰囲気を出すために、MIT licenseで公開されているMicrosoftのfluent Emojiを使わせて頂きます。
また、最近はまっているSplineで作った3Dグラフィックのテイストがこの雰囲気に合いそうなので、ポイントで使用していきます。
そして、LINEさんより、SIL Open Font Licenseで公開された素敵なフォント「LINE SEED」フォントもWebフォントとして使わせて頂きます。
ここまで来ると作りたいデザインが大分具体的になって来ますので、次の「ページ構成を考える」ステップへと進みます。
（おまけ）さくっとロゴデザイン
作りたいデザインの言語化ができたことで、デザインの方向性がイメージできるようになったので、この段階でロゴを作ってしまいます。
ただ、ロゴは時間をかければいくらでも時間をかけることができるので、今回はポートフォリオサイトの公開を優先し、さくっと作成してしまいます。
作成したロゴ
「ｍ」の頭文字をイメージしたシンプルなロゴに仕上げました。
Discussion