BETA

プログラミングスクール4ヶ月目でWordPress初案件をこなした経験談

投稿日:2019-05-05
最終更新:2019-05-05
※この記事は外部サイト(https://ktg6.com/try-first-practicalprojects)からのクロス投稿です

こんにちは。kyoheiです!

QUEL CODEというプログラミングスクールで、週平均20時間以上はプログラミングに打ち込んでいる最中です。

↓ QUEL CODEを詳しく知りたい人はこちらの記事をみて下さい(アフィは一切ありません!)
https://ktg6.com/quelcode-experience-information

HTML&CSS→PHP基礎→WordPress とカリキュラムをこなしたタイミングで、知人のフリーランスの方からお話を頂きます。

とある建築会社さんのWebサイト制作案件をWordPressでやるんだけど、どうですか? と。

カリキュラムをこなして実践経験を積みたかった僕としてはまさにベストタイミング!即答でやります! と勢いよく答えたまでは良かったのですが、そこには試練がたくさんありまして..

結論を言うと、言われた事はこなせて報酬も貰えたのですが、案件自体は消滅してしまいます.. ..

コーポレートサイトの完成品はお蔵入りとなってしまいましたが、、その分貴重な経験・知見を得る事ができました。今回は、僕が身をもって学んだ事を、僕と同じエンジニアやWebサイト製作者を目指している人に向けてお伝えします。

どうぞご覧下さい!

プログラミングスクール4ヶ月目の僕の状態

以下、僕のスペックです ↓

QUEL CODEの前に経験した事

・WordPressでブログ制作(1年弱)
・WordPressでブログ運用(1年弱)
・WordPressの参考書3~4冊読んで学習・実践

QUEL CODEで取り組んだ事

・HTML/CSS学習 → サイト模写2つこなした
・よくわかるPHPの教科書を3週
・本格ビジネスサイトを作りながら学ぶ WordPressの教科書を2週

僕の置かれていた環境

・正社員の会社員でフルタイム労働
・ほぼ定時上がり+土日祝日+有給1日
・定時後〜出勤まで+休日が制作時間

クライアントと自分の相関図

以下の図のようになっています。

制作案件の要件としては、

・渡されたaiファイルと同じデザインにする

  →見た目通りなので、細かいpx指定などは無し(曖昧)

・お問い合わせフォーム含めたLP風ページを7ページほど

・制作英語フォントと日本語フォントを指定通りにする

・SEOは考慮しなくてOK

といった事になります。

特徴はLPのような感じで、1ページが縦に長い。あるページは3案あって、共通部分はあるが内容が微妙に異なるといった内容でした。

本件はレスポンシブ対応も含まれていたのですが、これが後々爆弾として僕が困る事になるとは、お仕事を受けた当時考えもしませんでしたね・・・

WordPress制作案件の時系図日時やった事

3/6 コーポレートサイトのコーディング案件依頼を貰う
3/9 サイトのデザイン資料を確認
3/13 分かる部分から着手
3/16 ページビルダープラグイン(Elementor)にチャレンジ
3/19 Elementorの利用をやめてCSSでチャレンジ
4/7 PC表示完成 ※制作会社に提出して待機
4/10 レスポンシブ対応開始 新規案を確認
4/17 案件クローズ

やった事と報酬などの決定事項

やった事は

・WordPressを使ってもらった画像を元に再現
・コーディングテーマ、プラグインの選定
・元の画像素材がサイズバラバラだったのでスクショ→サイズ調整
・フリーランスの知人を通じて不明点の質疑応答

といったところです。決定事項は、

・報酬:10万円(固定)
・納期:4月中旬(この時点でははっきりしていない)

でした。納期については、曖昧だったのがあとで響いてきます..

WordPress制作案件を実践して困った事

ここからは、実際に取り組んで困った事を説明していきます。

WordPressでLP風のページを作る方法が分からない・・・

自分のブログでデザインのカスタマイズ、記事作成は経験していましたが、、画像が散らばっているLP風のページは作った事がありません。配置さえなんとかできれば簡単かな〜と思い、ググればすぐ分かるでしょw ぐらいの軽い気持ちで引き受けていました。

こんな感じのページです ↓ (こちらはボツ案です)

画像の配置だけならCSSより手っ取り早い方法があるかと考えてみます。検索して調べてみるとページビルダープラグインの存在を知り、興味本位で試してみました。

その中で良さげなElementerというプラグインをチョイス ↓[ys_blog_card url="https://ja.wordpress.org/plugins/elementor/"]

当たり前ですが、操作を覚えるのに少し時間がかかります..そしてサイトが重くなる。後々の管理を考えると、プラグインの操作を分かる人がいないと大変...

他にもスクールの講師やWordPressのコミュニティーの方に聞いてみたのですが、皆様あまりオススメしていません。考えた末に今回は使うのをやめ、CSSでの制作に切り替えました。ここで1週間近く溶かしました.. 締め切りがあるのに時間ロスは手痛かったです・・・

要件定義が曖昧

画像の通りにすれば、とりあえずOK!とは言われても、元の素材画像の大きさもバラバラ、フォントのサイズも不明。なので、微調整がかなり面倒でした。サイズを変更しては、体裁を整える。画像の配置や大きさを変更しては、体裁を整える。

一見簡単そうにみえますが、この繰り返しは地味に時間がかかります..

指定フォントについても少し時間ロスしました。

今回のフォント指定は、日本語:A-OTF リュウミン Pro L-KL英語:Didot Regularという指定のみの説明がありましたが、このフォントをどうやって利用すればいいのか。とりあえずググりまくってみて、それらしきものがみつかるが、導入方法が分かりません...

仕方ないので飛ばす。後で確認したら、 Adobe Fonts で利用するようで、自力で調べて使えるものではないのです。探すのに数時間は消費してしまい、導入するにも英語と日本語で分けるという作業が、これまた地味に手間がかかりましたね。。

レスポンシブ対応が大変

レスポンシブ対応については、特にお話がなかったのでこちらから3/23ごろに確認。当方全くの未経験だったので、始める前は不安がありました。。

ひとまずPC表示を縮小した画面を作り、スマホでも表示させるという対応で決定。方法を調べ、やってみたら実装自体は何とかなりそうです。

ですが、、最初からスマホ表示を見越した設計をしていなかったので、CSSがかなりグチャグチャになりました。具体的にやった作業は、PC表示の後にCSSでメディアクエリを用いて作成し、HTMLは専用のクラスなどを作って帳尻を合わせるという事をしました。

おかげでCSSが1,800行にまで及んでしまいましたね・・さらに同じような画像やページが多いので、時間短縮の為にCSSの使い回しを多用したのですが、これがアダとなります。1つの案に位置を合わせると他の案で配置がおかしくなります・・・ 修正がかなり大変でした。

WordPress案件をこなして学んだこと

ここからは、実践を通じて学んだ事・感じた事を書いていきます。

記事ページにHTML、小テーマにstyle.cssの活用が基本

※現時点の標準エディターはグーテンベルグですが、今回はクラシックエディターで対応しています。今回の案件では、よしあかつきさんが制作されたテーマ yStandardを利用してみました。[ys_blog_card url="https://wp-ystandard.com/"]

LP風のページを作る場合、固定ページでHTMLを使うという事は分かるのですが、CSSはどうするか考えていませんでした。カスタマイザーの追記CSSに書けば反映されるのが分かっているので、ひたすらこちらを使っていましたが、当たり前に使いづらいです...

ではどうするか?

ここでは詳しい説明は省きますが、

1.子テーマのfunctions.phpにwp_enqueue_styleを使ったコードを記述
2.子テーマのstyle.cssにCSSを書いていく

といった方法をとります。

※親テーマのstyle.cssに書かないのはテーマの更新で消えてしまうからです。これでエディターを使って管理できるので、作業効率は大分改善しました。

というか、なんで最初からこうしなかったのか自分・・・

CSSの使い回しは要注意

なるべくCSSを冗長化せずにスッキリ綺麗に書きたい。僕含めて、エンジニアを目指す駆け出し初心者はきっとこう考えるでしょう。

しかし、今回のような採用されるかどうか分からない案がたくさんある時は、素直にID・クラス名を変えて長くなっても使い回しを避けた方が良かったかと思います。修正作業の方がよほど手間でしたので..

※あくまで僕と相談させてもらった方々の意見ですそもそも設計からしっかり考えるべきですが、そのあたりは経験値と知識をもっと積む必要があるかと感じます。

要件に関するコミュニケーションが不足していた

今回の案件は、ほぼリモート(slack)でのやり取りでした。渡された資料通りにサイトを制作し、分からないところは都度確認するという流れです。

遠慮して聞くべき事をあまり突っ込んで確認できていなかったのがダメでしたね。

はっきりした納期の確認レスポンシブ対応の有無、ワイヤーフレームについてデザイン完成形についてこのあたりがはっきりしていないのは本当にダメです...

所用時間が思いの外かかってしまった

調査時間や連絡時間、諸々合わせて大体120時間前後はかかってしまいました。1日平均で考えると、4時間以上は取り掛かった事になります。

平日働きながらだと、スマホ弄りとかダラダラした時間をなるべく減らして3時間取り掛かれば良い方です。それ以上だと確実に睡眠時間を削る事になりますね。

やり方がよく分からない序盤は本当にメンタル面で辛かったです・・

工数から見積もり料金を考えるべき

今回の案件は報酬10万固定です。何も知らないで仕事を受けた当初は、簡単であっさりできそう!ともすれば美味しい案件だ〜♪と思っていましたが、色々な方にお話を伺うとちょっと微妙そうな感じです..

WordPressを用いてHTML/CSSを書き画像や文字の位置を合わせられたら良いので、難しい実装技術は特にないのです。手を動かして分からない所が調べられたら、時間さえかければ多くの人はこなせるかと。

しかしながら、制作にかかる工数追加で制作が決まった際の工数短納期で仕上げなくてはならなくなった時果たして、かけた時間対価に見合った報酬が貰えているのか?

僕の実力不足もありますが、案件をこなすのに必要な時間・労力をよく考える必要があると学びました。

結局案件が失注になってしまった件

1番苦労したのは、サイトの完成デザインが定まっておらず、デザインカンプがコロコロ変わるという事態になってしまった件です。

原因としては、Web分からない元請けのデザイン会社さんのデザイナーが、ディレクション全然上手くできていなかった。納期もレスポンシブの定義もはっきり決まっていないのに、PC表示だけ完成させたサイトを提出して、1週間後に納期確定で別デザインのページをレスポンシブ込みで作ってくれと依頼が降ってきた時は目眩がしましたよ..

さらに作ったものが採用になるとも限らない。

それは無茶やろ・・・という事でご依頼頂いたフリーランスの方に、「デザインを確定してくれない事にはこちらも作業できませんよ・・・」

と僕に代わって制作会社と全力交渉していただきました。

その結果、直近の納品はデザインは画像ベタ貼りで乗り切って、納期を伸ばす事に成功。しかし、クライアントが痺れを切らして結局 失 注 してしまったそうです。。

こうして僕が着手した案件はもやっとしたままクローズしました。

実戦が1番成長するという話

長々と書きましたが、本件で僕が感じた事をまとめると、

・フルタイムで働きながら案件をこなすのは中々しんどい
・要件定義のはっきりしていない案件は地雷
・分からない所は相談できる体制を作っておく
・短納期は極力避ける確実にこなす自信なければ時間の余裕がある時しかやらない方が良い
・強制力があり確実に力がつく

という事です。

正直しんどかったですが、かけがえのない経験値と自力で稼いだお金が得られました!(実際にやってみると、プログラミング学んで短期間で月50万稼ぐとかいうPRがいかに馬鹿げているか実感します..)

完全にスクールのカリキュラムから外れているのですが、QUELCODEではコーディングからビジネス的な考え方までバックアップしていただけました。

本件のテーマ作者様、WordPressコミュニティーの方々もたくさん相談に乗ってアドバイスを下さいました。この場を借りてお礼申し上げます。ありがとうございました!

案件次第ではありますが、プロのエンジニアを目指す人はただ勉強して過ごすだけではなく、こうした実戦経験をオススメします!ただし納期にだけは余裕を持って請け負いましょう。ガチで 寝れなくなります..

Let's TRY!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

エンジニア挑戦中の男が綴る備忘録

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!