はじめまして、ソフトウェアエンジニア&写真家の花村貴史です(@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 v1.2 系」を使いました。
僕の好きな 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 で公開していますので参考にどうぞ。