エンジニアとして転職活動をすると必ずといってもいいほどポートフォリオサイトの提出を求められますよね？
インフラエンジニアである私はポートフォリオの提出を求められたことがありません。
しかし、ある日ふと思いました
インフラエンジニアがポートフォリオを作っちゃいけない、提出しない理由ってないよな…
もしインフラエンジニアがポートフォリオを作ったら他のインフラエンジニアの人よりステータスがあがるかなと思い、今回ポートフォリオサイトを作成しました。
この記事では以下の内容について記載します。
- ポートフォリオについて
- ポートフォリオ構築の際に使用したサービス
- ポートフォリオの構築手順概要
今回作成したポートフォリオ
以下のリンクが私が今回作成したポートフォリオサイトになります。
https対応済みで安全なものですので是非ともご覧になっていって下さい。
ポートフォリオとは？
ポートフォリオという言葉はエンジニア以外では金融関係でよく聞く言葉ですね。
「金融機関や投資家が所有する資産の一覧表、または資産構成」という意味があります。
所持している資産を一覧化して資産管理をする際に使用します。
要はポートフォリオとは自身の持つあるジャンルの資産を一覧化してまとめるということです。
エンジニア界隈では自身の制作物をまとめる作品集として使用されます。
自身が手掛けたツールやプラグラムを見やすくまとめて就職活動等で自分の力量を知ってもらう為に企業へ提出するわけです。
但し目に見える制作物が無いインフラエンジニアはまとめるものがないのでポートフォリオの提出を求められることはありません。
基本的にフロント開発をメインにしてる方が使用するものなんだね！
ポートフォリオを作ろうと思った理由
理由は単純です。
インフラエンジニアだからです。
インフラエンジニアは基本的にポートフォリオなんて作成しません。
目に見える制作物がないからですね。
だからこそポートフォリオサイトを作ることによって他の方とのマージンを開かせようと思ったのです。
インフラエンジニアは目に見える制作物がないといいますが、実はそんなことはありません。
ちょっとお金はかかりますが、制作物の作成は可能です。
なのでそんな多く制作物を持っているわけではありませんが、インフラエンジニアとして一歩先へいくため、ポートフォリオを作成しました。
ポートフォリオで意識したこと
ポートフォリオを作成するにあたって以下のポイントを意識しました。
- 見やすく分かりやすく
- シンプルなビジュアル、構成にする
- 簡易的な構築、運用を実現
見やすく分かりやすく
一番大事なことだと思います。
どんな人にも分かりやすく、なおかつ見やすく全体の構成を考えます。
変に気合を入れて構成を考えても結局ごちゃこちゃした感じになってしまっては意味がありません。
項目の順序も起承転結を意識して物語に沿うようにしなくてはいけません。
文字数を多くせずに必要に応じて画像やグラフを使用してUI/UXに考慮したデザインを心がけました。
シンプルなビジュアル、構成にする
上の見やすく分かりやすくにも通じるとこがあるのですが、今回の主役は僕の作品集です。
Webサイト自体の完成度ではありません。
作品を見やすくを第一に考え、周りのコンテンツをごちゃごちゃさせないように気を配りました。
個人的に白色が大好きなので白背景ベースで、全体的にモノクロベースで構成しました。
簡易的な構築、運用を実現
これは賛否両論あるとは思うのですが、正直私はインフラエンジニアですので開発系のスキルはあまりありません（汗）
この機会に学んでもよかったのですが、日々の業務や勉強もあるので安全で確実な開発、運用方式を選択しました。
ツールにはWordPressを、基盤環境はAmazon Lightsailを使用しました。
詳細については後述の項目をお読み下さい。
使用サービス
使用サービス
Webサイトとして最低限機能する構成をまずはと今回のゴール地点にし、以下の構成で環境設計を行いました。
- CMS → WordPress
- 基盤サーバー → Amazon Lightsail
- ドメインサーバー → Amazon Route53
- メールサーバー → Amazon SES
- 暗号化(SSL/TLS) → Letsencript
- アクセス解析 → Google Analytics、Google Search Console
システム
今回はCMSの1つであるWordPressを使用しました。
WordPressでしたらフロントに疎い私でも安全に確実な開発、運用ができると思ったからです。
Web開発に必要な機能が全て詰まっているというのは本当に魅力的です。
使用テーマは悩みましたが OdierLite を使うことにしました。
OdierLiteとはモノクロベースでインテリア雑誌のような空間を提供してくれるテーマであり今回のポートフォリオのコンセプトにとてもあっていると思い、採用しました。
以下URLからダウンロード可能です。
基盤環境
基盤サーバーにはAmazon Lightsailを使用させていただきました。
Amazon Lightsailとは、AWSが提供しているVPS（Virtual Private Server:仮想プライベートサーバー）サービスです。
Webサイトを機能させるのに必要な要件が全て詰まっています。
ほんとに5分くらいボタンぽちぽちしているだけでWebサーバーが構築できてしまします。
LightsailにはWordPress搭載型のOSを選択することが可能で今回はそちらを使用させていただきました。
ドメイン設定
ドメイン設定にはおなじみのamazon Route53を使用させていただきました。
ドメイン自体もRoute53で購入してNSレコードもRoute53に登録致しました。
料金も良心的でなによりAWSの中でドメイン環境が構築できるのでLightsailを使用する際はRoute53でドメインを購入することをおすすめします。
メールサーバー
LightsailでWordPressを構築する際の突っかかりポイント！
メールサーバーです。
実はLightsailはメールサーバーの機能を持っていません。（ここほんと大事！）
なのでデフォルトではWordPressからのメール送受信が出来ません。
こちらができないとWordPressからの重要な情報やお問い合わせページからの連絡に対応できません。
今回はAWS SESというサービスとWordPressのプラグインを使用して上記課題を解決致しました。
設定も容易に出来ますのでとてもおすすめです。
管理人もここでハマりました（汗）
「Lightsailはメールサーバーとしての機能は持っていない」
しっかりと覚えておきましょう。
アクセス解析
Google Analytics
本サービスのサクセス解析にはGoogle Analyticsを使用することにしました。
Googleアナリティクスとは、Googleが提供するアクセス解析ツールです。
例えば以下のようなことが分かるようになります。
- サイトへのアクセス数
- ページ毎のアクセス数
- アクセス元はどの国か
等のアクセスに関するデータを解析してまとめてくれます。
Google Search Console
他にもGoogle Search Consoleも使用しました。
こちらもAnalyticsと似たようなサイト解析ツールです。
Analyticsと違う部分としては、検索クエリに関するデータ解析ができます。
- サイトをGoogleがどう評価しているか
- どの順位で検索結果に表示させているのか。
上記のようなことが分かります。
サイトのXMLサイトマップをSearch Consoleに登録することで、「こんなサイトを作りますよ～」ってGoogleに報告することができます。
アクセス解析ツールについて
AnalyticsもSearch ConsoleもWeb作成には必須ツールだと思っています。
どちらも無料のツールになっていますのでWeb制作をする際は、どんどん使っていきましょう。
■Google Analytics
https://www.google.com/analytics/web/?hl=ja
■Google Search Console
https://search.google.com/search-console/welcome?hl=ja
無料でここまでの機能が使えてしまうなんてすごすぎる！！
レイアウト
コンセプト
レイアウトを考える際、意識したのはシンプル、モノクロさです。
変におしゃれに多色使用してレイアウトを作るのではなく、白黒のみで各セクションをコンパクトにまとめることで短時間でWebサイト全体を回らせて僕の作品を見てもらうことを目指しました。
特に「エンジニア ポートフォリオ」と調べると、参考になるポートフォリオサイトが沢山でてきます。
人によって好みは分かれると思いますので、自分の好みのポートフォリオを見つけて参考にしながら作業するといいでしょう。
他の人のポートフォリオサイトを参考にしよう！
でも真似をしちゃだめ！ あくまで参考程度に..
イメージ
急に作業に取り掛かるのではなく事前にどのようなデザインにするのか簡単でいいのでどっか紙にでも書いてから作業に取り掛かるのをおすすめします。
カンペがある状態で作業した方が効率的ですし失敗がないと思います。
可能ならPhotoshopやIllustratorを使用するのをおすすめしますが、別に他のお絵かきツールや紙でも問題ありません。
事前にイメージを作るのが大切なのです。
今後の課題
ひとまずポートフォリオとしてサイトを作成できましたが、まだまだ課題は残っています。
今後の課題をまとめてみました。
- 作品毎の紹介ページを作成する
- コンテンツを増やす
- ユーザービリティの強化
- SNS等を利用してのポートフォリオの宣伝
上記課題に取り組む際は作業過程をこのブログにて公開しますので是非楽しみにしてて下さい。
まとめ
長くなりましたが、以上がポートフォリオサイト作成までのまとめでした。
今後も課題に取り組み、ポートフォリオとしての完成度を上げて行こうと考えています。
これを見てくれたかたにお願いなのですが、下部SNSシェアボタンより本記事をシェアしてくれるととても嬉しいです。
よろしくお願い致します。
では以上です、ありがとうございました。
コメント