ポートフォリオサイトを作る
前回の仕事の方向性を決めてから暇を見つけて1週間ほどチョコチョコ作業を行い、ついにポートフォリオが完成しました。
このポートフォリオでは主にWebサイト制作案件の獲得を目指しています。
ドメインを取得する
公開するなら何でも良いじゃないかと最初は考えましたが、数々のポートフォリオを見ているうちにあるルールに気が付きました。
ナイスなポートフォリオは独自ドメインを取得している。
単純明快ですね。
ということでドメインを取得しました。
私の場合はそのまま自分の名前 kotamorishita.com というドメインを取得しました。
それではポートフォリオを制作する際に意識したポイントをあげていきます。
シンプルなサイト構成にする
作るときには極力シンプルとなるように、デザイン的に複雑にならないように意識してサイトを組み立てていきました。
デザイン経験が足りない場合は複雑にしない。
複雑なデザインは経験豊富なデザイナーさんのポートフォリオを拝見するとうまくまとまっているように見えますが、私のようなプログラミングばかりしてきた場合、複雑なデザインをうまくまとめる自信がありません。
ではどうするのか？
冒頭からちょこちょこ言っているテンプレートを活用します。
2020年現在、幸いながらインターネットにはポートフォリオのテンプレートが非常にたくさん提供されています。
ライセンスに注意しながら自分のポートフォリオのイメージにあっているものを探していきます。
今回はこちらのサイトから利用することにしました。
自分がこのあたりのデザインレベルに達するまでは相当な時間がかかるので、すでにあるものはどんどん使っていくバックエンドスタイルを地で通して行きます。
ページトップに全力を尽くす
そして次ははトップページを出来るだけ自分のイメージに近いものにしていきます。
漫画のドォォンと書かれているような雰囲気を目指しました。
人間の印象も最初の3秒で決まるように、ポートフォリオも同様にファーストインプレッションを大切にします。
また、ページのロード中表示など、不要そうだけどあったら”へぇ”となりそうなロード画面にしました。
いちいち項目を動かす
次に意識したポイントはマウスオーバーに対して可能な限り動作をつけるようにしました。
これは、技術的というよりはポートフォリオサイトを最後まで見てもらえるようにという目的で入れています。
まったく動かないサイトより動くほうがワクワクしますよね？
ただしこれらのマウスオーバー効果は、PCブラウザでしか動作しないので、スマホデバイス用に若干動画の再生方法などを調整しています。
レスポンシブにする
これは必ず対応する必要があります。
自分のポートフォリオにアクセスしてもらうまでには沢山のステップが必要です。例としてTwitterのリンク、他サイトで紹介、広告を出してクリックしてもらったりと誰かに知らせなければアクセスしてもらえません。
そしてようやく誰かが自分のポートフォリオ見てみようかなと、アクセスしたタイミングで
”パソコン画面で閲覧してください”
もしくは
”レイアウトが崩れすぎていて文字が読めない”
これらは両方とも最悪です。
せっかく見てもらえたのに、ネガティブな印象だけしか与える事ができません。
レスポンシブ以外でも、このポートフォリオを何のために作っているのか、見た時どういった印象を受けるのか考えて作っていきました。
しかし、自分のデザインスキルが未熟なせいで、何か違う、、という部分がまだまだ残っていますので、これはまた時期を見て更新していこうと思います。
技術的に遅れていないサイトにする
最後に技術的な面で問題が無いよう注意します。
いくつか例をあげると、非常に美しいデザインが追求されたサイトであってもhttpsに対応していなかったり、古いPHPのバージョンが利用されていたりと、安全面に問題のあるサイトがよく見受けられます。
これは私の狙っている案件ー”デザインよりも機能を重視”されているクライアントの気になるポイントで間違いないと思います。
残念ながら私のアピールポイントである、プログラミングスキルを駆使してこんな事できますよという仕組みをたくさん仕掛けたかったのですが、自分の時間とポートフォリオを天秤にかけて今回はテンプレートベースで作ることにしました。
そう、楽しくなりすぎて忘れてましたがあくまでも目的は5万円の案件を獲得です。
今回はこのぐらいで完成として、必要以上に深追いしないことにしました。
公開前にしておくこと
最低限の動作確認をスマホやPCからテストしておきます。
そしてページがある程度正しく動作しているかChromeのテストツールから確認しておきます。
検証ツールのタブでAuditsを選択するとサイトのさまざまな項目を機械的にチェックすることができます。
個人的に特に重要視しているのがパフォーマンスと、SEOです。
SEOはデフォルト対策しただけで100になるのであまりアテにはならない気がしますが、パフォーマンスのスコアはかなり正確です。
自分の場合は、スコア７という最悪な数値を叩き出しています。
しかしこれは作ったばかりなので、ある意味当然です。
ここからは小手先テクをふんだんに使用してパフォーマンスの改善を試みます。
実施したのは画像ファイルの画質を落として軽くしたり、ファイルを非同期読み込みにしたり、動画も後からロードさせるようにしたりと、それほど難しくない部分のみを軽く修正していきます。
そして結果がこれ。
たったこれだけでもスコアが７から４１まで改善していますので、本格的にチューニングを行えばもっと早くできるでしょう。
しかしバックエンドエンジニアは普段パフォーマンスチューニングと呼ばれる作業や、どうやって高速化できるかを考える時間が長いため、こういったページのロードの場合でも限界まで追求しすぎる傾向があります。
再度、これは何の目的のために作っているのかを問いかけ、今回はこの程度のスコアでこれ以上時間をかけずに公開することにしました。
まとめ
副業活動を続けていますが、受け身では連絡すらもらえていません。
ポートフォリオのドメインを取得・制作・公開しました。
来週から少しずつ応募していきます。
最後に
YouTubeで動画を作っていますので、興味がありましたら是非チェックしてみてください。
この記事が気に入ったらサポートをしてみませんか？