ポートフォリオサイトの制作方法の全行程を公開してみた!

Webサイトの画像プログラム
スポンサーリンク

今回は僕が作成したポートフォリオサイトの作成手順を全て公開したいと思います。

この度、6ヶ月間の学習の集大成としてポートフォリオサイトを作成しました。サイト設計からデザイン、コーディングまで行いました。そのノウハウを詳しく解説していきたいと思います。

今回のブログはこんな方におすすめ!
  • ポートフォリオサイトを作ろうと思っている方
  • サイト制作の過程に興味がある方
スポンサーリンク

ポートフォリオサイトの全作成手順公開!!!

僕がポートフォリオサイトを作成した手順は、大きく分けてこの4つです。

  1. サイト設計
  2. デザインカンプ作成
  3. コーディング
  4. デプロイ

詳しく説明していきます。

サイト設計の手順

まず初めは、サイトの初歩の初歩の部分です。世間では要件定義と呼んだりします。

  • 作る目的(伝えたいこと)のリストアップ
  • サイトマップを作成する
  • 盛り込みたいアニメーションを決める
  • デザインの参考サイトを探す
  • 実際に使用するライブラリやツールの選定

以上の手順でサイト設計を行いました。詳しく説明していきます。

また、これらをnotionというメモアプリにまとめたのでURLを公開したいと思います。

https://www.notion.so/3ec1ff76eee74adaa0e2b5789297170d ←notionのリンクです。

作る目的(伝えたいこと)のリストアップ

僕の場合まずはノートを用意して書きながら考えました。下の画像はその時のノートの画像です。

作る目的(伝えたいこと)のリストアップのために書いたノート

このようにポートフォリオサイトを作成して伝えたいことを書き出しました。

Webサイトというのはメディアのひとつなので、何を伝えたいか考えるのはとても重要であると思います。そのため、焦らずにこの工程は丁寧に行うことをおすすめいたします。

サイトマップの作成

次にサイトマップを作成しました。

サイトマップとはサイト全体のページ構成を地図のように一覧で記載している図になります。

僕の場合はTopページに加えて、AboutページやWorksページを作る計画を立てました。また、Blogのリンクを設置してブログの動線も用意しようと考えました。最後に、まだ実装はしていませんが今後Contactページを作成する予定なのでそちらのリンクも事前に用意しておくことにしました。

僕は上の画像のような感じでノートに書き込んで作成しました。

サイトマップも事前に考えておくことで、無駄な作業を減らすことができるため事前に考えておくことをおすすめいたします。

盛り込みたいアニメーションを決める

次に盛り込みたいアニメーションや機能を選定しましょう。

僕の場合はこの時点で

  • カードデザイン
  • スライダー
  • ボトムナビ
  • ハンバーガーメニュー
  • ページトップボタン
  • フェードインアニメーション
  • 画像のポップアップ機能
  • 画像ホバー時カバーがかかるアニメーション
  • タブメニュー
  • ナビにホバーした時にアンダーラインを表示

このようにリストアップしていました。

この時点では機能としてポートフォリオサイトに入れようと思っていたけれども、実際には入らなかった機能もリストアップしています。

デザインの参考サイトを探す

ここまでポートフォリオに盛り込むメッセージやアニメーションを決めてきましたが、ここで初めてデザインのことを考えました。

そこで行ったこととしては、インターネットで様々なサイトを見ることです。その中で気に入ったサイトを参考にデザインを作成しました。

ここではとても参考になったサイトとして様々サイトデザインをまとめているWebサイトを幾つか紹介しておきます。

これらのサイトには多くのWebサイトが掲載されており、参考になるかと思います。他にも好きなインフルエンサーや有名人のブログサイトなどを参考にするのも良いかもしれません。

実際に使用するライブラリやツールの選定

サイト設計の最後には実際に使用するライブラリやツールの選定を行います。

  • Swiper.js→スライダーを作る
  • AOS.js→フェードインを作る
  • Viewer.js→写真系の処理
  • Adobe系→デザイン
  • FontAwesome→アイコン

僕の場合は、スライダーを作りたいときには、「スライダー jsライブラリ」のようにググって出てきたライブラリを使いました。

また、こだわったこととしましては、jQueryに依存していない、素のJavaScriptで作られたライブラリを選ぶようにしました。

デザインカンプの作成

janjf93によるPixabayからの画像

サイト設計が終わったらデザインカンプを作成です。

僕の場合にはAdobeXDデザインカンプを作成して、Photoshopで画像の作成・編集、Illustratorでロゴデザインを行いました。

特にXDでのWebデザインは初めてでしたが、自分でググったり、YouTubeでの動画学習をすることで乗り切りました。参考になった動画のリンクを幾つか貼っておくので参考にしてみてください。

これらの動画はとても参考になりました。

実際に作成したデザインカンプがコチラになります。→カンプ

また、オリジナリティを出すためにロゴや画像も自作しました。

フリー画像を使用する際には下のサイトがおすすめです。

また、デザインのコツとしては慣れないうちには大体で切り上げることです。完璧主義になってしまうと、”頭でデザインは思いついているのに、技術が追いつかず、デザインカンプに落とし込むことができない”と言う状況が起きてしまいます。

頭で思いついているがデザインカンプに落とし込むことができないアイディアはノートに書いたり、コーディングのときに実現することにして、思い切って後回しにしてしまいましょう!

ちなみに僕もこのデザイン地獄にハマってしまい、デザインに予定以上の時間をかけてしまいました。

コーディング

gTheMeshによるPixabayからの画像

ここまできたらいよいよコーディングです。コーディングは3ページと少しボリュームが有ったのですが、特に詰まることなくすんなり終えることができました。今までの勉強の成果ですかね笑

特に意識したことは、

  • min max clampを活用したレスポンシブフォント
  • タブメニューやハンバーガーメニューの作成
  • Viewer.js Swiper.jsなどのJsライブラリの使用
  • Gitを用いたバージョン管理
  • BEMを用いたCSS設計

これらの点を意識してコーディングを行いました。

かかった期間は1週間程度です。

デプロイ

ここまできたらあとはデプロイするだけです。

自分で契約しているサーバーにアップロードしても良かったのですが、修正がしやすいためGitHub pagesを採用しました。

また、今まで作成してきた模写サイトを自分で契約しているさくらサーバーにアップロードしました。その理由としましては、さくらサーバーにアップロードすることで簡単にBasic認証をかけることができるからです。

まとめ

今回は僕がポートフォリオサイトを作成した手順を公開しました。ポートフォリオサイトを作ることは駆け出しエンジニアからの脱却の第一歩でもあると感じます。そのためある程度学習が進んできて、自信がついたら思い切って挑戦してみることをおすすめいたします。

その際にはサイト設計がとても大切になってきます。じっくり考えて自分だけのサイトを作成してみてください。

コメント

タイトルとURLをコピーしました