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

Webデザイナーになるために
スポンサーリンク
スポンサーリンク
スポンサーリンク
未経験だったり初学者のWebエンジニアの方は

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

OnitsukaYushiさんのポートフォリオ

 

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

YUSHI ONITSUKA-portfolio
webデザイナー オニツカユウシのporfpolioです。

俊逸な点

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

 

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

 

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

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

 

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

Myportfoliosite kuri-chan
motion-prot | Myportfoliosite kuri-chan

俊逸な点

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

 

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

 

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

 

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

 

作品集

 

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

 

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

 

使用技術を見る

vanilla-tilt.js

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

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

 

TOP背景

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

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

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

CSS triangle generator
CSS triangle generator - A generator for pure CSS triangle

 

ページ遷移

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

 

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

 

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

 

 

CSS3アニメーション

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

 

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

 

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

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

くりちゃんさんのTwitter

 

まとめ

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

共通して言えることは

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

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

 

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

 

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

 

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

 

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

 

https://codepen.io/

 

 

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

 

人気転職エージェント

 

 

人気転職ブログ記事

 

【無料】WebIT系優良就活・転職サイトまとめ
Webist(ウェビスト)

Webist(ウェビスト)は大手企業に強いWeb専門の転職サイト&エージェントです。
特徴・メリットは
・30年の実績
・幅広い働き方を推奨
・大手企業多数
・週3案件が多い
・エージェントの質がいい
などなど。
大手Web企業で転職を決めましょう!

ワークポート

元々IT専門の転職サイトだったためIT業界の求人数が約2000社と圧倒的です。
エージェントも質が高く専門性の高いサポートをしてくれます。
オリジナルツール「eコンシェル」が便利。
【IT業界・ゲーム業界】に強い、転職決定人数 No.1です!

レバテックキャリア

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

マイナビクリエイター

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

スポンサーリンク
WebデザイナーになるためにWeb転職するフロントエンドエンジニアポートフォリオ転職
スポンサーリンク
シェアする
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして企業に週5で業務委託で常駐しています。

正社員からフリーランスになり以下のように変わりました。
・月収 34万→929,346円(最高月収)
・残業時間:最高100時間→0~10時間
・日々の積み上げ:なし→ブログ、筋トレ、プログラミング

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

技術ブログはこちら→frontendomemo

関係ないですが、オムレツ作るのが好きです。

プロフィール
サイトマップ

宜しければフォロー、feedly登録くださいm(__)m

フォローする
hoshilog

コメント

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