12
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

世界各国のハイレベルなポートフォリオ11選

Last updated at Posted at 2020-08-23

今まで皆様は何件くらいのポートフォリオを見たことがありますか?求人中に応募が来たら見てみる、くらいが普通であり、ましてや海外のポートフォリオを見る機会がある人は少ないのではないでしょうか。

皆が作ったポートフォリオに少しでもスポットライトが当たるようにと、2年ほど前にまとめサイト現在のPortfilioHubを立ち上げ、今では世界各国のポートフォリオサイト5000件のデータが集まりました。その中でGithubスター数で上位にランクインするポートフォリオ達のクオリティは凄まじく、その中から私的トップ11を紹介したいと思います。

スクロールで進行する全体アニメーション系

🇬🇧イギリス albinotonnina.com by @albinotonnina

star-541
756ceb05b3ccad4c384c698eea94928ae69b8143a3b2f43815108a14e007b6ab.gif
スター数でも私としても迷わず1位にしたのがこちら。スクロールで進んでいくアニメーションは必見です。モバイルでもしっかりレイアウトが計算されています。
これは2020年バージョンですが、前のバージョンも同レベルで凄まじく、ウェブが残っていれば掲載して2位にしたいクオリティです。

🇵🇹ポルトガル www.sandrina-p.net by @sandrina-p

star-74
418906f0bab8f5c45fbd774445fcace3bf0afe005ec24aa40aff1941b7fa209d.gif
スクロールで進行するアニメーション。モバイルでも専用のアニメーションが再設計されています。

定番スタイル

🇮🇳インド ashutoshhathidara.com by @ashutosh1919

star-555
075424c3b66d187045826e54225eba15dc4341580bfc6ab26601b2a375d991ad.gif
手書きサインとスクロールで横から入ってくる要素のアニメーションがカッコいいです。
凝ってるポートフォリオサイトほど1ページ構成が多いですが、こちらは複数ページ構成です。モバイルもちゃんと動きます。

🇮🇳インド parizval.github.io by @parizval

star-3
dc9921d37ab3e6097bfc98c6051a18145c33d9d3fb26d6d5907f79fc599f3e34.gif
スターこそ少ないですが、個人的にアニメーションの作り込みの深さと、本来のポートフォリオの目的としての情報量などではベストな作品だと思います。ですが私のモバイルだと若干レイアウトがズレてしまっているのが残念。PC推奨です。

🇺🇦ウクライナ cv.gsm-center.com.ua by @tbaltrushaitis

star-167
54b7ca3990ebfe72ab1b5825824ba1806da7e9bbcc94db7fbc88257dea2b3dde.gif
こちらは是非モバイルでもご覧頂きたいです。一定レベル以上になると単なるレスポンシブではなくモバイル専用に再設計されるケースが多いですが、こちらはモバイルの方が完成度が高いです。

🇺🇸アメリカ gagehenderson.com by @quangogage

star-11
f581206765cae0363dad62320e1e5e985da7b0be5764672bc914381603fb6f26.gif
モバイルがネイティブのレスポンシブを活用しているような印象ですが、どちらでもしっかりアニメーションが効いています。

🇫🇷フランス moox.io by @MoOx

star-25
7f57b05e84c91a0670283d251be7dbf70eb035d113871228266d07c35822a05d.gif
パッと見た感じ一般的なポートフォリオに見えますが、3D表示の3台のiPhoneは画像ではなく、それぞれリンクが貼られておりに、スクロールで3D上で回転します。

ネタ系

🇨🇦カナダ h-richard.com by @H-Richard

star-18
dfa087edd1c3de9154e9af2d33d7e3aed4c94903ccd676a9b62eea189ad5e189.gif
グーグルです。グーグルネタ自体は珍しくないですが、検索結果のレイアウトまで作り込んでます。検索結果だけでなく、Image等のタブ毎まで存在しており、すごいです。モバイルも本物と見紛うほど完璧なレイアウトです。

🇦🇺オーストラリア theden.sh by @TheDen

star-104
6b26629cfb37d6b82becd96552a45255f23ad5b828ad8d9ee8c491ea181e5dd0.gif
ただの緑ターミナル系かと思いきや、ドラッグで各テーブルが動きます!よく見ると古いターミナルを思わせる画面のさざ波や時々起こる色あせ、モノクロ化などエフェクトへの拘りが分かりますね。拘ることが目的化したかのような様相。モバイルはコンテンツが減ってるぽくPC推奨です。

🇨🇳中国 elevenbeans.github.io/resumeX by @elevenbeans

star-33
9a23d59f076baa97b2b9cb7591f74ec635a068a7b072397d77e9763df3859f64.gif
iPhone上のメッセンジャーでのチャット形式。中国語で分かりませんが、画像なども返答で帰ってきます。モバイルでも同じです。

🇺🇸アメリカ 1mhz.me by @dukewan

star-17
0892aee4f884a849643d469abff05701e1bec91163ca9a4dab022c1920c9a89b.gif
マリオです。動きます。指示通り方向キーで左右に、スペースでジャンプして箱を叩けばポートフォリオとしてのコンテンツが表示されます。モバイルでは動きませんでしたので、PC推奨

おわりに

いかがでしたでしょうか。特にこれからポートフォリオを作ろうとしている方々の参考になれれば幸いです。

気に入った又は参考になったポートフォリオがあれば、レポジトリにスターでフィードバックをあげましょう。素敵なポートフォリオがもっとフォーカスされる世界になれば嬉しいです。

PortfolioHubへの参加はレポジトリをgithubで公開し、スクレイピングを希望するURLを貼り、トピックに#portfolio-websiteを貼り付けるだけです。数日以内にクローリングされます。日本人ポートフォリオはまだ少ないので皆様奮ってご参加ください。

ご一読ありがとうございました。

参考文献

12
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?