necco note
田口 冬菜
necco note
『フロントエンドカンファレンス沖縄 2023』で中川・田口が登壇しました。スライド資料と沖縄の思い出ダイジェスト
- Event
こんにちは、デザイナーの田口です（@fuyuna_design）。
2023年11月18日（土）、沖縄で開催された『フロントエンドカンファレンス沖縄 2023』にて、デザイナーの中川（以下、こゆきちゃん）と登壇させていただきました。
担当セッションは1人1つ、以下の2題をお話ししました。
1. Figmaプロトタイプ入門〜インタラクションイメージのつくりかた〜（中川）
2. リッチなアニメーションを手軽に実装！ Lottieアニメーションの基本と活用事例（田口）
この記事では、2つのセッションのダイジェストと沖縄の思い出を紹介します🐠
なお、沖縄には阿部さんとこんちゃんも一緒に行きました🌺
登壇中の様子や会場の撮影など、おふたりともありがとうございました！スライド作成のフォローも助かりました。ありがとうございました🙏
『フロントエンドカンファレンス沖縄』とは？
フロントエンドカンファレンス沖縄は、エンジニアやデザイナーなど、ウェブに関わるすべての方が参加できるイベントです。
HTML、JavaScript、UI、UX、デザイン、アクセシビリティ、SPAフレームワーク、PWAなど、すべてフロントエンドです。本イベントでは、これらに関するさまざまなセッション・企画が実施され、職種を問わずに楽しめます。（開催地はもちろん沖縄です！）
neccoは「デザインスポンサー」としてウェブサイトやSNSのカバー・アイコン画像、YouTube配信画面の画像、バナースタンド、Tシャツなどのデザイン制作をお手伝いしました。ウェブサイトはSTUDIO実装も担当しています。
ここからは、2人がお話ししたセッションのダイジェストをご紹介します。
セッション1『Figmaプロトタイプ入門〜インタラクションイメージのつくりかた〜』（中川）
こゆきちゃんはイベントのオープニング後、1本目のセッションを担当しました。
Figmaのプロトタイプ機能について、基本操作から活用例、設定方法などを作例たっぷりでご紹介。実機でプロトタイプを体験できるサンプルUIもご用意し、参加者のみなさんにQRコードを読み込んでいただく場面もありました。
背景に沖縄の街が広がるイベント会場、ZORKS沖縄。まるでアイドルかテレビ局のアナウンサーさんみたいなこゆきちゃんでした。
以下、当日のスライドを一部ご紹介します。よく見ると動いているスライドもあるので、じっくりご覧くださいね🐱
以上、1本目のセッション『Figmaプロトタイプ入門〜インタラクションイメージのつくりかた〜』のダイジェストでした。
ご視聴いただいたみなさまからは、次のようなコメントをXでいただきました。
「このデザイン動いたらどうなるんだろう…ってあるあるだからFigmaプロトタイプあると嬉しい」 「デザイナーさんにマウスホバーのアニメーションまで作ってもらえるとテキストのやり取りが減って開発やりやすくなりそう！」 「Figmaのプロトタイプめちゃ面白そう」 「プロトタイプで動きが分かるのとても助かる…!」
みなさまありがとうございます！
今回のイベントでご紹介した「プロトタイプの基本」については、後日あらためて記事にまとめてもらえるそうです。お楽しみに！
セッション2『リッチなアニメーションを手軽に実装！ Lottieアニメーションの基本と活用事例』（田口）
わたしのセッションでは、Lottieアニメーションの基本と、neccoにおける活用事例などをお話ししました。
はじめに「Lottieの使用経験があるかどうか」について会場のみなさんにご質問したところ、約2/3以上の方が「使ったことがない」とのことでした。今回のセッションでLottieの魅力が伝わり、日々の制作のお役に立てれば幸いです🙏
以下、使用したスライドの一部をご紹介します。プロトタイプ入門のスライドと同じく、よく見ると動いているページもあるので、よければじっくりお楽しみください🐠
スライドの最後には、「Lottieを取り入れたneccoのお仕事」をいくつかまとめた動画を掲載しています。気になるプロジェクトがあれば、ぜひ実績詳細をご覧ください。
👆 neccoのLottie活用事例をまとめた動画です
以上、わたしが担当したセッション『リッチなアニメーションを手軽に実装！ Lottieアニメーションの基本と活用事例』のダイジェストでした。
ご視聴いただいたみなさまからは、次のようなコメントをXでいただきました。
「Lottie気になってたので活用事例嬉しい」 「Lottie知らなかったけどいいなこれ」 「Lottie 初知り！」 「Lottie知らなかった。リッチなデザインのサイト実装したいけど普段の業務では全く縁がないからこういうの嬉しいし、聞いてて楽しい！」 「フィトくんかわいい」
みなさまありがとうございます！（フィトくんかわいいですよね🫶）
今回お話ししたLottieの基本については、『ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説』にもまとめています。よければあわせてお役立てください。
アーカイブ配信もご覧いただけます
フロントエンドカンファレンス沖縄のYouTubeチャンネルにて、イベントのアーカイブ配信もご覧いただけます。フロントエンドに関するさまざまなセッションが見れておもしろいですよ🙌
フロントエンドカンファレンス沖縄 2023（YouTube）
わたしたちのセッションは下記の時間から開始しています。プロトタイプ入門は約20分間、Lottieアニメーションの基本と活用事例は約10分間お話ししています。
- 25:52 – Figmaプロトタイプ入門（中川）
- 1:51:30 – Lottieアニメーションの基本と活用事例（田口）
スライドのダイジェストや関連記事とあわせてお楽しみいただければと思います。
イベントのオフショット
ここからはイベントのオフショットです。写真は阿部さんと今ちゃんが撮影してくれました📷
イベントの写真を見るたびに、会場のみなさんや貴重なお話しの数々を思い出します。同じウェブ制作に関わる方々の挑戦や知見をシェアしていただけて、大変ありがたく有意義な時間でした🙏
直前までディスプレイでデザインデータを見ていたTシャツやスタンドバナーも、会場でしっかり活躍してくれていて感動しました。ウェブサイトも含め、素敵なイベントのデザインに関われてうれしかったです。
おまけ 〜沖縄の思い出〜
ここからはおまけとして、沖縄の思い出を紹介します。
写真の撮影・選定などは阿部さん、今ちゃん、こゆきちゃんが担当してくれました。みなさん素敵な写真をありがとうございます！こゆきちゃんはコメントのお手伝いもありがとうございます🙏
それでは、2泊3日の沖縄の思い出、ぜひお楽しみください〜！
イベント前夜祭 → 夜パフェ🍓
登壇前日はイベントを主催しているリビルドさんとお食事をして、その後夜パフェ専門店「ぱふぇんちゅ」に行きました。パフェの中にはヤンバルクイナがいて沖縄らしさを感じました。
海のみえるカフェでタイ料理ランチ
主催者の鈴木さんがおすすめしてくださった海の見える「カフェくるくま」でランチをしました。お天気はあいにくのくもりでしたが、みんなで絶景を見ながら大盛りのタイ料理を楽しみました！
夜の国際通り散歩
沖縄をたくさん満喫するため、夜は国際通りへ！お土産と雰囲気たっぷりの夜の街を楽しみました。
夜の国際通り、景色も聞こえる音も「沖縄にきたぞー！」って感じで最高でした。
美ら海水族館・海を見ながらキッチンカーランチ
沖縄最終日は美ら海水族館に行きました。水族館では今回のイベントサイトにも登場していたウミガメやジンベエザメ、ヒトデなども見れました。
以上、イベントと共に沖縄をたくさん満喫した4人でした。
最後になりますが、フロントエンドカンファレンス沖縄を開催してくださった運営のみなさま、スポンサーのみなさま、会場のZORKS沖縄さま、そしてオフライン・オンラインでご参加いただいたみなさま、このたびは素敵な登壇の機会をいただき、ありがとうございました！
沖縄遠征、とっても楽しかったです！
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2024年5月時点）
田口 冬菜
Fuyuna Taguchi
三重県伊勢市生まれ。地元の二次救急病院で約6年間理学療法士として約6年働き、趣味ではじめたデザインにハマってデザイナーへ転職。転職のタイミングでより成長できる環境を求めて東京に引っ越し。都内のデザイン会社1社を経て、2020年からneccoに入社した。入社後にはモーションデザインのスキルを身につけ、現在デザイナー・モーションデザイナーとして働いている。個人ではブログを書いたり、たまに動画・映像関連のメディア出演をしたりしている。著書に『これからはじめるFigma Web・UIデザイン入門』（マイナビ出版、2022）がある。インテリア、本、コーヒー、あまいもの、散歩、人の姿勢・動作観察が好き。
