高卒公務員から Webデザイナーになるまで

職業訓練校の方を対象にお話させていただきました。

Transcript

1. 高卒公務員から Webデザイナーになるまで インターンでの経験/SNSの活用方法 ARUTEGA　アシスタントデザイナー kinomi
2. 未経験からWebデザイナー転職を目指す方に向けて、 私の経験をお話しします。 本日は貴重なお時間をいただきありがとうございます！紆余曲折あり、未経験から転職をすることができました。 決して王道のキャリアではありませんが、少しでも同じように悩まれている方の参考になれば幸いです。 ARUTEGA/アシスタントデザイナー kinomi 公務員として8年間勤務した後、独学・オンラインスクールでデザインとコードを学ぶ。 その後SNS発信・QUOITWORKSでのインターンを経て、2024年7月に転職。現在はWebサイトのデザイン・ディレクションに携 わりながら、X（@kinomi_design） ・note・Podcastでデザインに関する学習記録を発信中。
3. 経歴/転職を決意したきっかけ 1 自己紹介 独学期間の振り返り/失敗してからの学習 2 学習について 転職までの流れ/やったこと・タメになった経験/制作会社ARUTEGAから 3 転職から現在まで 4 質疑応答 質問があればお気軽にチャットへ 質疑応答の時間でお答えさせていただきます。 リラックスして聞いてください 飲み物など取りながらご参加いただくようお願いします
4. 01 自己紹介 経歴/現在の業務/転職を決意したきっかけ
5. 01 自 己 紹 介 2016 警察官になる 2023 デザインの勉強開始 2024.02 退職 ・ 就職活動 2024.03 制作会社インターン 2024.07 ARUTEGA就職 経歴 前職は警察官です 。 交番のお巡りさんをしたり、 交通事故事件の担当をしたり、 交通安全教育をし ていました。
6. 転職を決意したきっかけ 広報担当となり、デジタルサイネージ等のバナーを作成したことをきっかけにWebデザイナーという 仕事に興味を持ちました。 「人生は一度きりだから」 ということで挑戦を決意。 2023年春から独学とスクール（コード重視）で学び始め、約１年の準備期間を経て制作会社への 就職活動に挑戦します。 01 自 己 紹 介
7. 02 学習について 独学期間の振り返り/失敗してからの学習
8. 独学期間の振り返り 02 学 習 に つ い て …振り返ってみると、独学で大きな失敗が2つありました。 失敗しました
9. 02 学 習 に つ い て 私が独学でやっていたこと HTML/CSSを学ぶ 書籍・動画 ツールの使い方を学ぶ Adobe Photoshop/illustrator→動画 グラフィックデザインの本を読む webサイトを見て好きなデザインを集める
10. 02 学 習 に つ い て これらの勉強の優先度、 今思うと失敗でした。
11. 私が独学でやっていたこと HTML/CSSを学ぶ 書籍・動画 ツールの使い方を学ぶ Adobe Photoshop/illustrator→動画 グラフィックデザインの本を読む webサイトを見て好きなデザインを集める Webデザインの勉強してない 独学後にスクールでコードを学べたのはとてもタメになったけど、デザインの勉強がおろそかになっていた。 02 学 習 に つ い て
12. 02 学 習 に つ い て 私の独学での失敗 学ぶ方向性の曖昧さ コードの知識と、 グラフ ィックデザインの基礎知識ばかり を追いかけていた →Webサイトのデザインをたくさん観察して、 目を養う ことが必要だった。 どんなデザインだと胸が躍るのか？サイトは使いやすい のか？かっこいいサイトの余白・フォント・カラーにはど んな特徴があって、 どんな印象を与えてくれるのか。 ツール習得の考え方 「とにかく使えるようになりたい！」 という思いから、 様々 な機能に手を出していた →結果として、 それぞれの機能への理解が中途半端。 「この作品を作りたいから、 この機能を覚えよう」 という ように、 目的を持って学んでいれば、 もっと効率的かく確 実に必要なツールスキルが身についていた。
13. 02 学 習 に つ い て 失敗してからの学習
14. 02 学 習 に つ い て 1.信頼できるギャラリーサイト→タグ付けして保存 Raindropというアプリは 簡単にカテゴリ ・タグ分け ができて便利です ‚ Awwwards ‚ CSS Design Awards ‚ Muuuuu.org ‚ s5-style 単に 「かっこいい」 だけでなく、 情報設計やユーザビリティの観点からも優れたサイトが掲載され るギャラリーサイトも先輩方に教えていただきました。
15. 02 学 習 に つ い て 2.Webサイトの考察 視覚的な観点 ・ ブランドの世界観の表現 ・ レイアウトの一貫性 ・階層構造が明確か ・心躍るデザインか ・余白 ： 情報の関係性や重要度をどう表現してい るか ・ フォント:伝えたい世界観に合わせた適切なフォ ントを使用しているか ・配色:ブランドカラーを際立たせるようなバラン スが取れた配色か 情報設計の観点 ・ コンテンツの整理 ・重要な情報が適切に強調されているか ・ どのようにして情報が整理されているか ・下層ページへの導線
16. 02 学 習 に つ い て 3.パーツごとに集める 自分でいざデザインをすると、 左寄せしかパターンがない…ということがよくある。 ギャラリーサイトに掲載されるデザインは視線誘導がとっても上手なので、 集めていると引き出しが増えてくる。 サイトをキャプチャして notionというアプリで まとめています
17. 03 転職から現在まで 転職までの流れ/やったこと・タメになった経験/制作会社ARUTEGAから
18. 03 転 職 か ら 現 在 ま で STEP01 ポートフォリオ公開 転職サイトで応募するも全落ち STEP02 SNSで発信開始 ポートフォリオや学習したことをX・noteで発信開始 STEP03 ARUTEGAに応募 スキル不足・デザイナーへの解像度が浅く不採用 STEP04 QUIOTWORKSに応募 採用応募やっていなくて不採用 書類は全落ち…でもSNSを使用してから少しずつ好転 スクール卒業後 (約2ヶ月)
19. 03 転 職 か ら 現 在 ま で STEP05 QUIOTWORKS インターンになる SNS見ていた社長に 「事務所に遊びに来てOK」 と 声をかけてもらう→インターン決定 STEP06 SNSで発信を続けながら 勉強させてもらう お仕事の手伝い・架空サイト制作を監修してもらう →実績をSNSで公開し反響をもらう STEP07 ARUTEGAと面接 （２回目） 社長ともう一度話をさせてもらえることに →架空サイトの実績を見てくれていた→業務委託からスタート STEP08 ARUTEGA正式採用 業務委託でLPサイトのデザインをする →正社員として採用 インターン開始後 (約4か月)
20. 03 転 職 か ら 現 在 ま で 不採用となった２つの会社それぞれでご縁があり 制作会社ARUTEGAに就職できました ！
21. 03 転 職 か ら 現 在 ま で やったこと ・タメになった経験 ここからはざっくばらんに Q ＆ A 方式
22. 03 転 職 か ら 現 在 ま で Q 社会人になってからのインターンを選んだのはなぜですか？ A 未経験が0だとしたら、 アルバイトやインターンで１に なると思った インターンになろうと明確に決めていたわけではなかったです。 ただ、 漠然と”未経験のままではだめだ”と感じていたときに 「事務所に遊びに来ていい」 と言っ ていただき、 チャンスだと思ってお願いをしました （インターン制度はなかった） 。 プロの近くで学んで経験を積む＝デザイナーになるための一番の近道…かも！
23. 03 転 職 か ら 現 在 ま で インターンでやったこと 学んだこと① 仕事のお手伝い b 制作会社をまとめたブログ記事の執筆H b インタビュー記事作成H b 写真撮影H b 実績のスマホデザイン 実務での必要な作業を一部学べた ・Figmaでのバナー・ スマホデザイン作成 ・Photoshpでのレタッチ ・wordpressでの記事作成
24. 03 転 職 か ら 現 在 ま で インターンでやったこと 学んだこと② 架空サイト制作 g 仕事を進める考え方8 g ヒアリング・ゴール設定・ディレクトリマップ8 g ワイヤーフレーム8 g デザイン デザイン以外のスキルも学べた g 解決すべき重要な問題や課題＝イシューをはっき りさせてから作業すf g「Why(なぜ)」 「How(どのように)」 「What(何 を)」 ＝ゴールデンサークル理論
25. 03 転 職 か ら 現 在 ま で Q 実績に掲載する架空サイト、 どのように情報を構成すればいいの？ A 仮想クライアントは ヒアリングシートのテンプレ＋AIで構成 ヒアリングシートのテンプレを用意→AIにヒアリングシートを共有 →作成したい構成の指示を送りヒアリングシートを埋めてもらう { 東京都にある歯医者をクライアントとしwebサイトを作成しますs { 添付の 『ご回答』 の項目を埋めてください。 回答例を参考にしてくださいs { テーブルで出力してください。
26. 03 転 職 か ら 現 在 ま で AIの活用で幅が広がる „ 文章校正・コンテンツ制p „ 写真素材の生成・削除・追e „ Youtubeを文字起こし→要5 „ ワイヤーフレーム制作 （RelumeというAIではワイ ヤーフレームも一瞬で作れるとの噂…！） よく使うAI „ Claude→文章校正・コンテンツ制作† „ Google AI Studio→最新の情報を調べŒ „ 天秤AI→複数のAIに聞けŒ „ Firefly→画像生Ž „ Photoshop→写真の追加/削除 AIの出力結果のままを信じない 希望通りの出力結果か？情報の整合性は取れているの か？AIに質問をたくさんして、 出力結果の性能を上げる ポイント
27. 03 転 職 か ら 現 在 ま で 架空サイト制作は本当に学びになりました ！ 詳しいプロセスをこちらのnoteで紹介しています AIの出力方法は触れていないです… リンクは最後に共有します
28. 03 転 職 か ら 現 在 ま で Q 面接ではどんなことを意識したの？ A 丁寧な姿勢を制作物でアピール・企業のトーンがわ かる情報を集める ˆ アルテガのブログ記事で最近の動向をつかq ˆ メールの文体や内容を企業の解釈に合わせ• ˆ 社員の方のプロフィールやブログ→どんな人が求められているかを考え• ˆ 実績とクレジットを確i ˆ SNS （X・YouTube・Podcast） をチェック 企業の方は、 どれだけ”自分たちのことが好きか”を面接や資料で見ている （と聞きました）
29. 03 転 職 か ら 現 在 ま で ARUTEGA用の資料を面接に持参 ˆ プロフィール （基本情報） r ˆ 経歴 （タイムテーブルに合わせて自分の感情の変 化も文章で） r ˆ 理念的なこと （デザイナーを目指した理由/人生 軸/webサイトが必要だと思う理由/アルテガで 叶えたいこと） r ˆ アルテガの実績の考察・好きなところr ˆ 現状の課題とできること （Photoshop/ Illustrator/Figma/デザイン/コーディング/ ポータブルスキル） r ˆ 戦力のあるデザイナーになるためにやるべきこと （Photoshop/Illustrator/Figma/デザイン/ コーディング/ポータブルスキル） あくまで一例だけど、 アピールの一つになる資料を作るの もあり （採用後ほめていただきました…！）
30. 03 転 職 か ら 現 在 ま で Q 不採用だった理由、 聞いた？ A 『継続して見える物がなかった。 どんなデザイナーになりたいかが伝わらなかった』 s デザイナーを目指す理由がブレていて、 今後の未来も予測しづらいv s “デザイナーを目指す姿勢”のバロメータになるような継続していることが見えなかったv s “表現したい・人に伝えたい・情報を分析したい”と様々なデザイナーのタイプがあるが、 ど れに属するのか分からなかった “原点を見直すこと ・課題は何か・解決に向けどう行動するか”→この軸がなかった
31. 03 転 職 か ら 現 在 ま で Q 今はどんな仕事をしてるの？ A デザイン・ディレクションのサポート 働き方は社員全員フルリモート エンジニアさんがいるので、 基本的にはコードを書くことはなく、 デザインとディレクションの サポートがメインです。 デザインで使用しているツールのメインはFigma。 illustrator,photoshopは必要な素材に 合わせて使用しています。 連絡ツールはDiscordです。 webサイト （トップ～下層） /バナー/ヒアリング/ワイヤーフレーム作成/資料作成/動画作成
32. 03 転 職 か ら 現 在 ま で Q アシスタントデザイナーとして、 仕事で意識していることは？ A 目的意識・当事者意識・受け答えは 「ゆるふわ回答」 にならないようにする 現在地と目的を都度確認する 当事者意識を持つ 解像度の浅い 「ゆるふわ回答」 にならないようにする
33. 03 転 職 か ら 現 在 ま で 制作会社ARUTEGAから 「未経験→デザイナーを目指す方へお言葉ください！」 とお願いしました
34. 03 転 職 か ら 現 在 ま で 未経験→デザイナーを 目指す方へ 制作会社ARUTEGA社長から ポートフォリオやスキル以外で重視する 要素 前職に悔いを残していないかどうかがとても大切。 悔いがな いってことは、 次のステップに向かう気持ちがクリアだから。 逆に、 やり切れていないと自信がなくて、 なかなか成長でき ないんだよね。 それから、 その人の声の明るさとかエネルギーも見ていま す。 一緒に働く仲間が暗いと、 周りの社員にも影響しちゃうか らね。 未経験者のSNS活用についてどう思うか ベテランに勝つ方法はSNSしかないです。 時間をかけて、 自 分らしいバイブスで発信していくのが戦略になるよ。
35. 03 転 職 か ら 現 在 ま で 採用した未経験者に求める成長スピード 半年くらいで方向性が見えてくるはず。 スキルは1年くらいの スパンで考えているけど、 半年経った時点で 「前と比べてどう 変わったか」 が分かるんです。 でも必ずしもスキルが高い人が 良いとは限らないよ。 タイミングもあるしね。 みんなが 「選ばれる側」 じゃないってこと、 忘れないでね。 チャ ンスを逃さないように。 制作の世界に入ることを最優先に考 えて！実務未経験がネックになりがちだけど。 他の社員さんからも 実務では自分と向き合うことが多くなるけど、 大変な作業にも必ず終わり が来るので、 大丈夫です ！ 学校の同期や、 同年代のデザイナーさんを大切にすることが大切だと実感 しています。 実務で必要なコミュニケーション力が身についたり、 困ったと きに声をかけやすい存在は有難いです。 以上が ARUTEGAメン バーか ら 皆さんに お伝えしたいことでした！
36. 04 質疑応答
37. ARUTEGA/アシスタントデザイナー kinomi 今回お話しした内容の発信 今回お話しした内容の発信 noteなどで架空サイト制作についてまとめたり、デザインで学んだことを発信しています。 ご興味があればぜひ見てみてください！ Xアカウント Podcast note
38. 本日は貴重なお時間を頂きありがとうございました！ 少しでも参考になるお話しができていたら嬉しいです