こんにちは。まさかずです。
プログラミング初学者向けにプログラミング基礎のロードマップをつくりました。
最終的にWordPressでのサイト制作を目標にしています。記事は複数回に分けています。
今回は第3回目です。
1回目、2回目の記事はこちらです。
第3回目は「ポートフォリオ作成編」です。
- ポートフォリオサイトが作成できる（ローカル環境）
それでは、流れを見ていきましょう。
プログラミング基礎 独学ロードマップ 【ポートフォリオ作成編】
「ポートフォリオ作成編」の流れは以下のようになっています。
- ポートフォリオサイトとは
- いろんなポートフォリオサイトを見てみよう
- テンプレートを使って制作しよう
- 無料の画像を探そう
- ロゴを作ってみよう
ポートフォリオサイトは初めての「成果物」になりますね。
それでは、ロードマップに進みましょう。
1、ポートフォリオサイトとは
ここではポートフォリオサイトについて説明をします。
ポートフォリオサイトとは「自分の成果物をまとめたWebサイト」のことです。
実績やスキルなどを他者にアピールすることで信頼を獲得できます。
エンジニアやデザイナーは営業するときの資料や名刺がわりになります。
ここで一つの例ですが、僕のポートフォリオサイトがこちらになります。
このように一つのページにまとめると分かりやすいですよね。
1-2、ポートフォリオの内容
ポートフォリオサイトには以下のような内容を記載します。
- ファーストビュー（画像や動画）
- 自己紹介
- 実績
- スキル・サービス内容
- 料金
- お問合せフォーム
このような内容が書かれていれば、Web制作の営業にも使えるでしょう。
ページは1ページもののLP（ランディングページ）と呼ばれるもので問題ありません。
最後にお問い合わせフォームを設置して連絡できる導線にしましょう。
2、いろんなポートフォリオサイトを見てみよう
はじめてポートフォリオサイトを作るので、デザインのイメージが湧きにくいと思います。
様々なポートフォリオサイトを見ることでイメージが湧きやすくなります。
- ポートフォリオをもっとカッコよく！上手なポートフォリオサイト20選（fetret）
- 参考にしたい日本人デザイナー・エンジニアのポートフォリオサイトまとめ（arutega）
- イケてるWebデザインで作られたポートフォリオサイト21選まとめ（マイナビクリエイター）
これらのサイトはデザインのプロの方のサイトなので参考程度にしましょう。
デザインに凝りすぎて時間がかかりすぎたり、分からず挫折すると本末転倒です。
成果物を作り上げる経験が一番大切だと思います。
2-2、良いデザインのサイトも見ておこう
デザインは『良いサイトを見ること』でセンスを養うことができます。
コーディングの参考にもなるので目を通して参考にしてください。
- Pinterst：『Webデザイン』や『Webサイト』と検索してみましょう
- WebDesignClip
- SANKOU!
良いデザインを見ると流行や傾向が感じ取れると思います。
今作られるほとんどのサイトが『レスポンシブデザイン』であることにも注目しておきましょう。
海外と日本でもサイトの違いがあります。
- 海外のサイト：スタイリッシュでシンプルな構成。イメージが多い。
- 日本のサイト：テキスト情報が多く複雑な構成。
どちらが良い・悪いではありませんが傾向を掴むことも大切です。
３、テンプレートを使って制作しよう
初学者の方はほとんどデザインを勉強していません。
ですのでHTMLテンプレートを使ってポートフォリオサイトを作ることをオススメします。
テンプレートは有料の海外サイトを利用します。
テンプレートにはメリットデメリットありますので使い分けが大切です。
メリット
- 時短になる
- デザインやコーディングの勉強になる
デメリット
- 一から作るよりスキルアップしない
- デザインが海外寄りなので違和感が出る
それではテンプレートのサイトをご紹介します。
- Themeforest（Envato Market）
Themeforestは海外の有名なテンプレートサイトです。
安いものは5ドルくらいから購入できます。
Themaforestでの購入方法はこちらの記事を参考にしてください。
3-2、変更する内容
テンプレートを購入・ダウンロードしたらオリジナリティを出すために変更をしていきましょう。
主に変更する内容は以下のとおりです。
- 文章
- 画像
- 色
- アニメーション
- アイコン
- 不要な部分の削除
基本的なベースを残しつつ、アレンジを加えるイメージです。
全てそのまま使うとオリジナリティが無いので、少し手を加えてみてください。
アニメーションを変更・追加するなどすれば勉強になりますよね。
3-3、配色の構成に気をつけよう
Webサイトは全体の配色パターンが重要になります。
そこを間違えるとバランスのおかしいサイトになり見にくくなります。
配色の構成には気をつけましょう。
配色にはベースカラー、メインカラー、アクセントカラーの3種類があります。
この3カラーを『75:25:5』の割合で使うとバランスの良いサイトになります。
詳しくはこちらを参考にしてください。
こちらはシーン別の配色パターンです。
『優しい色あい』『力強い色あい』など自分がつくりたいサイトのイメージに困ったときに使えると思います。
- カラー配色で迷わない！シーン別配色見本32パターン（スタイルブログ）
全体の配色をセオリーに沿って作れば、おかしなサイトになりにくくなります。
自己満足で作っても見にくかったり、使いにくければそもそも見てもらえません。
相手視点に立ち使いやすい配色を心がけましょう。
4、無料の画像を探そう
サイトの画像は何でも使っていいわけではありません。
必ず「商用利用可」の画像を選ぶようにしてください。
これらのサイトは商用利用可なので安心して使えます。
自分のイメージに合った画像を探してみてください。
4-2、アイコン画像
アイコン画像はよく使うことありますよね。
私のポートフォリオにも『プロフィール』にモノクロの人物アイコンを使ったりしています。
無料で使うことのできるアイコン画像のサイトは以下の記事にまとめられています。
画像ではありませんが、CSSで装飾できるフォントアイコンサイトが便利です。
1番有名なのは『Font Awesome』という海外のサイトです。
こちらはよく多用するので是非覚えておいてください。
5、ロゴを作ってみよう
サイトのオリジナルロゴを制作できるサービスを紹介します。
ロゴは自分のサイトの名前に使ったりします。
Web上で完結するロゴデザインのサイトを2点紹介します。
まとめ
今回はプログラミング基礎 独学ロードマップ 【ポートフォリオ作成編】の記事を紹介しました。
- ポートフォリオサイトとは
- いろんなポートフォリオサイトを見てみよう
- テンプレートを使って制作しよう
- 無料の画像を探そう
- ロゴを作ってみよう
初めての成果物になる方も多いと思います。
アウトプットしてご自身の成長を感じながら楽しんで作ってみてくださいね。
次回はサーバにアップロードする方法をお伝えする予定です。
以上、参考にしていただくと幸いです。
