わたしの失敗から学ぶPFの作り方

どーも、かじちゃんです。

早速ですが、わたしはPF制作をミスりました。
わたしの失敗を活かして皆さんは是非スムーズにPF制作を頑張ってください！
（最後にわたしのPFのリンクを貼っておきます。恥ずかし。）

このnoteは今からPFを作ろうと思ってる方に向けて書きました。

<< とにかく他の人のPFを見る >>

わかります。

面倒くさいですよね？？
でも、これがめちゃくちゃ大事だったりするんです。

とにかく人のPFを見ていくと、
「ダサイなー！」
「このPFだけはないわ」
「重い！」
など、自分の中で軽くイメージができていきます。
（悪口ばっか）

ちなみに、わたしは制作2週間目くらいで理想のPFに出会い、
レイアウトを組み直し、コードがグチャグチャになるという面倒なことになりました。

なるべくPF制作に取り掛かる前に、自分の理想のPFを見つけてください。
（もちろん１つじゃなくて良い）

<< ワイヤーフレームの作成はしっかり >>

要は下書きです。
これをしっかりやるか手を抜くかで変わってきます。

わたしは手を抜きました。

「なんとなく、イメージはできてるしー」と、
軽く紙に線を書いた程度の下書きで済ませました。
シンプルにダルかったんです。（おい、）

わたし的にオススメなのはPhotoshopでの作成です。
もちろんillustratorでもいいと思います。

これはPhotoshopで作ったもので、2時間かからなかったと思います。
今のPFを修正しようと思って作ったものなので実際のPFとは違います。
（要はまだ修正してません。サボってます。）

ワイヤーフレームなので、本当は本文も画像もいらないのですが
初心者は画像や本文をきちんと入れましょう。

これを作っておくことで、後々に機能を追加したくなった時やガラッと変えたくなった時にも便利です。
また、メンターの方などに質問するときにもスクショして送ればいいので自分のイメージを明確に伝えられます。

Photoshopを学ぶのに丸一日かかるかもしれません。
でも、その1日を飛ばすと数週間後に苦しみます。
1日くらいPhotoshopを真剣にやりましょう。

<< BEMをまず学べ >>

BEMってなに？？
ですよね。

わたしも最近まで知りませんでした。←

調べればわかるのですが要はCSSクラスの命名規則です。

わたしはこの二つで初めてちょっと理解できました。
（ちなみにKevin Powellはどのレッスンもわかりやすい！）

まぁ、なんでもいいので調べて理解して使ってください。

<div class="me-left">
<div class="about-me-content">
とか意味わからないクラスを使うと
意味わからなすぎて頭抱えたくなりますし、
何よりバカ丸出しで恥ずかしいです。

PFは後々まで残りますし、
テキトーに命名してあとで苦しむのは自分です。

理解するのに丸一日かかってもいいから、理解して使ってください。
ここを飛ばすとまじで後々しんどいです。

<< リミットを決める >>

PFに完成はないです。
日々学習することで出来ることも増えますし、
やりたいことも増えます。

でももうリミットを決めましょう。

わたしは4月中（制作期間1ヶ月）と決めたのにも関わらず
完成したのは5月半ばでした。

PFの実績内容ならまだしも、PFのページ自体にそんなに時間を使っていてもしょうがないです。

理想は制作期間を決めて（1ヶ月以内）
プラスでそのあと毎日寝る前に少しいじる。

そんなもんでいいと思います。

<< 最後に >>

わたしは自分のPFにそこそこ満足していたのですが
先日、理想のPFをまた見つけて大規模に手直しをしようとしたところ、

・途中でレイアウトを変えたからコードがめちゃくちゃ
・CSSのクラスが適当すぎて意味わからない

これよって苦しんでます。

これを読んでる、
今からPFを作ろうと思ってる方は是非わたしの失敗を活かしてください。

わたしのめちゃくちゃなPFはこちら↓
http://zoochan.net

((Twitterとnoteのフォロー、いいね、スキしてくださると嬉しい… ))

かじちゃん。