ポートフォリオサイトをデザインから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. コーディングする

使用技術・ツール

デザイン

実装

ホスティング

画像CDN

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

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

イメージボードを作成

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

イメージボード

本来はもっとたくさん集めますが、今回はある程度作りたいデザインの方向性が決まっていたため、数を絞りました。
(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」の頭文字をイメージしたシンプルなロゴに仕上げました。