どうも。みずかず(@mizukazu_1)です。
ようやく自分のポートフォリオサイトを作成しました。
前々から作ろう作ろうとは思っていたのですがデザイン等も決まらず先延ばしになっていました。
しかし、先日Qiitaでこんな記事を見かけ感化されて自分も作ってみようってなりました。
そこからは爆速で作りましたｗ
ここまでの完成度は無理でしたが自分的には満足です。
作ってる最中は非常に楽しかったです。
やっぱり自分はWeb系の方が合っているんだなと再認識出来ました。
と、前置きはこれくらいにしてさっそく紹介していきますね。
サイトのコンセプト
実際のポートフォリオサイトは下記から見れます。
コンセプトはなんと言ってもドラクエっぽく！です。
とは言ってもドラクエっぽいのは背景が黒くて、ファミコンチックなフォントを使っているので
そう見えるだけなんですがｗ
プロフィール、スキル、プロダクション、ブログ、コンタクトの
5項目を作りました。
プロフィールの所はもう少し詳しく書けるように調整します。
ただ改めて見て思ったことなんですが
プロフィールとスキルにはアイコンがあって
他はアイコン無しだとなんか統一感がないですね・・・
この辺は要修正ポイントです。笑
使っている技術
デザイン
デザインは言わずもがな
HTML,CSSです。
これは当たり前かｗ
CSSフレームワーク
CSSフレームワークですが
Skeletonのグリッドレイアウトだけを使用しています。
一応Skeletonの公式サイトのリンク貼っておきます。
PCとスマホは対応させたかったので
Skeletonのグリッドを使わせてもらいました。
タブレットサイズは今回は捨てていますｗ
JSライブラリ
写真だと分かりませんが
Welcome to Mizukazu Portfolio！の文字はタイプライターになっていて
画面読み込みと同時に1文字ずつタイピングされる仕様になっています。
この仕組みを実現させるために「iTyped.js」というJSライブラリを使用しました。
コチラも公式サイトのリンクを貼っておきます。
このタイプライター風のアニメーションってかっこいいですよね。
以前どこかのサイトを見てたらこのアニメーションが実装されていて
カッコいいなーって思ったのがきっかけで今回取り入れてみました。
CSSで実現する方法や他のライブラリを使うっていう選択肢もあったのですが
iTyped.jsが一番簡単そうだったので使いました。
事実、学習コストもそんなに高くないですし
調べればすぐ使えるようになるのでオススメです。
今度使い方の記事も書いてみたいと思います。
フォント
フォントは「PixelMplus」というフォントを使っています。
こちらもリンク貼っておきます。
こちらのフォントですが
ドラクエ風というよりはファミコン風といった感じです。
背景を黒に文字を白にするとあら不思議
ドラクエっぽく見えてしまうんですねｗ
導入するだけでレトロな感じを演出出来るので
このフォントはゲーム開発者さんにもオススメです。
最後に
先人達の残してくれたものは偉大だなと実感しました。
これらを自力で実装するとなったら時間がいくらあっても足りませんからねｗ
今回使用したものはどれも学習コストが低く
少し調べれば使えるのでオススメです。
なんといってもiTyped.jsは特にオススメです。
少ないコード量でカッコいいタイプライターアニメーションが実現出来てしまうのだから。
また、自分自身のスキルも少し上がったと思うので良かったです。
やっぱり手を動かすことが何より大切だな～～って思います。
みずかず
スポンサーリンク
