コーディング

こんにちは！ デザイナーのアロード（@arowd_info）です。 2025年6月14日（土）に大阪にて行われた「第4回 たのしいデザインレビュー」についてのレポートをお届けします。 目的と企画内容 Webサイト制作において、デザイナーとコーダーは最も近い存在でありながら、「このアニメーションは本当に実装できるのか」「レイヤーはどこまで整理すれば伝わるのか」といったデザイナー側の疑問や、「このデザインデータをどう解釈すれば良いのか」「どこまで実装の提案をして良いのか」というコーダー側の視点など、お互いの考えを深く知らないまま仕事を進めていることは多いのではないでしょうか。 そこで今回は、Webサイト制作の豊富なご経験を持つシバタヒロノリさん（@hilosiva）をゲストにお迎えし、デザイナーとコーダー間の円滑なコミュニケーションをテーマに、コーディングを見据えたデザインデータについての講義や質問タイムで構成しました。 また、「たのレビ」は、ものづくりに関わる方達の交流を深めることも目的としていますので、前回好評だったグループワーク形式を今回も採用し、積極的に話しかけるのが苦手な方も、話しやすい雰囲気の中でご参加いただけるよう配慮いたしました。 今回は以下のような方を対象者としています。 デザイナーとコーダー間の連携に悩んだことがある方 他の制作者の工夫や仕事術を知りたい方 制作物や仕事の進め方を相談したい方 関西でクリエイター仲間と楽しく交流したい方 開場 3回目までは東京で開催していたのですが、今回は初めての関西での開催。大阪（梅田）で貸し会議室をお借りしました。 準備が間に合わずご迷惑をおかけしましたが、前回好評だったアイコン缶バッジを参加者分用意して、運営で決めた座席へご案内しました。 ご挨拶・スタッフ紹介 28名（+スタッフ4名）の方にご参加いただきました。東京での開催ではなかったため、リピーターさんの参加が期待できず、人を集めることは難しいだろうな…と思っていたのですが、募集を開始してみたら、東は東京、西は広島からの参加があり、大勢の方にお集まりいただけました。 私は今回は講師ではなく、企画して進行する役割でした。事前の準備に力を注いでいたものの、それでも足りなかった部分があって悔しい思いもしました。 今回は主宰しているクリエイティブ制作チームBanafitのサポートがあったため、配信しているラジオ番組の方でも「たのレビ」についての想いや、なんのためにやっているのかなどを事前に伝えることができました。そちらでお話させていただいた内容を少しお伝えします。 なぜ「たのしいデザインレビュー」なの？ 私がイベントに込めた想い このイベントを始めたきっかけは、「デザインレビューって、なんだか怖い…」という声をよく耳にしたためでした 。自分の作ったものに意見を言われるのは、誰だって少し緊張しますよね。だから、「怖くない、楽しいレビューの場を作りたい！」「みんなで受ければ怖くない！」という想いでスタートしたんです 。 最初は参加者さんに制作物を持ってきてもらう形式でしたが、回を重ねるうちに、もっと大切なことがあるな…と感じるようになりました 。 イベントで学んだ具体的な知識は、時間が経つと忘れてしまうかもしれない。でも、「誰と出会って、何を話したか」という記憶や、そこで生まれた繋がりは、ずっと残り続けるんですよね 。私自身、これまでの人生でそういった「巡り合わせ」に何度も助けられてきました 。 なので「たのレビ」は、学びはもちろん大切にしながらも、それ以上に人と人との出会いやコミュニケーションが生まれる「機会」をデザインすることを一番に考えています 。 孤立させないための仕組み 「大人数のイベントに行っても、知ってる人同士で固まってて、なかなか輪に入れない…」そんな経験、ありませんか？ 私は人見知りではない方だと思っていますが、その気持ちもすごくよく分かります 。 だから「たのレビ」では、誰ひとり孤立することなく、全員が楽しめるように工夫しています。 グループワークが中心：クリエイター同志が同じ課題について話すことになるため、必ず話すきっかけが生まれます 。 席は主催者が決定：ベテランの方の隣に初学者の方を配置するなど、交流が生まれやすいように、私なりに皆さんのプロフィールを拝見しながら席を決めさせていただいています 。 途中で席替えタイム：前半と後半でグループが変わるので、最低でもグループ席の倍の人数の方とお話しできる仕組みです 。 ちょっと強引かもしれませんが、このおかげで初対面とは思えないほど各テーブルが盛り上がるんです！普段、真剣に制作に向かっている方が多く集まるので、そのエネルギーはライブそのものとなります。 https://open.spotify.com/episode/6IeFJ5RVgVvr4zkgdt8qER?si=BF8453SgTQKaCCr_Glt_rQ お話したラジオ「アフターファイブクリエイター #20 たのしいデザインレビュー直前スペシャル！学びは大事、出会いはもっと大事。」 今回お手伝いいただいたスタッフ シバタヒロノリさん … 今回のスペシャルゲスト！『武器になるHTML』の著者でもあり、専門学校で講師をされていたご経験もある、まさにWeb制作のプロフェッショナル！Webクリエイター養成所Shibajukuを主幹。 はなさん … クリエイティブ制作チームBanafitメンバー①サポート力が抜群だったと参加された方の声が多かった元CA！コーディングの師匠（シバタさん）とデザインの師匠（アロード）と共にイベントできることに歓喜。 アリサさん … クリエイティブ制作チームBanafitメンバー②クリエイターイベント初参加！誰にでもやさしく、ほんわかする人！Banafitメンバーも実際に会うのは初めてで、記念すべき日でもあった。 今回のスペシャルゲストは先述したように、シバタヒロノリさんです。この後の記事で詳しく書きますが、とてもわかりやすく講義していただき、時には笑いも取りながら、しっかりとファンを獲得していかれたと思うので、やはりお願いしてよかった！と思いました。 Webクリエイター養成所 Shibajukuhttps://shibajuku.net/ はなさん（@hannah_comcom）は第3回に続いての参加、今回は運営側でサポートいただきました。1歳の息子さんを預けて初めて一晩家を空けるという、個人的にも一大イベントとなったとのこと。 アリサさん（@arisa_satofuka）も運営側でサポートいただきました。イベント自体初参加にも関わらず、バッジを用意いただいたり、ご案内していただいたり、緊張していたと思いますが、たくさん動いてくれました。 今回のたのレビの流れ 今回は以下のような流れで、前半はシバタさんの講義、後半は質問タイムを行いました。 シバタさんより、コーディングする時のデザインデータについての講義 グループワークその1 ＆ 発表 グループワークその2 ＆ 発表 交流会 シバタさんに聞く！「そのデザインデータ、どう見てる？」 講義では、Banafitが用意したFigmaで作ったデザインカンプを題材に、コーダーとしてデータを受け取った時に「どんな風に見て、何を考えているの？」という、気になる頭の中をのぞかせていただきました。 コーダーはデザインデータを3周見る！ シバタさんは、デザインデータを受け取ると、目的を変えながら3回見るそうです。 1周目：ユーザーとして見る まずは難しいことは考えず、いちユーザーとしてサイトをぶらっと眺める感じ 。 「このイラストかわいいな」とか「優しい雰囲気だな」とか、その時の第一印象をすごく大事にするとのこと 。 2周目：じっくり読み込み、目的を探る 次は、テキストもしっかり読み込んで、このサイトのゴールはどこにあるのか、デザイナーさんが伝えたいことは何なのかを探っていきます 。 3周目：頭の中でコーディングしながら、疑問点を洗い出す 最後は、頭の中でHTMLやCSSを組み立てていくシミュレーションタイム！ ここで「この隙間はわざとかな？」「ここ、実装でつまずきそうだな」といった疑問点をすべて洗い出して、デザイナーさんにまとめて質問する、という流れを教えてくれました 。 「完璧なデザインデータ」じゃなくていい！？ シバタさんのお話で特に「へぇ！」と声が上がったのが、「完璧なデザインカンプよりも、7〜8割くらいの完成度の方が燃える！」という一言でした 。 あまりに完璧に作り込まれていると、コーダーとしては「この通りに作る」作業になりがち 。 でも、少し「余白」があると、「もっとこうしたら良くなるかも！」とコーダー側からもクリエイティブな提案がしやすくなって、デザイナーと一緒にもっと良いものを創り上げる化学反応が生まれる、と語ってくれました 。 もちろん案件の内容やコーダーさんの性格などにもよりますが、デザイナーとしてはなんだか肩の荷が下りる、嬉しいお話でした。 アニメーション指示、どう伝えるのがベスト？ ここで私から、「アニメーションの指示は、どうされるのが一番嬉しいですか？」と質問を投げかけてみました。 例えば、After Effectsなどで作った動画データで動きのイメージを共有する方法についてどう思うか、という問いです 。 シバタさんの答えは「すごく嬉しい！」とのこと 。 やはり動きのタイミングやスピード感が正確に伝わるので、とてもありがたいそうです 。 ただ、その動画を完全に再現できるかはコーダーさんのスキルにもよるので、その点は注意が必要かも、という補足もありました 。 参加者よりご質問やご意見をいただきましたが、お答えできなかったのでここで少し補足しておきます。私がお願いした方達はAdobeCCに契約されていましたので、AfterEffectsを使うことができました。使ったことがないコーダーさんには、キーフレームを見るくらいの操作方法を少しお伝えしただけで、「これだけで十分です、とても助かります」と言っていただいたのでBanafitではそのような方法でコーダーさんだけでなく、お客様へ提案させてもらっています。 そこまで複雑な操作を覚える必要はなく、確認したいレイヤーを触って、ショートカット「U」を押すと、動きの情報確認が可能です。 その他、これは私からになりますが、デザイナーでコーディングをしないと決めた人は、アニメーションを作れるようになって表現の幅を増やしませんか？と呼びかけました。これもお伝えしませんでしたが、アニメーションを作ったことがないと、その発想や提案ができないんですよね。知らないというのはもったいないですから、もっとお客さんを喜ばせるために簡単なところからで良いと思うので、是非身につけてほしいと思います。 グループワークその1 ＆ 発表 グループワークから見えた、現場のリアルな声 シバタさんの講義を踏まえ、各グループでディスカッションを行いました。そこでは、教科書には載っていない、現場のリアルな悩みや工夫が次々と飛び出しました。いくつかピックアップしてご紹介します！ デザインデータ作成の悩み Illustratorデータはもう古い？ 「Web制作の現場で、今でもIllustratorでデータをもらうことはあるけど、どう思う？」という話題では、「コミュニケーションが取れていれば大丈夫」という意見もあれば、「正直、イラレだと断るか、工数がかかるので見積もりを上げます」という声も！Figmaの共有機能や開発モードの便利さを知ってしまうと、戻れないという方が多いようです 。 Figmaの小数点、気にする？ 「Figmaでデザインしていると、小数点以下の端数が出てしまうことがあるけど、コーダーさんは困りますか？」というデザイナーからの質問 。 これには「基本は四捨五入します。でも、それによって改行位置がズレるなど、レイアウトが崩れてしまう時は困りますね…」というリアルな回答が 。 コンポーネント、どこまで作る？ Figmaのコンポーネント機能でスタイルをきっちり定義してくれるのはありがたいけど、「コンポーネントに登録されていない要素がデザインの中にあったりすると、結局全部見直すことになる。それなら、コンポーネント作成に時間をかけるより、デザインそのものに全力を注いでくれた方が嬉しいかも」という、これまた目から鱗の意見も出ました 。 コーダーとの円滑な連携術 レイヤー整理はどこまで必要？ 「レイヤー名は細かく整理した方がいい？」という問いには、「HTMLの構造と合っているならコーディングのスピードが上がるので嬉しい。でも、そうでなければ、正直あまり見ていないかも…」という声が 。 デザイナーの頑張りが空回りしないための、正直な意見交換は大事ですね！ 見出しタグ(H1, H2...)の指定は誰がする？ これもよくある悩み。「デザイナー側が指定した方がいい？」という質問には、「ディレクターさんがワイヤーフレームの段階で指示してくれていると、デザイナーさんもコーダーさんもスムーズに進められて助かる」という、チーム全体での連携の重要性を示す意見がありました 。 どんどんでてくる実装の話 Studioのブレイクポイント、全部設定してる？ ノーコードツールStudioの話題も。「PC、タブレット、スマホ…とたくさんのブレイクポイントがあるけど、全部細かく設定していますか？」という質問には、Studioのスペシャリストから「全部ではないけど、ヘッダーなど崩れやすい部分は、間のサイズ（スモールデスクトップなど）も調整しないと、きれいに見えないことが多いです」との回答が 。 スマホのデザイン、最適な横幅は？ 「スマホのデザイン幅って、375pxで作ることが多いけど、実は400pxの方が計算しやすくない？」という提案も！ パーセントで余白を指定したい時に、400pxを基準にするとキリのいい数字で計算できる、というWeb制作の深い話で盛り上がりました 。 グループワークその2 ＆ 発表 休憩を挟み、席替えをした後でさらに広いテーマでフリートーク！こちらも白熱しました。 キャリア、見積もり…尽きない質問タイム 「とりあえず作って」にどう応える？ クライアントからの「いい感じで、とりあえず作ってみて」という一番困る依頼への対処法が話題に 。 「コミュニケーションコストが確実に上がるので、最初から見積もりを少し高めに設定しておく」という現実的な対策や、「そもそも、クライアント自身が作りたいものの優先度が低い可能性もあるので、一度立ち止まってヒアリングし直す」といった意見が出ました 。 紙とWeb、セットの案件はどう進める？ 「チラシとLPをセットで」といった案件では、どちらから手をつける？という質問も 。 「先にWebデザインを完成させてコーダーさんに渡し、コーディングしてもらっている間に紙のデザインを進めると、プロジェクト全体がスムーズに進む」という、経験から生まれた効率化のテクニックが共有されました 。 キャリアやモチベーションの悩み 「今の職場でフィードバックを得にくく、どうスキルアップすればいいか…」「勉強で心が折れそう…」といった、キャリアや日々のモチベーションに関する悩みも 。 これには多くの人が共感。「環境を変えてみる」「自分なりの小さなリフレッシュ方法を見つける」など、参加者同士で温かいエールを交換する場面もありました 。 交流会 グループワークを経ての交流会だったので、今回も皆さん仲良さそうに過ごされていました。 事前にお伝えしていたこともあってか、皆さん名刺を持参しており、たのしく交換していて、私も参加いただいた全員と交換することができました。グループワークが押してしまって、時間が短くなってしまうのは毎回の事なのですが、今回もやはりそのようになってしまいました。 これは反省であり、改善したいと思うのですが、意見交換が白熱してくると、それを止めてしまうのももったいないので、とても難しいんです…。 アンケート 今回はアンケートを取ってみようと思い、参加者の皆さんにご協力いただきました。24/28件と回収率が高く、それだけですでに満足度が高かったことが読み取れるのですが、いただいた内容もありがたいお言葉が多く、運営側やシバタさんにとって最高のギフト（鷹野雅弘さんの名言）となりました。こちらの内容については、ブログではなくラジオの方でお話させていただこうと思っております。 打ち上げ 参加者32名中23名にご参加いただき、とても楽しい打ち上げとなりました！ 私はお酒を飲むといつも真っ赤になってしまうので、私の写真を撮る時は真っ赤になる前に写真撮ってもらっていいでしょうか？（笑）この日は早起きして新幹線に乗れるかどうかという、その緊張に追い詰められまったく寝ることができず、30分ほどの睡眠しかできず家を出てましたので、もし次に遠征する時には前乗りしたほうが良いということを学びました…。 まとめ 今回の「たのレビ」も、職種や立場を超えて活発な意見が飛び交う、非常に有意義な時間となりました。シバタさんの講義からグループワークまで、一貫して「コミュニケーション」と「相手への想像力」が、より良いものづくりに不可欠であると再認識させられました。 私が普段皆さんに伝えているのも「とにかくコミュニケーションは大事」ということなので、そこに帰結できたことも嬉しく思っております。 ご参加いただいた皆さまの熱量に、私たち運営チームも多くの刺激をいただきました。本当にありがとうございます！ 「たのしいデザインレビュー」は、今後も参加していただく皆さんと一緒に作っていきたいイベントです。 今回ご参加いただけなかった方も、ぜひ次回の開催を楽しみにお待ちください。 最後に、この場を借りて、素晴らしいお話をしてくださったシバタヒロノリさん、グループリーダーを務めてくださった皆さん、そして参加者の皆さまに、改めて心より感謝申し上げます。 第5回のたのレビは「イラストとデザイン」をテーマに、神奈川のどこかで開催しようかと計画しております。 第3回たのしいデザインレビューの様子 https://plusreview.design/tanoreport03/