工大Tech交流会 - 登壇資料

Transcript

1. 2024/11/28 工大Tech交流会 〜パチモンから始めるUIデザイン・Web開発〜 2024/11/28 Yukinaga Oishi
2. 大石幸長 n 学科：メディア情報 3™ n 所属：CirKitプロジェクト / GDGoC KIT/ 根岸研究Y n 趣味：コーヒー(焙煎, ブレンド, ドリップ)、
 旅行、ガジェット収集、プロダクト開1 n 進路：学部就% n キーワード： #モバイルアプリ開発 #コーヒa n 一言：最近ネトフリを契約して、地面師たちを一気見しました ＠naganaga_homelab @nyagasan
3. やっていること q プロダクト開 V コーディング（iOS / Swift, Android / Kotlin, Next.js / TypeScript‘ V UIデザイン（Figma, Adobe Ai‘ q プロジェクト立ち上げ・運営（GDGoCH q イベント運D V GDGoC 「AI時代のデザインスプリント in 金沢工大“ V GDGoC「低レイヤーLT交流会 in LayerX“ q カンファレンス参 q カフェ運営(?) など
4. やっていることの実績・プロダクト開発 s カフェ向けのレジアプリと注文管理システムを開 s サポーターズ主催「技育展 2024」決勝大会企業賞受g s サポーターズ主催「技育博 vol.3」企業賞3つ受賞 担当：UIデザイン・Webフロントエンド（Next.js）・iOS（Swift）
5. 学んだこと：楽しくないと続けられない s 自分の場合は「誰かと一緒に物事を作り上げること」が楽しかっt s それに気づいたのは3年になってかa s いろいろやってるうちに気づいt s 行動し続けることが大S s ただし、どんな物事でも楽しめたり、好きになれるとは限らなq s 向いてないな…と思ったら、一旦やめてみる勇気持とう 「完璧じゃなくていい、失敗してもいいから、まずはやってみよう」
6. 大石の過去談 ˜ 「やらない方が良かった…」と思うことはあまりな2 ˜ 失敗やしくじりも経験になるし、後で役に立ったりする 例s ˜ Webメディアを立ち上げたが、サービスを開始できず終了（赤字v ˜ メンバー離$ ˜ が、後のカフェ立ち上げの時に知見が活きm ˜ デザイン→Web→インフラ→モバイルと色々やってきm ˜ モバイルアプリのデバッグにインフラのプロトコルの知見が役立った！
7. おすすめサイト ¨ Web ¨ サバイバルTypeScript（https://typescriptbook.jp‰ ¨ デザイン ¨ 配色の見本帳（https://ironodata.info‰ ¨ UI Pocket（https://www.ui-pocket.com/mobile/apps‰ ¨ Pinterest（https://jp.pinterest.com‰ ¨ Adobe Font（https://fonts.adobe.com/fonts?languages=ja‰ ¨ モバイル ¨ Compose を用いた Android アプリ開発の基礎（https://developer.android.com/ courses/android-basics-compose/course?hl=ja‰ ¨ SwiftUI Tutorial（https://developer.apple.com/tutorials/swiftui/）
8. 今回のお話 7 初心者向け・Web開発セッショ“ 7 うーん何話そうX 7 私はWeb専門の人ではないしX 7 技術を語って「わからないな〜」で帰ってもらうには忍びな† 1 逆に技術（React/Next.js）の入門だったら記事読んでもらった方がいい… 「「何作ろう？」」の選択肢のひとつを紹介
9. パチモンから始める
 UIデザイン・Web開発
10. みなさん、何かを作り始める時に
 こんな悩みを持ったことはありませんか？ E 作りたいものがな8 E 何から手をつければいいのかわからない
11. そんなときは、パチモンを 作ってみましょう。
12. どうしておすすめなのか： r 世の中のものは、だいたい何かを参考にして作られていT r 例：TwitterやInstagram r 初期のデザインは当時流行していたFacebookやFlickrなどのレイア ウトを参考にしていた（らしい）
13. つまりは
14. パチモンを作ることが、 全ての始まりになりうる
15. その先に待っていること e 完璧パチモンを作ったとしても、必ずあなたの癖が出てきま1 e その癖のあるパチモンと別のパチモンを組み合わせると% ' それは、もはやあなたのデザインですね！！！
16. 例：Appleをパクったカフェロゴスのサイト ※ジョークネタです
17. 例：  ロゴスシステムズのサイ$  CyberAgentのサイトと CirKit HPを部分的に模倣
18. じゃあ何を使ったらいいのか？ G Figmaがおすす0 G メディア情報の人：Webデザインの授業で使ったかと思います
19. じゃあ何を使ったらいいのか？ S サイトのスクリーンショットを貼って、横にそっくりなワイヤーフレー ムを作る ここ大事B S フォンY S 極力同じものI S E S スクショから取ってくる →より本物らしいパチモンが作れます
20. フォントの調べ方 e 拡張機能「What FontF e https://tcd-theme.com/2023/03/whatfont.html 例：「Arial - 600F e これをGoogle検 e 自分のPCに入っていないか探 e Adobe Fontを使ってもいいね
21. 色の調べ方 ' 拡張機能「ColorPikcerC ' https://dekiru-sirius2.jp/tools/color-picker.php 例：「#44B5D3C ' これを「塗り」や「線」の値に
 指定
22. いい感じになってきたら、 d 一旦、コードで出力してみましょX d Figmaにはデザインをコードで出力するプラグインがありまD d それを使うと（綺麗ではないですが）コードを出力できまD d https://zenn.dev/mamiline6/scraps/35bd202c30ff6a
23. え、コードを書かないんですか？ Q 最初からコードを書くぞ！って言う覚悟よりか、
 どんなものでも、一旦完成させるぞ！って思いの方が大事だと思ってい まX Q ツールを使うのは悪ではない、まずは最初の一歩を踏み出してみよう 画像はReactでFigma のデザインを出力して います
24. どうしてこのテーマを…？ Ž まだ最初の一歩を踏み出せていない人：
 このセッションを参考に、まずは最初の一歩を踏み出してみてほしい！ 応援してます！‰ Ž 今すでにWebサイトが作れる人：
 フォントや色、レイアウトにこだわって、よりクオリティの高いサイト を作ってみて欲しい…‰ Ž え、Reactって書いてあるのに教えてくれないんですか？？と思った人：
 君なら大丈夫、おすすめサイトの教材を見て学んでみよう！！
25. ご清聴ありがとう
 ございました！ 懇親会もよろしくお願いします！！！ 語れる内容： Webデザイン、DTP、おうちサーバー、モバイルアプリ開発など
 なんでも！
26. おすすめサイト・資料 掲載している資料の出典は各ページに記載のURLです。
27. おすすめサイト § React/TypeScriptを学びたいよ！！コード書きたいよ！！な方向け n サバイバルTypeScript（https://typescriptbook.jpY § もっとクオリティの高いデザインがしたい人向け n 配色の見本帳（https://ironodata.infoY n UI Pocket（https://www.ui-pocket.com/mobile/appsY n Pinterest（https://jp.pinterest.comY n Adobe Font（https://fonts.adobe.com/fonts?languages=ja）
28. おすすめサイト ˆ モバイルアプリを作りたい人向けC E Compose を用いた Android アプリ開発の基礎（https://developer.android.com/ courses/android-basics-compose/course?hl=ja9 E SwiftUI Tutorial（https://developer.apple.com/tutorials/swiftui/）
29. おすすめサイト p 困った…どうすればいいんだと迷ったi ‚ まずはGoogleで検索してみましょう！「<困りごと> 対処法」なG ‚ ChatGPTに聞いてみてもいいかもしれません” ‚ ここにいる登壇者・先輩に聞いてみましょう！” ‚ 私にDMください！！！何かしらサポートできるはずです…！” ‚ →X(Twitter): @naga_homela p もっと的確なフィードバックを得たい
30. おすすめサイト  もっと的確なフィードバックを得た6 c この形式で相談してみましょうa c （自分のやりたいことG c 〜〜したいのですがR c （状況説明G c 〜〜と言うエラーが出ていQ c 〜〜のやり方がわからなくQ c （困っている内容G c 次のステップに進めませÈ c （求めている内容G c エラーの解決と進め方を教えてください。