背景
ゴールデンウィークにも関わらずコロナで外出する事が出来ず、家にいる時間が勿体ないので、スキルアップも兼ねてポートフォリオを作成しました。
このポートフォリオは、Nuxt.js & Typescript を利用して作成しており、最近のフロントエンドの技術を出来るだけ利用して制作するように心がけました。
完成したポートフォリオ
制作にかかった時間
- デザイン構想策定・・・2日
- HTMLコーディング・・・2日
- Nuxt.js アプリ化・・・2日
デザイン構想策定
良いWebサイトを作るためには、良いWebサイトが何かを知る必要があります。自分が良いサイトだと思っていても世の中の人が見たらそれは普通のサイトだと感じるかもしれません。
自分の感性を確認するために世の中で良いサイトと言われているWebサイトを調査しました。
Webデザインを参考にしたサイト
| サイト名 | URL |
|---|---|
| io3000.com | https://io3000.com/ |
| イケサイ | https://www.ikesai.com/ |
次に、自分のポートフォリオに組み込みたい内容や機能を整理していきます。
- 自己紹介
- プログラミングのスキルセット
- ブログや過去に制作した作品の紹介
- Twitterのタイムラインとフォロワー数
- FacebookやGithubなどのコンタクト情報
また、アプリに組み込みたいこだわりやアニメーションなどの細かな機能もここで決めました。
- レスポンシブデザイン
- ドロワーメニュー
- チャート表示
- アニメーション表示
- モックアップ画像
- SNS連携
- メインビジュアルに動画を表示したい
ある程度やりたい事（素材）が頭の中で固まってきたら構成を紙に書いてみると良いと思います。
サイトの構成が決まったらWF（ワイヤーフレーム）を作成していきます。
私はエンジニアで、Webデザインの知識は少ないですがYouTubeやUdemyなどを利用してWFを作成する為の簡単なPhotoshopの操作方法は予め学びました。
作成したPSDファイル↓
https://demo.isystk.com/design/psd/portfolio.psd
HTMLコーディング
WFが完成したらHTMLファイルをコーディングしていきます。
最近のWebサイトは、スマホからのアクセスが70%を超えておりPCサイトからのアクセスが減少しています。
その為、Webデザインはスマホファースト（スマホからのアクセスを優先したデザイン）となるようにして、PCからアクセルされた場合でも違和感なく表示出来るようレスポンシブデザインとなるようにしました。
HTMLコーディングの段階で、CSS3やjavascript を利用したアニメーション処理も組み込んでいきます。
アニメーション機能
- ドロワーメニュー
スマホ表示の場合に右上にメニューボタンを表示します。タップするとスライドでメニューが表示され、ハンバーガーメニューのボタンがバッチボタンに切り替わるアニメーションです。
- フェードインアニメーション
画面をスクロールしてコンテンツがウィンドウ範囲内に含まれた際にフェードインさせて表示するアニメーションです。
- チャート表示
- 数字をシャッフルしてから表示する
Twitterのフォロワー数を初期表示の際にシャッフルさせるアニメーションです。
- ページトップに戻るアニメーション
一定位置までスクロールすると右下に「ページトップに戻る」為のボタンを表示させて、クリックするとページトップまでスクロールさせるアニメーションです。
Nuxt.js & Typescript でアプリ化
HTMLをそのまま公開しても良かったのですが、フロントエンドエンジニアとして働いていることもあり、折角なので最近流行りのNuxt.js & Typescript を利用してアプリ化しました。
Nuxt.js で対応した機能
- 表示内容をjsonファイルから読み込んで表示
- vue-charts
- PWA対応
- GA設定
苦労した点
HTMLコーディングの際にjQueryを利用してアニメーションを作成していたのですが、Nuxt.jsにする際に、脱jQueryで書き直す必要が出てしまったのでHTMLコーディングの時点でjQueryを使わないようにした方が良かったなぁと思います（笑）