サイト内検索

あらゆるワードの関連記事を検索できます!

おぐえもん
情報系大学院の出身です♪Webサイトやチラシ、冊子などのデザインや、システム開発などの経験があります。音楽が好きで、渋谷系サウンドが好物です!

おぐえもんの日記

IT技術者がポートフォリオサイトを作った話(作り方の解説も)(#48)

こんにちは、おぐえもん(@oguemon_com)です。

大学時代から今に至るまでWeb開発をやってます。

さて、私がWebサイトや冊子などのクリエイティブを作りはじめから7年くらい経ちました。

はじめはサークル活動の一環でした。それが、いつの間にか自身のWebサイト(当サイト)を立ち上げ、時には顧客から直接を受けて開発をすることもありました。

そんな今までの過去をまとめるべく、自身のポートフォリオサイトを制作、2021年11月30日に公開しました!

今回は、どんなサイトを作ったのかを簡単に説明して、これからサイトを作ろうとしている方のために私流の作り方も教えたいと思います!

みんな読んでね!

目次(クリックで該当箇所へ移動)

作ったサイト

本名名義のサイトです。URLはずばり、http://ogura.biz/

めっちゃシンプルなURLです!たまたまドメイン所有者に空きが生まれたので、急いで購入しました笑

コンテンツはざっくり3種類に構成されます。

トップ
http://ogura.biz/

端的なプロフィールと、今までに作った作品(まだ網羅できていない)の一覧を表示しています。

詳細プロフィール
http://ogura.biz/profile/

使える技術やツール、資格・受賞歴、経歴を書いています。

各作品の紹介
(例)http://ogura.biz/work/tax-calc/

トップページの作品一覧から何らかの作品をクリックすると飛べるページです。各作品の詳細と、そこそこ長めの長めの説明文、作品の画像を載せています。

作った理由

仕事に繋げたいってのと、一箇所にまとめたいっていう2つがメインです。

1.仕事が欲しい!

私、副業の一環で、小規模事業者向けにWebサイト・チラシのデザインや、プログラム設計などのクリエイティブをやりたいなと思っています。
というか、現にいくつかの事業者さんと取引しています。

しかし、ただ募集するだけでは説得力がありません。そこで、「こんな感じのものを作れますよ」というのをさっと示せる営業道具として、ポートフォリオサイトを用意しようと思いました。

2.過去の実績を整理したい!

今まで色々作ってきました。それは大小様々で、ジャンルも微妙に異なります。

そんな状態で7年も経つと、数年前にやったことを忘れちゃうこともあります。

せっかく作ったのに、それが日の目を見なくなって実績として活用されなくなるのはもったいないです。

ですので、今の時点で一旦自分の能力や過去の作品・取り組みを整理して、すぐに取り出せる状態にしておこうと思いました。

ポートフォリオサイト制作の流れ

ポートフォリオサイトなんて、デザインテンプレートがこの世に腐るほどあります。さらに言うとポートフォリオを登録するサービスすらある現状です。

しかし、そんな中でも「ポートフォリオサイトもまた自分の作品なんだ!」「ポートフォリオでオリジナリティを出したいんだ!」って叫ぶアツい方のために、今回の制作の流れをさくっと書いておきます。

Step1.コンテンツを考える

まず、何を載せるか決めます。

ポートフォリオサイトは、自己紹介が目的で、いわば履歴書みたいな役割を果たします。ですので、最低限↓にある情報は載せるのかなって思います。

  • 名前
  • 基本情報(肩書きなど)
  • 紹介文
  • 経歴
  • 能力
  • 実績
  • アクセス・連絡先

私は、これらの情報を一通り(全部じゃないけど)載せることにしました。ただし、連絡先はGoogleフォームです。

様々な人のサイトを見てみましたが、人によっては日記だったり、ブログを併設してる場合もあります。保有メディアがゼロの方は追加するのもありです。が、多くの人はすでにブログやnote、qiita、zennなどの何らかのアカウントを持ってると思うので、なくても良いと思います。

Step2.ページ構成を考える

Step1の情報をどう束ねるかです。

ここは、本当に人によって様々です。履歴書みたいに名前、基本情報、紹介文、経歴、…と順に載せて全てを1ページに収めるひと。逆に、アクセスするや否や、溢れんばかりの実績が流れるように一覧されるひと。

私は、中庸を選んで、↓のようにしました。

  • トップ…名前、肩書き、紹介文、実績
  • 詳細プロフィール…名前、基本情報、紹介文、経歴、能力
  • 各作品の紹介…実績

なるべく自分の実績を見てほしい!けど、真っ先に実績一覧を見せても、自分が何者か理解されない!って理由で、トップページに紹介文を載せています。

Step3.プロトタイプを作る

ここまで決まったら、デザインを作っていきます。

実装ゴリゴリマンならば、早速コーティング…と言いたいところですが、今回はデザイナー間で普及が進むプロトタイプ作成ソフト「Adobe XD」を使いました。

Adobeのパッケージ「Adobe Criative Cloud」の中にあるソフトです。

Adobe Creative Cloud コンプリート|12か月版|Windows/Mac対応|オンラインコード版
65,102(2022.07.06 現在)
  • パワポを作る感覚でサイトデザインを作ることができる
  • PC/スマホの両方で簡単に確認できる
  • 画面遷移やアニメーションも簡単に設定できる
  • 仕上がりをURLで簡単に他人にシェアできる

って感じで、めっちゃ便利です。

↑こんな感じで、見た目を作っていきます。写真はテキトー。サムネイルの繰り返しは、そういう機能がAdobe XDに備わっています。

↑もちろん、スマホ版だけでなく、PC版のレイアウトも作ります。

私は、Adobe XDを今まで全く使ったことがなかったので、ソフトの使い方を勉強しながら作りました。
↓の参考書が見やすくて役に経ちました。(突然の宣伝)

初心者からちゃんとしたプロになる Adobe XD基礎入門〈Webデザイン、ワイヤーフレーム、プロトタイピング〉
2,970(2022.07.06 現在)

Step4.ゴリゴリ実装する

できあがったデザインに従ってゴリゴリ実装していきます。

次のフレームワーク・ツール・サービスを使いました。

React
Meta(旧Facebook)が作ったJavascriptのフレームワークです。詳しい特徴は省略しますが、動作がめっちゃ早いです。
Gatsby
Gatsby社が開発する静的サイトジェネレーターです。Reactで作ったWebサイトをコンパイルして、静的なサイトを作ってくれます。詳しい特徴は省略しますが、動作がめっちゃ早いです。
Contentful
Contentful社が開発するデータ保管サービスです。ここに実績のタイトルや文章などを、ブログ記事の要領で保管します。Gatsbyは、Reactをコンパイルするときにここからデータを引っ張ってきます。そして、記事の数だけ自動でページを作ってくれます。

ポートフォリオサイトに載せる情報って基本的に固定で、頻繁に更新が入るわけではありません。ですので、ポートフォリオサイトとGatsbyとの相性は抜群だと思います!

私が作ったポートフォリオの実装は、Github上にアップしています!

Step5.デプロイする

サーバにアップロードします。Netlifyというサービスを使いました。

これほんますごいです。Githubでソースコードをpushする(アップロードする)だけで、勝手にGatsbyのコンパイルが始まって、処理に成功したら勝手に自サービスのサーバにアップ(デプロイ)してくれます。

めっちゃかっこいい〜

ドメインの設定などもしっかり施すと、oguemon.bizが完成です!

爆速すぎるので、Google Speed Insights(サイト速度の測定器)でキモいくらい良いスコアがでました

そんなこんなで、ポートフォリオを通じて、最新の技術・ツールをガンガン使うことができたのでした。

これからもコンテンツを増やします!

実は、まだまだ作ったコンテンツがあるのですが、全部かけていない状態です。

  • 大学サークルで作ったやつ
  • 他のクライアントワーク
  • ちょっとしたやつ
  • などなど…

これらも、できるだけ早いうちに掲載する予定です。みんな、楽しみに待っててね!

ポートフォリオサイトを見て、「おぐえもんって奴に○○を作ってほしいな」って思った方は、↓のリンクから是非ともお問い合せください!

おぐえもんへのお問い合せはこちら

このカテゴリの記事
実はずっと◯◯してました…年末年始の行いと2022年の目標
2022年1月7日
おぐえもんの2021年を振り返る(自著出版や受託開発の話など)(#52)
2021年12月31日
会社員も可能!毎日ブログを書く方法(アドベントカレンダー最終日)
2021年12月25日
【あるあるサンタが贈る】至極のクリスマスあるある12連発(#51)
2021年12月24日
このカテゴリの全ての記事(74件)を見る
▲ トップへ戻る