サイトをNext.jsを使ってフルリニューアルしました。

Title

サイトをNext.jsを使ってフルリニューアルしました。

Date

2021-08-19

この度、サイトをフルリニューアルいたしました!

一度、手が空いたタイミングでNuxt.jsを使いリニューアルさせようとしたのですが、バタバタ仕事をしている間にすっかり時間が経ってしまいました。。

リニューアル目的

リニューアルの目的を書き出してから、サイト全体の設計を行うようにしましました。

以下がざっくりとまとめた目標です。

  • 制作パートナー(フリーランスの外注)を探している制作会社様・広告代理店様との契約を増やす。
  • 現在運営している複数サイトを統合して、ドメインパワーを上げる。(別ドメインで展開しているが、WordPress の都合で別ドメインとして展開しているだけなので、統合した方がページ数も増えてドメインパワーが上がると考えました。)
  • 記事を markdown 形式で書き込めるようする。
  • GitHub 管理で記事も管理できるようにする。
  • WordPress 管理から外すことで高速化。(アニメーションが多いのでそこまで高速化出来ているわけじゃないですが。)
  • 最近流行りの Next.js の学習もしたい。

という感じで目標を決めて作業にとりかかりました。

公式サイトとしての機能

公式サイトとして、サービスの内容や、自己紹介等の掲載。

ブログ機能

これまでブログとして運用してきたblog-jws.workを解約して、本サイトに移管しました。

ブログ機能はすべてmarkdownファイルで作成して HTML に書き出すよう設定しています。

掲載内容は以下になります。

  • 技術ブログ
    • 主に Web 関連の技術などの情報を掲載しています
  • 実績掲載
    • 特定されない掲載可能な範囲で実績紹介をしています
  • ポートフォリオ掲載
    • 掲載可能な実績はこちらに画像付きで掲載しています
  • アニメーションの掲載
    • CodePenで作成、実行はCodePen内で行い、iframeで貼り付け

感想

制作するにあたり、UdemyNext.jsの基本を学習をしてから制作に取り組みました。

これまでNext.jsを触ったことがなかったので、かなり勉強になったかと思います。

特にアニメーション周りや、markdown→HTML 出力、画像の圧縮などで結構ハマって大変でしたが、何とか形に出来ました。 今後も本サイトは継続してページ改修を行っていければと思ってます。

技術面などは別記事にて UP したいと思います。

制作パートナー(外注)をお探しの制作会社様・広告代理店様

お気軽にお問い合わせください。