【フリーランス】リモートに強いエージェント5社
フリーランスエージェントのおすすめ30社をランキング 気になる1位は?
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

【未経験Webエンジニア必見】俊逸過ぎるポートフォリオまとめ・解説

本ページにはプロモーションが含まれます

Web転職する
未経験だったり初学者のWebエンジニアの方は

 

  • ポートフォリオをどう作っていけばいいかわからない
  • ポートフォリオを作る上で参考になるものを見たい

 

という方が多いかと思います。

 

この記事では、Twitterでお見かけした俊逸過ぎるポートフォリオを2つ取り上げたいと思います。(お二人ともブログに取り上げることを許可頂きありがとうございました!!)

 

コーディングやWebデザイナーを目指されてる方、実務経験はあるがポートフォリオの作成で悩まれてる方も必見です。

 

ポートフォリオを紹介しつつ、どうやって実装されてるかを調べる方法も解説したいと思います。

 

この記事を読むことで以下のことが実現できます

  • 優れたポートフォリオを見ることができます
  • 参考にしたい時、実装方法の調べ方を解説します

 

参考にしたい時の実装方法の調べ方

 

まず、このポートフォリオみたいな技術使いたいな~、真似したいな~って時にどう見ていくかを解説します。

 

使用するのは開発者ツール(F12)、ソースを開く(Ctrl+U)の2つです。

どちらもソースなのですが、この2つには違いがあります。

 

  • 開発者ツール(F12)・・・JSのリアルタイムなCSSの操作もわかる
  • ソース(Ctrl+U)・・・CSS、JSファイルが全画面で見れる(開発者ツールのSourceタブでも見れます)

 

後程このツールを使ってソースの中身を見ていきます。

OnitsukaYushiさんのポートフォリオ

 

下記リンクから見れます↓

404 File Not Found

俊逸な点

下記が特に俊逸だと思います。

 

  • ユーザビリティを考慮した設計
  • 内容が簡潔且つコンテンツに厚みもある
  • しっかりした実績を載せてる

 

onitsukaさんはWebディレクターを経験し、Webデザイナーになったということですが、情報設計がかなり上手くされてるのでとても見やすいです。

 

Webデザイナーの実務経歴が半年だとはとても思えないですね。

 

また、loadingや1ページごとにスクロールするスクロールジャック(呼び方は様々)などアニメーションの動きがもっさりしておらず、ユーザーにストレスがかからないように設計されてます

 

割とこのあたりのアニメーションは遅くしてしまいがちなのですが、ユーザーにとって気持ち良い速度ですね。

 

使用技術を見る

 

先述したツールで実装方法を見てみます。

 

loading

最初に目を引くのはサイトを訪問、更新した時のアニメーションです。

 

loadingといってページを読み込む間、お待ちください的なアニメーションが入るのですが、上手く意味のあるアニメーションで表現されていて素晴らしいです。

 

例えばこのloadingアニメーションはどうやってるんだろうと思った時にテキスト要素にF12でカーソルを合わせます。(詳細な開発ツール自体の使い方は検索してみてください)

 

そうするとjs-loaderというidにあたりました。

 

 

js-loaderもそうですが、接頭辞にjsがつくクラスはJSで操作することを意図しています

 

それが分かれば「js-loader」で検索しCtrl+Uか開発者ツールのSourceタブでJSファイルに存在するか探していきます。

 

script.jsで見つかりました。

 

恐らくここで処理していることのあたりがつくと思います。

 

さらにclassにc-loaderが付与されていて開発者ツールで見ると、

 

 

とあります。

 

つまり、loadingはもう既にJS(element.style)で消してあり(display:none)、c-loaderでanimationというCSSのプロパティが付与されていることがわかります。

 

ちなみにdisplay:noneのチェックマークを消すとアニメーションがもう一回始まるかと思います。

 

こうやってソースを見ることで使用してる技術、実装方法が分かっていくと思います。

 

JSプラグイン

 

どういうプラグインを使ってるのか見たい時はJSファイル名で検索するといいです。

 

例えばこちらのポートフォリオの場合、Ctrl+U(もしくは開発者ツール)でソースを表示し「.js」で検索すると読み込んでるJSファイルがわかります。

 

さらにヒットした中でjquery.scrollify.js、TweenMax.min.jsがプラグインっぽい名前だなということがわかります。(ファイル名が機能名っぽかったらプラグインの可能性高いです)

 

その名前をそのままgoogle検索します。

そうすると使い方やどういうプラグインか出てくると思います。

 

 

実績

さらにailogoというサービスもご自身で作られててそれを実績として載せています。(現在閲覧不可)

 

ailogoとは、二人の思い出の写真をオシャレなロゴ風にアレンジすることで、「さり気ない」かつ「二人だけがわかる」ペアルックをつくれるサービスです。

 

こちらの制作と運営をされてるということで可能性が半端ないです。。

ailogoはこちら

 

今後はフリーランスのWebデザイナーを目指しているということでこれからも目が離せませんね。

onitsukaさんのTwitter

くりちゃんさんのポートフォリオ

 

下記リンクから見れます↓

http://kuri-prot.com/

上記ポートフォリオは現在閲覧不可です。

俊逸な点

下記が特に俊逸だと思います。

 

  • 構成力
  • CSS3アニメーションの駆使
  • 個性的な表現能力

 

くりちゃんさんも19卒ということで実務経験が半年経ってないのに、このポートフォリオを一目見ただけで凄いことが分かりますよね。

 

Twitterでやり取りさせていただいたことはあったのでよく存じてはいましたが、CSSのアニメーションにおいて技術的に最高レベルです。

 

作品集

 

My Worksも是非見てほしいのですが、こんなWeb見たことないって感じじゃないでしょうか。

 

アニメーションの作品集が並んでいますが、どれもデザインや構成、実装にかなりのセンスと時間、技術力が必要です。

 

使用技術を見る

vanilla-tilt.js

使用してるプラグインは恐らく一つでvanilla-tiltというホバーしたら対象が立体的に動くアニメーションのプラグインでした。

CSS animation で遊び倒す – Vanilla – Tilt.js チュートリアル-

 

TOP背景

背景の図形とかどうやってんの?って感じですよね。

開発ツールを見ると感じでborderで三角形を作り組み合わせてることがわかります。

borderで三角形を作るのは下記サイトなどで作ることができます。

403 Forbidden

 

ページ遷移

ページは1ページを遷移してるように見せています。

 

どうやって遷移してるように見せているかというとz-indexで重ねているわけですね。

 

挙動としてはリンクする→対象のクラスに○○○-activeが当たる→○○○-activeのstyleが適応されるためコンテンツが他より前に来るという感じです。

 

 

CSS3アニメーション

その他遷移時のアニメーションなどは全てcss3でやってるようです。

 

一つ一つのシーンに分けてhtml(animation_01、animation_02…)、css(animationプロパティとkeyflame)を付与しています。

 

かなり根気がいる作業ではありますが、見る人に驚きと感動を与えますよね。

またこのポートフォリオがVer1ということでさらに進化していきそうです。

くりちゃんさんのTwitter

 

まとめ

これからのWebを背負って立つ2人のポートフォリを紹介させていただきました。

共通して言えることは

  • 構成力
  • デザイン力
  • 実装力

の3つがバランスよく高く、さらにそれぞれのポートフォリオが当人の個性や、やりたいことがビンビン伝わってくるということです。

 

自分も含めここまでレベルの高いポートフォリオを見たことがなかったので驚きつつ勇気を出して紹介させてもらった感じです笑

 

そして実務未経験の方は、このレベルは難しいと思うのですが、何か参考になるものを一部分でも見つけて取り入れるといいかと思います。

 

やり方としては、開発者ツールでソースを調べ不明なキーワードがあれば検索です。やっていくうちにこれはCSSだなとかJSかなとかあたりが付いてくると思います。

 

試す時はcodepenで小さく試すのも有効です。

 

Just a moment...

おすすめ:サーバー

ポートフォリオを作るならサーバーを契約しておきましょう。

私がこのブログで使ってるのはmixhostというサーバーです。

安定感があって問題が起きたことがなく安心して使えます。

普通何事もないでしょ?と思われるかもしれませんが、意外とサーバー会社によってはサーバーが停止したりあるんです。

顧客が使用してるサーバーが止まったりして数日間見れなくなったりということがありました。。

mixhostはあのブロガーでYouTuberのマナブさんも使ってます。

満足度No.1のmixhostの始め方と費用を解説|マスクがもらえるって本当?
当ブログでも利用してるmixhostについて始め方と費用について解説します。 クーポンやキャンペーン情報、マスクがもらえるの!?という噂にも真実を書いていきます。

 

 

最後に、皆さんの活躍を心から願っております!

 

【無料】WebIT系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当!
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も!
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

Web転職する ポートフォリオ作成の手順
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業

Webデザイナー(アルバイト)

Webデザイナー(正社員)

フロントエンドエンジニア(正社員)

フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。

【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshilog

コメント

タイトルとURLをコピーしました