プログラミング

【作った!】エンジニア用ポートフォリオ作成で参考になったサイト・サービスまとめ

portfolio-eyecatch

G’s Academyという”世界を変えるGEEKになろう。”がコンセプトのエンジニア養成スクールへ通い始めて、もうすぐ3ヶ月。

毎日プログラミング漬けの、けんと(@kentn97)です〜!

 

ここまでの学習の成果を確認すべく、実際にネット上に公開できる作品を作ろうって事で完成させたのが、今回のポートフォリオサイトっ↓

けんと
けんと
まずは覗いてみてね😊

リンク: https://kentn97.github.io/kento-works/ 

 

そこで今回の記事では、、、

ポートフォリオサイト制作を通じて、参考にしたサイトや利用したサービスを紹介していきます。(たくさんあったので、インスピレーション・デザイン・コーディングの3パートに分類してるよっ)

 

  • プログラミングやデザインの勉強を始めた方
  • 転職へ向けて、ポートフォリオを作ってみようとしている方

に少しでも参考になれば、嬉しいですっ。

Webエンジニア用ポートフォリオ作成で参考になったサイト・サービス

light

 

インスピレーション編

まず始めに、サイトのデザインや必要な要素を決めるために用いたサイトを紹介していきます。

「ポートフォリオサイトあったらいいなぁ」レベルの漠然としたイメージしか無かった為、既に公開されている多くのポートフォリオサイトを見てみるところから始めました。

Pinterest

pinterest既に知ってる方も多い?、Pinterest

僕も元々、旅行情報(主に海外)を調べるときに用いていたのですが、Webサイトのデザインを探すことにも使えることを、学校のメンターの方に教えてもらいました。

日本語を使って検索できるのも後々気づきましたが、嬉しいポイント。本当におしゃれなデザインが沢山見つかります。

Dribbble

Dribbble

こちらDribbbleはアメリカ発のデザイナー専用SNS。

Pinterest同様に様々なデザインが見られます。しかも、その質の高さがすごい! こちらのサイトに投稿できるデザイナーは、完全招待制で選ばれているらしく、質が担保されてるようですねっ。

少々、検索しづらかったりはありますが、結果的のこのサイトで見つけたデザインを参考にすることが多々あるので、紹介してみました!!

 

けんと
けんと

このように、僕の場合は、デザインにも興味がある為、、”デザインを探し→作りたいパーツを考え→コーディングする”という流れをとりました。

けんと
けんと

ただ、エンジニアとしての転職希望であれば、そこまでデザインに凝る必要は無いですし、必要最低限のポートフォリオの仕組みを作れればいいと思います。

そういう方向けに参考になる記事も、今回の作成中に見つけましたので、この場でシェアしておきますね↓↓

 

デザイン編

お次に、デザイン編。僕がサイトのデザインを完成させるまでに使用したツールやサービスを全てまとめてみました↓↓

Adobe XD

XD

学校のUIデザインの授業で使ったということもあり、今回サイトのデザインは、Adobe XDを使いました。

無料で使用できる・直感的に操作できるって点でおすすめですねっ。何年か前に、Webデザインの本を買って、Photoshopでやってみた時は挫折しかけたけど、今回はすんなりいけました!!

Bootstrapを使ってコーディングをされる方。

デザインをする段階で、Bootstrap用のグリッドに合わせておくと後から楽ですよっ。テンプレートとしてネット上にUPされていたので、合わせて共有しておきます↓↓

bootstrap-grid

 

無料のWebフォント

今回、メインとして使ったフォントは、、

日本語→ Noto Sans CJK JP
英語→ Merriweather

です。これらは、Google Fontsを使って、読み込む形をとりました。
また、「ケントの作品箱」ってことで、何かしら”作品感”(ものづくり感)を出したかったので、タイトル部分には、、、”ざっくりゴシック”というフォントを見つけてみました。

kento-works-logo
けんと
けんと
こんな感じで手書き感が出ますよ〜

 

こちらのコリスさんの記事に溢れんばかりの無料フォントが載ってるので参考になるかと↓

 

Flat Ui Colors 2

flat-ui-colors続いて、色選びですねっ。

こちらのFlat Ui Colors 2には、今風のカラーパレットが公開されているので、さくさくっと色を選びたいときは、必ずチェックするようになりました!

かなりオススメですよっ。

palleton

そして、最近見つけたサイトの中で一番感動したのが、Paletton

一言で言うならば、”絶妙な色味摘出ツール”かな(笑

メインに使う色が決まった時、その色よりもほんの少し薄い色・濃い色が欲しくなるのはあるあるですよね。僕もグラデーションやアクセントのために使うのですが、Palettonではまさにその微妙な色合いの色を簡単に弾き出してくれるんです!!

 

けんと
けんと

グラデーションで思い出しんたですが、uiGradientsってサイトにはお洒落なグラデーションが沢山公開してあるんで、こちらも便利。サイトの背景なんかをサクッと今風にできます!

 

コーディング編

最後にコーディング編。僕が使ったフレームワークやプラグイン辺りをまとめようかなと思いますっ!!

Bootstrap

bootstrap

有名なフレームワークを使ってコーディングの経験を積みたかったので、今回はBootstrapを使ってみました! グリッドシステムがあり、比較的簡単にレスポンシブ・デザインが組めるところなど、便利に感じるところが多々。

CDNではなく、Sassを使って読み込んだので、Bootstrap側のファイルの中で必要な分だけを取ってきたりできて、そっちの面も練習になります。

jQueryのプラグイン

ポートフォリオ部分の機能(種類ごとにソート・ポップアップで概要を表示)を実装するために、jQueryのプラグインを2つ使いました!!

共に、使い勝手がよく、細かく設定を変えることができるため汎用性が高いプラグインだと感じました。同様の機能を実装される方は参考にしてみてくださいっ。

あっ、、他にも、タイピング感を出すプラグイン(Typed.js)も使いました。

 

個人的には、たくさんのプラグインを入れてみて、公式のドキュメントを読む練習ができました。それぞれに固有な設定があるので、躊躇なくドキュメントを読めるような耐性をつけたいな(笑

プラグインの選び方。

合わせて、僕独自のプラグインの選び方をメモ📝しておきます。

Bootstarapには公式有料テーマが販売されているんですが、その有料テーマをプレビューして、実際に使われているプラグインを調べるという方法です。

有料で販売されているものに使われているので、ある程度の信頼と汎用性があるプラグインだと確証を得られるのかなと感じますっ。プラグインが多すぎて選べないときは、一度やってみて下さいね〜。

 

【学習用】Advanced CSS and Sass

udemy-css

このUdemyの講座はガチで参考になりました。

  • クラスの命名規則(BEM)
  • SASSを使ったファイルの分割方法
  • NPMを使った開発
  • FlexboxやCSS Gridでのレイアウト
  • SVGファイルの扱い
  • Formのスタイリング

この辺が、僕自身がこちらの講座から収穫した内容です!こうやってリストアップした内容を見てワクワクした方や気になるって方が挑戦するとちょうど良いレベルかもしれません。

(全編英語かつ難易度高め。なので、全員にオススメできる訳ではない)

他にも多くの講座が、Udemyにはあるので、プログラミングの学習をしている方にはかなりオススメですっ。(2019/6/24現在、セール中ですしっ)

 

まとめ

以上、僕がポートフォリオ・サイトを作成していく上で参考になったサイトやサービスでした。

今後みなさんが、サイトを構築していく上で1つでも参考になるものがあれば、嬉しいなぁと思ってます!!!!

 

最近はTwitterの方でも、プログラミングのことを呟いているので、そちらも合わせてチェックしてくれたら嬉しいですっ↓↓

 

最後まで読んで頂き、ありがとうございました😍

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です