Web制作

【簡単】ポートフォリオサイトの作り方【デザイン知識は不要です】

どうも、「なか」です。

この記事では

「ポートフォリオサイトが作れない、、、」

「デザインの知識がないから、サイトを作ることが出来ない、、、」

なんて困っている方にポートフォリオサイトの作り方を解説していきます。

では、具体的にどのようにして作れば良いのか?

結論から言うと、他人が作ったポートフォリオサイトをパクることですね。

ここでいうパクるは参考にするって意味でとらえていただけたるとありたがいです。

デザイン知識がなく、完全独学の僕でも作れたのでぜひ参考にしていただけたらなと。

では、記事に入っていきます(/・ω・)/

この記事の内容
  • 他人が作ったポートフォリオサイトを参考に構成を考える
  • ポートフォリオサイトのコーディング方法
  • ポートフォリオサイトを公開する方法

他人が作ったポートフォリオサイトを参考に構成を考える


まずやるべきことは、他人が作ったサイトを参考にポートフォリオサイトの構成を考えることですね。

言葉を選ばず言うと、上手くパクれってことです。

この方法を使えば、デザイン知識がなくてもそれなりに見れるサイトを作成することが出来ます。

ただパクるにしても、最低限の知識は必要なので出来なさそうならこの記事「【初心者向け】Web制作を独学する方法【未経験でも仕事が取れる】」を参考にしていただければと。

実際に参考にしたポートフォリオサイト

僕が参考にしたサイトはYuki(@yuki_highest)が作成した「ポートフォリオサイト」ですね。

このサイトを参考に構成を作成しました。

以下はポートフォリオサイトの構成を作ったときのツイート。

詳しいpxやデザインなどは決める必要なしですね。

まず初心者が仕様書を作っても思い通りに作るのは難しいし、やり方も分からないと思うので。

詳しいコーディング方法については後述していきます。

ポートフォリオサイトのコーディング方法


どうすれば良いかというと、構成を見ながら大雑把にコーディングを行っていくことですね。

正直適当で良いかなと思います。

詳しいデザインはコーディングしながら良い感じにするのがおすすめです。

先にHTMLだけコーディングしてしまう

簡単なsectionタグで分けて、sectionごとにコーディングしていきましょう。

CSSの前にHTMLだけコーディングしてしまうのが良いですね。

土台が固まっていないとデザインも作りづらいので。

とりあえずは、構成通りに行くようにHTMLの要素だけコーディングしてしまうのがおすすめです(^^)/

ちなみに、画像などはCanvaで探すのが良いかなと思います。

画像がおしゃれだとサイトも綺麗に見えやすいので、気に入るものを探してみるのを推奨します。

その後はPC用のデザインを作っていく

HTMLの要素のコーディングが終わったら、CSSでデザインを作っていきましょう。

構成と似ているデザインにしていけばOKです。

heightやwidthは調整しながら書いていけば良いかなと。

良い感じのデザインになるまで微調整していけば大丈夫です。

また、Flexboxを使うとデザインも作りやすいのでおすすめですね。

最後はスマホ用のデザインを作る

最後はスマホ用のデザインを作っていけば大丈夫です。

とはいえ、そんなに難しいことをする必要はなかったですね。

FlexboxやBootstrapでコーディングしていれば、レスポンシブ対応のデザインは簡単に作れるかなと。

動きを着けたい人はjQueryなどを使うと良い

動きを着けたい方はjQueryなどを使うと良いかなと。

smoothscrollなどは無難ですし、実装も簡単なので使ってみるとワンランク上のサイトになりますね。

僕のサイトでも何個かjQueryを使っているので、以下の記事を参考にしていただけたらなと。

ポートフォリオサイトを公開する方法

ポートフォリオサイトが作り終わったら、サーバーにアップロードしましょう。

サーバーにアップロードしないと公開できないですからね。

僕は、エックスサーバーというレンタルサーバーを使いましたけど無料のものでも良いとは思います。

とはいえ、無料のレンタルサーバーが重いのは事実です。

クライアントから「なんかこのサイト重いな~」と思われるリスクを避けるためにも有料のものを借りるのはありですね。

あんまり気にしないという方は無料のもので大丈夫です。

FTPソフトを使ってアップロードする

FTPソフトというものを使って作ったサイトをサーバーにアップロードしていきます。

おすすめのソフトはFFFTPです。

詳しい使い方は以下の記事が参考になります。

僕はエックスサーバーを使ったので、ホームページへのアップロードの方法は以下のページを参考にしました。

上記の記事を読みながら、アップロードしていけば大丈夫です。

ポートフォリオサイトを作るときは完璧を求め過ぎなくて良い


ついついやってしまいがちですが、ポートフォリオサイトを作るときに完璧を求めすぎる必要はないです。

どんどんアウトプットした方が上手くなる

僕自身、自分のポートフォリオに自信があるかと聞かれたら、正直微妙かなと、、、

ただ、どんどんアウトプットした方が上手くなっていくのは事実です。

僕の周りの人も、未熟な作品でも世に出している人の方が結果的に上手くなっています。

完璧主義になってしまうのは勿体ないので、ごりごりアウトプットしていきましょう。

ここら辺の話は、Yuki(@yuki_highest)さんのこの記事「ブログ・プログラミング初心者がアウトプットすることを恐れてはいけない理由」でも触れられているので、そちらもぜひ。

後から修正も出来る

未熟な作品を出しても、後から修正することも可能です。

それゆえ、あんまり気にし過ぎなくても大丈夫ですね。

実際に僕もポートフォリオサイトを公開してから修正したので、とりあえず世の中に出してもOKです。

批判とかも来ませんでしたし、仮に批判されたとしてもそういう人はクソなので放っておいて良いと思います。

アウトプットを恐れずに行きましょう(‘ω’)

というわけで、この記事は終わりとなります。

構成を考えても、大雑把なコードが思い浮かばない感じなら少し勉強不足なところがあるかな、、、って感じなので以下の記事を参考にしましょう。

【初心者向け】Web制作を独学する方法【未経験でも仕事が取れる】この記事では、 「Web制作初心者なんだけど、独学する方法が知りたい、、、」 「最低限仕事を獲得するにはどんなことをやれ...
RELATED POST