【毎月3名限定】僕が運営するプログラミングスクール
プログラミング

【解説】デザインができないエンジニアがポートフォリオサイトを作る方法

こんにちは、Ziziです。
僕はプログラミングを始めて3ヶ月後には自分のポートフォリオサイトを制作していました。

ジジルン
ジジルン
ポートフォリオサイト作りたいけど、どうやって作るの?
ジジルン
ジジルン
Ziziは元々デザインとかもできたんでしょー?
Zizi
Zizi
いや、Ziziが作ったサイトはデザインツールを一切使用していないんだよジジルン!

こういった疑問にお答えします。

✅本記事の内容

・ポートフォリオサイトの作る方法
・Photoshopなどのデザインツールは必須ではない
・ポートフォリオは知名度のないフリーランスが仕事をもらうための唯一の武器である

本記事ではこれらをまとめました。

それでは具体的にその手順を解説していきます。

デザインができないエンジニアがポートフォリオサイトを作る方法

①日頃からおしゃれなサイトを見つけたらブクマに保存

②ポートフォリオサイト作る時に参考サイトを再度見る

③そのサイトたちの気に入った部分をマネする


④サイトを元に大まかなレイアウトを紙に描く


⑤コーディングしながらデザインする。

①日頃からおしゃれなサイトを見つけたらブクマに保存

僕はWEB制作をする時には必ずPinterestを見ます。
例えば、Pinterestで【Web Design】と検索してみましょう。
イケてるサイトはpinterestなどで探せばOK。

この中から自分が気に入ったデザインを保存して、
自分が作りたいサイトのイメージを膨らませていきます。
参考サイトをどんどん増やしていく感じです!

②ポートフォリオサイト作る時に参考サイトを再度見る

僕が初めて作ったポートフォリオサイトはこちらでして、(画像クリックで飛びます)


制作するにあたって参考にしたサイトは以下3つです。

旅する鈴木
patrick
nari

③そのサイトたちの気に入った部分をマネする

いずれも僕のサイトを見てもらえればわかると思うのですが、
具体的には上記3サイトのトップページのインパクト、ロード画面の動き、そして縦書きの表現を真似しました。

色んなサイトを見て、自分が気に入った場所をうまく自分のポートフォリオサイトに組み込むイメージです。

④サイトを元に大まかなレイアウトを紙に描く

①〜③の工程で自分の頭の中でサイトのイメージができあがってきたと思います。

次はそのイメージを紙にざっとレイアウトを書き出します。

雑すぎて参考になるかはわかりませんが、
こういう感じで大雑把にイメージを書き出します。

⑤コーディングしながらデザインする

こんなことをするとデザイナーさんに怒られるかもですが、
レイアウトがなんとなく決まったら、あとはコーディングしながらデザインします。

理由としては、1からデザインツールの使い方から覚えなければならないからです。

デザインしてからの方が圧倒的に楽ですが、その分圧倒的に時間がかかります。

1,デザイン→コーディング→サーバーアップロード
2,コーディングしながらデザイン→サーバーアップロード

こうすることで3ステップではなく2ステップで完成します。

特にデザインを苦手にしている人は”デザイン”の過程でまず挫折します。

ゴールはポートフォリオサイトを完成させることであって、
デザインツールを使えるようになることではありません。

最短距離でポートフォリオサイトを作るためにデザインツール必須ではないので、
デザインができないからといって諦めなくて大丈夫です!

「自分のポートフォリオサイトを作った方が良い」と、
何度も聞いたことがあると思うんですけど、それでもほとんどの人が作れないし、見せられません。

だからそこには大きなチャンスがあります。
ぶっちゃけポートフォリオサイトを自分で作ることができれば就職は余裕だと思います。
作れない人がほとんどだからですね。

「未経験」だったらなおさら、そこで勝負しましょう!

まとめ

ジジルン
ジジルン
Ziziはこうやってポートフォリオサイトを作っていたんだね〜!ジジルンも自分のポートフォリオサイトを完成させることを目標にしてプログラミング学習を頑張るよ!
Zizi
Zizi
ポートフォリオは知名度のないフリーランスが仕事をもらうための唯一の武器なんだ。ポートフォリオサイト自体が何よりの作品になる。クライアントが一番わかりやすく実力を判断できるところだから、
自分が現時点で作れる最高のwebサイトを作ろうね!

ポートフォリオサイトを作ったおかげで
クライアントからの食いつきがよかったですし、その方が相手からも信頼されやすいです。

身元もよく分からないフリーランスの仕事の質を保証してくれるのは「制作実績」だけだからです。
ある程度までポートフォリオが完成したら、仕事を請けつつ掲載作品数を増やしていけばOKです。

Progateでレベル上げしている暇があったら
学んだことですぐにアウトプットするために自分のポートフォリオサイトを作りましょう。
その方が圧倒的に成長効率はいいです。

ポートフォリオサイトを作るときの参考になれば幸いです^^

※追記

テンプレートファイルを販売して欲しいという声が多かったので、

https://paymo.life/shops/089c221bc5/zizitokyo

こちらのページで販売することにしました!

基本的にHTML/CSSの知識がある人向けですが、
わからない場合は、オプションでカスタマイズをお手伝いすることも可能です。

その場合は、別途ご相談していただければお見積り致します。

もし、ポートフォリオサイトで気に入るデザインがなければ、是非僕のデザインを使ってください^^

ABOUT ME
Zizi
Zizi
フリーでWEB制作してます👨‍💻 大学卒業後独立→リゾバ4ヶ月で100万円→フィリピン留学→豪ワーホリ→未経験からフリーランス→北海道大手制作会社がクライアント→単月売上7桁到達。今は海外ノマドしながら世界をフラフラしてます。 自分の経験を元に、未経験からエンジニアになる方法や業界のことを発信してます。
【人生の難易度を下げよう】

僕は日本で働くのは
いい選択肢には思えなかったので、
大学卒業と同時に、
海外で生きていく決断をしました。

できることならば、

期間を気にせずに、
好きなだけ好きな人と好きな国にいたいし、
人生という旅を楽しみたかった。

いつ死んでもいいような人生を送りたかった。

結論から言うと、

僕は旅をしながら
お金を稼ぐスキルを身につけ、
理想の働き方を実現するに至りました。

「好きなことで生きていく」

ではなく、

「嫌なことで死なない」

2016年9月に海外に出て
ここまで2年以上
国内外を旅しています。

僕がどのようにお金を稼いで、
ここまで旅を続けられているのか。

以下の記事を読んで
是非チャレンジしてみてください。

旅をしながらお金を稼ぐ方法を知る