Gridsomeでポートフォリオサイト、はじめました

はじめまして、ソフトウェアエンジニア＆写真家の花村貴史です（@nnammg）。ニックネームは「はなむら」の間をとって「なむ」です。

横浜で生まれ育ち、脱サラ信州移住をへて、今は関西で妻と二人暮らしをしています。どんどん西に向かっています（笑）

エンジニアとしては SAP （ ERP ）やフロントエンド系に携わりつつ、写真では人物を撮らせていただいたり、風景やストリートを撮っています。愛用のカメラは FUJIFILM X-H1/X-T1、RICOH GR/GXR です。

そんな僕が Gridsome と Tailwindcss の力を借りてポートフォリオサイトを作りました。公開にあわせて写真 2 作品、グラフィック 1 作品を載せいてますので、よかったら見てやってください。

Gridsome と Tailwindcss を使用

僕はもともと WordPress を使っています。

これとは別に、僕の作品をあっちゃこっちゃのサービスに掲載しつつも、総合管理できるサイトがほしくなりました。そう、ポートフォリオサイトですね。

しかも自分好みのデザインにしたかったので静的サイトジェネレーターの「Gridsome」と、CSS フレームワークは「Tailwindcss v1.2 系」を使いました。

僕の好きな Vue.js が使われているし、JavaScript の勉強にもなるし、自由にデザインできる。めっちゃ楽しそう！ということで技術を選定。

Vue.js のおかげでサクサク画面遷移するのは気持ちいいです（笑）

以下のようなことにこだわっていいます。

心地よい余白
- 雑誌のような媒体にしていきたいから。
フォントは游教科書体横用
- 書体として気持ちいいから。
  インストールされてなければ macOS はヒラギノ角ゴシックが、Windows は BIZ UDP ゴシックかメイリオで表示されます。
- 【2020.10.3 追記】
  ヒラギノ角ゴシックに変更しました。無難なフォントだからこそ、とても見やすいと感じます。
サイトのカラーリングはシンプルに
- 作品のサムネイルに目立ってほしいから。

サイトの雛形を作ったときは VSCode を使っていました。

雛形をベースにポートフォリオサイト開発段階で、購入したばかりのPyCharmに移行。WebStorm に Python 機能がくっついているので Web 開発も充分。ツールに慣れるためにも実戦投入。

すごく便利なエディタですね。

さすがに Gridsome 特有のコードはエラーやワーニングになりますが、GitHub にコミットするときに GUI で確認できたり、そのほか開発するための機能がてんこ盛り。

Vue.js や Gridsome のお作法を調べながら作ってきたのでずいぶん時間はかかりましたがようやく形になりました！

とはいえ、サイトはまだ生まれたばかり。昨今の Web サイトがもつ機能として足りていないものがあります。たとえば

など。

また、この記事ページだけでも CSS が足りてないですね。これを書いているときにも「もっと見やすくしたい」と思うところがありました。

でも、そういった課題はつど手を入れていけばよいのです。さっさとスタートする方がよっぽど大事だから。

というわけで、「写真」や「グラフィック」、「ブログ（なるべく技術よりの）」などの作品を掲載しつつ、サイト全体をコツコツと育てていきます。

どうぞよろしくお願いします。

※vue ファイルなどのデータは GitHub で公開していますので参考にどうぞ。