【初心者必見】ポートフォリオを作る時に便利なサービス

エンジニア転職、WEB制作会社への営業を行うとき、ポートフォリオサイトの作成は欠かせません。

ポートフォリオサイトは自身が作った作品をまとめたWebサイトのことで、クライアントに対してスキルや実績をアピールすることを目的としています。

今回はポートフォリオの作成時に便利なサービスのご紹介、作る前にしっておいて欲しいことなどをお伝えしていきます。

目次
1.まず初めに
2.無料で使える画像サイト
3.色の組み合わせ
4.画像編集ソフト
5.プラグイン
6.その他

まず初めに

いきなりポートフォリオサイトを作るのではく、なんでポートフォリオサイト作るのかをまずは目的を明確にしましょう!

なんで作るの?どーやってポートフォリオを作ればいいの?何を意識すればいいの?どんなことを書けばいいの?といった疑問にすべて答えて下さっているこちらの動画がお勧めです。

【yujiさんの動画】

①【Web制作の営業】ポートフォリオサイトは絶対○○を意識せよ!

②【プログラミング初学者必見】エンジニア転職活動に使える超効率的なポートフォリオサイトの作り方を教えます。

「エンジニア転職活動に使える超効率的なポートフォリオサイトの作り方を教えます。」といったタイトルですが、1分40秒~のところは、ポートサイトの作り方を発信しているので、これからポートフォリオサイトを作る人にはぜひ見てらいたいです。

無料で使える画像サイト

お勧めの画像サイトになります。
①のADOVEサイトを使っておけば基本は大丈夫です!
目的の画像が見つからなかったら②、③などほかのサイトでも画像を検索しましょう。

①ADOVE

こちらはかなりお勧めです。元々が有料の素材なので質もかなり良いです。

②O-DAN

③Kaboompics

色の組み合わせ

Webデザインを行う際に気をつけなければいけないポイントの1つが配色です。どんな色を使うかによってページの雰囲気やイメージが大きく変わります。デザインの勉強をしていない方は、色の組み合わせの知識がないと思うので、サービスを使うことをお勧めします。

①COLOR SUPPLY

3色の組み合わせを見るときは必ずこのサイトで確認します。

②Palette List

2色の組み合わせをみるときにお勧めです。自分で色を選択できるところも使いやすくお勧めのポイントです。

③サルワカさんのブログ

サルワカさんが色の組み合わせをまとめて下さっているブログ記事です。

④その他にも様々なツールがあります

以下参照
https://webdesign-trends.net/entry/11846

画像編集ソフト

①PHOTOSHOP

月額980円~から利用可能です。
最初は機能が多すぎて混乱しますが、1.2時間いじれば使いかたは一通り理解できます。
実案件でも使っているのでお勧めです。
https://www.adobe.com/jp/products/photoshop.html

②CANVA

こちらは無料で画像の編集ができます。CANVAが割と万能で基本的なことはできます。PHOTOSHOPを使い始める前は、私もずっとCANVAを使っていました。
https://www.canva.com/

プラグイン

プラグインを入れるだけで作業効率が爆上がりするので必ずいれましょう

①ColorPick Eyedropper

Google Chromeの拡張機能です。
WEBサイトを見ていて「この色知りたい!」となったときにかなり使えます。
ColorPick Eyedropperを起動し、調べたい色のとこまでカーソルをもっていき、クリックすれば使われているカラーコードを調べることができます。一回一回デベロッパーツールを開かなくてよいので、かなりの時短になります。

②GoFullPage – Full Page Screen Capture

Google Chromeの拡張機能です。
開いているページを上から下までスクリーンショットをしてくれます。
作品を載せるとき、スクショを公開するのも一つの手段なのでぜひ使ってみて下さい。

③エディターの拡張機能(VScode)

「あれだけ多くの方がプラグインは入れたほうがいい」と言っているのにめんどくさがってまだ入れてない人は絶対にいると思います(笑)
これがラストチャンスです。入れましょう!

その他

①Font-familyメーカー

これはめちゃめちゃ便利です。
好きなフォント、使いたいフォントをfont-family が自動で出力されます。
これはだんくんのツイートで知りました。

②flexbox-cheatsheet

このチートシートは超お勧めです。
FleBoxの並べ方が一目で分かるので、かなり時短につながります。

その他に便利なサービスがあれば随時更新をしていきます。

この記事を書いた人