元制作会社のWebディレクターと協業して、LPをつくった話
どうも！ 昔、制作会社で底辺WebデザイナーをやっていたTazだよ！
今日は、元制作会社のWebディレクターのてらみんとお仕事をしたときのお話を書こうと思うよ。
最初に書くと、実はWebディレクターとの仕事は、いい思い出はない。どっちかというといいように使われて、ボロボロになったという苦い記憶しかなく、ボロボロになったから、制作会社を辞めたのかもしれない。
そんな思いの中、久しぶりにWebディレクターとお仕事をした。大変だったけど、お仕事は楽しかった。
Figmaでワイヤーつくってもらう
今回、atOnlineの新LPの作成依頼が舞い込んできた。atOnlineは、オンラインで企業の発信を支援するサービスである。
自分が他業務で忙しかったので、てらみんにワイヤーから作成をお願いし、かつ、てらみんが触ったことのないFigmaでワイヤーを作らせる暴挙に出た。
てらみんは頭が切れる。ちょっと教えただけで、Githubにプルリクをあげれるプロだ。プロなので、がっつりFigmaでワイヤーをつくってきた。さすがだった。参考資料なども用意してくれて、大変作りやすかったです。ただ、イメージがあれこれして、デザインFixが遅れちゃってすまねぇしか良いようがねえ。
久しぶりに制作畑だった人と仕事すると、制作会社時代思い出すｗ
Discordなどで壁打ちしながら修正
デザインのGOが思うより時間がかかった。修正が入ったときは、Discordなどで、音声をつなげながら、修正を確認。ときには真剣に、ディスカッションや作りつつ作業をすすめました。
リモートワーカーにとって、ビデオチャットの場はバーチャルオフィス
没になった、イラスト案など。地味に気に入っていましたｗ
てらみんは、手も動かせれる女子なので、手を動かしながら「あーでもない」「こーでもない」と進めました。こういうとき、Figmaいいね！
デザインは、イラストとか色々つくったけど、写真を使用したキービジュアルに落ち着きました。ワタシ的なメッセージは「いろんなスキルを持った広報のプロがサポートするよ！」です。
ちょっとした反省だが、もうすこしワイヤーのときにサービスについて理解することを深めればよかったなぁと反省している。理解を深めれば、時間かかることもなかったのではないかと考えている。
また、atonlineのロゴはLPリニューアル前に自分が作らせてもらったのだが、かわいい感がビジネス色を薄めている気もしている。機会があれば、修正させてもらおう。
実装、そして公開
紆余曲折あり、コーディングGOとなった。
命名規則は、FLOCSSベースに使用（ベースと書いたのは、自分的にはFLOCSSで書いてるつもりだけど、エンジニアに見られるとまだまだなので、ベースと書かせてください…）。1年前なんて、FLOCSS使えなかったのに、コードレビューをしてもらい、鍛えてもらっています。
まだまだだけど、ちょっとワカルようになってきました。
鯖はFirebaseを利用しています。しっかり触ったことがなかったのですが、今回がっつり触りました。Firebaseでベーシック認証かけることを学んだ。
実装チェックはてらみんのおかげで、しっかり見ることができました。最近意識し忘れてた、ページ速度もLighthouseを使ってほぼ対応済。阿部寛のサイトより点数が良いです。
ここまで追求してしまった…
ドメインでエンジニアさんに助けてもらいましたが、ほぼ自分で実装。無事になんとか公開できました！
感想
てらみんはすごい。てらみんと一緒にデザインを作ったと言っても過言はないです。Figmaで共にこねこねしたので間違いない。
まあ、できるディレクターとお仕事するのは楽しいなと感じました。またやりましょう（やっているけども）。
できるディレクターてらみんががっつり関わってる、atonlineは企業の発信をともに考え、 成果を目指して実行までを支援するサービスをやっております。
広報や発信やってくのが自信がない貴女、軽くご相談からいかがでしょうか。
そんなatonlineは、仲間を募集しているそうです。
われこそはという方お気軽にお声掛けください。
大学の課題全然しないで、サクナヒメに没頭してるクズことTazのツイッターはこちら。
サポートしていただいたお金で、娘たちのアンパンマングッズを購入させて頂きます。