ポートフォリオの作成について

登録は簡単!. 無料です
または 登録 あなたのEメールアドレスで登録
ポートフォリオの作成について により Mind Map: ポートフォリオの作成について

1. ➀制作会社様の反応

1.1. 営業メールや面談での反応

1.1.1. 営業文

1.1.1.1. ポートフォリオを褒めていただける (別途、資料を参考)

1.1.1.1.1. なので、現状で実績があっても営業文に ポートフォリオを載せている

1.1.2. 面談

1.1.2.1. ポートフォリオを見せた際に褒めていただける

1.1.2.1.1. 実際の声

1.1.2.2. 実務で作成した作品よりもポートフォリオの方がレベルが高い

2. ➁オリジナルポートフォリオの作り方

2.1. ➀まずはテーマを決める

2.1.1. ・自分の好きなもの

2.1.1.1. 趣味など

2.1.2. ・自分の働いている業界

2.1.3. ・CodeUps受講生の人が作ったオリジナルサイトを見てみる

2.1.3.1. 参考程度

2.1.4. なるべく、ダイビングとは関係無いサイトを作れると差別化になる

2.2. ➁テーマを決めたら、どこに何を配置するか決める (以下、自分が作成した猫カフェサイトを基に説明させていただきます。) https://wp469568.wpx.jp/wp-portfolio/ ユーザー名、pass共に「jun_0528」

2.2.1. 各セクションのイメージを作る

2.2.1.1. テキスト、画像探しは後程でも大丈夫です!

2.2.1.2. 例

2.2.1.2.1. ・Campaginには猫の種類を配置

2.2.1.2.2. ・Aboutに記載するテキストはこれにする

2.2.1.2.3. ・Priceに入れるものはこれにしよう

2.2.1.2.4. ・そうすると下層ページは… など

2.2.1.3. これを考えておかないと、あとで結構面倒…

2.2.1.3.1. なので、最初にメモなどでも良いので構成を考えておくといいです!

2.2.1.3.2. WordPress化で使う機能の部分は残しておきましょう

2.2.2. 参考はとして、既存にある他のサイトを見てみる

2.2.2.1. 自分の場合は猫カフェなので、 「猫カフェ サイト」などで色々なサイトを見てみました

2.2.2.1.1. パクリはだめです (あくまで参考程度に)

2.3. ➂配色を決める

2.3.1. https://webdesign-trends.net/entry/15213

2.4. ④ロゴ、あしらい画像を作る

2.4.1. ロゴ

2.4.1.1. Canva

2.4.2. あしらい画像

2.4.2.1. https://icooon-mono.com/

2.5. ⑤画像の変更

2.5.1. https://liginc.co.jp/505025

2.5.1.1. おすすめ

2.5.1.1.1. 「写真AC」

2.5.1.1.2. 「Pixabay」

2.5.2. 見落としがちなのが、ボタンなどに使われている矢印の画像の色

2.5.2.1. figmaで変更

2.6. ⑥テキストの変更

2.6.1. ChatGPTの活用

2.6.1.1. 英語の部分は、なんか雰囲気が良い感じに (横幅などを考えながら)

2.6.1.1.1. 翻訳機能など使って上手く作る

2.6.2. Blog部分などの中身は、他のサイトのBlogを参考にしてみる

2.6.2.1. 「猫のイベント」

2.6.2.2. 「新規店舗オープン」

2.6.2.3. 「TVの取材」

2.6.3. 注意点

2.6.3.1. ChatGPTで出てきた文章をそのまま使うのではなく、 自分で良い形になるように変更する

2.6.3.2. 背景画像と文字色が被らないように (特に白い文字色だと背景画像で文字が見えにくくなる)

2.6.3.2.1. 文字色を変える

2.6.3.2.2. 背景画像を変える

2.6.3.2.3. 文字の位置を変える

2.7. ⑦文字関係の変更

2.7.1. テーマによって変更する

2.7.1.1. 文字フォント

2.7.1.1.1. ちなみに自分は猫カフェなので、可愛い感じのフォントにしました

2.7.1.2. 文字サイズ

2.7.1.3. line-height

2.8. ⑧必要あればアニメーションの追加

2.8.1. アニメーションも出来る!とアピールしたい場合は付ける

2.8.2. 無くても大丈夫ですが、理由を話せるようにしておくといいかもです

2.8.2.1. 自分は猫カフェというイメージから、必要最低限以外は付けませんでした

2.9. ⑨マルチデバイスでの確認

2.9.1. 表示崩れなどしていないか

2.10. ⑩他の人に見てもらう

2.11. ※制作期間

3. ➂実務での活用

3.1. 実務で活用できるか?

3.1.1. 実務の方が簡単です!

3.1.1.1. もちろん、コードの使い回しも出来ますが、コードを理解しておくことが重要です。

3.1.1.1.1. 全部丸っと使い回しが出来る部分は少ない

3.1.1.1.2. 部分的に使い回せることが多いのですが、コードの理解をしていないと時間が掛かります。

3.1.1.1.3. ひでかずさんのセミナーの内容を参考に

3.2. 本当に案件が獲得できるのか?

3.2.1. 獲得できます! →自分はこのポートフォリオのみで案件を獲得出来ました!

3.2.1.1. 下層ページ1ページ追加 ↓ 下層ページ7ページ追加 ↓ WordPress14ページ作成 この順番で少しづつ依頼されるページ数が増えました

3.2.1.1.1. ただ、実績があっても営業文なども当然必要になります。

3.3. 自信を持って営業ができるのか?

3.3.1. 出来ます!

3.3.1.1. 上記にも書きましたが、CodeUpsの課題はレベルが高いです! なので、完走していれば自信を持って営業できます!

3.3.1.1.1. ただ、せっかく作品が良くても面談で自信が無かったり、 自分の作ったものの説明が出来なかったら意味がありません

4. ④最後に

4.1. 時間があれば、オリジナルポートフォリオとして、再度WordPress化をしてみる

5. ⑤補足 (ポートフォリオとは関係無いです)

5.1. 実務での注意点 (自分は相談されました…)

5.1.1. 既存サイトにページを追加するとき

5.1.1.1. CodeUpsの環境ファイルをそのまま使うと、 既存サイトに影響が出るかもしれない

5.1.1.1.1. 例