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

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

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

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

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

GridsomeとTailwindcssを使用

なじみのWordPressではなく静的サイトジェネレーター

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

▶︎ Takashi Q. Hanamura Photography

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

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

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

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

こだわりポイント

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

• 心地よい余白

  • 雑誌のような媒体にしていきたいから。

• フォントは游教科書体 横用

  • 書体として気持ちいいから。
    インストールされてなければmacOSはヒラギノ角ゴシックが、WindowsはBIZ UDPゴシックかメイリオで表示されます。
  • 【2020.10.3追記】
    ヒラギノ角ゴシックに変更しました。無難なフォントだからこそ、とても見やすいと感じます。

• サイトのカラーリングはシンプルに

  • 作品のサムネイルに目立ってほしいから。

エディタはPyCharm

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

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

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

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

ポートフォリオ、スタートです

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

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

• 各ページのOGP出力（完成）
• robot.txt（完成）
• 404ページ
• アーカイブ画面
• 検索機能

など。

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

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

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

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

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