前回、ポートフォリオ制作で詰んだ理由・原因について書きました。
そして本記事では、ポートフォリオを作り直すプラン・学び直す内容について紹介します。
結論、以下のとおりです。
【ポートフォリオを作り直すプラン】
- 2月13日～3月31日：ポートフォリオを作る（7週間）
- 4月1日～5月31日：卒業制作を作る（2ヶ月）
【学び直す内容】
- 設計力を高める（HTML・CSS設計）
- 基本的なWordPressテーマ化の流れを身につける
- 共通パーツを徹底的に洗い出す練習
この記事がWeb制作でスキル不足を感じている方、ポートフォリオ作りに向き合っている方のお役に立てたら嬉しいです。
【理由】なぜ私がポートフォリオを作り直すと決めたのか
私がポートフォリオを作り直すと決めた理由は、以下の2つです。
- 今のままではポートフォリオとして使っていくには運用がしにくい
- 今の技術では案件が取れたときに喜べない
コーディング前の設計の甘さ、そして技術の未熟さを痛感し、作り直しを決めました。
詳しくは前回の記事で解説しています。
【挫折】私がWeb制作のポートフォリオを作り直すと決めた理由
【今後やること】学び直しながらWordPressでポートフォリオを作る
今後のプランとしては、以下のように決めました。
- 学び直し（インプット）をしながらゆっくりポートフォリオを作る
- その後、卒業制作を作ってスクール卒業
この記事を書いているのは2月13日。
具体的なスケジュールで言うと、
- 2月13日～3月31日：ポートフォリオを作る（7週間）
- 4月1日～5月31日：卒業制作を作る（2ヶ月）
ぐらいの感じがいいかな…と思っています。もちろん変更する可能性もあります。
「インプットしながらポートフォリオを作る」というやり方に決めた理由は、インプットだけでもアウトプットだけでもバランスが悪いと思ったから。
「インプットだけ」だと、その知識が実際どう役立つのかイメージできず勉強が嫌になるし、「アウトプットだけ」も基礎力が足りない自分には挫折の原因になると思いました。
ポートフォリオを作り直すと決めた人向けの今後のプラン
では、ポートフォリオを作り直す人向けのプランを紹介します。
簡単に言うと、「1回ポートフォリオを作ってみたからこそ足りないと感じたスキル」を学びながらポートフォリオを作り直すというイメージです。
前提として、足りないと思ったのは以下のスキル。
- HTML：命名規則BEMでのBlockの分け方。ここでミスるとその後のクラス名全部ダメになる。
- CSS：CSS設計。マルチクラスの使い方、共通パーツの洗い出し
- PHP：基本的なWordPress化の流れ。必要なテンプレートファイルやテンプレートタグ
1回ポートフォリオを作ったことで、自分の弱点が分かったのは大きな収穫。
そして上記のスキルを身につけるために、下記の学習をしながらポートフォリオ制作をしようと考えました。
- 設計力を高める（HTML・CSS設計）
- 基本的なWordPressテーマ化の流れを身につける
- 共通パーツを徹底的に洗い出す練習
順番に、解説していきます。
今後やること①：設計力を高める（HTML・CSS設計）
まず、設計力を高めること。
私のポートフォリオは、コンポーネントを独立させて作るという意識が薄いという問題点がありました。
- 親要素がないと成立しないセクションタイトル（親をrelativeにしてた…）
- 他のページで使い回せないパンくずリスト（クラス名が汎用的でない…）
- トップページを作ってから下層ページを作ってた（下層ページもパーツみたいなものだから下層ページを先に作った方がよかった…）
など、HTMLの構造がちょっと変わっただけで崩壊…みたいな作り方をしていました。
そもそも、デザイナーさんがカンプに共通パーツをまとめてくれているのだから、それを先に作ってからセクションを組み立てる、というやり方でもよかったな…と反省。
なので、設計力を高めるためにざっくり以下のこと学びながらポートフォリオを作って行きます。
【設計力向上のために学び直すこと】
- 手戻りがないような共通パーツの洗い出し方
- カンプ上でパーツを並べてバリエーションを洗い出す
- デザイナーさんがまとめてくれてるパーツリスト活用
- 再利用しやすいコンポーネントの作り方
- コンポーネントを作ってからセクションを組み立てる
- 親要素に依存しない、独立したコンポーネントになるように！
- 下層ページを先に作って、トップページはそれを組み立てる
- クラス名の付け方
- BEMの復習
- ボタン等パターンがあるコンポーネントは拡張しやすいクラス名に
- 1つのクラスへの依存度を考える
- 詳細度が高すぎないか考える
静的コーディングの設計が危ういと、動的コーディングの難易度が上がることを痛感。
まず基礎力を高めるために、設計力の向上が必要だと思いました！
今後やること②：基本的なWordPress化の流れを身につける
2つ目は、WordPress化の流れを身につけること。
私は静的コーディング後、「WordPress化するにはどうしたらいいんだ？」と制作の流れが見えず、必要以上に時間も手間もかかってしまったという問題がありました。
スクールのカリキュラムを見て復習するなどしながら、以下のWordPress化の流れを身につけたいと思います。
【基本的なWordPress化の流れ】
- テーマのフォルダを作る
- 静的HTMLをPHPファイルに分割する
- それぞれのPHPファイルにheader、footerを読み込む
- テンプレート階層に則って、ファイルを作る・書き換える
- WordPressのタグに書き換える（画像・ループ処理など）
- カスタム投稿タイプを作る
- テーマの反映・細かい調整
今後やること③：共通パーツを徹底的に洗い出す練習
3つ目は、共通パーツを洗い出す練習。
当たり前ですが、同じようなパーツに毎回別のクラス名をつけていると、後から再利用するのが難しいですよね。
実際私は、以下のような下層ページタイトル部分に、毎回別のクラス名をつけていました。
というより、下層ページの2ページ目に入ってから「あ、ここ共通パーツだったんだ…」と気付きました。しかし1ページの修正が面倒ですべて別にクラス名に…。
結局その後の制作に支障が出てしまい、「もっとちゃんと共通パーツを洗い出してからやればよかった！！」と後悔しました。
共通パーツのバリエーションを見つけるおすすめのやり方
以前、コーダーの知人に教わった共通パーツの比較方法があります。
それが、以下のようにデザインカンプ上でパーツを並べる方法です。
特に上記のようなボタンは、「同じように見えてこんなにバリエーションがあったのか…」と後から気付いてCSSの追加が面倒な時、ありますよね笑
この方法なら、視覚的に共通パーツのバリエーションを簡単に見つけることができます。
まとめ
本記事をまとめると、以下のとおりです。
- 学び直し（インプット）しながらゆっくりポートフォリオを作る
- 何をインプットするか？
- 足りないスキル（設計力、WordPress化の流れ、共通パーツ洗い出し）
- インプットとアウトプットを同時にやれば知識が実務に役立つと実感可能（かも）
作り直しなんてしないで1回完成させたほうが良いのでは？と焦る気持ちもありつつ、「できます！」と自信を持って貢献できる状態を目指したい。
作り直しに時間をかけるのは勇気が必要だけど、自分のためにも、お客さんのためにも、この遠回りに見えるやり方で頑張ろうと思います。
この記事が、ポートフォリオ作りに向き合っている方のお役に立てたらとても嬉しいです。