ポートフォリオをリニューアルしました！
この度、ポートフォリオ第三弾として「ブログ機能を備えたWebサイト」を作成しました。 前回までのポートフォリオとは趣向を変えてみましたので、振り返りとサイト紹介をしてみたいと思います。
# サイトのテーマと振り返り
ポートフォリオ作成も第三弾ということで、今までに作成したポートフォリオの振り返りと、今回作成したこのサイトのテーマを簡単にご紹介します。
第一弾： デザイン本のサンプルサイトをほぼ丸パクリしてちょっと変えた程度のペライチサイト
- HTMLやCSSの技術はあったものの、デザインのスキルがなかったためできるだけきちんと真似することに専念した
- Webサーバやメールサーバの自作に挑戦し、インフラのスキルを伸ばした
- ほとんと丸パクリで人に見せられるようなものでもないので早々にリニューアルを実施
第二弾： Vue.jsとNuxt.jsを使用した「ちょっと動く、遊び心のある自己紹介サイト」
- 非技術者が見ても面白く、技術者が見たらもっと面白いサイトを目標に制作
- まるでゲームのように、ドット絵のキャラが喋る動きを再現
- その斬新なアイデアがTwitterでちょっとした話題になり、お仕事の相談などもいただくようになった
- アイデアの元ネタはROサポートツールの 立ちアコ
- 様々な要素を詰め込みつつ、小粒なサイトに仕上げきった自信作
第三弾： 簡単に更新ができる、情報発信特化のホームページ
- 前作の雰囲気は踏襲しつつ、読み物コンテンツとしてデザインを一新
- 前作の不満点であった「更新が面倒」という課題をCMS利用で克服
- 新規ページ作成が簡単なため、少しずつ作り込むことができるようにした
- 読み物サイトにするため、動きは控えめにして高速な描画を優先
第二弾に関しては結構思い入れがあり、いっぱい語りたい点はあるのですが長くなるので割愛。
今作は"普通のブログ"感が強く、前作と比べて驚きや感動はないかもしれません。 これに関しては、今作はあくまで読み物サイトであり、特にトップページ・記事ページについては動きも控えめにすることで速度を重視した結果となっています。
デザインに関してはテーマカラーやパーツの雰囲気は残しつつ、より洗練された形にできたんじゃないかと思います。 よくある「ぼくの考えるイケてるカッコいいWebサイト」でやってしまいがちな黒やモノトーン調をテーマカラーから外すことで、素人っぽさを感じさせないような配慮をしています。
また、今後自作のプログラムなどを公開する際には、LP的なページで動きを付けて楽しめるようになればいいなと思っています（できるとはいってない）
# 使用している技術など
このサイトは、2018年に開発がスタートしたばかりの新生CMSである Vuepress を使用しています。
静的サイトジェネレータというジャンルのCMSにあたるのですが、Vuepressの特徴は下記のようなものがあります。
- DB不使用で、記事は全てファイルで管理するため、Gitで管理しやすく移行が簡単
- 記事はMarkdown形式で記述するため、プログラマにとって書きやすい
- Markdownの記事内にVueコンポーネントを直接記述できる
- プログラムは全てVueで書かれている
- ビルド時にHTMLとして出力されるため、読み込みが非常に高速で設置場所も問わない
また、日付の計算処理で有名な moment.js というライブラリがあるのですが、 今回はmoment.jsと高い互換性があり、サイズが2kbという超軽量な day.js というものを使用しています。
そして、トップページには前作で話題を呼んだ TalkAvatar で最新記事をお知らせする機能を搭載。 ゆくゆくは雑談や制作物の紹介機能なども追加することを想定しています。
# 今後の予定
サイトのリニューアルに伴いコンテンツの追加がしやすくなったので、追加コンテンツをいくつか予定しています。
追加予定コンテンツ
- Aboutページの追加
- 自己紹介の固定ページもしくは複数の自己紹介記事へのインデックス
- あるいは上記両方
- Productsページの追加
- 制作物の紹介インデックスページ
- 制作物のLP
予定は未定ですが、更新をお楽しみに！
この記事をシェア