Over40WebClub内の先輩フリーランスからまわしてもらった案件にとりくみました。お金の発生する案件にとりくんだのはこれが初めて。少し長くかかりましたが、なんとか、サイトの公開までいきました。独学や模写だけではわからないことをたくさん身につけることができましたので、ここで、どんなことを学べたのか、ふりかえりをしておきたいと思います。
今回の案件の概要
ページ構成
基本的に、HTML、CSSコーディングでデザインを再現して、WordPress化までを担当。プラグインを使用しての会員システム構築は先輩フリーランスが担当してくれました。そして、コーディング、構築ともに、先輩フリーランスが間でチェックをしてくれる感じです。
- TOPページ
- カスタム投稿３種類、それぞれにアーカイブ、詳細テンプレート
- お問い合わせページ
- アバウトページ
- 利用規約ページ
機能
２つのカスタム投稿では、カスタムフィールド使用。１つはブログ風の投稿でオリジナルデザイン＋カスタムブロックでめあてのデザインを再現できるようにしました。CSS部分は基本的に私が担当したので、会員システムによって付随する会員ページと非会員ページの出し分けなどもありました。会員用コンテンツの上にオーバーレイ＋誘導のナビゲーションつけるという感じです。
「やるぞ」と決断するまで
コミュニティ内でにゆさんから提案があって、ちょうど案件をやってみたいと思っていた私は手を上げました。それまで、WordPressはテーマでの構築しかやっていなかったので、本を見たり、ネットの記事を調べたりして、「できそう」と確認をしました。
これまで、GatsbyJSにHTMLのテンプレートを入れて、構築するというのをやっていたので、基本的にはこれと同じ感じだったのが、決断の決め手でした。JavaScriptとPHP（WPテンプレートタグ）のちがいだったので、ググりつつ、そして何より先輩フリーランスのサポートを受けながらできるので、踏み出すことができました。
やってみると、いろいろなところで、先輩フリーランスにご迷惑をおかけいたしました。自分で「迷惑をかけるだろうな」と思っていた以上にです。しかし、踏み出した以上は、自分の恥がどうとかではなく、やりきるしかないと思い定めて突き進んでなんとか今があるという感じです。
仕事の基本的な流れ
プロダクトを誰かに提供するという仕事をしたことがない？と思っています。最初の方の仕事の仕上がりはかなりずさんだったと思います。（今もぜんぜんかも😅）
コーディング → デベロッパーツールでの各デバイス幅での表示確認 → 間の幅での表示確認 → 実機での表示確認 → 本番（今回はにゆさんに見てもらう）サーバーへのアップロードして表示確認。
最低限のフローとしてこんな感じでやっているということを知りました。
何をするにも、いろいろとっちらかってしまう私にとっては、段取りを組んで、それを忠実に守りつつ（もちろん臨機応変も必要）、やっていくのはかなり骨が折れました。今でも、そんなにきちんとできていませんし、「明日までに」ってなったりすると、雑に、いつの間にか工程飛ばしていたりもします。
そもそも、コーディング自体の進め方も、結構ぐちゃぐちゃなので、ここも意識したいです。Gitは使っていたものの、コミットの粒度とか、ブランチ切るルールとかとてもぐちゃぐちゃです。個人で練習したり、趣味でやる分にはいいのだろうけど、このあたりもいい感じでできるようになりたいな。
案件やるごとに、少しずつ積み上げて、自分にしみこませないといけないなと思います。次の案件では、もう少しいい感じで、１人だけど、チームでやっているようなつもりでやろうと思います。
オリジナルデザインでのWordPress
それまで、テーマを使ってこのブログを書いたりはしていたものの、フルスクラッチで構築するのは初めてでした。
「やります」と決めてからデザインの到着まで時間があったので、その間に、クライアントさんの別サイトを参考に、ローカルにサンプルサイトを作って、使いそうな機能をいろいろ実装して見ました。ネットの情報だけでは、やはり不安だったので、書籍を購入しました。
これはあとからかなり役に立ちました。ここで組んだコードをそのまま使うことも多かったです。その際には、先輩フリーランスが「次はこれやってみて」など、必要な機能をいろいろ教えてくれたことも大きかったです。
今は、あるところで教えてもらったプラグイン「Paste」にWordPress関連のフォルダを作成し、ループのコードやヘッダー・フッターの呼び出しのコードを保存しています。WordPressやっていくなら、こういうパターンを理解して、どれだけサクッと呼び出せる環境をつくっておくかで、仕事の質とスピードが変わってきそうです。
デザインを忠実に再現することとよしなにすること
「よしなに」ってこんなに難しいんだ！というのが、実感です。デザインには１２８０px幅と３７５px幅のがあって、間のデザインはよしなにってしようとするのですが、ここにも本当にいろいろな知見がつまっていると感じました。
こういうことって、学習段階ではややこしいので省かれているのだろうか。学習できるようなリソースもあるんだろうなとおもいますが、やはり、案件＝プレッシャーの中でやることで大きく成長できる感じがしました。
あとはデザインで余白の規則性がないところや並びがちょっとずれているところなどもあったりします。これは意図的なのか、それとも、作業の過程でちょっとずれてしまったのか、判断がつかないことがあります。こういうときは、きちんとデザイナーさんとコミュニケーションをとることが大事なのだということを学びました。今回は、間に先輩フリーランスが入ってくれていたので、「それはミスでしょう」とか「それは意図的」など先輩の経験でわかること＝業界では当たり前なことはそこでストップしてくれたのもありがたいことでした。
WordPress案件ではマニュアル作成も
私自身、初めてWordPressに触れたときは、けっこう複雑だなあと思っていました。それまでもライブドアとかFC2とかブログサービスは使ったことがあったのですが、それに比べるとできることが格段に多くて、操作も複雑でした。特にカスタムフィールドを実装すると、実装者にしかわかりにくいところがでてきます。
管理画面での編集と出来上がりのイメージを対比して、作業しやすいよう、また、全体的の中でのどういう作業かを確認できるように、意識して作成しました。
とても丁寧につくっているとほめていただきました！自己評価としては雑なところもあったのですが、素直に喜ぼうと思います。２０年くらい前、子ども用にパワーポイントで社会のスライドを作るマニュアルを作ったことがあったので、そういうことが活きているのかなと思いました。
IE対応
すでに多くのところで必要はないし、これからどんどん必要なくなるかもしれませんが、今回の案件では対応することになったそうです。ここでも、ネットの知見がとても役立ちました。例えば、
height:autolにはみmin-width:1px;をセットにしないと、autoが発動しない。
とか。はじめに、発見した人は、IEがCSSをどう解析しているのかを調べて、その上で、この対応を見つけているのだろうなと想像しました。それとも、IEの公式からでているのだろうか？いずれにしても、ググればわかるという環境はほんとにありがたいです。
まとめ
表示については、先輩フリーランスの指摘、ディレクターさんの指摘のおかげで、なんとかできているという感じです。自分ひとりで品質を保つというところまでは正直まだまだです。また、ぼくの提供できる品質ももっともっとレベルを上げていかないといかんなと思っています。
今はまだ副業ですが、いずれ本業にします。それまでにしっかりとレベルを上げていきます。とても楽しみです。
コメント