初めまして、ナッシーです。
宮崎クリエイターズブログでは初登場となります。よろしくお願いいたします。
実は私、2025年7月にこちらのオフィスでは少し珍しい「別のグループ会社から転籍してきたデザイナー」です。
GMOインターネット株式会社へ入社して、気づけばもうすぐ半年になります。
今回は、これまでの簡単な経歴と、入社後の学びや気づきについて書いていこうと思います。
INDEX
前職での業務
似て非なる「広告作り」の現場
前職では系列グループ会社に所属し、広告代理店のデザイナーとしてさまざまなクライアントの案件を担当していました。
職場は今のオフィスから“歩いて20歩”の場所にありました。
物理的な距離は近くても、業務内容はまったく違ったのが特徴です。
私は主にバナー制作を担当し、媒体や配信条件に合わせてスピード重視でデザインを作る日々でした。
複数案件を並走しながら、次々と広告を制作する“わんこそばスタイル”の現場で、
「いかに高クオリティを維持したまま、膨大な制作物を納期に合わせるか」 が常に求められていました。
扱うジャンルも幅広く、ビジネス系から華やかなもの、可愛いもの、コミカルなものまで、数多くのトンマナ制作を経験できたことは、今の自分の強みの一つです。
（余談ですが、一時期は組織づくりやマネジメントも担当していたことがあります。そのあたりもいつか別記事で書きたいと思います。）
入社後ぶつかった壁『Figma』
Figmaってなにぃ…？
転籍後の私を最初に待ち受けていた壁が、「Figma」と「Adobe XD」というUIデザインツールでした。
前職ではPhotoshopが主力だったため、UIツールは完全未経験でした。
画面を開いて最初に出た感想は
わからん……！
でした。
さらに困ったのが、ツールの違いだけでなく、
“デザインのアプローチそのもの”が別世界だったという点です。
異なるデザインへのアプローチ方法
バナー制作：瞬発力と訴求が命の世界
- 数秒で伝える“瞬間芸”のようなデザイン
- 強いアイキャッチ・短い文章・明確な訴求
- 1枚の静的画像として完結する
- 視線誘導やインパクトが中心課題
Webデザイン：情報の流れと体験をつくる世界
- ページ全体の設計が必要
- 可読性、余白、使いやすさ、アクセシビリティも考える
- コンポーネント単位で構造を作る
- “線でつなぐデザイン”で、UXが重要です
実際に向き合ってみて、
バナーは“点”、Webページは“線”で伝えるデザインだと強く感じました。
前職の経験は確かに強みではあるものの、それだけでは通用しない領域がWebデザインにはあり、Figmaはそのために欠かせないツールなのだと理解していきました。
千里の道も一歩から
とにかく触ってみよう
Figmaを触り始めたのは、入社してすぐに与えられた業務がきっかけでした。
本来なら基礎から学びたいところですが、そのときは解説を読む時間すらなく、
とりあえず触るしかない！
という勢いでノー知識のまま触り始めました。
ところが意外にも、触っていくうちに
「あれ、思ったより触れるぞ…？」
という感覚が出てきました。
最初に行ったのは既存データを元にして作る作業でした。
構造を知らないと触れないと思っていたのに、FigmaのUIが非常に直感的で、
触ってみればなんとなく分かる
どこを操作すれば動くのかが掴みやすいという優れた設計に助けられました。
もちろん時間はかかりましたし、わからない部分も多かったですが、
その都度ChatGPTに質問しながら業務を進めることで、
“触りながら覚える”スタイルでなんとか前に進むことができました。
LPトレース
Figmaの操作に少し慣れてきた頃、研修として与えられた課題が「LPトレース」でした。
既存のランディングページを見ながら、
構成・余白・テキストサイズ・UIパーツなどを完全再現するという、シンプルだけど奥が深いトレーニングです。
見た目を真似するだけではなく、
- このレイアウトはどう構造化されているのか
- 余白は固定か可変か
- どう作れば実装時に破綻しないか
など、“なぜその形なのか”を理解しながら作る必要があり、とても学習効果が高いものでした。
自分では完璧にできたつもりでも、提出してみると
- 数pxの余白のズレ
- 要素の揃え漏れ
- 行間設定の違い
など、細かい部分での修正点が多く見つかり、
Webデザインは「細部までの精密な設計の積み重ね」で成り立っていることを痛感しました。
講座サイトでお勉強
Figmaを触れるようにはなったものの、やはり基礎の土台が弱いと感じ、
講座サイト「chot.design」の入門講座を受講しました。
- 『Figma 入門』
- 『Adobe XD 入門』
- 『HTML・CSS 入門』
これらを進めていく中で、
「こんな機能あったの！？」「今まで知らなかった！」
という発見が何度もありました。
①ブランチ機能
Web制作は複数のページが存在し、複数人が同時に作業を行うことがあります。
その際に、元のデータを一旦そのまま保持し、枝分かれをさせ、デザインがFIXしてから元のデータに合流させるという機能が「ブランチ機能」です。
これにより、うっかり元のデータを取り返しのつかない形で上書きしてしまう等の事故が防げます。
②コンポーネント化機能
Webページ内で複数使う同じ形のオブジェクトやボタンを、一つずつ変更していては膨大な工数が発生します。
しかし、コンポーネントとして大元のデザインを登録し、それを複製して使用することにより、大元のデータの変更を複製先へまとめて反映できます。
また、同じデータを利用することで、サイト内のデザインの統一化ができ、デザインの軸がブレない制作が可能になります。
③独自の画像編集機能
サイト内で使用する図形を作る際にはPhotoshopやIllustratorなどの画像編集ソフトで制作し、それを書き出してからFigmaに持ってくるというイメージがありました。
しかし、Figmaには図形作成やマスク、Illustratorにあるようなパスファインダー（図形同士をくっつけたりくりぬいたり）といった機能が備わっており、簡単なロゴやボタンの作成がFigma上で完結します。
基本無料のソフトなので、画像編集ソフトを持っていない場合もこのソフト1本で完結できます。
なんて便利なんだ、Figma…！
業務で必要な部分だけを触っていた頃には気づかなかった、ツールの本質的な考え方や「正しい作り方」を理解できるようになり、できることの幅が一気に広がったと感じています。
上記はあくまで私が超初心者向け講座で知った機能です。先輩方のブログを読んでいると、Figmaには無限に便利な機能やプラグインがまだまだあるようです。
使ったことのない機能も多数あるので、今後の業務で使えそうなところはどんどん使っていきたいです。
【前編ここまで】
ここまでが、Figmaとの出会いから基礎を学び直すまでの前半パートです。
後編では、
- 過去、入社1年目に読んだ書籍を再読して得た気づき
- 具体的な学び直しのポイント
- 入社後半年の自分の振り返り
について書いていく予定です。
