コーディング超苦手なデザイナーが実装を任されたのでやったことをまとめていく
ごきげんよ〜〜〜〜〜〜〜〜う！！！！！学生時代にコーディングを3回やって3回ページが大暴走した女こと『コーディング超苦手星人（うつくしひろし）』です。
今回はそんなコーディング超ryな私が実装業務を行なったのでやったことをまとめていきます。よろしくおねがいします。
この記事の目次
いかに苦痛を和らげていくかの戦いが始まる
ボックス機能を活用
実装苦手な私にとって実装という作業は正直苦痛でした。CSS入力しても反映されないしpaddingとmarginはどっちがどっちかわからなくなる時があるし・・・うまく作れたとしてもそれを何かの手違いでぶち壊したくないから極力コードは書きたくない・・と思っていました。
そんな中、救世主が現れました。今回WordpressのCocoonというテーマを使用したのですが、ボックスぶちこんで編集ができるではありませんか！便利〜〜！！！
グループ機能もあることに気がつく
しかもグループ化までできるの？！天才やないか！！
かつ右の画面からグループの並び方も変えられちゃうの？！学生時代の苦しみを返して！？？！？！と思いました。
ド便利すぎてもうこれだけでやっていけるわ私・・・と思っていました。
あの日までは。
編集画面と実際の画面でレイアウトの崩れが起き始める
絶望
嘘でしょ、と。声が漏れました。サンプルで表現するとこんな感じでした。
ブロックごとの空間に設定したpx以上の幅が空き、さらには見出しの役割を持たせたテキストが謎に改行され、高さがそれぞれ合わないという事象が起きていました。
さらに、Macの画面で改行が起きていないと思っていてもWindowsで見ると崩れていたり、Windowsで見るとギザギザしているように見えてしまうフォントがあったり(私はM PLUS 1でそれが起きました)と、いろいろな問題が浮き彫りになってきました・・・
絶望の淵に立たされたわたくし、確信する。
ここで私は悟りました。
あ、やっぱこれコーディングしないとだめだわ。(絶望)と。
そうは言っても怖いもんは怖い
なんで怖いか
ぶち壊す予感しかないからです。いままで作っても何かの拍子に(何が原因かはわからないまま)壊れ、動かなくなるサイトたちを前に何もすることができず泣き崩れていました。
「何にもしてないのに壊れた」じゃないんです「なんかやらかしたから壊れたんだろうけどその理由がわからない」「エラー文が読めない」なんです。
私は某少年のように積み上げたものをぶっ壊す女でした。
それでも向き合わなければ始まらない
学生時代コーディングをしたことがあったのでうっすらとした知識はありました。
まさか学生時代にもらったコーディング用の資料をひっぱり出されるなんて資料側も思っていなかったでしょう。ごめんね、急にびっくりしちゃったね。
なんとか資料を読んでpadding、margin、<div>、<body>なそれぞれが持つ言葉の意味を頭に入れ、パソコンへ向き直りました。
コーディング、やってやろうじゃないの・・！
と思ったのも束の間
壊れたーーーーーー！！！！！動かないーーーーー！！！！！やりたいことと違う動きしないでーーーーー！！！！！！と私の叫びが近所に響き渡りました。近所迷惑すぎるかも。
あれだけ資料見たのに！なんでよ！！ぷりぷりしながら調べつつ対策していたのですが埒が開かず・・・
一緒にデザインをしていた先輩に「コーディングって何参考にされていますか？」と聞いてみたところ、「chatGPTですよ〜」と返ってきて稲妻が落ちました。
chat・・・GPT・・・・？？そ・・その手があったか・・・・と
GPTくん、仲良くしようや。
chatGPT、Twitterでキャラの口調を真似させて育てたり、しりとりして遊んだりをしているのしかみたことがなく、「面白いAIですねえ」という印象だったのですが、コーディングも一緒に考えてくれるのだと知ったので少し触ってみました。
サイトに吹き出しを挿入したくてGPTくんに聞いてみたらちゃんと教えてくれました。
他にもうまくいかない時は「このコードだとうまく作動しませんでした。修正してください。」と言うときちんと修正したものを提案してくれます。
大体がうまくいかない（私の命令文が悪いことが多いですが・・）ので都度サイトで検索しながらやっていました。
GPTくんと少しでも仲良くなった感じが欲しくてフランクな言葉を使うんですがフラれた感が半端ないですね・・・・・・泣いちゃう
また、このスピーカーアイコンを押すと読み上げてくれるのですが、いい声の海外ニキが英語訛りで読んでくれるのがすっごい好きで意味もなくずっと読み上げさせたりしていました。（仕事を、しましょう。）
もうどうにもならん・・せや！
GPTにきいてもうまくいかない、ネットで調べても解決方法がわからない・・もうどうすれば・・・！となった時、エンジニアの方が手を差し伸べてくださいました・・・
その時はカルーセル（事例とかがスライドで表示できるもの。情シスナビのトップにある新着投稿などが表示されているあれです。）がどうしても実装できなくて、カードのデザインまでは終わっているのに・・！と歯軋りしていたのでエンジニアの方に泣きついて助けていただきました。
エンジニアの方々にプラグインなどを活用していただき無事解決し、とても助かりました・・！
しかし何もかも助けていただくのはエンジニアの方々の時間をさらに奪ってしまうことになるし、私自身も成長できないと感じたので極力自分で解決することを心がけていました。
（でも結構助けていただいてしまいました・・大変お世話になりました・・）
この試行錯誤の結果出来上がったのがこちらのサイトです。
https://designrescue.humain.co.jp/
おわりに
今回の経験を通じて、私はコーディングに対する恐怖を少しずつ克服しつつあるのかもなと感じました。
特に、初めての実装に挑戦する際の不安や失敗に対する恐れは計り知れないもので、「できないかもしれない。納期に間に合わなかったらどうしよう」という不安が押し寄せていました。
しかし、WordPressの様々な機能、chatGPTや実装方法を載せてくださっているサイト、そしてエンジニアの方々の助けを借りながら少しずつ進歩している自分を感じ、「成長とはこういうことか・・」と思っていました。
それでも完璧な解決策を見つけるのは簡単ではなく、何度も失敗を繰り返しながら壊れてしまったレイアウトや機能を修正するという「粘り強くトライする」という筋肉が鍛えられた気がします。
また、失敗から学ぶことの大切さをめちゃめちゃ学べたなと思っているので、今後も恐れずに色々なことに挑戦して自分の力（他人を巻き込む力も含め）で解決策を見つけ出す努力を続けたいと思います。
この経験を通じて得た知識やスキルを武器に、これからもいろいろなことにチャレンジしていきたいです！
ここまで読んでいただきありがとうございました！またいつかお会いしましょう。
うつくしひろし
関連記事
カテゴリー：
