ポートフォリオサイトをデザインからAstroで実装までしてみた(デザインコンセプト編）

Published on 2023-01-10

Written by motogram

この記事はZennでも公開しています。

https://zenn.dev/motogram/articles/547ad157d2ddea

ポートフォリオサイトをそろそろリニューアルしたいと思い、Markdownファイルをそのままブログ記事としてポストできるAstroを使ってポートフォリオサイトを作ってみました。

https://astro.build/

ポートフォリオサイトが出来上がるまでの流れ

今回は、デザインから実装まで一通り行いました。

おおまかな流れは以下のようになります。

1. デザインコンセプトを決める
2. ページ構成を考える
3. ワイヤーフレームを作る
4. デザインカンプを作る
5. コーディングする

使用技術・ツール

デザイン

• Figma（現在はこれ一択ですね）
• Spline(3Dグラフィック作成ツール）

実装

• Astro(今回のメイン）
• tailwindCSS
• React(Splineで作った3Dグラフィックの表示に使用）

ホスティング

• Vercel（いろいろ選択肢はありますが、今後お付き合いが増えそうなので）

画像CDN

• Cloudinary(ブログを書くのに画像が増えていきそうなので）

デザインコンセプトを決める

ポートフォリオサイトを作るにあたり、どういうデザインにするかをコンセプトを決めます。

イメージボードを作成

様々なアプローチがあると思いますが、私の場合は、作りたいサイトのイメージに合う他のサイトのデザインをひたすら集めて、 イメージボードを作成します。

本来はもっとたくさん集めますが、今回はある程度作りたいデザインの方向性が決まっていたため、数を絞りました。
(catnoseさんのポートフォリオサイトがとても良いですね！！）

デザインを言語化する

イメージボードを作成することで、デザインしたいサイトのイメージが見えてきますので、 どういったデザインにしたいかを言語化していきます。

• 暗めの青をベースにした配色(アクセントカラーは明るい水色）
• catnoseさんのポートフォリオサイトのようなファンシーな雰囲気
  • Microsoft fluent emojiの採用
  • 3DグラフィックをSplineで作成
• LINE SEED fontをWebフォントで使用
• ブログのアーカイブページはタイムラインで表示

ファンシーな雰囲気を出すために、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

ここまで来ると作りたいデザインが大分具体的になって来ますので、次の「ページ構成を考える」ステップへと進みます。

（おまけ）さくっとロゴデザイン

作りたいデザインの言語化ができたことで、デザインの方向性がイメージできるようになったので、この段階でロゴを作ってしまいます。

ただ、ロゴは時間をかければいくらでも時間をかけることができるので、今回はポートフォリオサイトの公開を優先し、さくっと作成してしまいます。

作成したロゴ

「ｍ」の頭文字をイメージしたシンプルなロゴに仕上げました。