5つのホームページポートフォリオと技術選定のこだわり

はじめに

Web開発のスキルを深めるべく、5つのホームページをポートフォリオとして作成しました。デザインや技術、そして目的に合わせたベストなツールを選びながら「自分が本当に使える技術」を見つけ出すための挑戦でした。この記事では、制作に使用した技術の紹介とともに、WordPressを選ばなかった理由、実際の制作を通じて得られた学びをシェアしていきます。プロジェクトを進める中での悩みや発見が、少しでも皆さんの参考になれば幸いです。

使用した技術と選んだ理由

このプロジェクトで選んだ技術スタックは、React、Next.js、Firebase、写真加工やロゴ作成にはPhotoshop、そしてCanvaです。この技術を選んだ理由の一つには、Webアプリケーションをデプロイする際の効率化や、スムーズな開発ができることを目指したことがあります。また、技術が複雑になるにつれて、一貫した使い勝手の良さや、学習のしやすさも求められました。ポートフォリオ制作を通して、スキルの整理とウォーミングアップを図り、今後のプロジェクトに自信を持って取り組める基盤を作ることが狙いです。

WordPressではなくReact & Next.jsを選んだ理由

「WordPressを使っては？」といった声もよく耳にしました。実際、WordPressは非常に便利で、ブログやビジネスサイトの制作に適しているのですが、今回あえて選びませんでした。理由は、WordPressでは独自の動的機能を柔軟に実装するのが難しく、特にJavaScriptベースのアプリケーション開発では限界を感じることが多いからです。

ReactやNext.jsなら、特に動的なWebアプリケーションの構築に最適で、今後の拡張やスケールアップも視野に入れやすく、学んでおく価値があると判断しました。確かにWordPressにはすぐに使えるテンプレートやプラグインが豊富にありますが、「あえて選ばないことで得られるもの」を重視して、今回はReactとNext.jsに挑戦しています。

1.React - ユーザーに寄り添うインターフェースを

Reactは、ユーザーが操作するたびに動的にページが反応するインターフェースを構築できる、フロントエンドのライブラリです。今回のポートフォリオでは、訪問者がスムーズに操作できることを意識し、インタラクティブな体験を実現するためにReactのコンポーネント設計を活用しました。

最初は「どこまで細かくコンポーネントを分けるか？」という迷いもありましたが、実際にいくつか試していく中で、「見た目や操作性がきれいにまとまるコンポーネント化」を意識できるようになりました。ユーザーの視点に立って、必要な機能と使いやすさを兼ね備えたインターフェースを構築できたのは大きな収穫です。

2.Next.js - 速さとSEOを両立したい

「サイトを訪れたときにすぐ表示されてほしい」「検索して見つけてもらいやすいサイトにしたい」という思いから、Next.jsを採用しました。Next.jsはReactと親和性が高く、特に高速表示とSEOに優れています。今回のポートフォリオでもページごとの読み込み速度を最適化することで、閲覧者(自分)にとってのストレスを最小限に抑えることができました。

Next.jsを使うことで、訪問者がクリックした瞬間に表示される速さと、検索エンジンでの強さを両立できたのは、非常に大きな成果でした。また、APIルートの設定もスムーズで、次のプロジェクトへの拡張が簡単な点も、Next.jsを選んだ価値を感じるポイントです。

3.Firebase - 簡潔にデータを管理できる強み

バックエンドをシンプルに管理したいという点から、Firebaseを選びました。Googleが提供しているFirebaseは、認証やデータベース、ストレージを含むバックエンドの機能をひとまとめで提供してくれます。ポートフォリオ制作において、必要な情報をリアルタイムで管理できるので、使うたびに「便利すぎる・・」と実感しました。

データの管理が効率化されるだけでなく、更新が即時に反映される点もFirebaseの強みです。「変化をスムーズに届けられる」という点で、ユーザー体験を向上させるための選択として、Firebaseは正解でした。今後の拡張性も視野に入れ、必要なデータ処理が楽に行える環境を整えられたことは、次の挑戦にも生かせる貴重な経験です。

4.Photoshop & Canva - 魅力あるビジュアルを手軽に

デザインにはPhotoshopとCanvaを併用しました。Photoshopは緻密なデザイン調整や高精度の画像加工に活用し、特にポートフォリオ内のバナーやヘッダー部分の仕上がりにこだわりました。一方で、Canvaはテンプレートが豊富で、サムネイルやインフォグラフィックの作成に非常に便利です。

Photoshopでの調整で「プロらしさ」を高めつつ、Canvaのシンプルな操作で効率よくデザイン作成を進めることができたため、時間を無駄にせずクオリティの高い見た目を実現できました。この2つのツールを使い分けたことで、見た目と使いやすさのバランスがとれたと感じています。次回以降も、デザインの幅が広がることを楽しみにしています。

今後の展望と統一した技術スタックの価値

今回のポートフォリオ制作は、「今後のWebアプリケーション開発に向けたウォーミングアップ」でもありました。特にReactとNext.js、Firebaseといった技術スタックを統一することで、開発効率や一貫性が大きく向上したと感じています。これにより、次のプロジェクトでもスムーズにシステムの設計・開発が進む基盤ができたと実感しています。

今後もWebアプリケーションのデプロイを行い、さらに実践的な経験を積み重ねる中で、技術スタックを深め、スケールアップも見据えていきます。選び抜いた技術だからこそ、チームでの開発やサービス提供の際にも役立つと信じています。

まとめ

5つのポートフォリオサイトを通して、React、Next.js、Firebase、Photoshop、Canvaといったツールや技術スタックの強みを存分に活かし、デザインと機能の両立を目指しました。WordPressを選ばず、ReactやNext.jsを選んだ理由も、こうした挑戦と成長を見据えてのことです。複雑なシステムの構築にも柔軟に対応でき、今後の成長にも繋がる選択をしたと感じています。

今回の経験が今後のプロジェクトにも良い形で影響し、学んだことが活きる瞬間が増えることを期待しています。これからも技術とデザインの両方を磨き、皆さんにも自信を持って提供できるサービス作りを目指していきます。最後までお読みいただき、ありがとうございました。

↓せっかくなので3つほど成果物を↓