バナーのポートフォリオ作成が上手くいかない...。
未経験でポートフォリオ作成は難しい？
ポートフォリオ作成で悩んでる...どうしたら良いかな？
などなど、バナーのポートフォリオ作成で悩んでいる方もいらっしゃいますよね。
今回は、Webデザイナーを目指しているあなたのために、ポートフォリオ作成の悩みを解消していきましょう！
- ポートフォリオを作成する目的
- ポートフォリオの制作ステップ
- ポートフォリオ作成が上手くいかない時の対処方法
ポートフォリオとは？ポートフォリオを作成する目的
ポートフォリオ（作品集）とは、あなたが今後Webデザイナーとして活躍するための「あなた自身の顔のようなもの」です。
例えば、ポートフォリオでは以下のことがわかります。
- どんな性格や人柄なのか
- どういう考え方をする人なのか
- どんなスキルを持っていて、何が作れるのか
- この人に仕事を任せたいか？会いたいか？
また、転職活動のために使用するのか、副業やフリーランスとして、自分でお仕事を獲得していくために使用するのかでも、目的は変わってきますね。
あなたの目的に合ったポートフォリオを用意するようにしましょう！
ちなみに、ポートフォリオに必要な内容は以下の通りです。
- 自己紹介
- 強みやアピール内容
- 作品
- SNS
バナーのポートフォリオ制作６ステップ！
バナーのポートフォリオを作成するための流れは、以下の６つです。
- デザインコンセプトを決める
- デザインの方向性を決める
- サイトマップを作る
- Photoshopでデザインを作成する
- HTMLとCSSでコーディングする
- ドメインを取得し、サーバーにアップする
順番に説明していきます！
ステップ１：デザインコンセプトを決める
【バナーのポートフォリオ作成】ステップ１は、「デザインコンセプトを決める」です。
ポートフォリオ作成では、「あなた自身」をデザインで表現します。
あなたが好きな色やモノ、性格や趣味などの「あなたらしさ」を表現できるコンセプトを設定しましょう！
ステップ２：デザインの方向性を決める
【バナーのポートフォリオ作成】ステップ２は、「デザインの方向性を決める」です。
コンセプトが決まったら、実際に作成したいデザインイメージを見つけていきましょう。
ギャラリーサイトを見ながら、デザインの方向性を決めるのが良いですね。
ステップ３：サイトマップを作る
【バナーのポートフォリオ作成】ステップ３は、「サイトマップを作る」です。
サイトマップというのは、「サイト全体のページ構成を地図のように一覧にしたもの」になります。
最初は、制作物も少ないはずなので、簡単なもので大丈夫です！
ステップ４：Photoshopでデザインを作成する
【バナーのポートフォリオ作成】ステップ４は、「Photoshopでデザインを作成する」です。
最初にデザインを考えるためには、紙に書き出すことがおすすめになります。
ある程度、紙に書き出すことができたら、以下の要素に注意しながらデザインを進めましょう！
- フォントや配色
- 余白の使い方
- メッセージや言葉
- 素材
この時必ず、「どうしてその色にしたか？」などの理由を言えるようにしておくことが重要になります。
ステップ５：HTMLとCSSでコーディングする
【バナーのポートフォリオ作成】ステップ５は、「HTMLとCSSでコーディングする」です。
ユーザーが閲覧する画面サイズによって、デザインやレイアウトを適切に表示しなくてはいけません。
そのため、パソコンとスマホの両方に対応したコーディングが必要になります。
ステップ６：ドメインを取得し、サーバーにアップする
【バナーのポートフォリオ作成】ステップ６は、「ドメインを取得し、サーバーにアップする」です。
サーバーにも多くの種類がありますが、国内シェアNO1の「エックスサーバー」を契約するのがおすすめになります。
エックスサーバーだと、何か困ったことがあっても検索で出てきますし、「WordPress簡単インストール」というサポートもあるので、初めて契約するあなたにはぴったりです。
以下のホームページから確認してみてください。
また、ドメインやサーバーの契約がよくわからないあなたは、こちらのサービスを使用するのがおすすめです。
ドメインの取得もサーバーの契約もしなくて良いので、かなり簡単ですね！
バナーのポートフォリオ作成が上手くいかない時の対処方法
バナーのポートフォリオ作成が上手くいかない時は、「1人で悩まず、スクールに通うなどして人を頼る」ことがおすすめです。
というのも、わからないことに何時間もかけて調べるくらいなら、知識ある人に聞いて一瞬で解決する方が楽だからです。
ちなみに私は、「シーライクス（SHElikes）」というWebスクールをかなりおすすめしています。
他のスクールより、圧倒的にサポート体制が整っているのに、料金が比較的安価だからです。
少しでも気になったあなたは、こちらの記事も読んでみてくださいね
まとめ
バナーのポートフォリオ作成を６ステップでご紹介しました。
素敵なポートフォリオを作成して、Webデザイナーとして活躍できるようにしていきましょう。
また、今回ご紹介した「シーライクス（SHElikes）」では「無料体験レッスン」を行なっています。
シーライクスの体験が無料でできますし、カウンセリングの時間であなたの悩んでいることを相談することも可能です。
「ポートフォリオの作成が上手くいかない」、「Webデザイナーとして活躍できるか不安」など、あなたの悩みを解消するためにも、ぜひ、参加してみてくださいね！
私が、シーライクスの無料体験に参加した記事はこちら
